Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

New to JavaScript — ES2022

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p class="has-line-data" data-line-start="7" data-line-end="8">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.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Sanity__Sponsor_9" name="Sanity__Sponsor_9"></a>Sanity - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> <a href="http://sanity.io/">Sanity.io</a> 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 <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> 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 <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Auth0__Sponsor_15" name="Auth0__Sponsor_15"></a>Auth0 - Sponsor</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> 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: <a href= "https://a0.to/syntax">https://a0.to/syntax</a>.</p> <h2 class="code-line" data-line-start="18" data-line-end="19"> <a id="Show_Notes_18" name="Show_Notes_18"></a>Show Notes</h2> <p class="has-line-data" data-line-start="19" data-line-end="20"> 04:50 - Regex indicies</p> <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> New <code>d</code> flag in a regex</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="https://regex101.com/">https://regex101.com/</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> This will tell you the indexes (indicies) of the regex matches</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> Handy if you need to highlight or replaces matches in a string</li> <li class="has-line-data" data-line-start="24" data-line-end="26"> We can ask for the start and end positions of each matched capture group</li> </ul> <p class="has-line-data" data-line-start="26" data-line-end="27"> 07:16 - Class updates</p> <ul> <li class="has-line-data" data-line-start="27" data-line-end="28"> Private fields</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> Properties and Methods to be kept private</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> Prefix them with a <code>#</code></li> <li class="has-line-data" data-line-start="30" data-line-end="31"> =Helpful for internal state and methods which should not be accessed directly or at all by external</li> <li class="has-line-data" data-line-start="31" data-line-end="33"> In React how we have __<em>INTERNTAL_NEVER USE THIS</em></li> </ul> <pre data-initialized="true" data-gclp-id="3"> <code class="has-line-data" data-line-start="34" data-line-end= "51"> 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 </code> </pre> <ul> <li class="has-line-data" data-line-start="52" data-line-end="53"> Getters and setters introduced in es5</li> <li class="has-line-data" data-line-start="53" data-line-end="55"> <a href= "https://www.w3schools.com/js/js_object_accessors.asp">https://www.w3schools.com/js/js_object_accessors.asp</a></li> </ul> <pre data-initialized="true" data-gclp-id="4"> <code class="has-line-data" data-line-start="56" data-line-end= "68">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 </code> </pre> <p class="has-line-data" data-line-start="69" data-line-end="70"> 09:07 - Class fields</p> <ul> <li class="has-line-data" data-line-start="70" data-line-end="71"> This may seem super old because we have been polyfilling it forever</li> <li class="has-line-data" data-line-start="71" data-line-end="72"> Right now if you want an instance field on a class, you need to declare it in the constructor</li> <li class="has-line-data" data-line-start="72" data-line-end="74"> Now we can just declare them inside the class</li> </ul> <p class="has-line-data" data-line-start="74" data-line-end="75"> 10:36 - Static fields and methods</p> <ul> <li class="has-line-data" data-line-start="75" data-line-end="76"> As above can also be <strong>static with the static keyboard</strong></li> <li class="has-line-data" data-line-start="76" data-line-end="79"> Works for methods too <ul> <li class="has-line-data" data-line-start="77" data-line-end="79"> Explain what a static method is</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="79" data-line-end="80"> 13:17 - Top level await</p> <ul> <li class="has-line-data" data-line-start="80" data-line-end="82"> So handy in modules. Need to pull in some data? Simple.</li> </ul> <p class="has-line-data" data-line-start="82" data-line-end="83"> 15:19 - Ergonomic brand checks for private fields</p> <ul> <li class="has-line-data" data-line-start="83" data-line-end="85"> Used for checking if a private field on a class exists using the <code>in</code> keyword</li> </ul> <p class="has-line-data" data-line-start="85" data-line-end="86"> 16:00 - <code>.at()</code> method</p> <ul> <li class="has-line-data" data-line-start="86" data-line-end="87"> Strings and arrays - we can use square brackets to reference items of the array</li> <li class="has-line-data" data-line-start="87" data-line-end="89"> Super handy for grabbing the last item of an array</li> </ul> <pre data-initialized="true" data-gclp-id="5"> <code class="has-line-data" data-line-start="90" data-line-end= "106">// 

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

Aplikace Youradio Talk

New to JavaScript — ES2022

Poslechněte si podcast