Syntax - Tasty Web Development Treats

Latest Episodes:

How to Get Past the Blahs and Finish Your Project Oct 03, 2022

Show notes

In this Hasty Treat, Scott and Wes talk about the ways they get unstuck when working on the last bit of a project to help push it over the finish line.

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.

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:26 Welcome
02:05 Sponsor: Linode
02:59 Sponsor: LogRocket
03:48 The last 10 percent
05:25 Break those things into Tasks
08:11 Just do it
09:10 Rewards
11:25 Be ok with good enough
14:21 Keep the end in sight
15:00 Do it “Quick a minute”

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 × Open Sauced With bdougie Sep 30, 2022

Show notes

In this supper club episode of Syntax, Wes and Scott talk with bdougie about his work on Open Sauced, thoughts on getting into open source development, and his live streaming set up.

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.

FireHydrant - Sponsor

Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics.

Get started at Firehydrant.com/syntax

Storyblok - Sponsor

Storyblok is a headless component-based CMS with a real-time visual editor. It offers the flexibility for developers to craft their perfect tech stack, but it also empowers content creators to make changes independently. The result is that every team has the freedom to quickly and easily create the ideal website with limitless extensibility. Other key features include robust Storyblok SDKs and APIs, powerful internationalization options, and an eCommerce-ready platform.

Show Notes

00:36 Welcome
01:52 Guest introduction
OpenSauced.pizza
@Bdougieyo on TikTok
bdougie on Twitch
Open Sauced on YouTube
bdougie on YouTube
Jamstack
Netlify
03:36 What was the inspiration for Open Sauced?
08:23 GitHub GraphQL API
13:22 What are your thoughts on GraphQL?
GraphQL
14:36 What is the T3 stack?
16:30 Sponsor: Hasura
17:53 What is the goal for Open Sauced?
Open Sauced Beta for Hacktoberfest
20:08 What is your focus with live streaming?
T3 Stack
Vite
The Primeagan on Syntax Episode 508
Octoverse
Hot Open Sauced Pizza
21:39 What hardware and software do you live stream with?
Rode Procaster
Wave XLR
GoXLR
OBS
25:26 Should adults be on TikTok?
30:31 How do you build an algorithm?
32:44 Sponsor: Storyblok
34:01 Supper club questions
Keychron K2
Warp
Ghostwriter from Replit
A first look at GitHub Copilot
Stable Diffusion
Fig
43:17 Sponsor: FireHydrant
44:36 Interviews with open source maintainers
45:55 How should maintainers get paid?
Patreon
GitHub Sponsors
Neovim
Vim Adventures
Lunar Vim
47:47 SIIIIICK ××× PIIIICKS ×××
51:34 Shameless Plugs

××× SIIIIICK ××× PIIIICKS ×××

bdougie: Warp

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

Wes’ New Soundproof Office Sep 28, 2022

Show notes

In this episode of Syntax, Wes talks through all the gear, renovations, and upgrades he’s made to his new home office. Lighting, soundproofing, desk, windows, 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.

LogRocket - Sponsor

Freshbooks - Sponsor

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

Show Notes

00:38 Welcome
02:24 Scouting a house with an office
03:54 Why didn’t you hire someone?
08:50 Goals for the office
10:30 Soundproofing
19:49 Decouple the ceiling
25:52 Sponsor: LogRocket
26:54 The door
33:23 Sponsor: Prismic
33:59 The desk
40:40 Cable management
47:12 Lighting
49:03 The room and windows
51:22 Flooring
55:12 Sponsor: Freshbooks
55:47 Things yet to be done
01:03:49 Costs
01:06:10 SIIIIICK ××× PIIIICKS ×××
Desk Haus Apex Pro Max
Alien Tape

××× SIIIIICK ××× PIIIICKS ×××

Scott: Pretend Podcast
Wes: Nano Tape

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

WTF Is Enhance Framework? Sep 26, 2022

Show notes

In this Hasty Treat, Scott and Wes talk about a new framework called Enhance. What is Enhance and how does it differ from other new frameworks like Astro?

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:27 Welcome
01:12 Sponsor: Sentry
02:06 Sponsor: Sanity
03:40 What is Enhance?
Enhance.dev
06:17 Singe file components

export default function HelloWorld({ html, state }) { const { attrs } = state const { greeting='Hello World' } = attrs return html` body { color: #222; } ${greeting} ` }

Astro
09:23 State and Props
14:01 CSS

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 × Arc Browser with Hursh Agrawal Sep 23, 2022

Show notes

In this supper club episode of Syntax, Wes and Scott talk with Hursh Agrawal of The Browser Company about Scott’s favorite browser, Arc. How do you make a browser in 2022? Will there be a Windows version? And who is the target market for Arc?

FireHydrant - 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. ⚡️

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

Show Notes

00:34 Welcome
HurshAgrawal.com
@Hursh
02:53 What is Arc and why create another browser?
Arc browser
The browser company
05:36 What is different about Arc?
08:20 Who is the target market for Arc?
09:30 Sponsor: Auth0
10:39 How do you make a browser?
13:38 Will there be a Windows version of Arc?
15:57 Where did the CMD-T functionality come from?
19:27 Sponsor: FireHydrant
20:39 How do you build on top of the Chrome engine?
24:17 How does The Browser Company make money?
27:26 Do you mess with the user agent?
29:05 Why do you require account set up to use Arc?
32:58 Sponsor: Gatsby
33:59 How did you come up with your theming engine?
36:15 Supper Club Questions
Warp
Hacker News
Changelog
Every
Ben Thompson Bundling and Unbundling
42:59 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Jabra speakerphone

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

The Productivity Episode Sep 21, 2022

Show notes

In this episode of Syntax, Wes and Scott talk through what they do to get things done - apps for to do list tracking, calendar blocking, and how they determine a productive day.

StoryBlok - Sponsor

LogRocket - Sponsor

Freshbooks - Sponsor

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

Show Notes

02:49 What is a productive day?
04:56 What’s an unproductive day?
07:43 Techniques for work
Getting Things Done
Eat That Frog
Height
14:57 Weighting tasks
18:29 Pomodoro technique
20:53 Sponsor: StoryBlok
22:46 The hard schedule
29:24 Blocking out distractions
Focus
Self Control
32:20 Sponsor: LogRocket
33:34 Tips We Have
42:55 Sponsor: Freshbooks
43:32 Software to help get things done.
Things
Todoist
Omnifocus
Transmit
Savvycal
Centered
Remarkable
56:21 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Scott: USB C Female to USB Male Adapter
Wes: Measuring tape

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

AI and Coding - Is Github Co-Pilot Worth It? Sep 19, 2022

Show notes

In this Hasty Treat, Scott and Wes talk all about GitHub Co-Pilot and whether it’s ethical, secure, worth it, gonna make you dumb, just going to get in your way, or the greatest thing for programmers to use.

Sentry - Sponsor

Sentry Dex conference is a free, one-day event to share best practices, epic fails, and seasoned insights on how to improve productivity.

From controlling chaotic workflows to maintaining stable code, there’s a lot that can drive a developer mad. We’re hosting DEX, the conference for developers by developers, to give us all a chance to come together and sort through that madness.

Sanity - Sponsor

Sentry Dex conference is a free, one-day event to share best practices, epic fails, and seasoned insights on how to improve productivity.

Show Notes

GitHub Copilot
Code Whisperer
00:29 Welcome
01:12 Sponsor: Sentry
02:06 Sponsor: Sanity
03:07 GitHub Co-Pilot is now paid
05:51 Is it ethical?
08:02 Is it secure?
10:16 Is it going to take our jobs?
13:34 Is it worth it?
16:21 Does it make you dumb?
17:53 Does it get in the way?

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 × Raycast with Thomas Mann Sep 16, 2022

Show notes

In this supper club episode of Syntax, Wes and Scott talk with Thomas Mann about Raycast - an app that can replace Spotlight on your Mac, and do so much more.

FireHydrant - Sponsor

Did we mention that FireHydrant is free? Get started at Firehydrant.com/syntax

Show Notes

@ThomasPaulMann
01:49 What is Raycast?
Raycast
Raycast Store
08:11 Do you have designers on your team to help guide UI?
10:13 Why build it native instead of HTML and CSS?
13:12 Why did you choose React?
21:54 How do you figure out what’s possible in system level APIs?
26:40 Snippets make use of SQLite
SQLite
29:05 Encrypted local storage data
33:11 Any plans for theming for Raycast?
35:20 What is the pricing model?
37:06 What was your Y combinator experience like?
Y Combinator
Careers
42:08 Any plans for future features?
44:08 Supper Club questions
Leopold FC660C Black 65% Dye Sub PBT Mechanical Keyboard
iTerm
Starship
51:25 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Nothing Ear Buds

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 Build an API in 2022 Sep 14, 2022

Show notes

In this episode of Syntax, Wes and Scott talk about what APIs are, the API standards that exist, and walk through the various layers of what goes into making an API.

Payments Hub - Sponsor

There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API!

LogRocket - Sponsor

Freshbooks - Sponsor

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

Show Notes

00:10 Welcome
02:40 What are APIs?
06:09 API Standards
13:56 What about GRPC?
15:52 What is TRPC?
19:19 Sponsor: Payments Hub
20:25 API Cake Layers
mySQL
Postgres
Mongo DB
SQLite
SQLizer
26:51 Server layer
33:28 Sponsor: LogRocket
34:36 Authentication layer
43:28 Caching layer
46:09 Sponsor: Freshbooks
46:38 Client layer
Prisma: Package, but also a service
keystone: Package
Strapi: Package
Sanity: Service
Prismic: Service
Hasura: Open Source and Service
Contentful
https://hygraph.com/
48:01 Should I use x or y?
51:35 Tools
GraphQL Playground
Graphiql
Postman
Insomnia
TablePlus
Studio3T
56:27 SIIIIICK ××× PIIIICKS ×××
00:20 Knife Talk

××× SIIIIICK ××× PIIIICKS ×××

Scott: Sharp Pebble
Wes: Laser level

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

Use Next-gen CSS Today (Post CSS Configs) Sep 12, 2022

Show notes

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

Sentry - Sponsor

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) {}