Syntax &#8211; Tasty Web Development Treats

708: How We Made Syntax.fm Faster Dec 25, 2023

Show notes

In this episode of Syntax, Wes and Scott talk through the ways they improved performance on the Syntax.fm website, how they knew it was slow to begin with, and the various changes they made to caching, and loading transcripts to improve the speed of the site.

Show Notes

00:25 Welcome
01:32 Adding a database requires queries
03:32 How did we know the site was slow?
04:25 Syntax Brought to you by Sentry
07:45 Changing the way transcripts are being loaded
13:41 Caching
21:16 Caching Headers

Hit us up on Socials!

707: What happened in JS, CSS And Web Dev in 2023? 2023 Predictions Results! Dec 20, 2023

Show notes

In this episode of Syntax, Wes and Scott review their 2023 predictions and see how they did on ideas like Deno getting hotter, new JS APIs, WASM, Houdini, CSS Container Queries, and more!

Show Notes

00:24 Welcome
01:18 Syntax Brought to you by Sentry
02:05 SSR JS sites more the norm
solidjs.com
Remix - Build Better Websites
Next.js by Vercel - The React Framework
SvelteKit • Web development, streamlined
Astro
04:14 TypeScript Inferred becomes hot
05:20 Types In JS?
ECMAScript proposal for type syntax that is erased - Stage 1
07:55 Deno gets hotter
11:12 JS runtimes mature
htmx
11:50 We will see a new TS Type Checker written in Rust
14:06 New JS APIs
What’s the status of this project? · Issue #1101 · dudykr/stc
Wes Bos on X: "Pretty excited about the new JavaScript non-mutating array methods. Currently in stage 3
tc39/proposals: Tracking ECMAScript Proposals
JS Fundamentals - Decorators - Syntax #653
16:29 Writing towards Winter CG Spec Popular.
WinterCG
17:09 Edge Rendering More Common
Prettier on X: "We setup a $20k bounty for a rust-based compatible printer with prettier.
$20k Bounty was Claimed! · Prettier
18:09 A new JS framework
19:05 Page Transitions API
19:51 Rust becomes more popular
24:00 More WASM
Supper Club × WASM, Fastly Edge, and Polyfill.io with Jake Champion - Syntax #643
FFmpeg
Fastly
25:11 React Beta Docs launch after 5 year dev cycle
26:47 We start to see CSS Container Queries in production
29:05 CanIUse issues?
31:20 CSS Subgrid
32:56 More AI
34:06 Tooling
Vite | Next Generation Frontend Tooling
Announcing Biome | Biome
Lightning CSS
Rspack
Turbopack
36:08 People sour on React
36:47 People sour on eslint
37:16 Houdini does nothing
CSS Houdini| MDN
Is Houdini Ready Yet?
39:57 How’d we do?
40:40 Sick picks

Sick Picks

Scott: Super Mario Bros.™ Wonder
Wes: Tineco Pure ONE S11 Cordless Vacuum Cleaner

Shameless Plugs

Scott: Sentry
Wes: Wes Bos Courses

Hit us up on Socials!

706: AI and ML - The Pieces Explained Dec 18, 2023

Show notes

In this episode of Syntax, Wes and Scott talk about understanding the integration of different components in AI models, the choice between traditional models and Language Learning Models (LLM), the relevance of the Hugging Face library, demystify Llama, discuss spaces in AI, and highlight available services.

Show Notes

00:25:20 Welcome
00:55:00 Syntax Brought to you by Sentry
01:17:00 Understanding how the pieces fit together
02:31:18 Models or LLM?
04:43:22 What about Hugging Face?
08:05:18 What’s Llama?
08:51:15 What are spaces?
09:29:06 Services available to you
12:26:16 What are tokens in AI?
17:38:18 What is temperature with AI?
20:33:08 Using top_p
21:06:00 Using fine-tuning to extend existing models
22:11:19 Prompts are what you send to the model
23:17:00 Streaming
24:48:17 Embeddings
27:34:17 OpenAI maintains Evals
28:40:14 Different libraries for working with AI

Hit us up on Socials!

705: Is Running Random Code From npm Safe? With Feross Aboukhadijeh Dec 15, 2023

Show notes

In this Supper Club episode of Syntax, Wes and Scott talk with Feross Aboukhadijeh about his work on Socket which helps to make sure the code you get from npm is safe and secure. They also touch on his work on Wormhole and Web Torrent.

Show Notes

00:30 Welcome
00:57 Who is Feross Aboukhadijeh?
01:33 What is Socket?
[Socket.dev](https://socket.dev
dominictarr (Dominic Tarr)
pull-stream/pull-stream: minimal streams
03:59 Introducing AI package summaries
Example of the AI summaries
Introducing AI Package Summaries
07:04 Is Socket’s focus on visibility of a open source project?
10:01 What was the inspiration for Socket?
Introducing “safe npm”, a Socket npm Wrapper - Socket
16:22 How does Socket detect possible security issues?
Removed packages
event-source-polyfill protestware attack
john wick spam attack
18:55 How many projects are you injesting for Socket to scan?
26:00 What kinds of things are people trying to inject in code?
CS253 Web Security
29:54 How do I hook Socket up to my project or GitHub?
32:08 Do we still need to use shrink wrap?
36:34 How did you implement the torrent spec in JavaScript for WebTorrent?
WebTorrent Desktop
WebTorrent FAQ
43:11 Why did you build Wormhole?
Wormhole
47:33 How expensive is it to maintain Wormhole?
Riverside.fm - Record Podcasts And Videos From Anywhere
50:37 What do you think of decentralized code repos?
Radicle
Project Fugu
Fugu Tracker
54:29 Understanding passkeys
56:15 Supper Club questions
GitHub Theme - Visual Studio Marketplace
Web Serial API - Web APIs | MDN
01:03:04 Sick Picks

Sick Picks

Harry Potter audio books

Shameless Plugs

ChatGPT

Hit us up on Socials!

704: Stump'd JS + CSS Interview Questions Dec 13, 2023

Show notes

In this episode of Syntax, Wes and Scott try to stump each other with JavaScript and CSS interview style questions including CSS contain, naming the 7 parts of Houdini, what ARIA stands for, 5 limitations of serverless, and more.

Show Notes

00:25 Welcome
01:31 Syntax Brought to you by Sentry
02:01 Explain CSS Contain and why it exists?
07:27 In CSS Grid, how would I make a grid of 3 equal columns with 20 pixels between them?
Wes Bos on X: 🔥 A visual guide to getting equal width columns in CSS Grid / X
10:31 Which of the following elements are fake?
13:00 Which of the following HTML tags are deprecated?
16:38 What is the samp element?
17:27 Name the 7 parts of CSS Houdini
21:07 In JavaScript for loop with 10 items, how can you exit a loop early?
22:34 What is the difference between a pseudo element and a pseudo class?
25:59 How could you implement CSS :has with JavaScript?
27:56 What are two attributes that would make an SVG more accessible?
29:43 How can you stop your process from exiting if you have an unhandled rejection?
32:27 How do you prevent flex children from getting squished?
34:40 In TypeScript, what does using keyof and typeof together do?
37:19 What does ARIA stand for?
37:39 Name 5 limitations that a serverless or edge function have over tradtional long running server?
40:38 Write an item using Flex code, not grow to fill it’s container, or shrink, and the item will take up only the space based on it’s content size.
42:03 If I’m building an application that needs to announce a change to the user, how would I do that?
43:46 Name the 5 different Git elements methods on a document?
45:39 What does the CSS prospective property do?
48:23 Sick picks

Sick Picks

Scott: Pushpin hangers
Wes: Niimbot Label Maker, Bearclaw Screws)

Shameless Plugs

Scott: Sentry
Wes: Wes Bos Courses

Hit us up on Socials!

703: The Observer Pattern Dec 11, 2023

Show notes

In this episode of Syntax, Wes and Scott give a high level overview of the observer pattern, what is the observer, what are downsides to too many observers, and more.

Show Notes

00:25 Welcome
01:42 Syntax Brought to you by Sentry
02:16 High level overview
Syntax 694: What’s Up With Angular with Mark Techson
Godot Engine
03:36 What might you observe in game development?
06:50 What is the observer?
08:11 What are some downsides to too many observers?
10:17 IntersectionObserver, MutationObserver, and PerformanceObserver
12:25 ResizeObserver
13:04 What about addEventListener?
@BenLesh on Callbacks being faster than observables
16:13 Signals are becoming a big thing

Hit us up on Socials!

702: New + Proposed JS APIs for 2024 Dec 06, 2023

Show notes

In this episode of Syntax, Wes and Scott talk through new and proposed JavaScript APIs including ones related to regex, sourcemaps, structured clone, temporal, JSON modules, and more!

Show Notes

00:10 Welcome
01:26 Syntax Brought to you by Sentry
02:55 RegExp Escaping Proposal
tc39/proposal-regex-escaping: Proposal for investigating RegExp escaping for the ECMAScript standard
05:25 Intl.DurationFormat
tc39/proposal-intl-duration-format
07:55 Standardized Sourcemaps
tc39/source-map-rfc: RFCs for the source map debug format.
10:43 Structured Clone
structuredClone() global function - Web APIs | MDN
12:54 Temporal
Hasty Treat - Temporal Date Objects in JavaScript
Tracking issue for syncing with IETF standardization work (req’d before implementers can ship unflagged) · Issue #1450 · tc39/proposal-temporal
20:59 FindLast and findLastIndex
tc39/proposal-array-find-from-last: Proposal for Array.prototype.findLast and Array.prototype.findLastIndex.
22:27 JSON modules
tc39/proposal-json-modules: Proposal to import JSON files as modules
24:46 Regex Modifiers
RegExp Modifiers - June 2022.pptx - Microsoft PowerPoint Online
26:50 Array Grouping
tc39/proposal-array-grouping: A proposal to make grouping of array items easier
30:48 Array Methods
tc39/proposal-change-array-by-copy: Provides additional methods on Array.prototype and TypedArray.prototype to enable changes on the array by returning a new copy of it with the change.
6 or so New Approved and Proposed JavaScript APIs
32:12 Promise.withResolvers
35:08 Function.prototype.memo
tc39/proposal-function-memo: A TC39 proposal for function memoization in the JavaScript language.
37:48 Node has a Proposed ESM Detection flag
39:54 Node has navigator.userAgent
41:29 Built in .env support
42:52 Permissions model & test runner continues to be worked on
44:06 HTML Web charts
Proposal: Web Charts · Issue #9295 · whatwg/html
45:39 autopause
Add autopause attribute to media elements to allow automatic pausing of media · Issue #9793 · whatwg/html
46:30 Meta Tag for AI generated content
Proposal: Meta Tag for AI Generated Content · Issue #9479 · whatwg/html
Schema.org - Schema.org
Syntax × Sentry Swag Store – Syntax × Sentry Shop
Syntax - A Tasty Treats Podcast for Web Developers.
50:13 Poster frame
HTML Video Element: Proposal for adding [srcset] + [posterset] + [sizes] on video element as well [posterset] on source elements · Issue #9812 · whatwg/html
50:57 Popover invoker
Popover does not know what triggered it · Issue #9111 · whatwg/html
51:25 Autocomplete on ‘contenteditable’ Elements
Autocomplete on ‘contenteditable’ Elements · Issue #9065 · whatwg/html
52:17 Sick Picks

Sick Picks

Scott: Escaping Twin Flames cult documentary
Wes: Lao Gan Ma spicy Chili Oil

Shameless Plugs

Scott: Sentry
Wes: Wes Bos Courses

Hit us up on Socials!

701: A11y Treats - Labels & Roles Dec 04, 2023

Show notes

In this episode of Syntax, Wes and Scott explain ARIA, aria-label, Roles, and the overall importance of accessibility in your web projects.

Show Notes

00:25 Welcome
01:18 Syntax Brought to you by Sentry
01:44 What is ARIA?
WAI-ARIA Roles | MDN
An in-depth guide to ARIA roles - The A11Y Project
02:48 What is aria-label?

// A button with an ARIA role and label

06:36 What’s the difference between a title and aria-label on a button?
08:34 Are you really going to get sued if your website isn’t accessible?
11:53 What are Roles for?
16:33 6 different types of Roles
21:25 What is aria-labelledby?

I agree to the Terms and Conditions.

23:13 Checking your code for accessibility
eslint-plugin-jsx-a11y - npm
WAVE Web Accessibility Evaluation Tools
Polypane
24:31 Feedback and future show ideas

Hit us up on Socials!