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;...
Until recently Javascript did not have a class system. This doesn't mean that we couldn't create reusable objects but that we had to work through hoops to make it work. Prototypal Inheritance: It's all about the prototype Early versions of Javascript until ES2015 used prototypal inheritance. We create a master object, inherit from the base object, and assign new properties to the object's prototype. In this example, Employee is the base objects with a few attributes. Other types of objects will inherit from this directly or indirectly. js function Employee { this.name = ''; this.dept = 'general'; } The next...
I started working on the web in 1994 and I've been privy to the evolution and complication of the web and its component technologies. The web was much simpler then, with a limited set of tags and little CSS and JavaScript that only changed the look of items on the page. If we wanted applications we had the option of Perl or C to create CGI script and roundtrips to the server for each request. We've improved considerably from those days to where the web is now. We have hundreds, if not thousands, of projects that we can learn from...
JavaScript gives us multiple ways to insert content into the DOM. One generic and simple way and a more flexible and complicated alternative. Inserting new elements: The simple version The simple way to insert content into an existing element is to use appendChildhttps://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild to insert the element after the existing children of the specified element We're using the following HTML element as the host of our new element. html In the JavaScript, we capture the container element in a variable and then create a button element. Next, we assign attributes to the button we just created. An id and the...
Most of the work I've done recently has been as inline SVG meaning that the SVG is inserted directly into the document; this has advantages and disadvantages. In this post we'll discuss why we would use SVG as images, what are the disadvantages and disadvantages and a possible fallback using the picturefillhttp://scottjehl.github.io/picturefill/ polyfill. SVG is a very powerful vector graphics format that can be used either as an inline element or as a format for images on web pages. Which one you use will depend on a few things: - What browsers do we need to support? - What are...
The web has always been a scrolling medium but there are reasons and motivations that will make people decide for one or the other. There is no perfect 'one-size-fits-all' solution and you will have to evaluate which solution works best for your project. In this post, we'll discuss the advantages and disadvantages of pagination and scrolling and suggest one combined solution that may work well as a generic solution when working outside of frameworks. In Pagination vs. Scrolling: The Great Website Debatehttps://thrivehive.com/pagination-vs-scrolling-great-website-debate/ ThriveHive presents the advantages and disadvantages of both pagination and scrolling for web sites. They come to the...
Addy Osmani posted a note on twitter about native lazy loadinghttps://addyosmani.com/blog/lazy-loading/ support that will, hopefully, appear in Chrome 75 canary builds as I write this. This is awesome and I hope that other browsers will implement this as a native feature but it introduces complexities that we need to evaluate before we implement this in development. Before we start Native lazy loading works for both images and iframes but it's behind two flags. Surprisingly neither of them is Experimental Web Platform features. Go into chrome://flags and enable the following flags if you want both elements to work with lazy loading:...
