In this potluck episode of Syntax, Wes and Scott answer your questions about learning soft skills, using release notes, headless CMS, dealing with web components and scripts, what inet is, better ways to use ChatGPT, and more!

Show Notes

• 00:11 Welcome
• 01:42 Scott’s butt pincher
• Affenpinscher
• 06:08 You keep missing my favorite thing about Civet
• Civet
• 07:31 What soft skills can I learn to help me in my career?
• HTML, CSS and JS in an ADD, OCD, Bi-Polar, Dyslexic and Autistic World | CSS-Tricks - CSS-Tricks
• 12:42 Have you thought about release notes or a what’s new section?
• Conventional Commits
• How to generate Changelog using Conventional Commits | by Riccardo Canella | Jobtome Engineering | Medium
• 15:57 Can you explain headless CMS and what the use-cases/implementations are?
• 19:24 Any suggestions for dealing with web components and the client’s tracking scripts
• How to Read Flamegraphs 🔥
• Chromium F12 Profiler: The Main Thread Pane
• Agent Creation has a large CPU time · Issue #915 · bluesky-social/atproto
• 25:27 Why do we need .d.ts files in TypeScript?
• 30:15 What is inset in CSS?
• inset - CSS: Cascading Style Sheets | MDN
• 35:06 Is there a way to use AI/chat gpt to more quickly and easily understand technical documentation?
• Anthropic \ Home
• Getting Started 🚀 Astro Documentation
• ChatGPT Plugin - AskTheCode | GPTStore.ai
• ChatGPT Plugin - Scraper | GPTStore.ai
• Overview | TanStack Query Docs
• Custom instructions for ChatGPT
• 40:59 why is the following true: the string “undefined”.includes(undefined)?
• 43:27 How do you organize your code directories?
• 48:50 Is there any good reason in 2023 why we should still be loading JS files with all our script tags at the bottom of the body element?
• 54:32 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

• Scott: Surge power bar
• Wes: Little Hippo Alarm

Shameless Plugs

• Scott: Sentry
• Wes: Wes Bos Tutorials

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
• Wes Bos on Bluesky
• Scott on Bluesky
• Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about next generation CSS that you can use today with PostCSS including importing, nesting, variables, media query ranges, custom media queries, and more.

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.

Show Notes

• 00:27 Welcome
• 01:30 Sponsor: Prismic
• 02:54 Sponsor: Sentry
• 03:53 Do we use Post CSS?
• 05:22 Presets and plugins
• 06:19 Plugins we’re using

 "postcss-import"  @import './elements/headings.css';  

• 09:48 PostCSS Nested
• 12:59 Variables (Custom Properties)
• 15:50 Media Query Ranges
• PostCSS Media Minmax
• 17:16 Custom Media Queries

 "postcss-media-minmax"  @media screen and (width >= 500px) and (width <= 1200px)  

 "postcss-custom-media"  @custom-media --below_small (width < env(--small_bp));  @media (--above_small) {}  

• 18:35 Env Vars

 "postcss-env-function"  env(--small_bp)  

• 20:12 Color Function and Color Function Notation

 /* color-function */ p {   color: color(display-p3 1 0.5 0);   color: color(display-p3 1 0.5 0 / .5); }  

• Syntax 479: CSS Color Functions
• Post CSS Color Functional Notation
• Post CSS Preset Env

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

In this potluck episode of Syntax, Wes and Scott answer your questions about middleman for API fetching, when to introduce SvelteKit, generating PDFs serverside, trade offs of being an entrepreneur vs employee, and more!

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.

Auth0 - Sponsor

Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

• 00:18 Welcome
• 02:50 Is there a way to create a “middleman” to fetch data from an API once a day?
• Redis
• 06:53 Should I wait before introducing team members to SvelteKit?
• SvelteKit V1 issues
• 10:28 What options do we have for generating PDFs serverside?
• WKHTML to PDF
• Puppeteer
• PhantomJS
• html2canvas
• Generate Invoice Workers
• 15:47 Sponsor: Prismic
• 17:08 How do you say thank you to sponsors?
• 18:32 How would you compare the tradeoffs of working at a tech company vs. an agency vs. freelancing vs. entrepreneurship?
• 20:47 What’s the best way for an oldie like me to catch up?
• CSS Grid.io
• Modern CSS Layouts
• 26:08 I’m wondering what do you think about tRPC?
• trpc.io
• Create t3 app
• 29:00 Sponsor: LogRocket
• 30:03 PDF creator Cloudflare worker
• 32:50 How do you feel about keeping separate accounts for things like Twitter?
• 37:28 Does using prototypes mean you are not doing functional programming?
• 42:09 PHP vs JavaScript based CMS
• Ghost
• Keystone
• Strapi
• 45:15 Sponsor: Auth0
• 46:21 Why do you think this mindset that with age comes an inability to learn?
• Syntax 44 How to Learn New Things Quickly
• 51:32 Are there other payment providers you guys recommend or should I stick with Stripe and hope for the best?
• Stripe
• Paypal
• 56:10 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

• Scott: Literature and History
• Wes: Kitchen faucet

Shameless Plugs

• Scott: LevelUp Tutorials
• Wes: Wes Bos Tutorials

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

In this Hasty Treat, Wes and Scott talk about Package-lock, Angular, package updates, how to learn, and media servers on planes.

Sponsor - Sanity

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Sponsor - LogRocket

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

• 00:54 Luks of the past
• 03:19 Sponsor: Sanity
• 04:26 Sponsor: LogRocket
• 05:04 Has package-lock.json ever saved your bacon?
• 08:27 Why do you not talk about Angular?
• 11:28 How do you handle package updates?
• Wes Bos tweet on npm-update
• 17:43 How do you keep learning in your career?
• 21:02 How does the movie selection work on planes?
• Emby

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

In this episode of Syntax, Scott talks with Wes about moving Level Up Tutorials from React to SvelteKit — why he did it, how, benefits, things to watch out for, and more!

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.

Cloudinary - Sponsor

Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.

Show Notes

07:28 - Thoughts

• Apples to oranges, so unfortunately, no super legit ability to compare.
  • SvelteKit isn’t analogous with a custom React setup that uses CSR
    • SSR is usually going to be faster - we can ship less JS
    • Some big things changed beyond React → SvelteKit
      • Apollo → GFetch
      • Plyr → Vime
    • HLS starts grabbing chunks immediately, so it’s hard to get accurate load time and transfer.
• Whole conversion took a couple of months.
• Hardest part was making UI choices and changes, straight up converting components one by one wasn’t actually that tough

16:14 - Converting React components to Svelte

• useState becomes just a straight-up variable
• Graphql calls were hooks now just imported generated functions
• Remove extranous fragments
• Convert {things && } to {#if thing}{/if}
•  becomes 

24:06 - Spark joys

• State
  • Our checkout flow became way more transparent, way easier with Svelte stores
• Render flow
  • Was never something we needed to really think about. Didn’t think about memoizing, or worrying about too many renders down the line, just never needed to
• Overall developer experience
  • It’s honestly a joy to work in and I don’t want to go back
• Making a library
  • Package dir, new SvelteKit project, svelte-kit package
  • I made svelte-toy - https://github.com/leveluptuts/svelte-toy
  • svelte-element-query - https://github.com/leveluptuts/Svelte-Element-Query
  • svelte-simple-datatable fork
• Creating a sitemap was extremely easy, because of server-side routes. file.returnformat.ts ie sitemap.xml.ts
• CSS without a css-in-js library for scoping is a dream. CSS props are now 100% via CSS variables using the https://svelte.dev/docs#style_props
• Animations are all done with Svelte’s internal animations lib

32:45 - Hosting

• adapter-node
• Hosted on render.com as a straight-up node process $7/m for more than enough RAM and CPU,
• Lots of other options for static, Vercel, workers whatever, I like having just a straight-up node app you can host anywhere

35:50 - Things to do

• Admin tools
  • Pancake lib for charts

37:00 - Challenges

• ESM is not always smooth sailin
  • Import has from ‘lodash/has’ didn’t working in dev, but import has from ‘lodash/has.js’ didn’t work in prod.
    • Solution was to use lodash.has as the dependency
    • Apollo included all React as a dep unless you import from @core
• TS is great, but there was once where I wanted to define the entire props ts object for a spread prop, but was not possible
• Drag animations

Cloudinary

42:46 - Wes’ questions

• What about the ecosystem?
• What about forms + DOM data?
• Serverless functions?
• Do you always bind to state? Or just access directly?

 formData = writable({   title: "yo" })  {$formData.title}    

• Is it stable?
• Deno - Snel

Links

• https://leveluptutorials.com/
• https://vitejs.dev/

××× SIIIIICK ××× PIIIICKS ×××

• Scott: The Skeptics Guide To The Universe Podcast
• Wes: Pressure Washer Nozzle

Shameless Plugs

• Scott: Web Components 101 - 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

In this Hasty Treat, Scott and Wes talk about technical debt — what it is, why does it occur, and some techniques for reducing and avoiding it.

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.

Show Notes

03:17 - What is technical debt

• Outdated or hard to update code
• If you groan when you have to work on it, it might be a sign of technical debt
• Brittle code, easily breakable
• Quirks and features

06:55 - Why does it occur

• Over time, any garden left un-pruned will become overgrown
• Many people, many code styles
• Using hot new frameworks / techniques
  • This is why seasoned developers don’t jump on new things
• You allow users to do literally anything

13:18 - Techniques for avoiding it

• Deny your FOMO of new things
• Abstract
• Write good tests
• Don’t put off refactors
• Update dependencies frequently
• Good standards
  • Etsy has thousands of devs

20:08 - Examples in the real world

• Airline websites open in new windows all the time
• Cellphone carrier flashes the screen 100x

22:15 - Unfixable technical debt

• Agency work sometimes

Links

• Next
• React Router
• TailwindCSS
• Redux
• Etsy
• Dave Ramsey

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

In this episode of Syntax, Scott and Wes talk about headless content management systems — why you might want to use one, things you should take into account, and more!

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.

Show Notes

02:38 - What and why

• A headless CMS doesn’t mean you have to use a static site generator
• A headless CMS has an API:
  • REST
  • GraphQL
  • GROQ
• A headless CMS can pipe its content into:
  • Static Site on build - like Gatsby
  • An app on run/refresh
  • An existing website - widget
• What makes a CMS? Do you need a UI?
• What is the threshold?
• Is a hotdog a sandwich?
• Things to think about when choosing an API
  • Auth - Rules + roles + levels
• How easy is it to create new data types?
  • Is it code or UI?
  • Can my mom use it?
• Can you create one-off content types? (e.g. settings pages)
• Custom workflows
  • dRafts, revisions, roll backs
• How are images handled? Do you need another service for that?
• Pre-determined UI
  • Is custom UI possible?
  • Two-way relationships?
  • Tags?
• Data validation?
  • UI + API?
• Hosting?
• Pricing?
• Content movability?
  • Can you get your data out?
  • Schemas
  • Users
  • Revisions
• CORS or realtime API?
• APIs
  • Can you insert data via the API? (or just pull)
  • Node API
  • Importing data

24:37 - Hosted

• Sanity
• Prismic
• Contentful
• Dato CMS
• Storyblok
• 8Base
• Agility CMS
  • Seems to be making a big corporate play

36:59 - Self-Hosted

• WordPress
  • WordPress REST API
  • GraphQL API
  • WP GraphQL
  • Advanced Custom Fields for custom UI
  • Most things in WordPress are custom post types and taxonomies, so data from plugins can often be surfaced
  • The theme UI from plugins is often lost
• Drupal
  • contentacms.org
• Craft CMS
• Ghost
• Strapi
• Keystone
• Joomla (JK!)

44:33 - API (BYOUI)

• Hasura
• Prisma
• Firebase

47:37 - Git Based

• Netlify
• Forestry

50:30 - Other

• Google Sheets
  • Sheety
• Airtable
• Tina CMS
  • Not a CMS
• Markdown under the hood
• Notion

Links

• https://twitter.com/wesbos/status/1254772936935739393
• Pixel & Tonic
• GraphCool
• GraphCMS
• Sapper

××× SIIIIICK ××× PIIIICKS ×××

• Scott: DEWALT Random Orbit Sander
• Wes: Shelf Brackets

Shameless Plugs

• Scott: New course on Sapper - Sign up for the year and save 25%!
• Wes: Wes’ YouTube Channel

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

It's a Potluck episode - you bring the questions and we turn them into tasty treats.

DeployHQ - Sponsor

DeployHQ is the easiest way to deploy websites to your servers. Invite your team and set up automated deployment processes to:

• Compile a production build of your assets
• Deploy securely to servers behind VPNs and firewalls
• Execute SSH commands
• Manage and upload your config files
• Preview and schedule deployments
• Track and monitor your deployments in real-time

Deploy to multiple servers at the same time, whether that be your own server via FTP/SSH, or an Amazon S3 bucket. You can even start deployments automatically whenever you push!

Instant setup for repositories hosted on GitHub, Bitbucket, GitLab and Codebase, plus realtime notifications in your favourite chat services like Slack or HipChat.

To get 50% off your first 6 months, head on over to deployhq.com/syntax. The first 25 listeners to deploy successfully will receive a FREE branded mug or t-shirt!

Fluent Conf - Sponsor

Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers.

Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences.

Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX

Submit Your Questions Here

Show Notes

02:44

• What are your thoughts on Vue.js?
• VuePress
• Nuxt

6:20

• What are your thoughts on Typescript and Flow?
• Typescript
• Flow

10:45

• What was your biggest breakthrough in Programming?
• Nude.js

20:00

• Any tips, tools and tricks to avoid procrastination
• The productivity episode
• Sort by anxiety
• Eat That Frog
• Todoist

25:00

• Thoughts on CMSes? Headless? Database Driven? Static Site Generator?
• Headless WordPress
• Gatsby

34:00

• How can I start creating and selling courses?

40:00

• How did you two become renown in the developer community?
• We don't think we're renown :)
• YouTube Ad Revenue is poor

46:00

• Server Side Rendering with JavaScript Apps

53:00

• Is Yeoman still a thing?

×SICK×PICKS×

• Scott: Eat That Frog
• Wes: DevDocs.io PWA

Shameless Plugs

• Vue.js for Everyone
• Wes' Course
• SMASH that Subscribe Button on Wes' YouTube

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