There have been new additions to the promise arsenal that warrants a deeper look so we're ready to use them when they are stable enough to do so. What we started with promise.allhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Promise/all returns a single Promise that resolves when all of the promises passed resolve. It rejects with the reason for the first promise that rejects. Promise.racehttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Promise/race returns a promise that fulfills or rejects as soon as one of the promises in an iterable fulfills or rejects, with the value or reason from that promise. What we got recently Promise.finallyhttps://publishing-project.rivendellweb.net/promise-finally-finally/ Promise.finally ensures that code will run once, regardless of...
Making web content work across locales, each with it's own way to display dates, time is a challenge. Most of the time, when I hear about internationalization or locale aware data manipulation I hear about Moment.jshttps://momentjs.com/ or date-fnshttps://date-fns.org/. Both libraries are awesome, they allow you programmatically control how certain portions of text are presented to the user based on their locale either a default or one they've provided. However, there is also a built-in way to do these presentations. The Intlhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Intl object is the namespace for the ECMAScript Internationalization APIhttps://www.ecma-international.org/ecma-402/, which provides language sensitive string comparison, number formatting, and date,...
One of the limitations of the World Wide Web is the lack of fonts for all the world languages. Even if we were to find fonts for all the languages we want to use it's unlikely that we'll find fonts that work well together. Google has developed and released as open source a family of fonts that cover all the languages covered in the Unicode standardhttps://unicode.org/. They are not quite up to the intended goal of full Unicode support but they are getting close. The idea is to have a set of fonts for Unicode languages that work well together...
There are times when working with non-English languages on the web can be a real problem. We'll look at what's the historical background for the issue, how different encodings have tried to solve it, and how Unicode addresses the problem. The web and the larger Internet started in the US in English and, as such needed, only 7-bit characters to represent all the characters needed for the English alphabet. This character set was known as ASCIIhttps://www.cs.cmu.edu/pattis/15-1XX/common/handouts/ascii.html American Standard Code for Information Interchange. While the web was primarily an American endeavor written in English everything was fine but as the web...
Web performance is hard. There is no one size fits all solution and the amount of work we do to make our content performant is more than what we may want to do. This post will explore the process of creating and enforcing a performance budget, why it's important and how will this improve the bottom line. The following figures show how much stuff measured by the median number of requests and size in kilobytes have grown in a 3-year period from 2016 to March 2019 data is taken from the HTTP Archive's state of the webhttps://httparchive.org/reports/state-of-the-web report. !Timeseries of...
a-frame addresses a different problem space in VR and AR: Authoring WebGL is really hard. We will skip the raw WebGL version, don't want to scare readers away by talking about shaders and compiling them into Javascript and how to use them. Instead, we'll move straight into the abstractions. I prefer to use three.jshttps://threejs.org, a very powerful abstraction on top of native WebGL implementations... but even as an abstraction the code is still not easy to understand if you're not familiar with 3D concepts. The code below assumes you've already downloadedhttps://cdnjs.com/libraries/three.js and linked the library using script tags. js //...
WebXR is an evolutionary development of the old WebVR APIs that addresses user feedback and additional use cases that were not available when the original WebVR APIs were created. The Immersive Web Community Group expects the final WebVR compatible draft to be released this summer 2019 and the candidate recommendation with two interoperable implementations to be released towards the end of the year. While we wait for the WebXR specification to solidify, we can play with libraries that abstract some of the underlying complexities of WebVR, WebXR, and the basic Three.js library. Google An interesting tool I saw at SFHTML5...
I've been playing a little with Open Type font variations and their CSS equivalents for a few weeks now and I've revisited a few areas I had played with before and left because, at the time, I didn't see the need or usefulness. That said, there are projects where good typography is just as important than size, line height, and other basic elements. In this essay, we'll look at some less common features of OpenType fonts and how to use them in CSS, both the original specification using font-feature-settings and the newer version using font-variants-. We'll also look at ways...
WebAssemblyhttps://webassembly.org/ and its predecessor asm.js provide a portable target for compilation of high-level languages like C, C++, Go, and Rust among others, enabling deployment on the web for client and server applications. See the Awesome WebAssembly Languageshttps://github.com/appcypher/awesome-wasm-langs for a curated list of languages that can be compiled to WASM. It is very important to point out that WASM is not trying to replace Javascript on the web. According to the WebAssembly FAQ: > WebAssembly is designed to be a complement to, not replacement of, JavaScript. While WebAssembly will, over time, allow many languages to be compiled to the Web, JavaScript...
Fetch, the replacement for XmlHTTPRequest object xhr for short has been around long enoughhttps://caniuse.com/feat=fetch for me to consider it well baked into the platform and safe to use. As a quick refresher, this script will fetch the latest 10 posts from my blog in JSON format that we can then feed into a framework or templating engine. We're using async/await to make the code easier to read. js const url = "https://publishing-project.rivendellweb.net/wp-json/wp/v2/posts"; const getData = async url => { try { const response = await fetchurl; const json = await response.json; console.logjson; } catch error { console.logerror; } }; getDataurl;...
