Selling and Shipping T-Shirts with TypeScript
Syntax - Tasty Web Development Treats21 Huhti 2021

Selling and Shipping T-Shirts with TypeScript

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

Jaksot(969)

817: You Need These 30 Apps - PART 1

817: You Need These 30 Apps - PART 1

Scott and Wes kick off part 1 of a 2-part series, breaking down 30 must-have apps for web developers and productivity enthusiasts. From file management tools to media utilities, they cover everything you need to supercharge your workflow. Show Notes 00:00 Welcome to Syntax! 01:03 Brought to you by Sentry.io. 01:27 File management applications. 01:43 DaisyDisk. 04:19 Marta. 07:50 EasyFind. 10:16 Czkawka. 12:53 Backblaze. 14:40 Hazel. 17:42 AutoMounter. 18:43 Media applications. 18:52 Automator HIEC to JPG. 20:04 Rant on QuickView. 20:32 DVD idea. 22:06 IINA. 24:07 Capture One. 25:02 YouTube Enhance. 27:16 HandBrake. 28:05 MakeMKV. 30:33 Overkill for Mac. 33:42 Search by Image. 37:09 eqMac. 37:37 Utility applications. 37:52 Stats & iStat Menu. 40:19 Alternatives to popular Mac applications. 40:23 Ice. 41:03 PearCleaner. 43:08 Numi. 44:17 Bottom (btm). 44:53 Sip Color Picker. 50:25 Sick Picks & Shameless Plugs. Sick Picks Scott: Wilde Chips Wes: Apple TV+: The Big Conn Shameless Plugs Scott: Syntax on YouTube Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

4 Syys 202457min

816: Why Your CSS Sucks

816: Why Your CSS Sucks

Scott and Wes break down why your CSS might suck—from misusing specificity to not leveraging CSS variables. Tune in as they dive into common pitfalls that are making your stylesheets a hot mess. Show Notes 00:00 Welcome to Syntax! 00:33 Breakdancing in the Olympics. 05:29 Brought to you by Sentry.io. 05:44 Why your CSS sucks. 07:01 You’re styling the wrong element. 11:01 Nesting too deep. 12:37 You don’t understand specificity. 14:56 Your classes don’t use a system. 16:24 You’re using values instead of CSS vars. 20:16 You don’t understand block vs inline vs inline-block. CSS Logical Properties 21:16 You aren’t using the right tool for the job. CSS Flexbox, CSS Grid. 24:15 You’re setting the value in too many places. 24:31 You’re scoping to tightly or not tightly enough. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

2 Syys 202428min

815: Deno 2 with Ryan Dahl

815: Deno 2 with Ryan Dahl

In this episode of Syntax, Wes and Scott talk with Ryan Dahl about Deno 2.0, its new features and use of web standards, and how it seamlessly integrates with popular frameworks like Next.js. Ryan shares insights on the motivations behind Deno’s creation, its emphasis on simplicity and security, and offers his take on the evolving JavaScript ecosystem. Show Notes 00:00 Welcome to Syntax! 00:34 What is Deno? 05:08 Deno 2.0 07:49 NPM compatibility 09:40 What parts of Node aren’t doable in Deno? 11:22 Do we need a hard break from Require? 13:51 Package management 16:25 Security and performance benefits of Deno 20:57 Brought to you by Sentry.io 20:57 Thoughts on Bun and Node additions 26:25 Ryan’s favorite Deno projects Lume Fresh webgpu-examples gpucraft minecraft clone + deno + webgpu gpucraft example Shaderplay Orillusion 28:42 Will we ever see a unified file system API? 31:49 Typescript 36:12 Jupyter Notebooks with Deno Polars 39:11 AI and WASM in JavaScript 42:01 Deno 2.0 features and future 43:08 Sick Picks & Shameless Plugs Sick Picks Ryan: McCarren Park Shameless Plugs Ryan: https://deno.com/enterprise Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

30 Elo 202444min

814: Fundamentals: HTML

814: Fundamentals: HTML

In this episode of Syntax, Wes and Scott talk about HTML fundamentals — from basic structure and semantics to practical tips for better accessibility and SEO. They also discuss the difference between block and inline elements, form functionalities, HTML5 elements like dialog and canvas, and more. Show Notes 00:00 Welcome to Syntax! 02:33 Brought to you by Sentry.io 03:25 Why HTML is important 06:52 Semantic vs non-semantic 07:58 The basic structure of an HTML page HTML elements reference The Main element 08:45 Doctype 15:24 Nav 18:47 Section 20:41 Aside 22:09 Article 22:54 Span 27:18 Why use a span when you have a div and a paragraph tag? 29:29 Figure and Caption 31:16 Fieldset 31:53 UL vs OL 32:44 DFN The Definition element 34:16 Form 36:56 Button vs Anchor 38:22 Headings 674 - A11y Treats - Heading Design 40:21 Output The Output element 41:46 Dialog 42:04 Tables 44:03 Media media-chrome 45:06 Canvas https://githubuniverse.com/ https://maximeheckel.com/ 46:07 On graphics programming 47:38 Search 354 - The Surprisingly Exciting World of HTML Elements 48:27 Sick Picks + Shameless Plugs Sick Picks Scott: 2Pack Traditional Natural Bamboo Wok Brushes Wes: Logitech MX Master 3S Shameless Plugs Syntax YouTube Channel The Easiest Way to Infinite Scroll with React | Full Example Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

28 Elo 202455min

813: CSS: Scroll Driven Animations

813: CSS: Scroll Driven Animations

In this episode of Syntax, Wes and Scott talk about CSS’ new scroll-driven animations, its implementation, uses, and potential pitfalls. They also discuss animation-timeline and animation-range, and how they can be utilized to control animations based on scroll positions. Show Notes 00:00 Welcome to Syntax! 00:46 Brought to you by Sentry.io. 01:35 Scroll-driven animations. Syntax 695: 5 New CSS Features You Should Know Scroll-driven animations demos and tools. 04:13 @keyframes. 05:22 animation-timeline. 11:35 animation-range. 08:49 View-based timelines. 17:45 Neat uses: Dave Rupert on styling :stuck. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

26 Elo 202421min

812: CSS 4, 5, and 6! With Google’s Una and Adam

812: CSS 4, 5, and 6! With Google’s Una and Adam

In this episode of Syntax, Wes and Scott talk with Una Kravetz and Adam Argyle from Google Chrome about the evolution of CSS, new features, and the push toward more advanced UI capabilities on the web. They discuss the introduction of CSS versioning, exciting new properties like text-box-trim, state queries, and scroll state functionalities, select, and more! Show Notes 00:00 - Welcome to Syntax!. 01:43 - Brought to you by Sentry.io. 02:19 - The evolution of CSS. 04:07 - CSS versioning and spec levels. CSS RFC. 17:49 - Use-cases for allow-discrete. 20:34 - State queries. 24:19 - Where does the baseline data come from? 25:17 - Will the RFC become official? The latest in Web UI (Google I/O ‘24). 27:33 - New features Una is excited about. 29:44 - Select. https://open-ui.org/components/customizableselect. https://codepen.io/argyleink/pen/YzoEPOG. 38:31 - New features Adam is excited about. 39:24 - text-box-trim. 40:59 - State queries. 54:56 - Sick Picks + Shameless Plugs. Sick Picks Una: Logitech MX Master 3 Adam: Teenage Engineering K.O. II Shameless Plugs Una: Una.im Adam: The CSS Podcast Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

23 Elo 20241h 2min

811: NodeJS Evolves

811: NodeJS Evolves

In this episode of Syntax, Wes and Scott talk about the latest features in Node.js, including native support for TypeScript, .env parsing, a built-in test runner, watch mode, SQLite integration, glob support, and top-level await. They also discuss some wishlist items, and experimental features like WebSocket support and the require module. Show Notes 00:00 Welcome to Syntax! 01:13 Brought to you by Sentry.io. 01:37 Node.js new features. Deno. Bun. 02:51 TypeScript. tsx. swc/wasm-typescript. 10:03 SQLite v22.5. 14:35 .env support. 16:24 Test runner. Jest. 19:42 Watch Mode. nodemon. 21:22 Glob support. 22:48 Top-Level Await. Top-level await is a footgun. 26:40 Experimental require module. Default ESM Detection. Web request standards. HonoJS. 29:39 Experimental WebSocket support. 30:13 Async local storage. 31:43 Single file executables. 32:46 Wishlist. 32:54 Hot reload. 34:20 Window shim. globalThis. 35:30 Better server. 35:56 Better terminal integration. NIM. styleText. chalk. warp. 41:36 Twitter responses. Coolify. n. 46:54 Sick Picks + Shameless Plugs. Sick Picks Scott: Cascadia Wes: Roborock Qrevo Shameless Plugs Scott: YouTube Channel Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

21 Elo 202455min

810: Effortless Light and Dark Mode × Theme Styling

810: Effortless Light and Dark Mode × Theme Styling

In this episode of Syntax, Wes and Scott talk about the latest CSS theming properties and techniques for better controlling light and dark modes, as well as creating comprehensive color systems for applications and websites. Make sure to check out the video version of this episode for practical code examples, and explanations of light/dark function, CSS variables, meta tags for theme colors, accent color, color mix, and upcoming features like style queries and color contrast. Show Notes 00:00 Welcome to Syntax! 01:36 Brought to you by Sentry.io. 03:45 theme-color. 10:12 color-scheme. 15:14 light-dark(). 17:44 How to force light or dark mode. 23:03 Live debugging box-shadow. 28:05 color-mix(). 29:53 accent-color. 31:27 Relative color syntax. 35:49 Style queries and color-contrast(). Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

19 Elo 202437min

Suosittua kategoriassa Politiikka ja uutiset

aikalisa
tervo-halme
rss-ootsa-kuullut-tasta
ootsa-kuullut-tasta-2
politiikan-puskaradio
rss-kuka-mina-olen
rss-podme-livebox
et-sa-noin-voi-sanoo-esittaa
otetaan-yhdet
rikosmyytit
rss-vaalirankkurit-podcast
viisupodi
rss-polikulaari-humanisti-vastaa-ja-muut-ts-podcastit
rss-merja-mahkan-rahat
lotta-paakkunainen
rss-aijat-hopottaa-podcast
rss-suoraan-asiaan
rss-se-avun-kysymyspodcast
rss-50100-podcast
rss-raha-talous-ja-politiikka