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

Avsnitt(969)

721: You should learn Drizzle, the TypeScript SQL ORM

721: You should learn Drizzle, the TypeScript SQL ORM

We’re doing a Tasty overview of Drizzle in this episode. What is Drizzle? What are different types of databases? How do you host databases? What have we built with Drizzle? And how does Drizzle handle relational data, TypeScript, querying, selects, transactions, and more! Show Notes 00:10 Welcome 00:52 Syntax Brought to you by Sentry 01:50 What is Drizzle? 09:11 Different types of databases 17:58 Why pay for SQLite hosting? 20:36 Defining your data structures 24:27 What we’ve built using Drizzle 28:28 Relational data 36:17 TypesScript and Drizzle 40:53 Querying + Selects with Drizzle 46:23 Transactions 47:09 Syntax Drizzle Studio theme 48:27 Sick Picks Drizzle ORM Drizzle ORM - Overview Meet Drizzle Studio Benchmarks Sequel Pro TablePlus phpMyAdmin Cloudflare D1 Bun habitpath.io Chartable Neon Answer Overflow Drizzle Studio Themes Sick Picks Scott: BlackBerry - Apple TV (CA) Wes: Candle Warmer Lamp Shameless Plugs Syntax Tiktok Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

24 Jan 202454min

720: Where Does Time Come From?

720: Where Does Time Come From?

It is time. Wes and Scott attempt to blow your minds by talking about time, who’s tracking time, where does time come from, what time is it in your browser vs someone else’s server, and standards around time. Show Notes 00:25 Welcome 00:55 Thanks to Chris Enns LemonProductions.ca Chris Enns on Twitter Podcast tutorials by Chris Enns on YouTube 03:14 What is time in the browser? 06:27 What are atomic clocks? Atomic Clocks and Cloudflare 08:22 Network time 09:35 Device time 11:11 Why is time so important? 14:35 Epoch time Syntax epoch convertor 16:58 ISO 8601 standard ISO 8601 19:20 RFC 3339 RFC3339 20:35 Time zone support 21:59 The Temporal API Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

22 Jan 202427min

719: Fullstack TypeScript Apps with No Build Step?! with Brian LeRoux

719: Fullstack TypeScript Apps with No Build Step?! with Brian LeRoux

Wes and Scott talk with Brian LeRoux about not using a bundler, handling TypeScript, live reloading, Enhance being a meta framework, how Enhance handles CSS, his experience at AWS: Reinvent, and the state of JavaScript run times in 2024. Show Notes 00:31 Welcome 01:00 Introducing Brian Leroux 01:32 Syntax Brought to you by Sentry 01:54 You can’t fix bugs you can’t see 03:14 Not using a bundler 05:48 Downsides of not using a bundler 11:13 What about TypeScript? 13:58 Is there a waterfall of imports? 18:29 What happens to live reloading? 22:12 The browser upgrade path 26:39 Is Enhance a meta framework? 29:02 What are you doing about SSR web components? 33:24 Can you refresh part of the application? 36:22 What about state management and Enhance? 42:52 How does Enhance handle CSS? 48:26 How was AWS: Reinvent? 54:47 What’s happening with the Begin CLI? 55:55 Any thoughts on new JavaScript run times? 59:51 Sick Picks brian.io Quickstart - Architect documentation Enhance aws-lite Sick Picks Analogue Pocket Shameless Plugs Begin — The Cloud Platform for Functional Web Apps Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads

19 Jan 20241h 3min

718: React Server Components

718: React Server Components

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! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

17 Jan 202456min

717: How to be Productive

717: How to be Productive

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! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

15 Jan 202432min

716: JS Perf Wins & New Node.js Features with Yagiz Nizipli

716: JS Perf Wins & New Node.js Features with Yagiz Nizipli

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 Oxc @Boshen_c Shameless Plugs @yagiznizipli Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads

12 Jan 20241h 1min

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

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

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! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

10 Jan 202451min

714: CSS :has() in Every Browser! 10 Uses

714: CSS :has() in Every Browser! 10 Uses

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! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

8 Jan 202430min

Populärt inom Politik & nyheter

p3-krim
svenska-fall
rss-krimstad
flashback-forever
motiv
rss-viva-fotboll
aftonbladet-krim
blenda-2
krimmagasinet
rss-krimreportrarna
rss-sanning-konsekvens
aftonbladet-daily
svd-dokumentara-berattelser-2
rss-vad-fan-hande
spar
fordomspodden
grans
olyckan-inifran
politiken
rss-flodet