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...
Ever since I've been on the web 1994 I've been a part of a tension between the right and the easy way to do things, between tables and CSS, between frameworks, between techniques, between technologies and, it seems, between desktop and mobile or between native apps and well done mobile. With all the hardware limitations that we get with mobile, the web is still well placed to target emerging markets and lower end devices and poor network connectivity. To frame the post; the talk below by Alex Russell at Samsung Createhttps://samsungcreate.com/ last April illustrates some of the issues that the...
These are things that will take a while to work through either because the APIs are harder to work with or because I'm not certain of the status of the API and research plus implementation will take longer. Periodic Sync: Serialized content Periodic Synchttps://github.com/WICG/BackgroundSync/blob/master/explainer.mdperiodic-synchronization-in-design will allow us to periodically sync to the application for new or updated information. One case that quickly comes to mind is serialized content. Rather than upload an entire book or story we can create chunks and offer the first few when the user first uploads and the remainder over a period of time. Push Notifications...
The rest of the project deals with additional "nice to have" items that will make this into a full-fledged PWA. Remaining issues with SCSS and Javascript The function that makes the font size smaller doesn't check if the font has reached a minimal size. It can be made small enough to be unreadable. We should put a check to make sure that the font size doesn't get below a certain value. My first pass at a fix modifies the smaller event listener to restrict the minimum font size. The idea is that if the value is smaller than a value...
I've been meaning to update Bibliotype to more modern technologies and document the process. The original In 2011 Craig Modhttps://craigmod.com/ published Bibliotypehttps://craigmod.com/bibliotype/, a demohttps://craigmod.com/bibliotype/ and an articlehttps://alistapart.com/article/a-simpler-page in a List Apart. The article explores the nature of physical pages and how they may translate into the digital world, making references to epub3 and iBooks an encrypted wrapper around the WebKit rendering engine. Craig also talks about how the notion of a page changes on the web. The content as large as the content in it. > On the other hand, the physicality of these devices doesn’t represent the full potential...
