3. Objective
• Baseline
• The dialog element
• Individual CSS transform properties
• New viewport units
• Deep copy in JavaScript
• The :focus-visible pseudo-class
• The Transform Stream interface
• Features of ECMAScript 14
5. What is Baseline
• At Google I/O 2023, Google announced Baseline.
• Baseline helps you to see, whether a feature or API is safe to use in
your site or web applications.
• Everything that is fully supported in the most recent two versions of
major browsers will be part of Baseline.
The Chrome team is collaborating with other browser engines and
the web community to bring more clarity.
6. <dialog>: The Dialog element
• The <dialog> HTML element represents a dialog box or other
interactive component, such as a dismissible alert, inspector, or
subwindow.
9. Advantage of Native Element
• As a native HTML element, features like focus management, tab
tracking, accessibility and keeping the stacking context are built in.
10. Individual CSS transform properties
• We might be familiar with writing CSS transforms with three
properties in one line.
• With individual transform properties we can now specify transform
properties individually.
13. New viewport units
• Existing units work well on desktop, but it behaves differently on
mobile devices.
• Viewport size is influenced by the presence or absence of dynamic
toolbars.
• These are user interfaces such as address bars and tab bars.
• New CSS units that account for mobile viewports with dynamic
toolbars.
• The large, small, and dynamic viewport units
17. Deep copy in JavaScript
• const original = {id: 1, prop: {name: “Raj"}}
• const deepCopy = JSON.parse(JSON.stringify(original)); /* Old hack */
• const deepCopy = structuredClone(original); /* New way */
18. The :focus-visible pseudo-class
• The :focus-visible CSS pseudo-class checks if the browser believes
that the focus should be visible.
• We can now specify styles for only when focus should be visible.
• This selector is useful to provide a different focus indicator based on
the user's input modality (mouse vs. keyboard).
21. The TransformStream interface
• The TransformStream interface of the Streams API makes it possible
to pipe streams into one another.
• TransformStream is a transferable object.
• For example, we can stream data from one place, then compress the
data stream to another location as the data gets passed.
22. ECMAScript 14 (ES14) / ECMAScript 2023
• ECMAScript 14 (ES14) / ECMAScript 2023 is expected to release in
June/July of 2023.
• Change Array by Copy
• Array find from last
• Hashbang Grammar
• Symbols as WeakMap keys
27. Array find from last
• Array find from last, a proposal for .findlast() and .findLastIndex()
methods on array and typed array.
28. Hashbang Grammar#
• A hashbang comment behaves exactly like a single line-only (//)
comment, except that it begins with #! and is only valid at the
absolute start of a script or module.
• When the Unix kernel’s program loader executes a JavaScript
program, the host strips the hashbang to generate a valid source
before passing it down to the engine.
• The JavaScript interpreter will treat it as a normal comment — it only
has semantic meaning to the shell if the script is directly run in a
shell.
• For Example
#!/usr/bin/env node
console.log(‘Hello');
29. Summary
• Baseline
• The dialog element
• Individual CSS transform properties
• New viewport units
• Deep copy in JavaScript
• The :focus-visible pseudo-class
• The Transform Stream interface
• Features of ECMAScript 14
