Syntax - Tasty Web Development Treats

Latest Episodes:

Job Types Agency, Tech, Startup, Entrepreneur VS Tech company VS In House Aug 17, 2022

Show notes

In this Hasty Treat, Scott and Wes talk about their thoughts on the different types of tech jobs you can get, and the pros and cons of each style of job in tech.

Lightstep Incident Response - Sponsor

Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident.

Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/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:10 Welcome
01:47 The types of jobs
Wes’ tweet about developer jobs
03:02 Our experiences
05:58 Tech company
09:46 Freelancer or Entrepreneur
11:14 What are the pros of working at a agency?
18:38 Cons to agency life
26:19 Sponsor: Lightstep Incident Response
27:49 Pros of tech company jobs
30:47 Cons of working at tech companies
37:46 Sponsor: Freshbooks
38:51 Pros of in house tech jobs
46:01 Cons of tech work
51:29 Sponsor: LogRocket
52:28 Pros of freelance or entrepreneur
57:20 Cons of entrepreneur life
00:03 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Wes: Soap pump
Scott: Pro breaking tour

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

CSS Proposals @when, CSS Masonry, Carets Aug 15, 2022

Show notes

In this episode of Syntax, Wes and Scott talk about proposals to CSS including @when, CSS Masonry, CSS Caret, ENV Vars, and Media Query Ranges.

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.

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.

Show Notes

00:11 Welcome
00:58 Sponsor: Sentry
02:17 Sponsor: Sanity
03:32 CSS @when and @else
CSS When and Else

@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) { /* A */ } @else supports(caret-color: pink) and supports(background: double-rainbow()) { /* B */ } @else { /* C */ }

05:42 CSS Grid 3 Masonry
CSS Grid

.grid { display: inline-grid; grid: masonry / repeat(3, 2ch); border: 1px solid; masonry-auto-flow: next; }

David Desandro
Rachel Andrew
09:00 CSS Caret
CSS Caret
10:32 CSS Nesting
CSS Nesting
Syntax 343 CSS Nesting
Postcss-preset-env
13:14 ENV Vars
ENV Variables
14:58 Media Query Ranges
MDN Media Queries @media (width < env(--small_bp)); @media (100px < width < 1000px);

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

Supper Club × Headless Ecommerce with Shopify’s Josh Larson Aug 12, 2022

Show notes

In this supper club episode of Syntax, Wes and Scott talk with Josh Larson from Shopify about headless ecommerce, including Hydrogen from Shopify, how integrations work with Shopify, and what the tech stack is behind Hydrogen.

Hasura - Sponsor

With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn.

Lightstep Incident Response - Sponsor

Show Notes

00:38 Welcome
01:12 Guest introduction
03:16 What is Hydrogen from Shopify?
Hydrogen
Shopify Oxygen
11:23 Why would you want to go headless?
15:26 Sponsor: Hasura
16:56 Where does custom logic fit?
18:45 What is the stack behind Hydrogen?
24:16 Sponsor: Lightstep Incident Response
25:33 How much code is JavaScript vs React?
33:43 How do integrations work?
38:28 Supper Club Questions
In Bed By 7pm VS Code Theme
Zsh
Hyper
Laravel
Vite
Cloudflare Workers
Rust
Rust for JS
48:10 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

The Story Of by Vice

Shameless Plugs

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

Potluck - API Fetching × PDF Creation × tRPC × Stripe vs PayPal Aug 10, 2022

Show notes

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

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

Browsers, Engines, Support and the Other Guys Aug 08, 2022

Show notes

In this Hasty Treat, Scott and Wes talk about the various web browers that might show up in your analytics and whether you need to worry about supporting them or not.

Sentry - Sponsor

MagicBell - Sponsor

MagicBell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.

Show Notes

00:25 Welcome
01:19 Sponsor: Sentry
02:29 Sponsor: MagicBell
03:51 Big browsers and their engines
05:29 Cloaked browsers
08:16 What’s so great about Arc?
Arc
11:33 JavaScript engines
13:30 iOS Browsers
Open Web Advocacy
15:07 Android browsers
18:04 The rest of the browsers
19:24 Tor browser
20:20 Opera mini
22:48 UC browser
23:42 Opera mobile
24:57 KaiOS
26:26 Ringtone memories

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

Supper Club × Lee Robinson on React Suspense, Server Components Aug 05, 2022

Show notes

In this supper club episode of Syntax, Wes and Scott talk with Lee Robinson from Vercel about React Suspense, server components, the edge, and more!

Lightstep Incident Response - Sponsor

Gatsby - Sponsor

Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit gatsby.dev/syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️

Show Notes

00:35 Welcome
01:34 Guest introduction
LeeRob.io
Vercel
02:25 Syntax hosted on Vercel
04:08 What is suspense?
06:50 Benefits of selective hydration
13:15 Sponsor: Lightstep Incident Response
14:24 How does suspense know you’re doing something inside of it?
18:02 How does this connect to server components in React?
22:00 How do we use this in NextJS?
24:32 NextJS routing future
Layouts RFC
33:11 Will I ever be able to use web components inside NextJS?
36:12 Sponsor: Gatsby
37:14 What’s happening with the Edge?
Edge Runtime
47:37 What should we use for databases?
50:39 Supper Club dessert questions
OhMyPosh
Hyper
Warp
Svelte
Hackernews
Reddit
58:57 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

AirPods

Shameless Plugs

Careers at Vercel

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

Our Web Dev Wish List Aug 03, 2022

Show notes

In this episode of Syntax, Wes and Scott talk through their web dev wish list of things they want to just work already!

Linode - Sponsor

Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.

Sentry - Sponsor

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax

Show Notes

00:11 Welcome
02:20 Write Custom animation transitions
03:32 date input translate to JavaScript date
06:48 Smooth and animated drag and drop
08:35 TypeScript Interfaces are faster than Types
10:35 Request animation frame
12:52 Custom Elements / Web Components
13:52 Authentication
Web Authentication API
16:12 Sponsor: Linode
17:48 useIsomporphic vs useLayoutEffect
19:48 useEffect dependency array
21:27 fragments without fragments
24:46 Overflow hidden without hiding shadows
27:11 Fluid text
28:52 Sponsor: Sentry
29:34 translate3d vs translate
30:59 Gradient borders
33:33 Independent transforms
36:16 animate height auto
38:40 Sponsor: Freshbooks
39:02 Auto synced deps when changing package file
40:36 Peer dependencies
42:32 VS Code Reload after plugins install is kinda annoying
43:04 Safari updates
44:20 Apps checking for passwords
45:02 File name casing as changes
45:56 Better sounding commit names
46:33 Test runner that is the same and just works
47:32 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Scott: Arc browser / Video
Wes: Battery powered glue gun

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

How to Spark your Imagination and Get Excited about Coding Aug 01, 2022

Show notes

In this Hasty Treat, Scott and Wes talk the appreciation of coding projects that supposedly serve no purpose, but can be great ways to learn something new.

LogRocket - Sponsor

Linode - Sponsor

Show Notes

00:39 I am excited about coding
02:40 Sponsor: LogRocket
03:58 Sponsor: Linode
04:24 Projects that serve no purpose
Bookit
05:46 Scratching your own itch
10:06 Discount finder
11:20 Webcam or audio manipulation
12:43 TTFS
Parcel
Vite

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

Supper Club × Syed Balkhi and WordPress Jul 29, 2022

Show notes

In this supper club episode of Syntax, Wes and Scott talk with Syed Balkhi about his experiences blogging and developing plugins in the WordPress ecosytem.

Hasura - Sponsor

Sponsorname - Sponsor Show Notes

00:32 Welcome
01:52 Guest introduction
WPBeginner
WP Beginner YouTube
CSS Tricks
Smashing Magazine
04:33 What tips do you have for blogging and audience building?
AnswerthePublic
09:09 How do you manage so many people?
13:07 What was your background before this all got big?
13:43 Sponsor: Hasura
15:01 How do you design your products?
18:40 YouTube, TikTok, and video
25:12 Why the WordPress hate?
29:03 What types of websites are being created in WordPress?
Easy Digital Downloads
WooCommerce
MemberPress
34:13 Sponsor: Lightstep Incident Response
35:26 What schools are you building?
Balkhi Foundation
Pencils of Promise
40:51 Supper Club questions
Copyhackers
Swiped
Uncanny Automator
53:07 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

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

Potluck! Node Versions, Old Man Internet, Responsive Design + MORE Jul 27, 2022

Show notes

In this Potluck episode of Syntax, Wes and Scott answer your questions about resolving node version errors, using social media, bundler for building React component, and how does Syntax get made?

Prismic - Sponsor

Sentry - Sponsor

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax

Show Notes

OhMyPosh
OhMyZ.sh
Warp
02:34 How do you resolve errors when starting up a project with npm that you haven’t touched in awhile?
07:50 Any advice for using social media to network?
16:44 What bundler are you reaching for when building a React component library?
tsdx
Vite
18:37 Do you have experience with optimizing third party scripts like Google Analytics?
Partytown
21:37 What’s your opinion on a “offline-first” mentality?
PouchDB
CouchDB
Supabase
MongoDB Realm
25:09 Sponsor: Prismic
26:48 How do you make web components with Svelte?
Build web components in Svelte
Using custom elements in Svelte
30:35 When talking about “responsive” web design do people generally mean using flexbox or grid?
Responsive Design at 10
Responsive Web Design
A Book Apart - Responsive Web Design
35:24 Sponsor: Sentry
36:53 Do you have any tips for staying in React-land for just spinning up a fresh site quickly?
40:47 Who or what helps you produce and distribute the podcast?
Lemon Productions
Chris Enns on Twitter
46:08 Should a majority of _lodash functions be considered deprecated follow up
48:18 Sponsor: Freshbooks
48:52 Do you have any tips or tricks to deal with backend data date issues?
52:23 Is the “col” system the peak of how we handle CSS, or should we start using more built-in functions?
55:25 Why you you need CSS Color Functions at runtime instead of just pre-calculating these values once as a build step using LESS or SASS?
58:58 SIIIIICK ××× PIIIICKS ×××
03:12 Shameless Plugs