var Component=(()=>{var Ot=Object.create;var I=Object.defineProperty;var kt=Object.getOwnPropertyDescriptor;var Rt=Object.getOwnPropertyNames;var Mt=Object.getPrototypeOf,Et=Object.prototype.hasOwnProperty;var Ct=(e,t)=>()=>(e&&(t=e(e=0)),t);var St=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),tt=(e,t)=>{for(var n in t)I(e,n,{get:t[n],enumerable:!0})},et=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of Rt(t))!Et.call(e,r)&&r!==n&&I(e,r,{get:()=>t[r],enumerable:!(o=kt(t,r))||o.enumerable});return e};var Dt=(e,t,n)=>(n=e!=null?Ot(Mt(e)):{},et(t||!e||!e.__esModule?I(n,"default",{value:e,enumerable:!0}):n,e)),nt=e=>et(I({},"__esModule",{value:!0}),e);var ot={};tt(ot,{Children:()=>jt,Component:()=>Tt,Fragment:()=>Wt,Profiler:()=>Bt,PureComponent:()=>Vt,StrictMode:()=>Ut,Suspense:()=>Ht,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:()=>ue,cloneElement:()=>Pt,createContext:()=>At,createElement:()=>It,createFactory:()=>Lt,createRef:()=>zt,default:()=>Nt,forwardRef:()=>Ft,isValidElement:()=>$t,lazy:()=>Gt,memo:()=>Xt,startTransition:()=>qt,useCallback:()=>Jt,useContext:()=>Yt,useDebugValue:()=>Kt,useDeferredValue:()=>Qt,useEffect:()=>Zt,useId:()=>te,useImperativeHandle:()=>ee,useInsertionEffect:()=>ne,useLayoutEffect:()=>oe,useMemo:()=>re,useReducer:()=>se,useRef:()=>ie,useState:()=>ae,useSyncExternalStore:()=>ce,useTransition:()=>he});var Nt,jt,Pt,Tt,At,It,Lt,zt,Ft,Wt,$t,Gt,Xt,Bt,Vt,qt,Ut,Ht,Jt,Yt,Kt,Qt,Zt,te,ee,ne,oe,re,se,ie,ae,ce,he,ue,rt=Ct(()=>{Nt=React,{Children:jt,cloneElement:Pt,Component:Tt,createContext:At,createElement:It,createFactory:Lt,createRef:zt,forwardRef:Ft,Fragment:Wt,isValidElement:$t,lazy:Gt,memo:Xt,Profiler:Bt,PureComponent:Vt,startTransition:qt,StrictMode:Ut,Suspense:Ht,useCallback:Jt,useContext:Yt,useDebugValue:Kt,useDeferredValue:Qt,useEffect:Zt,useId:te,useImperativeHandle:ee,useInsertionEffect:ne,useLayoutEffect:oe,useMemo:re,useReducer:se,useRef:ie,useState:ae,useSyncExternalStore:ce,useTransition:he,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:ue}=React});var it=St(L=>{"use strict";var le=(rt(),nt(ot)),fe=Symbol.for("react.element"),de=Symbol.for("react.fragment"),me=Object.prototype.hasOwnProperty,pe=le.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,ge={key:!0,ref:!0,__self:!0,__source:!0};function st(e,t,n){var o,r={},s=null,i=null;n!==void 0&&(s=""+n),t.key!==void 0&&(s=""+t.key),t.ref!==void 0&&(i=t.ref);for(o in t)me.call(t,o)&&!ge.hasOwnProperty(o)&&(r[o]=t[o]);if(e&&e.defaultProps)for(o in t=e.defaultProps,t)r[o]===void 0&&(r[o]=t[o]);return{$$typeof:fe,type:e,key:s,ref:i,props:r,_owner:pe.current}}L.Fragment=de;L.jsx=st;L.jsxs=st});var Me={};tt(Me,{default:()=>Re});var at=Dt(it()),{jsx:R,jsxs:z,Fragment:B}=at.default;var{MDXContext:De,MDXProvider:Ne,useMDXComponents:P,withMDXComponents:je}=__motif_mdx_react;var ct=React,{Children:Te,cloneElement:Ae,Component:Ie,createContext:V,createElement:Le,createFactory:ze,createRef:Fe,forwardRef:We,Fragment:$e,isValidElement:Ge,lazy:Xe,memo:Be,Profiler:Ve,PureComponent:qe,startTransition:Ue,StrictMode:He,Suspense:Je,useCallback:F,useContext:q,useDebugValue:Ye,useDeferredValue:Ke,useEffect:T,useId:Qe,useImperativeHandle:Ze,useInsertionEffect:tn,useLayoutEffect:en,useMemo:nn,useReducer:ve,useRef:j,useState:on,useSyncExternalStore:rn,useTransition:sn,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:an}=React;var dt="http://www.w3.org/2000/svg",H=class{constructor(t){this.seed=t}next(){return this.seed?(2**31-1&(this.seed=Math.imul(48271,this.seed)))/2**31:Math.random()}};function E(e,t,n,o,r){return{type:"path",ops:W(e,t,n,o,r)}}function mt(e,t,n){let o=(e||[]).length;if(o>2){let r=[];for(let s=0;s500?.4:-.0016668*c+1.233334;let d=r.maxRandomnessOffset||0;d*d*100>a&&(d=c/10);let _=d/2,m=.2+.2*pt(r),l=r.bowing*r.maxRandomnessOffset*(o-t)/200,h=r.bowing*r.maxRandomnessOffset*(e-n)/200;l=w(l,r,v),h=w(h,r,v);let u=[],p=()=>w(_,r,v),f=()=>w(d,r,v);return s&&(i?u.push({op:"move",data:[e+p(),t+p()]}):u.push({op:"move",data:[e+w(d,r,v),t+w(d,r,v)]})),i?u.push({op:"bcurveTo",data:[l+e+(n-e)*m+p(),h+t+(o-t)*m+p(),l+e+2*(n-e)*m+p(),h+t+2*(o-t)*m+p(),n+p(),o+p()]}):u.push({op:"bcurveTo",data:[l+e+(n-e)*m+f(),h+t+(o-t)*m+f(),l+e+2*(n-e)*m+f(),h+t+2*(o-t)*m+f(),n+f(),o+f()]}),u}function lt(e,t,n){let o=e.length,r=[];if(o>3){let s=[],i=1-n.curveTightness;r.push({op:"move",data:[e[1][0],e[1][1]]});for(let a=1;a+2y.setAttribute(g,b);for(let y of l){let g=document.createElementNS(dt,"path");if(f(g,"d",y),f(g,"fill","none"),f(g,"stroke",n.color||"currentColor"),f(g,"stroke-width",""+a),v){let b=g.getTotalLength();h.push(b),p+=b}e.appendChild(g),u.push(g)}if(v){let y=0;for(let g=0;g{this._resizing||(this._resizing=!0,setTimeout(()=>{this._resizing=!1,this._state==="showing"&&this.haveRectsChanged()&&this.show()},400))},this._e=t,this._config=JSON.parse(JSON.stringify(n)),this.attach()}get animate(){return this._config.animate}set animate(t){this._config.animate=t}get animationDuration(){return this._config.animationDuration}set animationDuration(t){this._config.animationDuration=t}get iterations(){return this._config.iterations}set iterations(t){this._config.iterations=t}get color(){return this._config.color}set color(t){this._config.color!==t&&(this._config.color=t,this.refresh())}get strokeWidth(){return this._config.strokeWidth}set strokeWidth(t){this._config.strokeWidth!==t&&(this._config.strokeWidth=t,this.refresh())}get padding(){return this._config.padding}set padding(t){this._config.padding!==t&&(this._config.padding=t,this.refresh())}attach(){if(this._state==="unattached"&&this._e.parentElement){(function(){if(!window.__rno_kf_s){let r=window.__rno_kf_s=document.createElement("style");r.textContent="@keyframes rough-notation-dash { to { stroke-dashoffset: 0; } }",document.head.appendChild(r)}})();let t=this._svg=document.createElementNS(dt,"svg");t.setAttribute("class","rough-annotation");let n=t.style;n.position="absolute",n.top="0",n.left="0",n.overflow="visible",n.pointerEvents="none",n.width="100px",n.height="100px";let o=this._config.type==="highlight";if(this._e.insertAdjacentElement(o?"beforebegin":"afterend",t),this._state="not-showing",o){let r=window.getComputedStyle(this._e).position;(!r||r==="static")&&(this._e.style.position="relative")}this.attachListeners()}}detachListeners(){window.removeEventListener("resize",this._resizeListener),this._ro&&this._ro.unobserve(this._e)}attachListeners(){this.detachListeners(),window.addEventListener("resize",this._resizeListener,{passive:!0}),!this._ro&&"ResizeObserver"in window&&(this._ro=new window.ResizeObserver(t=>{for(let n of t)n.contentRect&&this._resizeListener()})),this._ro&&this._ro.observe(this._e)}haveRectsChanged(){if(this._lastSizes.length){let t=this.rects();if(t.length!==this._lastSizes.length)return!0;for(let n=0;nMath.round(r)===Math.round(s);return o(t.x,n.x)&&o(t.y,n.y)&&o(t.w,n.w)&&o(t.h,n.h)}isShowing(){return this._state!=="not-showing"}refresh(){this.isShowing()&&!this.pendingRefresh&&(this.pendingRefresh=Promise.resolve().then(()=>{this.isShowing()&&this.show(),delete this.pendingRefresh}))}show(){switch(this._state){case"unattached":break;case"showing":this.hide(),this._svg&&this.render(this._svg,!0);break;case"not-showing":this.attach(),this._svg&&this.render(this._svg,!1)}}hide(){if(this._svg)for(;this._svg.lastChild;)this._svg.removeChild(this._svg.lastChild);this._state="not-showing"}remove(){this._svg&&this._svg.parentElement&&this._svg.parentElement.removeChild(this._svg),this._svg=void 0,this._state="unattached",this.detachListeners()}render(t,n){let o=this._config;n&&(o=JSON.parse(JSON.stringify(this._config)),o.animate=!1);let r=this.rects(),s=0;r.forEach(c=>s+=c.w);let i=o.animationDuration||800,a=0;for(let c=0;c{let i=Object.assign({div:"div",a:"a",p:"p"},P());return z(i.div,{className:"post-entry w-full mt-16",children:[R(i.a,{className:"block font-bold text-xl mt-0 mb-2",href:r,target:s?"_blank":"_self",children:e}),t&&R(i.p,{className:"text-gray-400 mt-0 mb-2 text-sm",children:t}),R(i.p,{className:"text-gray-500 mt-0 mb-2",children:n}),R(i.a,{className:"block font-medium",href:r,target:s?"_blank":"_self",children:R(vt,{type:"underline",animate:!1,color:"#A7F3D0",show:!0,strokeWidth:2,children:o||"Read more"})})]})};function _t(e){let t=Object.assign({h1:"h1",h3:"h3"},P(),e.components);return z(B,{children:[R(t.h1,{id:"blog",children:"Blog"}),` `,R(t.h3,{id:"some-thoughts-i-have-accumulated-through-my-journey-as-a-designer-who-codes",children:"Some thoughts I have accumulated through my journey as a designer who codes."}),` `,R(Q,{title:"From SVG to React components",date:"July 8, 2021",description:"We went from pixels to vectors. Now it's time for designers to code by embracing React components.",url:"/blog/posts/svg-to-react"}),` `,R(Q,{title:"Improving designer-developer collaboration",description:"Design handoff is a pain. Some thoughts on how can we improve collaboration between designers and developers.",url:"/blog/posts/designer-developer"})]})}function ke(e={}){let{wrapper:t}=Object.assign({},P(),e.components);return t?R(t,Object.assign({},e,{children:R(_t,e)})):_t(e)}var Re=ke;return nt(Me);})(); /** * @license React * react-jsx-runtime.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ /*! ***************************************************************************** Copyright (c) Microsoft Corporation. Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. ***************************************************************************** */ return Component;