Streams are a very interesting concept and a new set of tools for the web. The idea is that we can read and write, depending on the type of stream we're using, chunks of content... either write them to a location or read them from a location. This will improve performance because we can start showing things to the user before it has completed loading. The example below how we can asynchronously download and display content to the user. The problem with this, if you can call it that, is that fetch will wait to download the entire file before...
If you don't know I have a ton of different type and layout experiments in their own websitehttps://web-layout-experiments.firebaseapp.com/. I'll start sharing some of the demos I've been working on via Twitter and explain the code for some here. The full demo is available in Codepenhttps://codepen.io/caraya/pen/MZVbLz. The HTML The HTML is as simple as it comes. It's an h1 heading element inside a container div. We will use the container to place the title and the myTitle heading as the target for lettering.js html Nightfall This example uses only the heading. We could add more text and assume that this is...
While working with Workbox I discovered a hidden danger of opaque responses. This post will address these shortcomings and provide an imperfect solution for how to do it. Normally, opaque responses are not cacheable along with additional restrictions. See Jeff Posnick's Stack Overflow Answerhttps://stackoverflow.com/questions/39109789/what-limitations-apply-to-opaque-responses for details but it boils down to the following items: - Because opaque responses are meant to be a black-box you won't get meaningful information from most of the properties of the Response class, or call the various methods that make up the Body interface, like json or text - Browsers pad the opaque resource size....
> Progressive Enhancement is a powerful methodology that allows Web developers to concentrate on building the best possible websites while balancing the issues inherent in those websites being accessed by multiple unknown user-agents. Progressive Enhancement PE is the principle of starting with a rock-solid foundation and then adding enhancements to it if you know certain visiting user-agents can handle the improved experience. PE differs from Graceful Degradation GD in that GD is the journey from complexity to simplicity, whereas PE is the journey from simplicity to complexity. PE is considered a better methodology than GD because it tends to cover...
One of the things that have been tempting when working on a PWA for my layout experimentshttp://web-layout-experiments.firebaseapp.com has been to do everything at once and work on them in parallel. Reading Jason Grigsby'shttps://twitter.com/grigs Progressive Web Applicationshttps://abookapart.com/products/progressive-web-apps book from A Book Apart reminded me that we need to take it easy, plan ahead and do incremental deployment of PWA features. The basics What do I mean by this? There are three technical items that we know we need to turn a site into a PWA: - Host the site using HTTPS - A Web Manifest - A Service Worker The basics...
Journalism Now episode on archival issueshttps://itunes.apple.com/us/podcast/archive-issues/id380130877?i=1000084466768&mt=2 raised some interesting issues when it comes to archiving content and the longevity of the web. In this post, I will cover some of the issues I think are important for archiving the web and provide some ideas at least the beginning of some ideas for automating the archival of content and applications. It is important to note that not all these techniques will allow you to view the content right away and, in some cases, may only provide the data you can use to restore the content to a viewable state in some...
As I've played more and more with fonts, both in terms of trying to find good pairings and looking at different serif fonts for body copy. Reading issue 61 of Coffee Table Typographyhttps://www.getrevue.co/profile/coffeetabletypography/issues/61-interpunct-for-the-future-145914 brought some display fonts for titles to my attention. It also raised some interesting questions about the voice of a text and how do we convey that voice through typography and other elements specific to the web when crafting type and reading experiences online. !Two covers from Alfred Bester Novels using Serif Gothichttps://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/alfred-bester-covers There are fonts that call immediate evoke a certain mood or feeling. Look at...
Cutting the mustardhttp://responsivenews.co.uk/post/18948466399/cutting-the-mustard is a term first defined by the BBC to explain how to test if a browser supported the features needed to run a web application. In the example below, we need to make sure that the browser supports query selectors, local storage and event listeners before we can build the app with these features. The traditional code works like this: js if'querySelector' in document && 'localStorage' in window && 'addEventListener' in window { // bootstrap the javascript application } I've also seen it converted to a function for ease of writing. We first define the items that...
I've always been interested in interactive stories. At first, I thought we may be able to use the locations as portals to 3D environments and collaborative experiences. A few days ago as I write this I saw Inside The Silent Historyhttp://contentsmagazine.com/articles/inside-the-silent-history/ and it made me think perhaps there is another way to look at telling stories on the web. Using a combination of Geolocation, multimedia and well-typeset content authors can drastically change the way they tell stories online. In this post, I will explore some ideas of what these stories can look like and what tools we can use to...
I wasn't aware that there is a completely separate standard for ECMAScript internationalization ECMA-402 or the ECMAScript 2019 Internationalization API that goes beyond the core specification and covers internationalization in a lot more detail than the main specification can. I came across this spec through a post from Mathias Bynenshttps://twitter.com/mathias about a new internationalization API available in Chrome 71. The API makes creating relative time strings like '1 week ago' or 'in 2 weeks' easier and faster since it's a part of the proposed internationalization spec. I've used moment.jshttps://momentjs.com/ but it's a beast in terms of file size 16.4K for...
