Syntax - Tasty Web Development Treats

Latest Episodes:

OG Image Options Aug 28, 2023

Show notes

In this Hasty Treat, Scott and Wes talk about OG images, interesting ways you can work with them, and ways you can work dynamically with them.

Show Notes

00:11 Welcome
02:18 What are OG images?
06:19 Testing OG images
Polypane, The browser for ambitious web developers
Meta Tags — Preview, Edit and Generate
Sharing Debugger - Meta for Developers
Card Validator | Twitter Developers
08:27 Creating an OG image
vercel/satori: Enlightened library to convert HTML and CSS to SVG
Open Graph (OG) Image Generation | Vercel Docs
Introducing OG Image Generation: Fast, dynamic social card images at the Edge – Vercel
09:41 Dynamically generating OG images
wesbos.com/thumbnail/?thumbnail=%2Fstatic%2F0005c028a536c87975eb84ae3d32ae57%2Faeron.jpg&title=Uses&url=https%3A%2F%2Fwesbos.com%2Fuses
21:16 Using Puppeteer
Puppeteer | Puppeteer
Puppeteer · Browser Rendering docs
Cloudinary - Image and Video Upload, Store ad Monetization
Fast and reliable end-to-end testing for modern web apps | Playwright
28:47 Canva API
Build The Tools Behind Great Design | Canva Developers

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

Supper Club × Make React 70% Faster! Million.js with 18 Year Old Aiden Bai Aug 25, 2023

Show notes

In this supper club episode of Syntax, Wes and Scott talk with Aiden Bai about his work on Million.js that aims to make React a lot faster. How does Million.js make React faster? And most importantly: has Aiden ever used a VCR?

Show Notes

00:35 Welcome
00:57 Introducing Aiden Bai
Aiden Bai
aidenybai on GitHub
@aidenybai on Twitter
Aiden Bai on YouTube
Million.js
01:57 What is Million.js?
03:20 How does React do rendering now?
04:31 How does Million.js make it faster?
07:37 What goes into creating a compiler?
08:24 How do you go from learning JavaScript to writing compilers?
11:05 Wyze WebRTC stream work
13:13 What are you using to benchmark and test?
solidjs.com
js-framework-benchmark
xkcd: Compiling
18:19 What does a slowly rendering site look like?
23:54 How do you handle find on page with large amounts of code?
25:32 What does 70% faster with Million.js mean?
Hyper™
Warp: Your terminal, reimagined
26:44 Why are maps slow?
Supper Club × WASM, Fastly Edge, and Polyfill.io with Jake Champion — Syntax Podcast 643
28:19 Benefits of the Macro API
31:12 Does Million.js work across the board?
33:03 Does it ever break projects? How do you test Million.js?
35:35 How do you keep up on your GitHub issues?
37:40 What other areas of tech are you interested in working on?
partytown
39:32 What was the inspiration for your website?
43:52 Supper Club questions
Gruvbox with Material Palette
iTerm2 - macOS Terminal Replacement

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Million Kitchen Sink

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

Rust for JS Devs — Part 2 Aug 23, 2023

Show notes

In this episode of Syntax, Wes and Scott jump into part 2 of their look at Rust for JavaScript developers, including variables in Rust, type systems in Rust, signed and unsigned integers, and more.

Show Notes

00:10 Welcome
00:43 Audio issue bugs
03:17 Building decks
06:06 Variables in Rust
Syntax 647: Rust for JavaScript Developers - Node vs Rust Concepts

let x = 5; // x is immutable let mut x = 5; // x is mutable const MAX_POINTS: u32 = 100_000; // must be defined at compile time

10:42 Type System in Rust
15:52 Types in Rust
19:06 Why does Rust have signed and unsigned integers?
23:35 Slicing strings with &str
27:35 enum
27:55 struct
28:19 Vec
29:33 HashMap and HashSet
33:00 Converting Signed to Unsigned Numbers

let unsigned_value: u8 = 200; let signed_value: i8 = unsigned_value as i8;

36:12 What’s up with &str?
43:31 Rust error messages
45:28 What is a Struct?

struct User { username: String, email: String, sign_in_count: u64, active: bool, } // You can create an instance of a struct like this: let user1 = User { email: String::from("someone@example.com"), username: String::from("someusername123"), active: true, sign_in_count: 1, }; impl User { fn login(&mut self) { self.login_count += 1; } }

49:17 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Scott: Thermacell Patio Shield
Wes: Magnet Phone Mount

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

8 Tricks When Using the Fetch() API Aug 21, 2023

Show notes

In this Hasty Treat, Scott and Wes talk about 8 tricks to try when using the Fetch() API.

Show Notes

00:23 Welcome
02:14 1) Stream The Result

// Create a new TextDecoder instance const decoder = new TextDecoder(); // Make the fetch request fetch('https://api.example.com/streaming-data') .then(response => { // Check if the response is valid if (!response.ok) { throw new Error('Network response was not ok'); } // Stream the response data using a TextDecoder const reader = response.body.getReader(); // Function to read the streamed chunks function read() { return reader.read().then(({ done, value }) => { // Check if the streaming is complete if (done) { console.log('Streaming complete'); return; } // Decode and process the streamed data const decodedData = decoder.decode(value, { stream: true }); console.log(decodedData); // Continue reading the next chunk return read(); }); } // Start reading the chunks return read(); }) .catch(error => { // Handle errors console.log('Error:', error); });

06:05 2) Download Progress
Download progress example
09:40 3) Cancel Streams - Abort Controller

// Create an AbortController instance const controller = new AbortController(); // Set a timeout to abort the request after 5 seconds const timeout = setTimeout(() => { controller.abort(); }, 5000); // Fetch request with the AbortController fetch('https://api.example.com/data', { signal: controller.signal })

11:32 4) Testing if JSON is returned
13:18 5) async + await + catch

const data = await fetch().catch(err => console.log(err));

14:42 6) to awaited - return error and data at top level

const [err, data] = collect(fetch()) if(err) // ....

await-to-js - npm
16:58 7) Dev tools - Copy as fetch
17:54 8) You can programatically create a Request, Response and Headers objects

const myRequest = new Request('https://traffic.libsyn.com/syntax/Syntax_-_641.mp3', { headers: { 'Content-Type': 'text/plain', } }); fetch(myRequest)

Supper Club × How Descript Built A Next Gen Video Editor In The Browser With Andrew Lisowski Aug 18, 2023

Show notes

In this supper club episode of Syntax, Wes and Scott talk with Andrew Lisowski about working on Descript, web streams vs local storage, using state machines, writing CSS with Radix, monorepos, and more.

Show Notes

00:35 Welcome
01:07 What is Descript?
Descript | All-in-one video & podcast editing, easy as a doc.
Work — Sandwich
02:21 Who is Andrew Lisowski?
Andrew Lisowski (@HipsterSmoothie) / X
hipstersmoothie.com
Descript (@DescriptApp) / X
devtools.fm
04:51 How does Descript interact with the webcam?
08:52 Web streams vs local first
Web Streams Explained — Syntax Podcast 587
10:06 How are you exporting video?
GitHub - Yahweasel/libav.js: This is a compilation of the libraries associated with handling audio and video in ffmpeg—libavformat, libavcodec, libavfilter, libavutil, libswresample, and libswscale—for emscripten, and thus the web.
Riverside.fm - Record Podcasts And Videos From Anywhere
14:40 How does Descript deal with recording fails?
17:17 How does Descript design and build the UI?
19:37 What did you like about state machines?
XState - JavaScript State Machines and Statecharts
24:12 How are you writing your CSS with Radix?
Themes – Radix UI
Home | Open UI
30:30 How does the marketing site’s tech stack compare?
31:44 Playwright vs Cypress
Fast and reliable end-to-end testing for modern web apps | Playwright
JavaScript Component Testing and E2E Testing Framework | Cypress
36:26 What tech do you use for monorepos?
37:01 What’s your build tool?
Workspaces | Yarn - Package Manager
Turbo
webpack
40:18 Moving to the web means moving things to the backend
41:37 Descript focuses AI tools on helping creators
Eye Contact: AI Video Effect | Descript
50:50 Supper Club questions
Topre Switch Mechanical Keyboards
REALFORCE | Premium Keyboard, PBT, Capacitive Key Switch
Iosevka
Github Dark High Contrast - Visual Studio Marketplace
56:21 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

devtools.fm

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

6 or so New Approved and Proposed JavaScript APIs Aug 16, 2023

Show notes

In this episode of Syntax, Wes and Scott talk about new approved and proposed JavaScript API changes including Promise.withResolvers, .at(), Immutable Array Methods, Array.fromAsync, and more.

Show Notes

00:10 Welcome
04:55 What are we going to cover?
06:10 Promise.withResolvers
09:40 .at()
You probably knew about JavaScript’s new .at() method for accessing array items. Did you know it works for strings too?
@IAmAndrewLuca
15:59 Immutable Array Methods
Wes Bos: "🔥 Pretty excited about the new JavaScript non-mutating array methods. Currently in stage 3. .toReversed() .toSorted() .toSpliced() - remove items .with() - replace items
21:48 Array.fromAsync
Proposal for array.fromAsync
27:15 Array Grouping
Proposal for Array grouping
31:04 Observable Events?
Observable Events?
35:28 Import Attributes
39:21 v.emplace method
41:15 Decorators
Proposal for Pattern Matching
45:42 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Scott: Artifact.news
Wes: LED lights for bikes

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

JS Fundamentals - Decorators Aug 14, 2023

Show notes

In this Hasty Treat, Scott and Wes talk about whether decorators are finally here, what the uses cases are for decorators, how to define a decorator, and what auto accessor is.

Show Notes

00:25 Welcome
01:00 Are decorators finally here?
TC39 proposal
How this compares to other versions of decorators
06:47 What are use cases for decorators?
10:55 How do you define a decorator?
14:20 Auto Accessor

on classes

@loggged class C {}

on fields

class C { @logged x = 1; }

Auto Accessor

class C { accessor x = 1; }

sugar for below

class C { #x = 1; // # means private get x() { return this.#x; } set x(val) { this.#x = val; } }

Can be decorated and decorator can return new get and set and init functions

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

Supper Club × Flightcontrol with Brandon Bayer Aug 11, 2023

Show notes

Can you have a Vercel like experience on your own AWS? Scott and Wes talk with Brandon Bayer about Flightcontrol - what it is, how to use it on your app, pricing, and more.

Show Notes

00:32 Welcome
01:28 Who is Brandon Bayer?
Brandon 🚀 Flightcontrol (@flybayer) / X
Flightcontrol (@Flightcontrolhq) / X
Blitz.js - The Missing Fullstack Toolkit for Next.js
Flightcontrol — AWS Without Pain
Tailwind Connect 2023 | Tailwind CSS Live Event
03:00 How do you fly?
06:10 What is Flightcontrol?
10:00 Why doesn’t Amazon make it easier?
11:34 Which parts of the AWS stack should I use?
15:08 Creating the infrastructure
19:01 Ongoing deployment
20:05 What languages does Flightcontrol support?
23:35 How are events or cron handled?
25:24 What is Temporal?
Open Source Durable Execution Platform | Temporal Technologies
29:05 What are Nixpacks?
GitHub - railwayapp/nixpacks: App source + Nix packages + Docker = Image
35:50 How is Flightcontrol priced?
How To Get Free AWS Credits - Flightcontrol
44:44 How does Flightcontrol help with scaling?
Serverless Compute Engine – AWS Fargate – AWS
46:11 What are your thoughts on ReactJS, Server components?
49:57 Supper Club questions
Keychron K3 Ultra-slim Wireless Mechanical Keyboard (Version 2)
Learn to Code - for Free | Codecademy
57:20 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Flightcontrol — AWS Without Pain

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

Potluck × Is TypeScript Fancy Duct Tape × Back Pain × Cloud Service Rate Limits Aug 09, 2023

Show notes

In this potluck episode of Syntax, Wes and Scott answer your questions about TypeScript just being fancy duct tape, dealing with back pain while coding, rate limits on cloud services, what to use for email provider, is Firebase a legit platform, and more!

Show Notes