Syntax &#8211; Tasty Web Development Treats

Scott:X Instagram Tiktok LinkedIn Threads

718: React Server Components Jan 17, 2024

Show notes

Wes and Scott talk through server components, the difference between server components and client components, reasons to run something server side, how server components work, using forms and buttons, what they like and don’t like about it, and tips to learn more.

Show Notes

00:10 Welcome
00:52 Syntax Brought to you by Sentry
01:39 New Heights with Scott and Wes
04:33 What are React Server Components?
10:52 The difference between server components and client components
Tweet: "React Server + Client Components Visualized There is a bit of a learning curve to learn new patterns, but the ease of going between client and server will be worth it.
11:37 Why would you want to run something server side?
15:22 Components are server rendered by default
16:40 What is JS sprinkles?
17:29 How do server components work?
18:51 Moving an existing site to React server components take a while
20:27 The rules
27:12 Form Actions + Server Actions
32:07 Buttons can have actions
36:32 React Suspense
39:13 What we like
Ryan Florence thread
41:54 What we don’t like
47:13 Design patterns
47:35 Other things
RSC Devtools
Introducing Waku
Mux
49:22 Sick Picks

Sick Picks

Scott: ASUS ZenDrive V1M External DVD Drive
Wes: Leatherman Arc

Shameless Plugs

Scott: Syntax YouTube
Wes: Wes Bos Courses

Hit us up on Socials!

717: How to be Productive Jan 15, 2024

Show notes

We’re kicking off 2024 by talking about productivity tips we’re using to stay focused, to do apps, calendars, focus states, and customizing our code editor.

Show Notes

00:25 Welcome
00:46 Syntax Brought to you by Sentry
01:11 Welcome to 2024
Anxiety and Uncertainty with Dr. Courtney Tolinski - Syntax #670
01:42 Getting systems in place
03:30 Examining your current habits
08:14 Tracking habits
12:16 Neural Pathway Chain Breakers
habitpath.io/waitlist
STREAKS
A Passwordless Future Passkeys with Anna Pobletts - Syntax #710
Clerk
14:26 Todos
Stronglifts app
Getting Things Done
Things
Height
20:14 The calendar as the ultimate tool
Cron Calendar
23:52 Using Focus states
Focus App
29:09 Customizing VS Code with an extension
Apc Customize UI++ - Visual Studio Marketplace
31:14 Momentum

Hit us up on Socials!

716: JS Perf Wins & New Node.js Features with Yagiz Nizipli Jan 12, 2024

Show notes

Yagiz Nizipli talks about his involvement with Node.js, implementing .env, how he finds areas to improve in performance, the happy path vs the hot path, and new features coming to Node.js.

Show Notes

00:32 Welcome
01:01 Introducing Yagiz Nizipli
02:21 What is your involvement in Node.js?
03:27 Implementing .env
07:03 Why was 20,000 lines of C required?
11:00 How do you begin to find performance issues?
15:17 How do you measure improvements?
26:27 The happy path vs the hot path
27:36 Is Rspack ready for prime time?
RSpack
28:47 Bundle Size VS runtime perf? Whats more important?
30:51 What’s it like working on a large project like Node?
38:26 Will Node ever get TypeScript support?
40:22 What are loaders?
44:24 Node.js is getting a config file?
51:37 Sick Picks

Sick Picks

Shameless Plugs

@yagiznizipli

Hit us up on Socials!

Scott:X Instagram Tiktok LinkedIn Threads

715: Google & MS Duopoly, Frontend to Fullstack, Where to Put Business Logic + more(Potluck) Jan 10, 2024

Show notes

Wes and Scott answer your questions about duopoly in tech, tech stacks for creating content, switching from frontend to full stack, DSA knowledge, email HTML, and more!

Show Notes

00:10 Welcome
02:21 Syntax Brought to you by Sentry
03:31 Are you concerned about duopolistic companies taking over the web?
11:29 What stack do you you use for videos and sharing content?
15:02 How do you know once your ready to officially make the switch from frontend to full stack?
17:58 As someone new to tech and looking to apply for junior front end positions, how much should i know about DSA’s?
Friends that work at big tech companies - did you need Data Structures and Algorithms to get hired? I get an lots of messages from new devs asking how to learn these things. Many of them say the need it to work at FAANG type companies
21:59 Which tools would you recommend for crafting HTML emails from scratch?
Foundation
MJML
React Email
25:03 Hey are you guys setting up your own CI/CD like github action or gitlab CI?
Netlify
Vercel
28:25 What do you think about unstyled component libs. Eg: Ark?
Ark UI
31:47 Do I need to have every single feature on mobile as I do on a desktop?
Obsidian - Sharpen your thinking
Missive ‐ Team Email, Chat & Tasks
39:15 How can I get better at planning my code?
shaky.github.bushong.net
Monodraw for macOS — Helftone
Octopus.do, Visual Sitemap Tool, Website Planner, Architecture
Mermaid | Diagramming and charting tool
42:32 What exactly makes it so that a piece of logic is client/frontend logic vs backend logic?
46:17 Sick Picks

Sick Picks

Scott: Sleeping Queens Card Game, 79 Cards : Toys & Games
Wes: Package drop box

Shameless Plugs

Scott: Syntax Newsletter
Wes: Wes Bos Courses

Hit us up on Socials!

714: CSS :has() in Every Browser! 10 Uses Jan 08, 2024

Show notes

CSS :has() is out in all browsers and Wes and Scott have got the top 10 reasons you should start using :has() now.

Show Notes

00:25 Welcome
02:28 Syntax Brought to you by Sentry
03:02 Overview of :has
07:09 The anywhere selector
09:41 Previous element
12:59 Layout targetting
15:45 Form validation styling
17:51 All siblings
21:07 Quantity queries
24:19 Empty children
24:56 Nested dropdown navs
26:36 Attribute matching

Hit us up on Socials!

713: The CSS OG Eric Meyer. 1994 CSS, JS in Fridges, Tailwind, and Web Standards Jan 05, 2024

Show notes

In this supper club episode of Syntax, Wes and Scott talk with Eric Meyer about his start on the web, the early days of CSS, where CSS is headed, are we going to lose a browser, and more!

Show Notes

00:32 Welcome
01:26 Who is Eric Meyer?
05:44 In the earliest days, what browsers supported CSS?
10:23 The current web platform test suite
web-platform-tests
17:59 Are CSS features shipping faster these days?
20:45 CSS learning from preprocessors
26:24 What do you think about Tailwind and inline CSS?
33:26 Alternative spaces where CSS may be used
CSS Speech Module Level 1
The World Wide Web Consortium Issues CSS2 as a W3C Recommendation
37:17 Do companies push CSS forward for a business use case?
44:06 Trying to keep up with all the things is difficult
48:19 What’s on Eric Meyer’s CSS wishlist?
54:35 Supper Club Questions
Bruce Lawson
Firefox Nightly desktop, Android and iOS.
SerenityOS
The Ladybird browser project
Thunderbird — Free Your Inbox. — Thunderbird
Arc from The Browser Company
Mozilla Foundation - Homepage
01:58 Sick Picks

Sick Picks

Polypane

Shameless Plugs

Hit us up on Socials!

Scott:X Instagram Tiktok LinkedIn Threads

712: 2024 Predictions Jan 03, 2024

Show notes

Wes and Scott give their predictions for 2024 in JavaScript, frameworks, server-side JS, tooling, CSS, developer ecosystem, and AI tooling.

Show Notes

00:10 Welcome
01:10 Syntax Brought to you by Sentry
02:00 Types in JS will have real movement
05:10 Temporal API will ship in 1 browser
06:38 Perf tooling gets easy for everyone to understand
07:32 CSS continues to get better where you need less JS
08:35 The year of the server in frameworks
10:32 Svelte v5 is very fast
SvelteKit • Web development, streamlined
12:04 Astro is going to have a good year
Astro
4 Web Devs, 1 App Idea (Salma Alam-Naylor, Scott Tolinski, Eve Porcello)
14:22 React server components
dai-shi/waku: ⛩️ The minimal React framework
Waku
19:45 Remix moves away from page-based loaders, to component loaders
20:52 Hono will become more ubiquitous
Hono - Ultrafast web framework for the Edges
23:23 Node will introduce TypeScript support via loaders
24:48 We will see a route matching Proposal move ahead
URL Pattern Standard
26:34 Bun releases full node compat
27:34 We will see a new Linter + formatter entirely replace
Language support | Biome
HTML support · Issue #1326 · oxc-project/oxc
Prettier · Opinionated Code Formatter
31:44 New TypeScript typechecker
32:42 Lightning CSS pops - or does it?
34:37 You’ll hear more about Rspack and Turbopack
35:55 Vite isn’t going to release anything big in 2024
Vite | Next Generation Frontend Tooling
36:55 CSS contrast-color will land in chrome
37:27 Relative color will land in all major browsers
37:48 Scroll animation landing in 2 browsers
38:40 The year of CSS discovery
41:20 Safari will Ship 3 missing PWA Support
44:10 Firefox usage will continue to slip
47:43 Paid Arc features
47:55 More XR web experiences as Apple releases in Vision Pro
49:07 AI Tooling
Galileo AI
v0 by Vercel
Transformers.js
51:07 Small Models that run in the browser
52:08 Apps get sherlocked by OpenAI
53:24 On prem corporate AI
54:15 Sick Picks

Sick Picks

Scott: ISO100 protein power, Weekend at Bernie’s
Wes: Roborock S8 Pro Ultra Vaccum + Mop

Shameless Plugs

Scott: Syntax Newsletter
Wes: Wes Bos Courses

Hit us up on Socials!

711: The Surprisingly Exciting World of Print + PDF CSS Jan 01, 2024

Show notes

In this episode of Syntax, Wes and Scott talk about things to consider when printing something from your website or app including loading CSS only for printing, using units in CSS, CSS counters, creating a PDF, naming pages when printing, and more.

Show Notes

00:25:15 Welcome
01:27:04 Syntax Brought to you by Sentry
01:52:00 Examples of how Wes uses print CSS
03:42:16 Using it for invoices or receipts
05:08:24 Delivering a book as a PDF
05:42:16 How do you load CSS only for printing?
10:41:08 Using units in CSS
11:29:15 CSS Counters
MDN: CSS Counters

body { counter-reset: chapter; /* create a chapter counter scope */ } h1:before { content: "Section " counter(chapter) " "; counter-increment: chapter; /* add 1 to chapter */ } h1 { counter-reset: subchapter; /* set section to 0 */ } h2:before { content: counter(chapter) "." counter(subchapter) " "; counter-increment: subchapter; } h2 { counter-reset: section; font-size: 23px; }

14:31:10 Named Pages

@page title { @top { /* no header for title pages */ content: “”; } } @page chapter { @top { content: “This is a chapter page”; } }

15:27:09 Margins, Headers + footers, Page Numbers
18:01:18 Debugging Print CSS
19:57:18 Getting into a PDF
Docraptor
Playwright
Puppeteer
JSPdf
24:45:04 Other Things to consider

Hit us up on Socials!