Playing: 346: Selling and Shipping T-Shirts with TypeScript
May 5th, 2021
Potluck — Is it worth it to still learn WordPress? × Is Safari the new IE11? × Mobile website testing × Pirated content × Styled components × SSGs × Transitioning to full-time freelance × More!
Apr 7th, 2021
Potluck — Video Hosting × Fake Names? × Portfolio Projects × Monorepos × APIs × TLDs × Recording Tips × More!
Mar 10th, 2021
Potluck — VSCode × Vercel vs Netlify × Models × Mutations × Multi-Vendor Platforms × Websites vs Web Apps × More!
Feb 17th, 2021
Potluck — Do titles matter? × Should clients pay for plugins? × Can I debug my baby? × How we prepare for Syntax × Deno × Learning things quickly × More!
Jan 20th, 2021
Potluck — $100k Dev Jobs × Sponsored Blog Posts × How To Keep Your Skills Up To Date × Libraries vs Custom × Dev Tools × More!
Jan 4th, 2021
Hasty Treat - Hyper Productivity with Keyboard Shortcuts + Window Management
Dec 23rd, 2020
Potluck — New Macs × Podcast Statistics × E-commerce Testing × WordPress × Charging More × Learning Web Dev × More!
Nov 25th, 2020
Potluck - Frameworks vs Libraries × Debugging × CSS Modules vs Styled Components × Resumes × Stress Management × More!
Oct 7th, 2020
Potluck - Is Angular good? × Stencil.js × Self XSS × SVGs in React × Social Platforms for Devs × Project Handoff × Cleaning Knives × More!
Sep 21st, 2020
Hasty Treat - Our First Bucks Made From Web Dev, Teaching, YouTube and Tutorials
Sep 9th, 2020
Tales from Webdev Past - Clearfix × Floats × Cufon × Guestbooks × PNG Fix × More!
Sep 2nd, 2020
Potluck - RIP Firefox? × Safari × Changing Careers × Regression Testing × Google Analytics Alternatives × Malicious Github Users? × Mac vs Windows × More!
Aug 26th, 2020
Potluck - MDX × Portfolio Projects × Code Commenting × CSS Properties × Reusable Components × More!
Aug 19th, 2020
Potluck - Subscriptions × ES Modules in Node × Chicken Thigh × Being a Good Dad × Refactoring × More!
Jul 27th, 2020
Hasty Treat - Target=_blank security issue? What's the deal with noopener and noreferrer?
Jul 22nd, 2020
Potluck - Beating Procrastination × Rollup vs Webpack × Leadership × Code Planning × Styled Components × More!
Jul 6th, 2020
Hasty Treat - Forms, Captchas, Honeypots, Dealing With Malicious Users and the Sad State of Contact Forms
Jun 24th, 2020
Potluck - Libraries vs Frameworks × Firefox × Career Advice For Teenagers × Who Would Win a Thumb War? × More!
Jun 17th, 2020
The Fundamentals Leftovers - Terminal, Shortcuts, View Source, Github + More!
May 27th, 2020
Potluck - Courses for Kids × Sub-Components × Recursion × DB Hosting × Frameworks × Data Structures & Algorithms × More!
Apr 29th, 2020
Potluck Part 2 - Magic GQLess × Are classes dead? × Custom Hooks × Staying Up To Date × CSS × More!
Apr 22nd, 2020
Potluck - Mobile First × Arrow Functions × Deno × JSON APIs × Refactoring Tips × More!
Apr 1st, 2020
Mental Health and Dev ft Dr. Courtney Tolinski - Depression, Anxiety, Imposter Syndrome, Focus, Motivation, Burnout
Mar 25th, 2020
Potluck - Bootcamps × Career Change × Figma × Gatsby × AMP × Mongoose × More!
Feb 26th, 2020
Potluck - Next vs Gatsby × Headless CMS × Vue.js × Is Ruby on Rails still good? × More!
Jan 29th, 2020
Potluck - Dev Culture Fit × Slack Communities × Vanilla JS × Backpacks × Raspberry Pi × More!
Jan 27th, 2020
Hasty Treat - Building A Community Slack, Discord, Spectrum, Discourse, Forums
Jan 20th, 2020
Hasty Treat - Picking the Stack for uses.tech - Gatsby, React, Context, Styled Components
Jan 1st, 2020
Potluck - Fonts × Frameworks × Teas × Coding Subscriptions × Client Work × More!
Dec 4th, 2019
Potluck - Tabs are better? × Coding Music × SEO × Is Angular good? × Biggie Smalls × Soy Sauce × More!
Nov 6th, 2019
Potluck - Gatsby vs Next × Is Google Home spying on you? × Flat File CMS × CSS Frameworks × Hosting Client Sites × More!
Oct 9th, 2019
Potluck - Terminal Configs × CSS Reset × Flexbox × Freelancing × NPM Dependencies × Project Hand-off × More!
Sep 18th, 2019
Potluck - Why Webpack? × Serverless × Agencies × Recruiters × CSS Grid × MQ in Styled Components
Aug 21st, 2019
Potluck - Deploying Applications × Typescript × Live Coding with Twitch × Fullstack Architecture × More!
Jul 31st, 2019
Potluck - What is "State"? × Web Sockets × Remote Working × Firefox × Machines Taking Our Jobs × More!
Jun 26th, 2019
Potluck - Career Switch at 33 × Cover Letters × Kids × Learning Quickly × More!
May 29th, 2019
Potluck - CSS × Angular × Dev job preparation × Svelte × File organization × Gear × More!
May 1st, 2019
Potluck - Media Queries × NPM Vulnerabilities × Fullstack JS vs JAMstack × Web VR/AR × Switching Jobs × More!
Apr 3rd, 2019
Potluck - Interview Qs × Headless CMS × React Hooks × Resume Design × Redux vs Context × More!
Mar 6th, 2019
Potluck - Are classes dead? × Tutorials vs Real Life × CRA vs Next × Scraping × More
Mar 4th, 2019
Hasty Treat - Authentication - LocalStorage vs Cookies vs Sessions vs Tokens
Feb 27th, 2019
How We Manage Our Lives — Notion, Todos, Notes, Focusing, Calendars, Goal tracking, and more!
Feb 6th, 2019
Potluck - Changing careers × Repo organization × CSS Grid × Certifications × Freelancing × Spammers × More
Jan 10th, 2019
Potluck - Where to start with JS × Freelancing × Cron jobs × Split testing × Frameworks in 2019 × More
Dec 19th, 2018
Potluck - Typescript × E-commerce platforms × Job-hopping × Working for agencies × more
Dec 17th, 2018
Hasty Treat - Where are they now?! Gulp, Grunt, Bower, Backbone and Compass
Nov 21st, 2018
Potluck - $100/hr × Redux Replacements × Full Stack Designers × JWT × VS Code Tips × More
Oct 26th, 2018
Potluck - Working with designers × Is WordPress Crap? × When to stop working × More
Aug 29th, 2018
Potluck - Programming Languages × Soft Skills × PHP vs JS × Breakdancing x Spice Blends
Aug 1st, 2018
Potluck - Editor Fonts × Portfolios × Meetup Tips × Switching to Windows × Freelancing Sources
Jul 24th, 2018
The Undocumented Web - scraping, private APIs, proxies and “alternative solutions”
Jul 18th, 2018
Advice For Beginners - Tech Skills, Applying for Jobs, Focus, Imposter Syndrome + More
Jul 4th, 2018
Potluck EP × Remote Work × Headless WordPress × Good Client Questions × Alternate Careers × React API Credentials
May 9th, 2018
Potluck EP × Is Redux Dead × Learning Quickly × Developing Solo × Specialist vs Generalist × Funnest Projects × Wes’ BBQ Course
Apr 18th, 2018
Potluck EP × Vue.js × Headless WP × Typescript & Flow × Productivity × Server Side Rendering × Yeoman
Feb 7th, 2018
Wes and Scott's Lives - Breakdancing, BBQ, Wives, Work/Life Balance, Problem Solving, YouTube Subscriptions
Jan 31st, 2018
Snack Pack — CSS Frameworks, React HOC, Render Props, Coding Designers, Early Career Advice and a sound board!
Jan 24th, 2018
Hosting & Servers — Heroku, Now, Galaxy, Digital Ocean, Linode, Docker, Netlify and more!
Nov 29th, 2017
What's New in CSS? Variables, Scoping, New Selectors and Color Functions
Nov 1st, 2017
22 Buzz Words Explained — Mutations, Pure Functions , Serverless, Hoisting, MVC + More
Oct 18th, 2017
Tasty Treats — Rems VS Ems, Remote Work, Making Money, Getting good at Design + more! 🍬
Apr 21st, 2021
Selling and Shipping T-Shirts with TypeScript👇 Download Show✏️ Edit Show Notes
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.
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
09:08 - Selling: Front-end
- 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
- 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
- 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
- 24 different types of shirts
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)
- Pay people in my community
- Bags, stickers, etc..
- 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
××× SIIIIICK ××× PIIIICKS ×××
- Scott: Level 2 Node Authentication - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code 'Syntax' for $10 off!