Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Selling and Shipping T-Shirts with TypeScript

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p class="has-line-data" data-line-start="7" data-line-end="8">In this episode of Syntax, Scott and Wes talk about selling and shipping t-shirts, and how to do it all in TypeScript!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Prismic__Sponsor_9" name="Prismic__Sponsor_9"></a>Prismic - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at <a href= "https://prismic.io/syntax">prismic.io/syntax</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Sentry__Sponsor_12" name="Sentry__Sponsor_12"></a>Sentry - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14">If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code TASTYTREAT during sign up.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Deque__Sponsor_15" name="Deque__Sponsor_15"></a>Deque - Sponsor</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at <a href= "https://www.deque.com/syntax">deque.com/syntax</a>. No credit card needed.</p> <h2 class="code-line" data-line-start="18" data-line-end="19"> <a id="Show_Notes_18" name="Show_Notes_18"></a>Show Notes</h2> <p class="has-line-data" data-line-start="19" data-line-end="20"> 01:58 - T-Shirts 101</p> <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> T-Shirts are cool</li> <li class="has-line-data" data-line-start="21" data-line-end="22">I sold 100 right away to get the kinks out</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> Then I did pre-order</li> <li class="has-line-data" data-line-start="23" data-line-end="28"> The stack <ul> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="https://www.typescriptlang.org/">TypeScript</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="https://reactjs.org/">React</a></li> <li class="has-line-data" data-line-start="26" data-line-end="28"> <a href="https://nextjs.org/">Next.js</a></li> </ul> </li> </ul> <p class="has-line-data" data-line-start="28" data-line-end="29"> 09:08 - Selling: Front-end</p> <ul> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="https://snipcart.com/">Snipcart</a></li> <li class="has-line-data" data-line-start="30" data-line-end="31"> It’s a button</li> <li class="has-line-data" data-line-start="31" data-line-end="33"> When Someone buys, they scrape the site for the HTML <ul> <li class="has-line-data" data-line-start="32" data-line-end="33"> If you only have a client-side rendered button, you use the JSON API instead</li> </ul> </li> <li class="has-line-data" data-line-start="33" data-line-end="34"> Integrated into <a href= "https://www.gatsbyjs.com/">Gatsby</a> pretty easily</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> Wrote one custom hook to count inventory and disable when sold out</li> <li class="has-line-data" data-line-start="35" data-line-end="37">I thought Snipcart would be enough, but I soon realized it wasn’t. I needed something to fulfill the shipment.</li> </ul> <p class="has-line-data" data-line-start="37" data-line-end="38"> 10:10 - Selling: Shipping Quotes</p> <ul> <li class="has-line-data" data-line-start="38" data-line-end="39"> Snipcart has integration for USPS, etc.</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> You can also do custom shippers</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> It’s a webhook</li> <li class="has-line-data" data-line-start="41" data-line-end="43"> They also take care of customs declaration</li> </ul> <p class="has-line-data" data-line-start="43" data-line-end="44"> 13:30 - Selling: Backend</p> <ul> <li class="has-line-data" data-line-start="44" data-line-end="46"> Next.js Dashboard <ul> <li class="has-line-data" data-line-start="45" data-line-end="46"> Integrate with <a href= "https://chitchats.com/en">ChitChats</a>, <a href= "https://stallionexpress.ca/">Stallion Express</a>, and SnipCart.</li> </ul> </li> <li class="has-line-data" data-line-start="46" data-line-end="47"> The tech</li> <li class="has-line-data" data-line-start="47" data-line-end="50"> Shipping Labels <ul> <li class="has-line-data" data-line-start="48" data-line-end="50"> Packing slip</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="50" data-line-end="51"> 18:05 - Fulfilling</p> <ul> <li class="has-line-data" data-line-start="51" data-line-end="57"> Printing labels <ul> <li class="has-line-data" data-line-start="52" data-line-end="53"> Designed with CSS + React</li> <li class="has-line-data" data-line-start="53" data-line-end="54"> Print CSS is wild</li> <li class="has-line-data" data-line-start="54" data-line-end="55"> Fan Fold labels were way better</li> <li class="has-line-data" data-line-start="55" data-line-end="56">I switched to Stallion Express</li> <li class="has-line-data" data-line-start="56" data-line-end="57"> Cheaper</li> </ul> </li> <li class="has-line-data" data-line-start="57" data-line-end="58"> Printing packing slips</li> <li class="has-line-data" data-line-start="58" data-line-end="59"> Batch scanning</li> <li class="has-line-data" data-line-start="59" data-line-end="64"> Scanning → Mark as shipped <ul> <li class="has-line-data" data-line-start="60" data-line-end="61"> Started with webcam</li> <li class="has-line-data" data-line-start="61" data-line-end="62"> Bought scanner for cheap</li> <li class="has-line-data" data-line-start="62" data-line-end="63"> QR code was better because my tokens were long</li> <li class="has-line-data" data-line-start="63" data-line-end="64"> Data matrix is often better</li> </ul> </li> <li class="has-line-data" data-line-start="64" data-line-end="67"> Sending notifications <ul> <li class="has-line-data" data-line-start="65" data-line-end="67"> Hit the endpoint via Snipcart</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="67" data-line-end="68"> 28:48 - The physical part</p> <ul> <li class="has-line-data" data-line-start="68" data-line-end="70"> T-Shirts printed from local supplier <ul> <li class="has-line-data" data-line-start="69" data-line-end="70"> U-Haul to get them here</li> </ul> </li> <li class="has-line-data" data-line-start="70" data-line-end="71"> Bags printed in China (about 40 cents each)</li> <li class="has-line-data" data-line-start="71" data-line-end="73">I wrote a bunch of code to organize by size <ul> <li class="has-line-data" data-line-start="72" data-line-end="73"> This cut down on moving around (14 hours if you save 30 seconds per shirt)</li> </ul> </li> <li class="has-line-data" data-line-start="73" data-line-end="74"> Some got stickers</li> <li class="has-line-data" data-line-start="74" data-line-end="79"> Multiples were the hardest <ul> <li class="has-line-data" data-line-start="75" data-line-end="79"> 24 different types of shirts <ul> <li class="has-line-data" data-line-start="76" data-line-end="77"> some wanted 4xl</li> <li class="has-line-data" data-line-start="77" data-line-end="79"> some wanted tall</li> </ul> </li> </ul> </li> </ul> <p class="has-line-data" data-line-start="79" data-line-end="80"> 36:30 - Common questions</p> <ul> <li class="has-line-data" data-line-start="80" data-line-end="84"> Why did you do this yourself? <ul> <li class="has-line-data" data-line-start="81" data-line-end="82"> Fun project</li> <li class="has-line-data" data-line-start="82" data-line-end="83">I learned a ton</li> <li class="has-line-data" data-line-start="83" data-line-end="84"> This is how you don’t burn out</li> </ul> </li> <li class="has-line-data" data-line-start="84" data-line-end="90"> Why not print-on-demand? (DTG) <ul> <li class="has-line-data" data-line-start="85" data-line-end="86"> Tonal</li> <li class="has-line-data" data-line-start="86" data-line-end="87"> Embroidery</li> <li class="has-line-data" data-line-start="87" data-line-end="88"> Quality</li> <li class="has-line-data" data-line-start="88" data-line-end="90"> Money <ul> <li class="has-line-data" data-line-start="89" data-line-end="90"> Pay people in my community</li> </ul> </li> </ul> </li> <li class="has-line-data" data-line-start="90" data-line-end="93"> Control <ul> <li class="has-line-data" data-line-start="91" data-line-end="92"> Bags, stickers, etc…</li> <li class="has-line-data" data-line-start="92" data-line-end="93"> <a href="https://www.stickermule.com/">stickermule</a></li> </ul> </li> <li class="has-line-data" data-line-start="93" data-line-end="96"> Why not $companyThatHandlesIt <ul> <li class="has-line-data" data-line-start="94" data-line-end="95">I want to do stickers</li> <li class="has-line-data" data-line-start="95" data-line-end="96">I want to do decks</li> </ul> </li> <li class="has-line-data" data-line-start="96" data-line-end="100"> Why not <a href="https://www.shopify.com/">Shopify</a> <ul> <li class="has-line-data" data-line-start="97" data-line-end="98"> Large orders still need major fulfillment strategies</li> <li class="has-line-data" data-line-start="98" data-line-end="100"> Code has to be written or money spent</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="100" data-line-end="101"> 44:16 - Other lessons learned</p> <ul> <li class="has-line-data" data-line-start="101" data-line-end= "103">Queues would be good here <ul> <li class="has-line-data" data-line-start="102" data-line-end= "103">Sometimes you had to wait 3+ seconds for the confirmation of shipping</li> </ul> </li> <li class="has-line-data" data-line-start="103" data-line-end= "104">No one reads, it was pre-order</li> <li class="has-line-data" data-line-start="104" data-line-end= "105">Don’t buy shipping right away — people email about incorrect addresses</li> <li class="has-line-data" data-line-start="105" data-line-end= "106">Over-order by a few each (out of 1550 orders, five got partial refunds and three got full refunds)</li> <li class="has-line-data" data-line-start="106" data-line-end= "107">Pre-order is great because you can offer many sizes</li> <li class="has-line-data" data-line-start="107" data-line-end= "109">Async JS to do things at most 50 at a time</li> </ul> <h2 class="code-line" data-line-start="109" data-line-end="110"> <a id="Links_109" name="Links_109"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="110" data-line-end= "112"><a href="https://wyze.com/wyze-plug.html">Wyze Plug</a></li> </ul> <h2 class="code-line" data-line-start="112" data-line-end="113"> <a id="_SIIIIICK__PIIIICKS__112" name= "_SIIIIICK__PIIIICKS__112"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="113" data-line-end= "114">Scott: <a href= "https://www.pixeleyes.co.nz/automounter/">Pixeleyes AutoMounter</a></li> <li class="has-line-data" data-line-start="114" data-line-end= "116">Wes: <a href= "https://www.amazon.com/Baratza-Encore-Conical-Coffee-Grinder/dp/B007F183LK/">Baratza Encore Conical Burr Coffee Grinder</a></li> </ul> <h2 class="code-line" data-line-start="116" data-line-end="117"> <a id="Shameless_Plugs_116" name= "Shameless_Plugs_116"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="117" data-line-end= "118">Scott: <a href= "https://www.leveluptutorials.com/pro">Level 2 Node Authentication</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="118" data-line-end= "120">Wes: <a href="https://wesbos.com/courses/">All Courses</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="120" data-line-end="121"> <a id="Tweet_us_your_tasty_treats_120" name= "Tweet_us_your_tasty_treats_120"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="121" data-line-end= "122"><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="122" data-line-end= "123"><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="123" data-line-end= "124"><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="124" data-line-end= "125"><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="125" data-line-end= "126"><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="126" data-line-end= "127"><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="127" data-line-end= "128">Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this episode of Syntax, Scott and Wes talk about selling and shipping t-shirts, and how to do it all in TypeScript!
 Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
 Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
 Deque - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed.
 Show Notes 01:58 - T-Shirts 101
  T-Shirts are cool
 I sold 100 right away to get the kinks out
 Then I did pre-order
 The stack  TypeScript

 React

 Next.js

  09:08 - Selling: Front-end
  Snipcart

 It’s a button
 When Someone buys, they scrape the site for the HTML  If you only have a client-side rendered button, you use the JSON API instead

 Integrated into Gatsby pretty easily
 Wrote one custom hook to count inventory and disable when sold out
 I thought Snipcart would be enough, but I soon realized it wasn’t. I needed something to fulfill the shipment.
  10:10 - Selling: Shipping Quotes
  Snipcart has integration for USPS, etc.
 You can also do custom shippers
 It’s a webhook
 They also take care of customs declaration
  13:30 - Selling: Backend
  Next.js Dashboard  Integrate with ChitChats, Stallion Express, and SnipCart.

 The tech
 Shipping Labels  Packing slip

  18:05 - Fulfilling
  Printing labels  Designed with CSS + React
 Print CSS is wild
 Fan Fold labels were way better
 I switched to Stallion Express
 Cheaper

 Printing packing slips
 Batch scanning
 Scanning → Mark as shipped  Started with webcam
 Bought scanner for cheap
 QR code was better because my tokens were long
 Data matrix is often better

 Sending notifications  Hit the endpoint via Snipcart

  28:48 - The physical part
  T-Shirts printed from local supplier  U-Haul to get them here

 Bags printed in China (about 40 cents each)
 I wrote a bunch of code to organize by size  This cut down on moving around (14 hours if you save 30 seconds per shirt)

 Some got stickers
 Multiples were the hardest  24 different types of shirts  some wanted 4xl
 some wanted tall

  36:30 - Common questions
  Why did you do this yourself?  Fun project
 I learned a ton
 This is how you don’t burn out

 Why not print-on-demand? (DTG)  Tonal
 Embroidery
 Quality
 Money  Pay people in my community

 Control  Bags, stickers, etc…
 stickermule

 Why not $companyThatHandlesIt I want to do stickers
 I want to do decks

 Why not Shopify  Large orders still need major fulfillment strategies
 Code has to be written or money spent

  44:16 - Other lessons learned
 Queues would be good here Sometimes you had to wait 3+ seconds for the confirmation of shipping

 No one reads, it was pre-order
 Don’t buy shipping right away — people email about incorrect addresses
 Over-order by a few each (out of 1550 orders, five got partial refunds and three got full refunds)
 Pre-order is great because you can offer many sizes
 Async JS to do things at most 50 at a time
  Links Wyze Plug
  ××× SIIIIICK ××× PIIIICKS ××× Scott: Pixeleyes AutoMounter

 Wes: Baratza Encore Conical Burr Coffee Grinder

  Shameless Plugs Scott: Level 2 Node Authentication - Sign up for the year and save 25%!
 Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
  Tweet us your tasty treats! Scott’s Instagram
 LevelUpTutorials Instagram
 Wes’ Instagram
 Wes’ Twitter
 Wes’ Facebook
 Scott’s Twitter
 Make sure to include @SyntaxFM in your tweets

Aplikace Youradio Talk

Selling and Shipping T-Shirts with TypeScript

Poslechněte si podcast