Caching strategies: what, how, when Jake Archibald’s Offlline Cookbookhttps://jakearchibald.com/2014/offline-cookbook/ outlines several strategies to use Service Workers. The two most common ones are cache-first and network-first. In a cache-first situation we check the cache for the resource we requested and if it’s not in the cache then we fetch it from the network. This works on second and subsequent visits as on first visit the cache will be empty. network first is the opposite. We fetch the resource from the network and if that fails we check the cache for the resource. I use a third strategy I dubbed network-only which...
The first way to build a ServiceWorker is to manually write Javascript to accomplish the task. We’ll look at the basics of a service worker and different strategies to cache the content basd on our needs. Before we get started there are some things to consider: This is an enhancement Reliable network access is something we take for granted. We expect desktop and mobile bandwidth to remain available and constant and get really disappointed about the network and applications when the network fails. But we’ve all been in sitautions where the network is not available at all or when the...
Application Shells and Service Workers We’ll work through the process of manually adding a service worker without tools or web components. We will then look at building a progressive web application using service workers, sw-toolbox and sw-precache. As we go along we’ll touch on diverse subjects such as: - Offline as progressive enhancement - Speed still matters - Different cache strategies for Service Workers - sw-toolbox - Service worker web components - Progressive Web Applications what's a service worker To start I’ll provide two different definition of what a Service Worker is and then we’ll draw some comparisons and a...
Out of the many things in the CSS working group universe I’ve picked 3 to highlight because I think they have the most potential to make our web layouts look closer to a printed experience. Exclusions CSS Exclusions Module Level 1https://www.w3.org/TR/css3-exclusions/ provides a way to create exclusions in our CSS-based layouts. Exclusions define arbitrary areas around which inline content can flow and extend the notion of content wrapping previously limited to floats. We can use exclusions to create effects like those in magazines. From using it to highlight pullquotes with extra white space around or use shape inside to lay...
Do we have the tools to do print on the web? More and more I'm starting to think we can do a fairly nice job of doing print-like layouts for our web content. Not all the technologies are ready yet but we're getting close. In the following sections we'll look at some of these technologies and how they produce effects that are similar to those we see in print. There will also be a section of technologies that are coming down the standards pipeline that will supplement those technologies already available. Flexbox and native Grids Flexboxhttps://publishing-project.rivendellweb.net/new-in-the-css-horizon-css-flexbox/ and Gridshttps://publishing-project.rivendellweb.net/new-in-the-css-horizon-native-css-grids/ offer different...
This topic may sound familiar to people who have been reading my blog for a while. I’ve posted about most, if not all the component technologies I’ll be speaking about below. I hope I can change the context of the discussion enough not to bore you to death. Unless it’s necessary I will not write code, this is meant as an idea generator. Either I’ve already written about the technology or I will do so in a separate post. I keep coming back to Jen Simmonshttp://jensimmons.com/ SFHTML5 talk on web layouts. Partly because it takes me back to my beginnings...
One of the most frustrating things from doing CSS development is all the cool things that appear on the horizon that we can't really use right now and won't be able to until browser vendors decide that they can implement in a performant manner and one which will not "break the web". The result is that while there are tens of CSS modules available it is still problematic to polyfill forward or prollyfill for probably fill CSS as much as it is to create custom elements with Web Components. hitch.js Hitch.js sounds like an interesting promise. A Javascript library that...
my take on cutting the mustard I'm old enough to remember doing some serious browser detection when building pages. We had to detect browsers because they worked different enough even within different platforms of the same version of a browser. Browser detection fell out of favor as standards improved and browser vendors decided to work together instead of against each other. The alternative was feature detection where if you knew the feature you wanted to support you could test for it directly. One of the best examples was working with layers and DHTML. Who remembers code like this: javascript var...
One of the earliest large scale interactions between man and technology I saw is Unnumbered Sparkshttp://www.unnumberedsparks.com/, an installation by Janet Echelmanhttp://www.echelman.com/ and Aaron Koblinhttp://www.aaronkoblin.com/ produced for TED’s 30th anniversary in Vancouver, BC. What I found most striking, even though I wasn’t there was the audience participation. people passing by the exhibit would use their phones to draw, change colors and add sounds to the piece. > The sculpture spanned 745 feet between buildings in downtown Vancouver, Canada from March 15-22, 2014 maphttps://www.google.com/maps/place/Vancouver+Convention+Centre/@49.2889178,-123.1146661,18z/data=!4m2!3m1!1s0x0:0x24cec96c28a4a2bd. At night, it came alive with illumination. Visitors with smartphones and tablets were able to paint vibrant beams...
HTML documents don’t have many features to include additional semantics. With XHTML we could use namespaces but nowadays everyone seems to hate anything related to XML and the functionality of namespaceshttps://www.w3.org/TR/html5/infrastructure.htmlnamespaces seems to have changed considerably since XHTML 1.0https://www.w3.org/TR/xhtml1/. But there are ways to add semantics to an HTML page through custom attributes, extensions to HTML or a combination of both. We’ll explore some of the macine readable semantic additions to HTML: - Microformats, - RDFa Lite - JSON-LD - Microdata - data- attributes We’ll also explore some semantics derived from WAI and WAI-ARIA specifications along with their digital publishing...
