var Component=(()=>{var G=Object.defineProperty;var mt=Object.getOwnPropertyDescriptor;var pt=Object.getOwnPropertyNames;var gt=Object.prototype.hasOwnProperty;var vt=(e,t)=>{for(var n in t)G(e,n,{get:t[n],enumerable:!0})},_t=(e,t,n,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of pt(t))!gt.call(e,o)&&o!==n&&G(e,o,{get:()=>t[o],enumerable:!(s=mt(t,o))||s.enumerable});return e};var wt=e=>_t(G({},"__esModule",{value:!0}),e);var jt={};vt(jt,{default:()=>Rt});var Nt=__motif_jsx_runtime,{jsx:O,jsxs:T,Fragment:X}=__motif_jsx_runtime;var{MDXContext:At,MDXProvider:zt,useMDXComponents:A,withMDXComponents:Pt}=__motif_mdx_react;var Z=React,{Children:Lt,cloneElement:It,Component:Ft,createContext:B,createElement:Wt,createFactory:$t,createRef:Gt,forwardRef:Xt,Fragment:Bt,isValidElement:Jt,lazy:Vt,memo:qt,Profiler:Ht,PureComponent:Kt,startTransition:Qt,StrictMode:Ut,Suspense:Yt,useCallback:L,useContext:J,useDebugValue:Zt,useDeferredValue:te,useEffect:z,useId:ee,useImperativeHandle:ne,useInsertionEffect:oe,useLayoutEffect:se,useMemo:re,useReducer:bt,useRef:E,useState:ie,useSyncExternalStore:ae,useTransition:ce}=React;var st="http://www.w3.org/2000/svg",q=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 D(e,t,n,s,o){return{type:"path",ops:I(e,t,n,s,o)}}function rt(e,t,n){let s=(e||[]).length;if(s>2){let o=[];for(let r=0;r500?.4:-.0016668*c+1.233334;let f=o.maxRandomnessOffset||0;f*f*100>a&&(f=c/10);let _=f/2,m=.2+.2*it(o),u=o.bowing*o.maxRandomnessOffset*(s-t)/200,h=o.bowing*o.maxRandomnessOffset*(e-n)/200;u=w(u,o,v),h=w(h,o,v);let l=[],p=()=>w(_,o,v),d=()=>w(f,o,v);return r&&(i?l.push({op:"move",data:[e+p(),t+p()]}):l.push({op:"move",data:[e+w(f,o,v),t+w(f,o,v)]})),i?l.push({op:"bcurveTo",data:[u+e+(n-e)*m+p(),h+t+(s-t)*m+p(),u+e+2*(n-e)*m+p(),h+t+2*(s-t)*m+p(),n+p(),s+p()]}):l.push({op:"bcurveTo",data:[u+e+(n-e)*m+d(),h+t+(s-t)*m+d(),u+e+2*(n-e)*m+d(),h+t+2*(s-t)*m+d(),n+d(),s+d()]}),l}function nt(e,t,n){let s=e.length,o=[];if(s>3){let r=[],i=1-n.curveTightness;o.push({op:"move",data:[e[1][0],e[1][1]]});for(let a=1;a+2x.setAttribute(g,b);for(let x of u){let g=document.createElementNS(st,"path");if(d(g,"d",x),d(g,"fill","none"),d(g,"stroke",n.color||"currentColor"),d(g,"stroke-width",""+a),v){let b=g.getTotalLength();h.push(b),p+=b}e.appendChild(g),l.push(g)}if(v){let x=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 o=window.__rno_kf_s=document.createElement("style");o.textContent="@keyframes rough-notation-dash { to { stroke-dashoffset: 0; } }",document.head.appendChild(o)}})();let t=this._svg=document.createElementNS(st,"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 s=this._config.type==="highlight";if(this._e.insertAdjacentElement(s?"beforebegin":"afterend",t),this._state="not-showing",s){let o=window.getComputedStyle(this._e).position;(!o||o==="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(o)===Math.round(r);return s(t.x,n.x)&&s(t.y,n.y)&&s(t.w,n.w)&&s(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 s=this._config;n&&(s=JSON.parse(JSON.stringify(this._config)),s.animate=!1);let o=this.rects(),r=0;o.forEach(c=>r+=c.w);let i=s.animationDuration||800,a=0;for(let c=0;c{let i=Object.assign({div:"div",a:"a",p:"p"},A());return T(i.div,{className:"post-entry w-full mt-16",children:[O(i.a,{className:"block font-bold text-xl mt-0 mb-2",href:o,target:r?"_blank":"_self",children:e}),t&&O(i.p,{className:"text-gray-400 mt-0 mb-2 text-sm",children:t}),O(i.p,{className:"text-gray-500 mt-0 mb-2",children:n}),O(i.a,{className:"block font-medium",href:o,target:r?"_blank":"_self",children:O(ct,{type:"underline",animate:!1,color:"#A7F3D0",show:!0,strokeWidth:2,children:s||"Read more"})})]})};function ht(e){let t=Object.assign({h1:"h1",h3:"h3"},A(),e.components);return T(X,{children:[O(t.h1,{id:"blog",children:"Blog"}),` `,O(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."}),` `,O(U,{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"}),` `,O(U,{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 Dt(e={}){let{wrapper:t}=Object.assign({},A(),e.components);return t?O(t,Object.assign({},e,{children:O(ht,e)})):ht(e)}var Rt=Dt;return wt(jt);})(); /*! ***************************************************************************** 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;