DEV Community

Syntax - Tasty Web Development Treats

What's New in Javascript

Scott and West talk about what’s new in JavaScript.

Fluent Conf - Sponsor

Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers.

Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences.

Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX

Netlify — Sponsor

Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.

They are also hiring! netlify.com/careers

Show Notes

1:55 - Scott’s new studio

4:57 - Pop Motion Pose

  • New library for React or vanilla JavaScript
  • Define locations instead of CSS styles
  • Pass the animation state into a React component as open or closed instead of active or inactive
  • Flip animation techniques
  • Style Fire - Simple HTML & SVG styler optimised for animation

8:44 - Intersection Observer

  • Browser-based API based on observables
  • Example uses: Tell me when this element is on the page, goes off the page or is halfway down the page

10: 32 - MDX

  • Webpack loader for MDX (i.e. JSX-infused Markdown) using mdx-it
  • Turns MarkDown files into components in Webpack

12:56 - Resize Observer

  • Watch elements for resize

15:47 Web Animations API

  • Works with animations natively in JavaScript
  • Tell your animations to play, pause, reverse, etc.
  • Instead of changing classes, you have full control over what the animation is doing
  • Web-Animation-JS Polyfill
  • Can I use

18:00 - Window Face Detector API

  • Create a new window.face detector and pass it an image tag and it returns an array of faces.

22:53 - Payment Request API

  • Eliminates check out forms
  • Allows platform to handle payment safely and securely

29:23 - INTL.NumberFormat

  • Format pricing with different currencies

32:59 - V8 BigInts

  • Makes working with big numbers more viable

34:53 - Speech Recognition

  • Converts speech to text
  • Pipe in different accents

36:22 - Text To Speech

  • Simulates text into spoken words

41:46 - ES6 Modules In Node

  • There are no ES6 modules in Node. It’s still being developed. If you want to build an ES6 module in Node, you have to use the .mjs extension
××× SIIIIICK ××× PIIIICKS ××× Tweet us your tasty treats!

Episode source