New to JavaScript — ES2022

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(969)

689: You Should Be Using JavaScript Maps & Sets

689: You Should Be Using JavaScript Maps & Sets

In this episode of Syntax, Wes and Scott talk about why you should be using JavaScript maps sets, whether you can access them directly, what makes them great, and what weak versions of both are. Show Notes 00:26 Welcome 01:34 Syntax Brought to you by Sentry 01:54 What makes Maps a spicy buffalo object? 07:46 API of Map 08:51 Looping over items in a Map 09:27 Can you change the size of a map after it’s been created? 10:07 Can you access properties directly? 12:13 Where have we used a map as a cache? 13:32 What makes a set an array honey garlic array? 17:28 When should you be using sets instead of an array? Proposed Highlight API is built on Sets 21:47 Can you spread sets like an array? 22:40 Weak versions of map and set WeakMap and Garbage collection Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

6 Nov 202328min

688: Ex-npm Employee Making a New Package Manager?! Vlt with Darcy Clarke

688: Ex-npm Employee Making a New Package Manager?! Vlt with Darcy Clarke

In this supper club episode of Syntax, Wes and Scott talk with Darcy Clarke about his career path in tech, working with Wes back in the day, why he decided to build vlt volt, and the biggest sick pick list yet! Show Notes 00:32 Welcome 01:38 Building a tweet wall back in the day 08:54 How did you land at npm? npm 19:40 Why do we need another package manager and registry? 22:11 What is vlt volt? vlt: a new home for open source vlt /vōlt/ (@vltpkg) / X Shipping ESM with Mark Erikson Bun Yarn Nx 27:18 Do you see a future where we don’t pre-compile before shipping? 29:32 Why would pnpm be faster than npm? 31:14 What are the problems with symlinking? 33:08 What’s happening with Yarn? Verdaccio Cloudsmith jfrong Sonatype socket.dev Snyk.io Dependency Confusion 37:42 What do you think about config files? antfu Config of File Nesting for VS Code The massive bug at the heart of the npm ecosystem WebTorrent 41:02 VS Code tip - file nesting patterns 41:59 How does on-prem registry work? 47:29 Where does Socket.dev and Snyk security fit? 52:46 Sick Picks 04:41 How did you get vlt.sh? 05:30 How did you get @Darcy? Sick Picks Flat Coat Goldendoodle Scientific American Nespresso BlackBerry (2023) - IMDb BlackBerry (2023) Letterboxd Matthias Wandel Blink-182 Official Site Moneen Bring Me The Horizon Shameless Plugs vlt: a new home for open source Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

3 Nov 20231h 9min

687: Hosting NextJS × Spicy Sidedishes × Modern Forms × Abandoning TypeScript

687: Hosting NextJS × Spicy Sidedishes × Modern Forms × Abandoning TypeScript

In this potluck episode of Syntax, Wes and Scott answer your questions about hosting NextJS, spicy sidedishes, putting forms in modern websites, why is everyone abandoning TypeScript, CSS Survey follow up, do devs need to be into CSS, and more! Show Notes 00:10 How to submit a question to Syntax Syntax Potluck Listener Questions 00:45 Syntax meet up in Toronto 02:11 Syntax Brought to you by Sentry 02:36 Vendor lock in with NextJS? Next.js by Vercel Vercel SST Supper Club × Next.js on AWS + Serverless with Dax Raad — Syntax Podcast 589 Cloudflare Pages Netlify Open source Next.js serverless adapter 09:48 🌶️ Spicy Sidedish: Stop calling Firefox the new IE Jen Simmons 16:40 Can you compare Database as a service and provide your recommendation and suggestions? “Serverless” Databases — Syntax Podcast 551 PlanetScale Firebase 20:00 How do I do native forms outside of CMS like WordPress? Builder.io 28:01 Why have Svelte and Turbo abandoned Typescript? 32:17 Why are companies hesitant to migrate to Next? 33:36 Is React Native dead? 38:33 Do I use the keyword “new” when throwing an Error or not? 41:59 touch-action use case Announcing Quina Quina - Menu Announcing Hondo Hondo - a word game in 100 words or less 42:57 Subgrid and the :has selector usage 46:02 Is it okay to be a front end developer and not be as interested in CSS? Tool Academy (American TV series) 51:12 Could you explain what are workers, processes, jobs, tasks, and deamons? 56:29 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Infamous International: The Pink Panthers Story Wes: PowerBlock Adjustable Dumbbells For Home Gym & Commercial Use Syntax episode 3 Shameless Plugs Scott: Syntax on TikTok 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

1 Nov 20231h

686: We Need Your Help With The Secret Sauce

686: We Need Your Help With The Secret Sauce

In this Hasty Treat, Scott and Wes talk about the secret sauce that’s going into the creation of the new Syntax.fm website including the styling, search, tooling, database, hosting, and more. Show Notes 00:21:15 Welcome 01:10:11 Where did the name “Secret Sauce” come from? 03:16:00 Syntax Brought to you by Sentry 04:32:11 What Syntax.fm is built in? SvelteKit • Web development, streamlined muxinc/media-chrome: Custom elements (web components) for making audio and video player controls that look great in your website or app. Media Chrome Docs 07:24:01 How we’re doing search flexsearch - npm 12:22:20 Styling Prettier · Opinionated Code Formatter PostCSS - a tool for transforming CSS with JavaScript 16:00:05 Tooling Fast, disk space efficient package manager | pnpm 18:55:11 Database Prisma | Next-generation ORM for Node.js & TypeScript 21:11:11 Services Deepgram OpenAI Anthropic \ Introducing Claude 24:34:11 Hosting Vercel: Develop. Preview. Ship. For the best frontend teams PlanetScale: The world’s most advanced database platform — PlanetScale Cloudflare - The Web Performance & Security Company | Cloudflare 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

30 Okt 202328min

685: Jason Lengstorf on Live Streaming, Creating Content, and Building a Studio Space

685: Jason Lengstorf on Live Streaming, Creating Content, and Building a Studio Space

In this supper club episode of Syntax, Wes and Scott talk with Jason Lengstorf about his journey in video creation, live streaming, and tech education. What’s up with Jason’s new studio? How does he prep for a live stream? Show Notes 00:32 Welcome 02:21 Syntax Brought to you by Sentry 02:39 Who is Jason Lengstorf? 05:43 Why did you decide to go full time on Learn with Jason? 10:04 Jason’s new YouTube series idea 13:36 Jason gets a special delivery 14:30 What’s in Jason’s new studio? 20:14 What’s the ideal medium for content in 2023? 24:28 Treat decisions as forever, for now. 26:01 Is live streaming as difficult to get into as it seems? 29:21 How do you prepare for a live stream? 32:58 How do you decide what to create? 38:23 How do you feel about React? 40:21 What are your thoughts on AI? 49:08 Supper Club questions 56:25 Sick Picks Sarah Drasner’s Site Animation With Svelte (with Scott Tolinski) — Learn With Jason Gatsby Netlify Jessica Kobeissi ANDREW HUANG Theo Browne Cassidy Williams Bytes - The Best JavaScript Newsletter ZSA Moonlander: ErgoDox EZ Operator Fonts Night Owl SyntaxFM by SyntaxFM MD IO ILME-FX3 | Interchangeable-lens Cameras FE 24-70 mm F2.8 GM Sick Picks Synergy - Share one mouse & keyboard across computers Shameless Plugs LearnWithJason.dev: Learn. Build. Grow. Together. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

27 Okt 202358min

684: Spooky Coding Horror Stories 2023 - Part 2

684: Spooky Coding Horror Stories 2023 - Part 2

In this episode of Syntax, Wes and Scott relate even more spooky listener submitted coding horrors including crypto copy paste, Big Brother bug, losing $50,000, 2,000 SMS, a $20,000 hour, and more. Show Notes 00:09 Velcome to Synax 01:09 Syntax Brought to you by Sentry 01:36 Stories are anonymous! 01:57 Crypto copy + paste 03:48 Big Brother Bug 07:00 One of 6 laptops that can fix npm 07:57 Auto-submitting payments 09:42 40,000 orders shipped and refunded 11:16 Dropping the analytics database 11:40 dev was actually production 12:40 Updating the DNS 13:40 Losing ~$50,000 15:30 Clearing 80 million records 16:21 Web chat DDoS 18:00 URL Shortener #$@%# Ontario’s rejected licence plates for 2022 | CP24.com Boonta Vista: A “political” podcast for “smart” people 21:12 Sending an email to 20,000 users 21:42 Moving code to GitHub 23:32 “Lorem sale” 26:08 2,000 SMS messages 27:00 International shipment of kiosks 28:19 Crashing production Slow DB Queries | Sentry Documentation 31:01 Hitting customers credit card limit 32:01 Infinite redirect loop 32:53 My first commit 33:23 Augmented reality game prize mistakes 35:15 A $20,000 hour 35:57 Site went down for 3 days 37:42 Accidentally truncated the prod database 38:48 Off by one error 40:05 Exposing database credentials 42:08 Delete a temp directory on prod 44:51 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Race to the Summit Wes: 100LBS Strong Magnetic Hooks 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

25 Okt 202350min

683: Spooky Coding Horror Stories 2023 - Part 1

683: Spooky Coding Horror Stories 2023 - Part 1

In this Hasty Treat, Scott and Wes relate some spooky listener submitted coding horrors including updates for a large furniture retailer, pull request oversights, disallowing everything in a robots.txt, massive email fail, and more. Show Notes 00:21 Welcome 01:22 Whetting your whistle 01:52 Syntax Brought to you by Sentry 02:13 Site updates for one of the largest furniture retailers in my country 04:18 The Embarrassing Test Page Incident 05:54 The Pull Request Oversight 08:02 Making changes to a JSON file 13:11 Deploying a “disallow everything” robots.txt 14:45 GDPR Deletion 16:11 Dropping the backing disk for the production postgres 17:05 Accidentally pushing staging code as an update 18:34 Email fail 19:25 Hot mobile app prayers 22:28 Bogus ACH info 23:51 Wiring money error 26:44 Payment gateway test not production 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

23 Okt 202331min

Design Systems with Brad Frost

Design Systems with Brad Frost

In this supper club episode of Syntax, Wes and Scott talk with Brad Frost about how to implement design systems in small and large scale projects, best practices around naming things, keeping everything in sync across different codebases, and how design systems help projects. Show Notes 00:32 Welcome 01:02 Syntax Brought to you by Sentry 01:34 Introducing Brad Frost Brad Frost.com Atomic Design by Brad Frost Brad (@brad_frost) on Twitter Brad on LinkedIn Brad on Mastodon Brad on YouTube Brad on GitHub Brad Frost on CodePen Big Medium | Design for What’s Next 06:43 What is a design system? 12:12 How do you keep design and code in sync? Material Design Shopify Polaris Carbon Design System The Design System Ecosystem | Brad Frost 16:13 How do you use Shopify, WordPress, React, etc. through a design system? 19:41 How is CSS handled? 25:40 What’s the benefit of going all in on web components? 29:13 Do small startups need to worry about design systems? 33:03 How do design tokens work? 38:17 How do you deal with pushback on design systems? 41:46 How do you go outside the guidelines? 45:24 What system do you use for naming things? 49:34 How do you best document your language choices? 51:09 Supper Club questions Thinking in Systems: International Bestseller: Donella H. Meadows, Diana Wright: 9781603580557: Amazon.com: Books Miriam Eric Suzanne Zeldman on Web and Interaction Design - Famous for stating the obvious. 57:54 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Rubblebucket Shameless Plugs Frostapalooza! | Brad Frost FROSTAPALOOZA - A Concert Party Happening On August 17th 2024 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

20 Okt 202359min

Populært innen Politikk og nyheter

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