Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

702: New + Proposed JS APIs for 2024

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.

In this episode of Syntax, Wes and Scott talk through new and proposed JavaScript APIs including ones related to regex, sourcemaps, structured clone, temporal, JSON modules, and more! <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:10">00:10</a> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:26">01:26</a> Syntax Brought to you by Sentry</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=02:55">02:55</a> RegExp Escaping Proposal</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href= "https://github.com/tc39/proposal-regex-escaping">tc39/proposal-regex-escaping: Proposal for investigating RegExp escaping for the ECMAScript standard</a></li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=05:25">05:25</a> Intl.DurationFormat</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href= "https://github.com/tc39/proposal-intl-duration-format">tc39/proposal-intl-duration-format</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=07:55">07:55</a> Standardized Sourcemaps</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href= "https://github.com/tc39/source-map-rfc">tc39/source-map-rfc: RFCs for the source map debug format.</a></li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=10:43">10:43</a> Structured Clone</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href= "https://developer.mozilla.org/en-US/docs/Web/API/structuredClone">structuredClone() global function - Web APIs | MDN</a></li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=12:54">12:54</a> Temporal</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href= "https://syntax.fm/show/295/hasty-treat-temporal-date-objects-in-javascript"> Hasty Treat - Temporal Date Objects in JavaScript</a></li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href= "https://github.com/tc39/proposal-temporal/issues/1450">Tracking issue for syncing with IETF standardization work (req’d before implementers can ship unflagged) · Issue #1450 · tc39/proposal-temporal</a></li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=20:59">20:59</a> FindLast and findLastIndex</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href= "https://github.com/tc39/proposal-array-find-from-last">tc39/proposal-array-find-from-last: Proposal for Array.prototype.findLast and Array.prototype.findLastIndex.</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=22:27">22:27</a> JSON modules</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href= "https://github.com/tc39/proposal-json-modules">tc39/proposal-json-modules: Proposal to import JSON files as modules</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=24:46">24:46</a> Regex Modifiers</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href= "https://onedrive.live.com/view.aspx?resid=934F1675ED4C1638!294749&ithint=file,pptx&wdo=2&authkey=!AGkZ0bMbvAWOTbI"> RegExp Modifiers - June 2022.pptx - Microsoft PowerPoint Online</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=26:50">26:50</a> Array Grouping</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href= "https://github.com/tc39/proposal-array-grouping">tc39/proposal-array-grouping: A proposal to make grouping of array items easier</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="#t=30:48">30:48</a> Array Methods</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href= "https://github.com/tc39/proposal-change-array-by-copy">tc39/proposal-change-array-by-copy: Provides additional methods on Array.prototype and TypedArray.prototype to enable changes on the array by returning a new copy of it with the change.</a></li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href= "https://syntax.fm/show/654/6-or-so-new-approved-and-proposed-javascript-apis"> 6 or so New Approved and Proposed JavaScript APIs</a></li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="#t=32:12">32:12</a> Promise.withResolvers</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="#t=35:08">35:08</a> Function.prototype.memo</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href= "https://github.com/tc39/proposal-function-memo">tc39/proposal-function-memo: A TC39 proposal for function memoization in the JavaScript language.</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="#t=37:48">37:48</a> Node has a Proposed ESM Detection flag</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="#t=39:54">39:54</a> Node has navigator.userAgent</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="#t=41:29">41:29</a> Built in .env support</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="#t=42:52">42:52</a> Permissions model & test runner continues to be worked on</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="#t=44:06">44:06</a> HTML Web charts</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="https://github.com/whatwg/html/issues/9295">Proposal: Web Charts · Issue #9295 · whatwg/html</a></li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href="#t=45:39">45:39</a> autopause</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="https://github.com/whatwg/html/issues/9793">Add <code>autopause</code> attribute to media elements to allow automatic pausing of media · Issue #9793 · whatwg/html</a></li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="#t=46:30">46:30</a> Meta Tag for AI generated content</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://github.com/whatwg/html/issues/9479">Proposal: Meta Tag for AI Generated Content · Issue #9479 · whatwg/html</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://schema.org/">Schema.org - Schema.org</a></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href="https://sentry.shop/">Syntax × Sentry Swag Store – Syntax × Sentry Shop</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://syntax.fm/snackpack">Syntax - A Tasty Treats Podcast for Web Developers.</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="#t=50:13">50:13</a> Poster frame</li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://github.com/whatwg/html/issues/9812">HTML Video Element: Proposal for adding [srcset] + [posterset] + [sizes] on video element as well [posterset] on source elements · Issue #9812 · whatwg/html</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="#t=50:57">50:57</a> Popover invoker</li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://github.com/whatwg/html/issues/9111">Popover does not know what triggered it · Issue #9111 · whatwg/html</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="#t=51:25">51:25</a> Autocomplete on ‘contenteditable’ Elements</li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://github.com/whatwg/html/issues/9065">Autocomplete on ‘contenteditable’ Elements · Issue #9065 · whatwg/html</a></li> <li class="has-line-data" data-line-start="50" data-line-end="52"> <a href="#t=52:17">52:17</a> Sick Picks</li> </ul> <h3 class="code-line" data-line-start="52" data-line-end="53"> <a id="Sick_Picks_52"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="54" data-line-end="55"> Scott: <a href="https://www.netflix.com/ca/title/81615919">Escaping Twin Flames cult documentary</a></li> <li class="has-line-data" data-line-start="55" data-line-end="57"> Wes: Lao Gan Ma spicy Chili Oil</li> </ul> <h3 class="code-line" data-line-start="57" data-line-end="58"> <a id="Shameless_Plugs_57"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="59" data-line-end="60"> Scott: <a href="https://sentry.io">Sentry</a></li> <li class="has-line-data" data-line-start="60" data-line-end="62"> Wes: <a href="https://wesbos.com/courses">Wes Bos Courses</a></li> </ul> <h3 class="code-line" data-line-start="62" data-line-end="63"> <a id="Hit_us_up_on_Socials_62"></a>Hit us up on Socials!</h3> Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: <a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a>

In this episode of Syntax, Wes and Scott talk through new and proposed JavaScript APIs including ones related to regex, sourcemaps, structured clone, temporal, JSON modules, and more!
 Show Notes  00:10 Welcome
 01:26 Syntax Brought to you by Sentry
 02:55 RegExp Escaping Proposal
 tc39/proposal-regex-escaping: Proposal for investigating RegExp escaping for the ECMAScript standard

 05:25 Intl.DurationFormat
 tc39/proposal-intl-duration-format

 07:55 Standardized Sourcemaps
 tc39/source-map-rfc: RFCs for the source map debug format.

 10:43 Structured Clone
 structuredClone() global function - Web APIs | MDN

 12:54 Temporal
  Hasty Treat - Temporal Date Objects in JavaScript

 Tracking issue for syncing with IETF standardization work (req’d before implementers can ship unflagged) · Issue #1450 · tc39/proposal-temporal

 20:59 FindLast and findLastIndex
 tc39/proposal-array-find-from-last: Proposal for Array.prototype.findLast and Array.prototype.findLastIndex.

 22:27 JSON modules
 tc39/proposal-json-modules: Proposal to import JSON files as modules

 24:46 Regex Modifiers
  RegExp Modifiers - June 2022.pptx - Microsoft PowerPoint Online

 26:50 Array Grouping
 tc39/proposal-array-grouping: A proposal to make grouping of array items easier

 30:48 Array Methods
 tc39/proposal-change-array-by-copy: Provides additional methods on Array.prototype and TypedArray.prototype to enable changes on the array by returning a new copy of it with the change.

  6 or so New Approved and Proposed JavaScript APIs

 32:12 Promise.withResolvers
 35:08 Function.prototype.memo
 tc39/proposal-function-memo: A TC39 proposal for function memoization in the JavaScript language.

 37:48 Node has a Proposed ESM Detection flag
 39:54 Node has navigator.userAgent
 41:29 Built in.env support
 42:52 Permissions model & test runner continues to be worked on
 44:06 HTML Web charts
 Proposal: Web Charts · Issue #9295 · whatwg/html

 45:39 autopause
 Add autopause attribute to media elements to allow automatic pausing of media · Issue #9793 · whatwg/html

 46:30 Meta Tag for AI generated content
 Proposal: Meta Tag for AI Generated Content · Issue #9479 · whatwg/html

 Schema.org - Schema.org

 Syntax × Sentry Swag Store – Syntax × Sentry Shop

 Syntax - A Tasty Treats Podcast for Web Developers.

 50:13 Poster frame
 HTML Video Element: Proposal for adding [srcset] + [posterset] + [sizes] on video element as well [posterset] on source elements · Issue #9812 · whatwg/html

 50:57 Popover invoker
 Popover does not know what triggered it · Issue #9111 · whatwg/html

 51:25 Autocomplete on ‘contenteditable’ Elements
 Autocomplete on ‘contenteditable’ Elements · Issue #9065 · whatwg/html

 52:17 Sick Picks
  Sick Picks  Scott: Escaping Twin Flames cult documentary

 Wes: Lao Gan Ma spicy Chili Oil
  Shameless Plugs  Scott: Sentry

 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

Aplikace Youradio Talk

702: New + Proposed JS APIs for 2024

Poslechněte si podcast