5 New and Upcoming Web Features You May Not Know About

1. BigInt

Until 2018, the largest integer for which you would be guaranteed precision in your JS code was Number.MAX_SAFE_INTEGER, or 9,007,199,254,740,991. Any higher than that, and you’d run into lack of precision, e.g. 9007199254741000 === 9007199254741001 evaluates to true. But if you need to work with larger and precise integers in your JavaScript, then you might want to reach for BigInt. BigInts allow you to specify arbitrarily long integers while still maintaining their precision. All you have to do is add the letter n to the end of an integer, and you now have a variable of type bigint. Yes, this is a brand new primitive type for JavaScript! Though, BigInts come with some tradeoffs. You can’t mix BigInts and plain old Numbers to do arithmetic; that will result in a thrown Error. Though, you can wrap a Number in a BigInt constructor, and will work just fine.

1n + BigInt(1).

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt

https://developers.google.com/web/updates/2018/05/bigint

https://github.com/GoogleChromeLabs/jsbi

2. Intl.RelativeTimeFormat

The Intl (Internationalization) suite of APIs has served to slowly replace many handy utilities that we’ve had to hand-roll ourselves over the years, like those that handle string, number, time, and date formatting, especially across languages and locales. RelativeTimeFormat is one of the newest Intl APIs to hit JavaScript, and it helps developers to express relative amounts of time in a structured way while handling all the annoying edge cases behind the scene. For example:

const rtf = new Intl.RelativeTimeFormat(“en”, { numeric: “auto” });

rtf.format(-1, “day”);

// > “yesterday”

rtf.format(1, “day”);

// > “tomorrow”

rtf.format(3, “day”);

// > “in 3 days”

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RelativeTimeFormat

https://github.com/tc39/proposal-intl-relative-time/

3. Scroll snap

Have you ever visited a page that leveraged scrolljacking? Better yet, have you ever tried to build a page that leveraged scrolljacking? I’ll go ahead and guess that dealing with a page like this on either end of things wasn’t the easiest experience. Pages like this are often plagued with janky animations and general confusion to the user. To remedy this and offer up a once-and-for-all solution to accomplishing this type of experience, CSS scroll snapping has been built directly into the browser! This suite of CSS properties allows you to lock the viewport to certain elements or locations after a user has finished scrolling. No more pathetically slow or confusing JS implementations!

https://css-tricks.com/introducing-css-scroll-snap-points/ 
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap

4. Houdini

Calling this simply a feature is definitely an understatement; Houdini is actually a set of JavaScript APIs that will allow developers to essentially extend what CSS can do for us. It will enable developers to hook into the browser’s rendering engine on a lower level than ever before. Imagine being able to create your own display properties, use a canvas-like drawing context to paint on the screen based on your own self-defined rules, and create performant, custom animations based off of user input. All these things will be possible with Houdini APIs. It’s still early days for Houdini, but I can imagine these APIs completely transforming the way we build the web.

https://ishoudinireadyyet.com/

http://houdini.glitch.me/

https://player.fm/series/series-1949129/ep-68-houdini

5. Web Locks API

If a user has your web app open in at least two separate browser tabs and that app needs to talk to the server regularly for updates, it might be unnecessary to have each tab perform its own calls to the server. Each tab could be getting stale or outdated information if many calls to the server are happening in quick succession, and this could also be bad for performance and battery life. The Web Locks API is designed to solve this set of problems by allowing one tab to asynchronously acquire a “lock,” hold onto it while an arbitrary amount of work is performed, and then release it. Whenever one tab has a lock, no other tab from the same domain can acquire the lock, so this can be used to greatly reduce duplicate work across processes.

https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_API

Leave a Reply