Syntax - Tasty Web Development Treats

Latest Episodes:

Syntax Highlight Feb 02, 2022

Show notes

In this episode of Syntax, Scott and Wes review your portfolios and websites including some from Harryxli, Austin Baird, Jacks Portfolio, and more!

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.

Tabnine - Sponsor

Tabnine is your teams' go to AI assistant. Using a variety of machine learning models, Tabnine learns from your team's best practices, and suggests code completions based on your code.

It supports over 30 languages and is available in most IDEs. Tabnine's universal models are trained strictly on fully permissive open source code, and can run locally, meaning that your code stays yours.

Get the free version at tabnine.com/now or go to tabnine.com/promo/syntax to get 50% off your first 3 months of Tabnine Teams.

Show Notes

00:11 Welcome
01:05 This chapter is mid
Wes does TikTok
04:28 Harry xli
Harryxli
15:00 AustinBaird.software
AustinBaird.software
19:45 Sponsor: Linode
21:10 ognjenbostjancic.com
ognjenbostjancic.com
28:19 ndo.dev
ndo.dev
35:37 Sponsor: LogRocket
37:02 jacksportfolio.com
JacksPortfolio.com
41:51 einargudni.com
einargudni.com
43:22 Kids advert break
46:05 Back to einargudni.com
48:24 Sponsor: Tabnine
50:41 cyrillappert.ch
hslu.cyrillappert.ch
54:30 Sick Picks
59:02 Shameless Plugs

××× SIIIIICK ××× PIIIICKS ×××

Scott: The Alpinist (2021) - IMDb
Wes: Instant Pot Air Fryer Lid

Shameless Plugs

Scott: Astro Course - Sign up for the year and save 50%!
Wes: All Courses

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

Teamwork Makes The Dream Work Jan 31, 2022

Show notes

In this Hasty Treat, Scott and Wes are inspired by a Reddit post to talk about how to work better with your team.

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:24 Welcome
01:57 Sponsor: Sentry
03:26 Sponsor: Sanity
04:48 Summary of the Reddit post
06:46 We are a team
09:05 Coding with ego
12:32 Follow the leader
13:59 Getting better at asking questions
15:01 Ask for clarity
15:43 Understanding the guidelines
18:12 Interpersonal tips
19:49 Celebrating wins

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

Monorepos! Workspaces, pnpm, turborepo + more! Jan 26, 2022

Show notes

In this episode of Syntax, Scott and Wes talk all about monorepos - the why's and the how's of using them on your projects.

Kontent by Kentico - Sponsor

Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.Spin up a new project today and discover Kontent.

LogRocket - Sponsor

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

00:11 Welcome
01:46 Our experiences with monorepos
05:04 Why use monorepos?
09:37 How long have we been using monorepos?
10:16 Tools for starting a monorepo
pnpm
Nom link
16:22 Sponsor: Kontent by Kentico
17:33 What's the process for managing libraries?
20:10 Installing / uninstalling things
21:07 Shared dependencies
27:45 Sponsor: LogRocket "ui:dev": "pnpm recursive run dev --filter @leveluptuts/ui", "update": "pnpm recursive up -L -i"
29:23 Turborepo
Turborepo
39:32 nX
nx
45:38 Sponsor: Freshbooks
46:32 Lerna
Lerna
48:09 Rushjs
Rushjs
52:35 Sick Picks
59:17 Shameless Plugs

××× SIIIIICK ××× PIIIICKS ×××

Scott: Wyze v3, 10 micro sd
Wes: Tineco A11 Vaccum

Shameless Plugs

Scott: Astro Course - Sign up for the year and save 50%!
Wes: All Courses

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

Updating Project Dependencies Jan 24, 2022

Show notes

In this Hasty Treat, Scott and Wes talk about their process for updating project dependencies.

Sponsor - LogRocket

Sponsor - MagicBell

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 Weeeeelcome
00:52 Sponsor: LogRocket
01:29 Sponsor: Magic Bell
03:32 What are dependancies?
04:04 Wes updates all the things
05:30 How to check if there are any updates
07:05 Upgrade isolated, Minor deps first.
09:16 Upgrade Minor groups after that
09:56 Then upgrade Major dependencies
14:47 Finally upgrade any stand along dependencies
15:44 Test test test
16:19 Watch error logging
17:05 Pray

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

New Year, New You. What to Focus on in 2022. Jan 19, 2022

Show notes

In this episode of Syntax, Scott and Wes talk through what to focus on at a beginner, intermediate, and advanced levels of coding skills.

Sentry - Sponsor

Linode - Sponsor

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:30 Semantic HTML
07:36 JavaScript Data
08:54 Issues & technical workflow
11:40 Emailing People
Syntax 117: How to Email Busy People
13:49 Make something animated with CSS
Open Props Style
16:04 Make a full stack contact form in a framework
16:52 Sponsor: Sentry
18:59 CSS Variables
22:36 Server Side fundamentals
24:28 Meeting Skills
28:36 Help organize a codebase or repo.
30:26 Make something animated with JS
31:40 Write a bot
33:35 Sponsor: Linode
34:51 Write CI / CD actions / tools
37:55 Advanced Typescript
38:32 Teach at your company
39:35 Speak at a conference
40:45 Make something 3D
Frame 3D
React 3 Fiber
Svelte Cubed
42:03 Scrape and write something to collect data
44:15 Sick Picks!
48:43 Shameless Plugs

××× SIIIIICK ××× PIIIICKS ×××

Scott: 14 Peaks: Nothing Is Impossible - Netflix
Wes: Booty Slippers

Shameless Plugs

Scott: Astro Course - Sign up for the year and save 50%!
Wes: All Courses - Black Friday sale!
Psychology of Devx
Gitpod Community
Workshops as Code
Ghuntley.com

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 + JS Hacks We’re Fine With Jan 17, 2022

Show notes

In this Hasty Treat, Scott and Wes talk about CSS + JS Hacks that they're ok with using.

Sponsor - Freshbooks

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

Sponsor - Sentry

Show Notes

00:53 What are the things in web dev, that feel wrong or hacky when starting out, but are actually totally accepted to do?
02:09 Sponsor: Sentry
03:12 Sponsor: Freshbooks
05:32 Negative margins in CSS
07:53 Not Passing a radix to parseInt()
10:17 -50% translation 50% direction
11:27 Overwriting Arguments in a function
13:20 non-standard-element
17:26 Button must have a type
18:56 Triangles out of borders
20:40 Overflow:hidden to clear a float
20:55 Always pass noopener to links!
22:16 Inline styles

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 Jan 12, 2022

Show notes

In this episode of Syntax, Scott and Wes answer your questions on a Potluck episode of Syntax.

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.

Retool - Sponsor

Retool is the fast way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.

retool.com/syntax

LogRocket - Sponsor

Show Notes

00:11 Intro
01:10 Watching movies with kids
02:49 How do you protect images on your website?
07:21 How did you guys learn Typescript?
13:26 Should I worry about learning Typescript now or stay focused on mastering JS first?
18:16 Sponsor: Prismic
20:03 How do you decide what to learn?
26:26 I want to become full stack and learn a backend language, which one should I choose?
28:07 Do Svelte components not support media queries?
29:30 Any advice or suggestions on how to approach Auth or Payment?
32:53 Sponsor: LogRocket
33:59 Any experience working with a team on a different time zone?
42:49 Do you have any experience or recommendations for introducing prettier late in a project?
48:57 What are your thoughts on monorepos?
52:57 Sponsor: Retool
55:14 What does it mean to know JS?
59:39 What would you do if you had to start over?
03:49 Sick Picks
07:09 Shameless Plugs
Paw Patrol Movie
Encanto
Luca
Tweet: When should a JR dev learn typescript?
Typescript Handbook
Selling and Shipping T-Shirts with Typescript
Svelte Kit
Remix
Height
Clocker
iState Menus
Turborepo
Nx

××× SIIIIICK ××× PIIIICKS ×××

Scott: Learning Differently
Wes: Truff Hot Sauce

Shameless Plugs

Scott: Astro Course - Sign up for the year and save 50%!
Wes: All Courses - Black Friday sale!
Psychology of Devx
Gitpod Community
Workshops as Code
Ghuntley.com

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

Remix! Jan 10, 2022

Show notes

In this Hasty Treat, Scott and Wes talk about Remix!

Sponsor - Sanity

Sponsor - Sentry

Show Notes

00:32 Rrrremix Remix
02:03 Sponsor: Sentry
03:48 Sponsor: Sentry
05:51 What is Remix?
07:51 Built on Fetch
12:28 Frameworks are getting so good
13:30 Data loading
14:36 Actions
19:09 Error boundary and catch boundary differences
20:15 Differences between Remix and Gatsby, and other SSG
21:33 What about hot reloading?
22:47 Nested layouts and nested routes
24:25 Typescript support
26:33 Hosting anywhere
Remix Docs
Remix on GitHub
Remix on Twitter
Remix on 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

2022 Predictions Jan 05, 2022

Show notes

In this episode of Syntax, Wes and Scott talk through their predictions for 2022.

LogRocket - Sponsor

Hashnode - Sponsor

Everything you need to start blogging as a developer. Own your content, share ideas, and connect with the global dev community! Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community.

Hashnode: Everything you need to start blogging as a developer!

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

00:11 Welcome...
01:31 Svelte is king
Svelte
Svelte Kit
03:57 Next.js
Next.js
Next.js Live
06:40 Web components
Open UI
Syntax 353 Stylin the Unstylables
11:42 Rust popularity
Rust
Rome
15:58 Sponsor: LogRocket
17:12 Serverless and Cloud Functions
18:19 Cloudflare becoming a major player
Cloudflare Pages
20:05 Tailwind
Tailwind
Open Props
24:10 Glow Up
24:35 Next gen dev tools
OhMyZsh
Warp
Fig
iTerm
Starship
27:32 Sponsor: Hashnode
29:48 CSS Container queries, Layers, and More!
31:45 GraphQL
34:13 Deno
Deno
37:41 Typescript
43:36 Server come back
45:13 Sponsor: Freshbooks
46:02 Checkouts and payment processors
Wise
51:30 Temporal API
53:20 Remote Dev / Thin Client
55:16 Sick Picks
00:16 Shameless Plugs

××× SIIIIICK ××× PIIIICKS ×××

Scott: A Show About Animals
Wes: Wise

Shameless Plugs

Scott: Astro Course - Sign up for the year and save 50%!
Wes: All Courses - Black Friday sale!
Psychology of Devx
Gitpod Community
Workshops as Code
Ghuntley.com

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

JS One Liners Jan 03, 2022

Show notes

In this Hasty Treat, Scott and Wes talk about some Javascript one liners that speed up your coding experience in one line.

Sponsor - Linode

Sponsor - Sentry

Show Notes

00:24:12 Welcome
01:24:11 Sponsor: Linode
02:11:02 Sponsor: Sentry
03:54:18 Twitter ask for One Liners
04:24:05 Math random const getPsuedoID =() => Math.floor(Math.random() * 1e15);
05:43:09 Random color
Paul Irish random color '#'+Math.floor(Math.random()*16777215).toString(16);
06:41:06 Console.log as an object. console.log({ dog, person }); VS Marketplace Link
08:29:17 Edit anything document.designMode = "on"
10:15:15 Temporal date export const today = Temporal.Now.plainDateISO();
11:44:05 Console(log) const myFunc = (age) ⇒ console.log(age) || updateAge()
13:26:13 Remove a prop const { propToRemove, ...rest } = obj;
15:29:01 PHP style debugging preElement.innerText ={JSON.stringify(val, '', ' ')}`
16:31:00 First and Last Destructure var {0: first, length, [length - 1]: last} = [1,2,3];
17:34:17 Speed up audio video document.querySelector('audio, video’).playbackRate = 2
Overcast
19:44:15 Sleep function let sleep = (time = 0) => new Promise(r => setTimeout(r, time))
20:26:00 If statements on one line If (!thing) return 'something'

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 TOPPODCAST Picks

Follow Us

Stay Connected

Syntax – Tasty Web Development Treats

Related Podcasts

Links

Stay Connected