The idea is to create the service worker using only native APIs and seeing how much of the Workbox functionality I can duplicate without having to use a library. Constants and common items Individual constants for each of the caches. We store them separately so we can change the names to make cleanup easier without having to change the array we define later. js const PRECACHE = 'precache-v1'; const CONTENT = 'content-cache-v1'; const CSS = 'css-cache-v1'; const JS = 'scripts-cache-v1'; const IMAGES = 'image-cache-v1'; const FONTS = 'fonts-cache-v1'; expectedCaches is the array of cache names we expect to exists in...
Service Workers are awesome. They give you a performance boost and the capability of limited offline work without having to create apps for each platfomt that we want to use our app in. Service workers are the core of PWAs Progressive Web Applications where we take advantage of a set of web technologies to make apps that work closer to how native apps would. We'll concentrate on the service worker and in using Workbox.js and vanilla Javascript to create the service worker. I've chosen to go with Workbox first because the abbstraction makes it easier to create the type of...
Until we got CSS variables and now Custom Properties there was one way of setting custom attributes in an HTML element or directly in Javascript note the difference with CSS variables that can be later used from Javascript to change the value of the page: custom data attributes. According to the HTML standard data attributes specificationhttps://html.spec.whatwg.org/embedding-custom-non-visible-data-with-the-data--attributes > Custom data attributes are intended to store custom data, state, annotations, and similar, private to the page or application, for which there are no more appropriate attributes or elements. These attributes are not intended for use by software that is not known to...
One of the biggest pain points for me has been to create horizontal menus for navigation or other data we want to display across the page. If we're using the following HTML... html Home About Projects Layout Experiments Webgl Until I saw flexbox working I used to do tables for this type of layout. It was a pain the ass and it took a lot of work to make them line up and stay in a single line multiple lines are an even worse nightmare. The CSS I need to use Flexbox is very simple and it does to things....
I still keep looking for new items in the Webpack space that will make my code work better or will give me more information about it. I found two that are of particular interest to me. Size plugin Webpack's size pluginhttps://npm.im/size-plugin Prints the gzipped sizes of your Webpack assets and the changes since the last build. This may not sound like much but it's an important reminder during development. If your bundles grow every time you build your project it may end up hurting your performance budget and download speeds. Using the plugin First, install it using NPM bash npm...
After a long time, Babel 7 has been releasedhttps://babeljs.io/blog/2018/08/27/7.0.0. If you use Babel at all, it's important to do the following things to make sure you're good to go: - Make sure that the project's package.json file points to the right version of Babel - If you use yearly presets ES2015 / ES2017 or the latest preset change to using preset-env - The yearly presets have been deprecated and will be removed in future versions of Babel - Preset-env produces a smaller transpiled file by only transpiling what's needed for your target browsers - Note that all packages for version...
IndexedDBhttps://www.w3.org/TR/IndexedDB-2/ currently version 2 provides client-sided database storage for web applications. From the specification: > This document defines APIs for a database of records holding simple values and hierarchical objects. Each record consists of a key and some value. Moreover, the database maintains indexes over records it stores. An application developer directly uses an API to locate records either by their key or by using an index. A query language can be layered on this API. An indexed database can be implemented using a persistent B-tree data structure. I've always found it hard to reason through IndexedDB, when it would...
If you haven't read my prior articles about CSS Houdini, I'll point you to the video below by Tab Atkins where he talks about Houdini as a far future combination of CSS and Javascript he should know, he edits the Houdini specs and a whole bunch of other CSS specs for W3C. This is not CSS in JS but a way to use JS to hook into the browser's rendering lifecycle to add your own bits and pieces. With this we don't have to wait for browser vendors to implement a feature, we can create our version that will fail...
Ideas for client-side So how do we address some problems of the web? There are aspects that go beyond PWAs and contribute to the bloat of the web and, I would imagine, the large size of apps. For each of the problems listed in the Developer Facing Problems there is a solution that will work whether we use a build system or not. I avoided build system-based solutions as I don't want to give the impression that a build system is required, just the extra effort of running the apps either locally or in the cloud. Image sizes and download...
Framing the issue through social lenses Bruce Lawson's presentation about the web around the world and it being our responsibility to keep in mind those people who are not in the wealthy western hemisphere where we take connections and devices for granted. Designing apps and sites it's not just a matter of creating a good technical framework. It's also about knowing the culture and the people you are building the content for. This may mean a lot of research and, ideally, a visit to the country or countries that you're building your application for. For example, do not force users...
