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

GitHub Next Projects

GitHub Next Projects

In this Hasty Treat, Scott and Wes talk about new features coming to GitHub including Hey, GitHub!, GitHub Blocks, GitHub Copilot CLI, and more! Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. 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. Show Notes 00:23 Welcome 01:49 Responsive web design update 03:12 Let’s go 05:32 Sponsor: Linode 06:01 Sponsor: LogRocket 07:23 GitHub Next GitHub Next 08:17 GitHub Copilot for the CLI 11:52 Synthesizing results Syntax 540 - Responsive Design Techniques 13:31 Hey GitHub Syntax 481 - Supper Club Voice Coding with Pokey Rule 16:55 GitHub Blocks 18:58 GitHub Code search 21:36 GitHub Collaborative workspaces 23:43 GitHub Copilot for your own codebase 25:10 GitHub Copilot Radar 29:15 GitHub AI Pull Requests 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

5 Des 202232min

Supper Club × Bun with Jared Sumner

Supper Club × Bun with Jared Sumner

In this supper club episode of Syntax, Wes and Scott talk with Jared Sumner about why and how he created Bun, what Zig is, and the future of Bun. Tuple - Sponsor This week’s sponsor is Tuple, an app built specifically for remote pair programming. The app is written in C++ and tuned for high-resolution screen sharing and low-latency remote control. Because developers deserve better than Zoom or Meet for pairing. Tuple.app. Show Notes 00:37 Welcome 01:44 Who is Jared Sumner? Jarred Sumner on Twitter Bun Bun Discord Bun on GitHub 02:31 Why did you make Bun? 09:43 Using web API vs Node modules? 13:25 Do we still use npm? 15:42 Support for HTML Rewriter 16:46 Where do you see Bun being used? 19:25 Do you think someone will write a type checker? 21:18 Sponsor: Tuple 22:07 What is Zig? 24:57 Did you have a history of learning languages? 28:16 Have you ever thought of putting Bun on hardware? 29:59 Is there a package.json file in Bun projects? 31:34 What can’t Node just get faster? 32:16 What is the future of Bun? 36:27 Thoughts on types in JavaScript? 41:16 Why did you build an SQLite client into Bun? 42:54 Supper Club questions Starship Warp 48:52 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Bun meme 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

2 Des 202251min

Potluck × Twitter Following × TypeScript × Playwright

Potluck × Twitter Following × TypeScript × Playwright

In this potluck episode of Syntax, Wes and Scott answer your questions about strategies to find good Twitter follows, should we use TypeScript for a company blog, what’s Playwright, and more! Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. 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. Show Notes 00:10 Welcome 01:53 TikTok update 02:46 What strategies do you use to find the good stuff? Tweetdeck 11:17 What is the clear distinction b/w how the CRUD Ops & the Real time chat protocols (XMPP, Websockets, etc) differ? 15:56 Should we use TypeScript for a new blog? 20:45 Sponsor: Sanity 21:45 Is there any reason to still use string concatenation over template literals? 26:13 What should React devs use to get initial scaffolding in place? Create React App Vite Turbo Pack 29:38 What’s the deal with Playwright? Playwright 34:28 Sponsor: LogRocket 35:19 What separates a “scripting” language from a “programming” language? 39:37:14 Sponsor: Prismic 40:23:02 Do you have any tips on how to change a defeated programmer mindset? Partydown 47:34:07 How has your use of and work in the browser changed with Arc? Arc Browser Syntax 514 - Supper Club × Arc Browser with Hursh Agrawal 49:18:15 Why would I attach an event listener with the useCapture argument as true? 51:33:24 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Screwless plates / 4 pack of screwless plates Wes: Shoe Boxes for Cords Shameless Plugs Scott: LevelUp TikTok Wes: Wes Bos TikTok 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

30 Nov 202257min

Serverless Limitations

Serverless Limitations

In this episode of Syntax, Wes and Scott talk through some of the limitations of using serverless in your project. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. MagicBell - Sponsor MagicBell is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months. Show Notes 00:23 Welcome 01:08 Sponsor: Sentry 01:59 Sponsor: MagicBell 03:11 Topic introduction 04:44 Function limit Puppeteer 08:51 Node support 10:00 Cron jobs 11:12 Local development Miniflare 11:45 Database access SQLite 12:42 Sharing code 13:07 Environmental variables Netlify environmental variables 14:37 Timeouts 15:47 Sass is expensive 17:26 Infastructure as code 19:02 Search Algolia Shameless Plugs Scott: LevelUp Tutorials 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

28 Nov 202220min

Supper Club × Anything But Coding with Wes and Scott

Supper Club × Anything But Coding with Wes and Scott

In this supper club episode of Syntax, Wes and Scott talk with Scott and Wes! Talking about BBQ, electric cars, workout equipment, home renos - but they do sneak in a bit of coding talk! Kontent by Kentico - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.Spin up a new project today and discover Kontent. Tuple - Sponsor This week’s sponsor is Tuple, an app built specifically for remote pair programming. The app is written in C++ and tuned for high-resolution screen sharing and low-latency remote control. Because developers deserve better than Zoom or Meet for pairing. https://tuple.app/syntax Show Notes 00:37:11 Welcome 03:18:10 Saskatchewan and Saskatoon Berries Saskatoon Berry Barn 05:02:14 TV shows we’re watching Amazing Race Canada America’s Dance Crew Lakefront Luxury 12:49:12 New house vibe 18:29:06 Sponsor: Kontent 19:13:20 Sauna thoughts 22:58:24 Home gym thoughts Woodupp Tonal 40:22:16 Sponsor: Tuple 41:17:11 3D printer 44:11:09 How many things can you take on? 48:23:11 BBQ talk Amazing Ribs 55:26:11 Electric car update Ioniq 5 57:45:07 Supper Club questions Level Up Tutorials VS Code Theme Quokka VS Code Extension Quokkajs Console-Ninja 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

25 Nov 20221h 1min

Responsive Design Techniques

Responsive Design Techniques

In this episode of Syntax, Wes and Scott talk through some modern responsive design techniques that you may not have heard of, or haven’t had a chance to use yet. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:47 Clean Talk 03:55 The menu of responsive design Syntax 154 with Sara Soueidan 06:52 Responsive design basics 11:54 What should you build for first in 2022? 16:15 Shrink and grow until it looks bad 21:36 Menus in responsive 23:43 Sponsor: Linode 24:13 Grid systems 28:08 Grid and Flexbox CSS Grid Course Flexbox Course Can I Use 35:02 Sponsor: LogRocket 36:00 Container queries 45:56 FitText 49:12 How do you test these types of things? 51:15 Future techniques coming 53:28 Sponsor: Freshbooks 53:56 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Lutron Light switches Wes: Sunco Lighting BR30 Shameless Plugs Scott: LevelUp Tutorials 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

23 Nov 20221h 1min

React use() hook and Async Server Components Proposal

React use() hook and Async Server Components Proposal

In this Hasty Treat, Scott and Wes talk about the new proposal for React, what the basics of it are, why it’s being proposed, and some benefits and issues it brings up. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. 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 00:13 Welcome 01:39 Sponsor: Sentry 02:41 Auth0 03:57 A bit more auth 05:24 New RFC RFC: First class support for promises and async/await 08:30 What are the basics of this proposal? 10:12 Scott gets a little Svelte-y 11:44 Why is this being proposed? 17:14 Infinite loop possibility 18:44 Why is Svelte API better in this use case? Tanstack Smooshgate 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

21 Nov 202222min

Supper Club × Ryan Dahl and Deno

Supper Club × Ryan Dahl and Deno

In this supper club episode of Syntax, Wes and Scott talk with Ryan Dahl about Deno. Why was Deno created? What is Deno written in? How is Deno so much faster? And what’s the future of Deno? Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit Gatsby.dev/Syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️ Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. 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. Show Notes 00:36 Welcome Tinyclouds.org Ry on GitHub Deno Deno Discord 01:18 The introduction of Node 02:51 Why are you still betting on JavaScript for the web? 05:34 Why did you make Deno? 09:04 How does TypeScript fit into the landscape? 11:40 How is Deno so much faster? 13:28 Sponsor: Sanity 14:17 What is Deno written in? 15:56 Should developers be learning Rust? 18:27 Will libraries that work on npm eventually work in Deno? 21:52 Are we going to use Node API’s or web spec? 24:31 Sponsor: Sentry 25:31 What is tooling like for Deno? WinterCG Deno VS Code Extension 29:27 What is Deno deploy? Deno Deploy 34:01 Deno’s framework Fresh 38:56 Client side vs server side rendering 41:27 Sponsor: Gatsby 42:28 What’s the future of Deno? 43:39 Supper club questions 53:30 SIIIIICK ××× PIIIICKS ××× 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

18 Nov 202255min

Populært innen Politikk og nyheter

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