1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[922],{843:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/posts/[slug]",function(){return n(3226)}])},9355:function(e,t,n){"use strict";n.d(t,{Z:function(){return i}});var a=n(5893),s=n(3541),r=n(165),o=n.n(r),i=e=>{let{children:t,className:n}=e,r=new s.Z(o().content);return r.addIf(n,n),(0,a.jsx)("div",{className:r.toString(),children:t})}},4006:function(e,t,n){"use strict";n.d(t,{Z:function(){return c}});var a=n(5893),s=n(3541),r=n(2050),o=n(3874),i=n.n(o),c=e=>{let{children:t,className:n,container:o}=e,c=new s.Z(i().header);return c.addIf(n,n),(0,a.jsx)("header",{className:c.toString(),children:(0,a.jsx)(r.Z,{className:i().headerContainer,...o,children:t})})}},9595:function(e,t,n){"use strict";n.d(t,{Z:function(){return g}});var a=n(5893),s=n(1664),r=n.n(s),o=n(5975),i=n(1192),c=n(9076),d=n(2657),l=n(8873),u=n(3541),_=n(5911),h=n(8013),p=n.n(h),m=e=>{let{className:t,author:n,date:s,categories:o,tags:h,isSticky:m=!1}=e,f=new u.Z(p().metadata);return f.addIf(t,t),(0,a.jsxs)("ul",{className:f.toString(),children:[n&&(0,a.jsx)("li",{className:p().metadataAuthor,children:(0,a.jsxs)("address",{children:[(0,a.jsx)(_.Z,{width:"50",height:"50",crop:"fill",src:n.avatar.url,alt:"Author Avatar"}),"By"," ",(0,a.jsx)(r(),{href:(0,d.h$)(n.name),rel:"author",children:n.name})]})}),s&&(0,a.jsx)("li",{children:(0,a.jsx)("time",{pubdate:"pubdate",dateTime:s,children:(0,l.p6)(s)})}),Array.isArray(o)&&o[0]&&(0,a.jsx)("li",{className:p().metadataCategories,children:(0,a.jsx)("ul",{children:o.filter(e=>{let{slug:t}=e;return!c.$A.includes(t)}).map(e=>(0,a.jsx)("li",{children:(0,a.jsx)(r(),{href:(0,c.I5)(e.slug),children:e.name})},e.slug))})}),Array.isArray(h)&&h[0]&&(0,a.jsx)("li",{className:p().metadataTags,children:(0,a.jsx)("ul",{children:h.map(e=>(0,a.jsx)("li",{children:(0,a.jsx)(r(),{href:e.uri,children:e.name})},e.uri))})}),m&&(0,a.jsx)("li",{className:p().metadataSticky,children:(0,a.jsx)(i.ekl,{"aria-label":"Sticky Post"})})]})},f=n(4108),x=n.n(f),g=e=>{let{post:t,options:n={}}=e,{title:s,excerpt:i,slug:c,date:d,author:l,categories:u,tags:_}=t,{excludeMetadata:h=[],className:p}=n,f={};!h.includes("author")&&l&&(f.author=l),!h.includes("date")&&d&&(f.date=d),!h.includes("categories")&&u&&(f.categories=u),!h.includes("tags")&&_&&(f.tags=_);let g=Object.keys(f).length>0,j=x().postCard;return p&&(j="".concat(j," ").concat(p)),(0,a.jsxs)("div",{className:j,children:[(0,a.jsx)(r(),{href:(0,o.F3)(c),children:(0,a.jsx)("h3",{className:x().postCardTitle,dangerouslySetInnerHTML:{__html:s.replace("How to ",'<span class="sr-only">How to</span> ')}})}),g&&(0,a.jsx)(m,{className:x().postCardMetadata,...f,author:!1}),i&&(0,a.jsx)("div",{className:x().postCardContent,dangerouslySetInnerHTML:{__html:(0,o.$4)(i)}})]})}},6210:function(e,t,n){"use strict";n.d(t,{Z:function(){return c}});var a=n(5893),s=n(3541),r=n(9595),o=n(303),i=n.n(o),c=e=>{let{children:t,className:n,posts:o=[],postCard:c,...d}=e,l=new s.Z(i().posts);return l.addIf(n,n),(0,a.jsx)("ul",{className:l.toString(),...d,children:o.map(e=>(0,a.jsx)("li",{children:(0,a.jsx)(r.Z,{post:e,options:c})},e.slug))})}},1365:function(e,t,n){"use strict";n.d(t,{Z:function(){return i}});var a=n(5893),s=n(3541),r=n(940),o=n.n(r),i=e=>{let{children:t,className:n}=e,r=new s.Z(o().sidebar);return r.addIf(n,n),(0,a.jsx)("aside",{className:r.toString(),children:t})}},18:function(e,t,n){"use strict";n.d(t,{Z:function(){return i}});var a=n(5893),s=n(3541),r=n(2777),o=n.n(r),i=e=>{let{children:t,className:n}=e,r=new s.Z(o().sidebarSection);return r.addIf(n,n),(0,a.jsx)("div",{className:r.toString(),children:t})}},8873:function(e,t,n){"use strict";n.d(t,{El:function(){return c},MY:function(){return o},aA:function(){return d},jD:function(){return l},p6:function(){return r},vJ:function(){return i}});var a=n(8106),s=n(9618);function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"PPP";return e instanceof Date||(e=new Date(e)),(0,a.WU)(e,t)}function o(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"basic",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"complete";return e instanceof Date||(e=new Date(e)),(0,s.c)(e,{format:t,representation:n})}function i(e){let{key:t="date"}=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return e.sort((e,n)=>new Date(n[t])-new Date(e[t]))}function c(e,t){return e instanceof Date||(e=new Date(e)),new Date(e.toLocaleStr
1ing("en-US",{timeZone:t}))}function d(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return e instanceof Date||(e=new Date(e)),e<new Date(new Date().getTime()+t)}function l(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return e instanceof Date||(e=new Date(e)),e>new Date(new Date().getTime()+t)}},284:function(e,t,n){"use strict";n.d(t,{dX:function(){return d},Yh:function(){return _},PA:function(){return u},MV:function(){return l}});var a=n(5893),s=n(2657),r=n(5975),o=n(2729);function i(){let e=(0,o._)(["\n query AllPages {\n pages(first: 10000) {\n edges {\n node {\n content\n featuredImage {\n node {\n altText\n caption\n id\n sizes\n sourceUrl\n srcSet\n }\n }\n id\n menuOrder\n slug\n title\n status\n modified\n }\n }\n }\n }\n"]);return i=function(){return e},e}(0,n(8806).Ps)(i());var c=n(4147);function d(e){let{post:t={},siteTitle:n=""}=e,{homepage:s="",faviconPath:o="/favicon.ico"}=c,{title:i,slug:d,excerpt:l,date:u,author:_,categories:h,modified:p,featuredImage:m}=t,f=(0,r.F3)(d),x=!!u&&new Date(u),g=x instanceof Date&&x.getFullYear(),j=x instanceof Date&&x.toISOString(),y=!!p&&new Date(p),v=y instanceof Date&&y.toISOString(),S={"@context":"https://schema.org","@type":"Article",mainEntityOfPage:{"@type":"WebPage","@id":"".concat(s).concat(f)},headline:i,image:[null==m?void 0:m.sourceUrl],datePublished:j||"",dateModified:v||j||"",description:l,keywords:[h.map(e=>{let{name:t}=e;return"".concat(t)}).join(", ")],copyrightYear:g||"",author:{"@type":"Person",name:null==_?void 0:_.name},publisher:{"@type":"Organization",name:n,logo:{"@type":"ImageObject",url:"".concat(s).concat(o)}}};return(0,a.jsx)("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify(S)}})}function l(e){let{siteTitle:t=""}=e,{homepage:n=""}=c,s={"@context":"https://schema.org","@type":"WebSite",name:t,url:n,copyrightYear:new Date().getFullYear(),potentialAction:{"@type":"SearchAction",target:"".concat(n,"/search/?q={search_term_string}"),"query-input":"required name=search_term_string"}};return(0,a.jsx)("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify(s)}})}function u(e){let{title:t="",description:n="",siteTitle:s="",slug:r=""}=e,{homepage:o=""}=c,i=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return"/".concat(e)}(r),d={"@context":"http://schema.org","@type":"WebPage",name:t,description:n,url:"".concat(o).concat(i),publisher:{"@type":"ProfilePage",name:s}};return(0,a.jsx)("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify(d)}})}function _(e){let{author:t={}}=e,{homepage:n=""}=c,{name:r,avatar:o,description:i}=t,d=(0,s.h$)(r),l={"@context":"https://schema.org","@type":"Person",name:r,image:null==o?void 0:o.url,url:"".concat(n).concat(d),description:i};return(0,a.jsx)("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify(l)}})}},3226:function(e,t,n){"use strict";n.r(t),n.d(t,{__N_SSG:function(){return F},default:function(){return B}});var a=n(5893),s=n(1664),r=n.n(s),o=n(7294),i=Object.defineProperty,c=new Map,d=new WeakMap,l=0,u=void 0;o.Component;var _=n(1192),h=n(9076),p=n(8873),m=n(284),f=n(243),x=n(6816),g=n(9330);n(4006);var j=n(9657),y=n(2050),v=n(9355),S=n(2657),P=n(3541),b=n(5911),N=n(8397),w=n.n(N),C=e=>{let{className:t,author:n,date:s,categories:o,tags:i}=e;return new P.Z(w().postMetadata).addIf(t,t),(0,a.jsxs)("div",{children:[(0,a.jsxs)("p",{className:w().metadataByline,children:[(0,a.jsxs)("span",{className:w().metadataAuthor,children:[(0,a.jsx)(b.Z,{width:"50",height:"50",crop:"fill",src:n.avatar.url,alt:"Author Avatar"}),(0,a.jsx)(r(),{href:(0,S.h$)(n.name),rel:"author",children:n.name})]}),(0,a.jsxs)("span",{className:w().metadataDate,children:[(0,a.jsx)("span",{children:"on"}),(0,a.jsx)("time",{pubdate:"pubdate",dateTime:s,children:(0,p.p6)(s)})]})]}),(0,a.jsxs)("div",{className:w().metadataBuckets,children:[(0,a.jsx)("span",{children:(0,a.jsx)("ul",{className:w().metadataCategories,children:o.filter(e=>{let{slug:t}=e;return!h.$A.includes(t)}).map(e=>(0,a.jsx)("li",{children:(0,a.jsx)(r(),{href:(0,h.I5)(e.slug),children:e.name})},e.slug))})}),(0,a.jsx)("span",{children:(0,a.jsx)("ul",{className:w().metadataCategories,children:i.map(e=>(0,a.jsx)("li",{children:(0,a.jsx)(r(),{href:e.uri,children:e.name})},e.uri))})})]})]})},A=n(4823),M=n.n(A),D=e=>{let{className:t,anchors:n,headline:s}=e,r=new P.Z(M().anchors);return r.addIf(t,t),(0,a.jsxs)("div",{className:r.toString(),children:[s&&(0,a.jsx)("p",{className:M().anchorsHeadline,children:s}),(0,a.jsx)("ul",{children:n.map(e=>{let{anchor:t,title:n}=e;return(0,a.jsx)("li",{children:(0,a.jsx)("a",{href:"#".concat(t),children:n})},t)})})]})};n(4931);var T=n(119),Z=n.n(T),I=e=>{var t;let{className:n,title:s,url:r,width:i=560,height:c=315,thumbnail:d,isActive:l=!1}=e,[u,h]=(0,o.useState)(l);(0,o.useEffect)(()=>{u!==l&&h(l)},[l]);let p=new P.Z(Z().video);p.addIf(n,n);let m=null===(t=(function(e){let t;try{t=new URL(e)}catch(e){throw Error("Failed to get URL params from string: ".concat(e.message))}let n=new URLSearchParams(t.search);return Array.from(n.keys()).map(e=>({key:e,value:n.get(e)}))})(r).find(e=>{let{key:t}=e;return"v"===t}))||void 0===t?void 0:t.value;return(0,a.jsxs)("figure",{className:p.toString(),children:[(0,a.jsxs)("div",{className:Z().videoContainer,style:{paddingTop:"".concat(c/i*100,"%")},children:[u&&(0,a.jsx)("iframe",{title:s,width:i,height:c,src:"https://www.youtube.com/embed/".concat(m,"?feature=oembed"),frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0,autoPlay:!0}),!u&&(0,a.jsxs)("div",{className:Z().videoPlay,children:[(0,a.jsx)(b.Z,{width:"1800",height:"1016",crop:"limit",src:d.url,deliveryType:"fetch",alt:"YouTube Preview"}),(0,a.jsx)("button",{className:Z().videoPlayButton,onClick:function(e){e.preventDefault(),h(!0)},children:(0,a.jsxs)("span",{className:Z().videoPlayAction,children:[(0,a.jsx)(_.gmG,{}),(0,a.jsx)("span",{className:"sr-only",children:"Click to Play Video"})]})})]})]}),(0,a.jsx)("figcaption",{children:(0,a.jsx)("a",{href:r,rel:"noopener",children:"View on YouTube"})})]})};n(6210);var k=n(1365),H=n(18),L=n(8982),O=n(4313),V=n(6163),E=n.n(V),F=!0;function B(e){let{post:t,anchors:n,related:s}=e,{metadata:r}=(0,f.Z)(),{title:i}=r,{author:h,cardtitle:S,categories:P,content:b,date:N,demorepourl:w,demostarterurl:A,demowebsiteurl:M,intro:T,isSticky:Z=!1,modified:V,tags:F,title:B,video:U,seo:W}=t,R="Read ".concat(B," at ").concat(i,".");(null==W?void 0:W.metaDesc)&&(R=W.metaDesc);let{ref:Y,inView:G}=function({threshold:e,delay:t,trackVisibility:n,rootMargin:a,root:s,triggerOnce:r,skip:i,initialInView:_,fallbackInView:h,onChange:p}={}){var m;
1let[f,x]=o.useState(null),g=o.useRef(p),[j,y]=o.useState({inView:!!_,entry:void 0});g.current=p,o.useEffect(()=>{let o;if(!i&&f)return o=function(e,t,n={},a=u){if(void 0===window.IntersectionObserver&&void 0!==a){let s=e.getBoundingClientRect();return t(a,{isIntersecting:a,target:e,intersectionRatio:"number"==typeof n.threshold?n.threshold:0,time:0,boundingClientRect:s,intersectionRect:s,rootBounds:s}),()=>{}}let{id:s,observer:r,elements:o}=function(e){let t=Object.keys(e).sort().filter(t=>void 0!==e[t]).map(t=>{var n;return`${t}_${"root"===t?(n=e.root)?(d.has(n)||(l+=1,d.set(n,l.toString())),d.get(n)):"0":e[t]}`}).toString(),n=c.get(t);if(!n){let a;let s=new Map,r=new IntersectionObserver(t=>{t.forEach(t=>{var n;let r=t.isIntersecting&&a.some(e=>t.intersectionRatio>=e);e.trackVisibility&&void 0===t.isVisible&&(t.isVisible=r),null==(n=s.get(t.target))||n.forEach(e=>{e(r,t)})})},e);a=r.thresholds||(Array.isArray(e.threshold)?e.threshold:[e.threshold||0]),n={id:t,observer:r,elements:s},c.set(t,n)}return n}(n),i=o.get(e)||[];return o.has(e)||o.set(e,i),i.push(t),r.observe(e),function(){i.splice(i.indexOf(t),1),0===i.length&&(o.delete(e),r.unobserve(e)),0===o.size&&(r.disconnect(),c.delete(s))}}(f,(e,t)=>{y({inView:e,entry:t}),g.current&&g.current(e,t),t.isIntersecting&&r&&o&&(o(),o=void 0)},{root:s,rootMargin:a,threshold:e,trackVisibility:n,delay:t},h),()=>{o&&o()}},[Array.isArray(e)?e.toString():e,f,s,a,r,i,n,h,t]);let v=null==(m=j.entry)?void 0:m.target,S=o.useRef(void 0);f||!v||r||i||S.current===v||(S.current=v,y({inView:!!_,entry:void 0}));let P=[x,j.inView,j.entry];return P.ref=P[0],P.inView=P[1],P.entry=P[2],P}({triggerOnce:!0});return(0,a.jsxs)(g.Z,{children:[(0,a.jsx)(x.Z,{title:B,description:R,ogImage:{title:S||B,layout:"post"}}),(0,a.jsx)(v.Z,{children:(0,a.jsx)(j.Z,{className:E().contentSection,children:(0,a.jsxs)(y.Z,{className:E().contentContainer,size:"narrow",children:[(0,a.jsxs)("div",{children:[(0,a.jsxs)("header",{className:E().postHeader,children:[(0,a.jsx)("h1",{className:E().title,dangerouslySetInnerHTML:{__html:B}}),(0,a.jsx)(C,{className:E().postMetadata,date:N,author:h,categories:P,tags:F,options:{compactCategories:!1}})]}),T&&(0,a.jsx)("div",{className:E().postIntro,dangerouslySetInnerHTML:{__html:T}}),Array.isArray(n)&&(0,a.jsx)("div",{className:E().postIntroAnchors,children:(0,a.jsx)(D,{className:E().postAnchors,anchors:n,headline:"Table of Contents"})}),(0,a.jsx)("div",{className:E().resources,children:(0,a.jsxs)("ul",{className:E().resourcesLinks,children:[M&&(0,a.jsx)("li",{children:(0,a.jsxs)("a",{href:M,children:[(0,a.jsx)(_.lMi,{})," View Demo Website"]})}),w&&(0,a.jsx)("li",{children:(0,a.jsxs)("a",{href:w,children:[(0,a.jsx)(_.tvD,{})," See the Code"]})}),A&&(0,a.jsx)("li",{children:(0,a.jsxs)("a",{href:A,children:[(0,a.jsx)(_.ef0,{})," Grab the Starter"]})})]})}),U&&(0,a.jsx)("div",{ref:Y,children:(0,a.jsx)(I,{className:E().postVideo,...U,title:"Video for ".concat(B),isActive:G})}),(0,a.jsx)("div",{className:E().postContent,dangerouslySetInnerHTML:{__html:b}}),(0,a.jsx)("div",{className:E().postFooter,children:(0,a.jsxs)("p",{className:E().postModified,children:["Last updated on ",(0,p.p6)(V),"."]})})]}),(0,a.jsxs)(k.Z,{className:E().postSidebar,children:[(0,a.jsx)(H.Z,{className:E().postSidebarToc,children:Array.isArray(n)&&(0,a.jsx)(D,{className:E().postAnchors,anchors:n,headline:"Table of Contents"})}),(0,a.jsxs)(H.Z,{className:E().postSidebarNewsletter,children:[(0,a.jsx)(L.Z,{className:E().postSidebarHeading,as:"p",children:"Newsletter"}),(0,a.jsx)("p",{className:E().postSidebarText,children:"More free tutorials straight to your inbox."}),(0,a.jsx)(O.Z,{className:E().postSidebarForm,location:"posts"})]})]})]})})}),(0,a.jsx)(m.dX,{post:t,siteTitle:i})]})}},4823:function(e){e.exports={anchors:"Anchors_anchors__3H2PH",anchorsHeadline:"Anchors_anchorsHeadline__z3uly"}},165:function(e){e.exports={content:"Content_content__Ya8DL"}},3874:function(e){e.exports={header:"Header_header__MwWvM"}},8013:function(e){e.exports={metadata:"Metadata_metadata__oSXcR",metadataAuthor:"Metadata_metadataAuthor___mZ9G",metadataCategories:"Metadata_metadataCategories__7ZM_O",metadataTags:"Metadata_metadataTags__qWNmZ",metadataSticky:"Metadata_metadataSticky__GSw6C"}},4108:function(e){e.exports={postCard:"PostCard_postCard__tAZQW",postCardTitle:"PostCard_postCardTitle__dFMri",postCardContent:"PostCard_postCardContent__U_d3u",postCardMetadata:"PostCard_postCardMetadata__8MTfd"}},8397:function(e){e.exports={postMetadata:"PostMetadata_postMetadata__4AEHP",metadataByline:"PostMetadata_metadataByline__TfUy5",metadataAuthor:"PostMetadata_metadataAuthor__IM0QN",metadataDate:"PostMetadata_metadataDate__WwOnu",metadataBuckets:"PostMetadata_metadataBuckets__gyrUu",metadataCategories:"PostMetadata_metadataCategories__3GogK"}},303:function(e){e.exports={posts:"Posts_posts__OXW86"}},940:function(e){e.exports={sidebar:"Sidebar_sidebar__5cJdO"}},2777:function(e){e.exports={sidebarSection:"SidebarSection_sidebarSection__xhefN"}},119:function(e){e.exports={video:"Video_video__Co_G0",videoContainer:"Video_videoContainer__nGpuK",videoPlay:"Video_videoPlay__6GeaD",videoPlayButton:"Video_videoPlayButton__OzXZ8",videoPlayAction:"Video_videoPlayAction__Kj04T"}},6163:function(e){e.exports={button:"Post_button___Lg_q",postHeader:"Post_postHeader__3MGLd",t
1itle:"Post_title__bN0yY",postIntro:"Post_postIntro__cUKeD",postIntroAnchors:"Post_postIntroAnchors__lmb1_",postContent:"Post_postContent__DV0Ej",resources:"Post_resources__8UWmH",resourcesLinks:"Post_resourcesLinks__QSEDr",postAnchors:"Post_postAnchors__Ce2la",postVideo:"Post_postVideo__yLkEF",contentSection:"Post_contentSection__nWf0c",contentContainer:"Post_contentContainer__jJFTc",postSidebar:"Post_postSidebar____U7S",postSidebarHeading:"Post_postSidebarHeading__hAZf2",postSidebarText:"Post_postSidebarText__i5EzY",postSidebarForm:"Post_postSidebarForm__MDD0p",postSidebarToc:"Post_postSidebarToc__xHXya",postSidebarNewsletter:"Post_postSidebarNewsletter__uPux4",tools:"Post_tools__hcBk_",toolsHeader:"Post_toolsHeader__TL9Nv",toolsLinks:"Post_toolsLinks__bLc5q",postMetadata:"Post_postMetadata__VDXJt",postFooter:"Post_postFooter__Nd_Pd",postModified:"Post_postModified__ZPdP_",relatedSection:"Post_relatedSection__z_4LO",relatedSectionLink:"Post_relatedSectionLink__i9fw_",relatedPosts:"Post_relatedPosts__GEjAY",relatedPostsCard:"Post_relatedPostsCard__Uso7h"}}},function(e){e.O(0,[365,207,474,726,888,774,179],function(){return e(e.s=843)}),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.