New to JavaScript — ES2022
Syntax - Tasty Web Development Treats15 Sep 2021

New to JavaScript — ES2022

In this episode of Syntax, Scott and Wes talk about all the new stuff in ES2022 — what it is, why you might need it, and how to use it. 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. 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. 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 04:50 - Regex indicies New d flag in a regex https://regex101.com/ This will tell you the indexes (indicies) of the regex matches Handy if you need to highlight or replaces matches in a string We can ask for the start and end positions of each matched capture group 07:16 - Class updates Private fields Properties and Methods to be kept private Prefix them with a # =Helpful for internal state and methods which should not be accessed directly or at all by external In React how we have __INTERNTAL_NEVER USE THIS class ColorButton extends HTMLElement { // All fields are public by default color = "red" // Private fields start with a #, can only be changed from inside the class #clicked = false } const button = new ColorButton() // Public fields can be accessed and changed by anyone button.color = "blue" // SyntaxError here console.log(button.#clicked) // Cannot be read from outside button.#clicked = true // Cannot be assigned a value from outside Getters and setters introduced in es5 https://www.w3schools.com/js/js_object_accessors.asp class Person { #hobbies = ['computers'] get #hobbiesGetter() { return this.#hobbies } #getHobbies() { return this.#hobbies } getHobbiesPublic() { return this.#hobbies } } const scott = new Person(); scott.#getHobbies(); // doesn't work scott.getHobbiesPublic(); // works 09:07 - Class fields This may seem super old because we have been polyfilling it forever Right now if you want an instance field on a class, you need to declare it in the constructor Now we can just declare them inside the class 10:36 - Static fields and methods As above can also be static with the static keyboard Works for methods too Explain what a static method is 13:17 - Top level await So handy in modules. Need to pull in some data? Simple. 15:19 - Ergonomic brand checks for private fields Used for checking if a private field on a class exists using the in keyword 16:00 - .at() method Strings and arrays - we can use square brackets to reference items of the array Super handy for grabbing the last item of an array // 🔥 New .at() method on arrays and strings const toppings = ['pepperoni', 'cheese', 'mushrooms']; // The old way to grab the last item toppings[toppings.length - 1]; // mushrooms // using .at() method with a negative index toppings.at(-1); // mushrooms // works with any index toppings.at(0); // pepperoni toppings.at(-2); // cheese // and with strings! 'Meeting Room: B'.at(-1) // B Why not use array[-1]? We used to use slice(-1) What about indexOf? 21:34 - Handy hasOwn method https://github.com/tc39/proposal-accessible-object-hasownproperty 24:51 - Class static block A static block allows you to run code before creating an optional static property during initialization https://github.com/tc39/proposal-class-static-block Links https://github.com/tc39/proposals/blob/master/finished-proposals.md ××× SIIIIICK ××× PIIIICKS ××× Scott: Ultraloq Smart Lock Wes: Magnatiles Shameless Plugs Scott: Web Components Course - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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

Episoder(968)

840: Spooky Web Dev Horror Stories - PART 1

840: Spooky Web Dev Horror Stories - PART 1

Scott and Wes unpack the spookiest web dev stories submitted by listeners in this episode. From forgotten MX records to infinite loops, these real-life coding horrors will have you double-checking your WHERE clauses and git backups. Show Notes 00:00 Welcome to Syntax! 00:39 Brought to you by Sentry.io. 00:48 What is Spooky Stories? Submit a story. 02:45 ‘Needs a Coffee’ 04:43 ‘Deleting Github’ Defunkt X Post. 07:42 ‘Rejected’ 09:08 ‘Infinite Loop’ 09:26 ‘MySqueeel Horror’ 11:02 ‘Pet Company’ 12:09 ‘Git Corrupted’ 12:57 ‘Circular Horror’ 14:25 ‘The Haunting of the Forgotten MX Records’ Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

28 Okt 202417min

839: Prisma ORM: Local First, Typed SQL Queries and Serverless with Søren Bramer Schmidt

839: Prisma ORM: Local First, Typed SQL Queries and Serverless with Søren Bramer Schmidt

Scott and Wes talk with Søren Bramer Schmidt, Founder and CEO of Prisma, about database best practices, including the latest developments in serverless, local-first, and typed SQL solutions. Show Notes 00:00 Welcome to Syntax! 02:55 Søren’s thoughts on GraphQL 03:53 Brought to you by Sentry.io 06:57 Common database mistakes 08:52 Prisma’s stability and user experience 10:42 Typed SQL and advanced querying Announcing TypedSQL: Make your raw SQL queries type-safe with Prisma ORM Prisma Optimize 20:47 Serverless challenges and solutions Prisma Accelerate 27:11 Cloudflare’s potential to dethrone AWS 29:13 Prisma and local-first development Prisma & Expo: A Better Path to Local-First Apps | App.js Conf 2024 35:30 Making local-first development mainstream 40:10 Challenges with async 42:43 Søren’s thoughts on Drizzle 43:41 Søren’s favorite database 47:21 The read your writes problem 48:58 Prisma hosted Postgres 51:44 Sick Picks & Shameless Plugs Sick Picks Søren: Cursor Shameless Plugs Søren: 1: Prisma Optimize 2: Prisma Postgres (coming soon) Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

25 Okt 202454min

838: Productivity Tools for Web Developers

838: Productivity Tools for Web Developers

Get your productivity game on point! Scott and Wes serve up the best tools for web developers, covering everything from password managers and to-do apps to mind-mapping tools and little scripts that make life easier. Plus, find out what snippet managers they swear by and how they keep their email under control. Show Notes 00:00 Welcome to Syntax! 03:01 Brought to you by Sentry.io. 03:44 Syntax meetup San Francisco. 04:26 Breakdancing update. Kid Cruz Instagram. 05:18 Password management. 1Password. 08:30 Apple stomping on apps. 09:50 To-do applications. Things. Getting Things Done. Tweek. 18:18 To-do in code. Todo Tree. Better Comments. 20:21 Snippets. 25:55 Mind-mapping. MindNode. FigJam. 29:01 Note-taking. Obsidian. Stashpad. ObservableHQ. Jupyter. 36:34 Little scripts. Script Kit. 39:50 Email. Superhuman. 48:11 Some honorable mentions. Habitpath.io. Focus. 52:10 Sick Picks + Shameless Plugs. Sick Picks Scott: The Legend of SwordQuest. Wes: The Economics of Everyday Things. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

23 Okt 202454min

837: You Should Drop Express and Try Hono

837: You Should Drop Express and Try Hono

CJ joins Scott and Wes to dive into why he’s all-in on Hono, a fast and lightweight web framework for every JavaScript runtime. From familiar route creation to type-safe middleware, find out how Hono keeps things simple, powerful, and ready to use inside Next.js. Show Notes 00:00 Welcome to Syntax! 00:46 Brought to you by Sentry.io. 01:11 What is Hono? Watch CJ’s Video Here 03:21 Syntax Meetup San Francisco. 04:02 Why I like Hono, and why you should try it. 04:08 Familiar route creation. Connect: an extensible HTTP server framework for node. 05:45 Supports every JS Runtime. 07:00 How a service worker works. 08:48 Helpers. 09:16 Middleware. 10:40 Sentry middleware. 10:55 JSX support. 13:21 Organizing route handlers while keeping Types. 14:24 Type safety. hono-open-api-starter. zod-openapi. 15:46 Defining base type. Pinojs 17:36 Validation. 18:52 Hono RPC client. 22:09 Hono inside of Next.js. 23:30 Testing. 25:22 The community. 27:34 Type support. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

21 Okt 202429min

836: Real Talk on Web Accessibility with Marcy Sutton Todd

836: Real Talk on Web Accessibility with Marcy Sutton Todd

18 Okt 20241h 6min

835: How to Pick a JavaScript Framework

835: How to Pick a JavaScript Framework

Do you really need a framework? Scott and Wes bring on CJ to break down when frameworks like Vue, Svelte, and Astro are worth it—and when they might just add complexity. They dive into everything from rendering strategies to auth solutions, deployment options, and how to choose the right tool for the job. Show Notes 00:00 Welcome to Syntax! 01:32 Brought to you by Sentry.io. 03:17 What is a framework? Syntax Meetup San Francisco. 08:21 Examples of frameworks for Vue, Svelte and Angular. 12:39 What questions do you need to answer? 12:44 What or where do you need to ship? 14:12 How do you render it? 18:22 Where are you deploying it? 24:03 How do you store data? 24:09 Existing API. 26:03 Integrated server. 26:22 Database. Supabase. 26:59 Does it have RPC or server actions? 34:27 Do you need authentication? 38:45 Auth packages. LuciaJS. Lucia announcement. Lucia preview. NPM Arctic Oauth. Auth utilities. Better-Auth. Scott’s Drop-In Auth. 42:10 Does it include email? 42:52 What does the TypeScript story look like? 43:32 How does it handle images? 44:35 How do we work with CSS? 46:02 How long has it been around? 47:37 How mature is the ecosystem? 48:35 Is there community support? 50:21 Portability. 51:18 Hiring. 52:17 Sick Pick + Shameless Plugs. Sick Picks CJ: Infinite Health. Scott: USB A to C adapters. Wes: Citric Acid. Shameless Plugs Scott: Syntax on YouTube Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

16 Okt 202458min

834: AI Will Improve Your Web Development Workflow

834: AI Will Improve Your Web Development Workflow

Scott and Wes serve up ways developers can use AI tools like Claude, GitHub Copilot, and more to boost productivity. From error tracing to refactoring code and automating mundane tasks, they break down how AI can handle the heavy lifting so you can focus on the fun stuff! Show Notes 00:00 Welcome to Syntax! 01:23 Brought to you by Sentry.io. 01:43 Using AI tools effectively. 05:29 Stack trace reading and error finding. 08:37 San Francisco Syntax Meetup! 09:19 Research and validation. 12:19 Completing mundane tasks. 14:10 Refactoring. 18:56 Simple typescript. 20:29 Summarizing docs and source code. 23:56 Quick hits. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

14 Okt 202427min

833: Next Gen Fullstack React with TanStack

833: Next Gen Fullstack React with TanStack

Scott and Wes talk with Tanner Linsley, creator of TanStack, about the React ecosystem, and the evolution and futue of TanStack’s suite of tools, including TanStack Router and TanStack Start. Show Notes 00:00 Welcome to Syntax! 02:59 What is TanStack Start? UnJS Nitro Vinxi 06:17 What is the Vite Environment API? 07:21 Was it always the plan to use Vite? 08:02 TanStack Router and client-side vs server-side 16:18 How TanStack Start will work 27:26 Moving from Create React App to TanStack 30:42 Brought to you by Sentry.io 31:15 Will TanStack Router ever support other frameworks? 33:54 How will TanStack Start handle forms? 36:13 TanStack Virtual 39:41 What is the future of TanStack? Convex 42:49 How Tanner writes documentation 47:55 Server functions and middleware 54:41 When will TanStack Start be in beta? 57:00 Sick Picks + Shameless Plugs Sick Picks Tanner: LG C4 Ultra Slim Fit TV Wall Mount Shameless Plugs Tanner: TanStack Blog @TKDodo Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

11 Okt 20241h 2min

Populært innen Politikk og nyheter

giver-og-gjengen-vg
aftenpodden-usa
aftenpodden
forklart
popradet
stopp-verden
det-store-bildet
fotballpodden-2
dine-penger-pengeradet
nokon-ma-ga
bt-dokumentar-2
rss-gukild-johaug
lydartikler-fra-aftenposten
hanna-de-heldige
aftenbla-bla
unitedno
rss-penger-polser-og-politikk
frokostshowet-pa-p5
e24-podden
rss-ness