I sat on Jeremy Keithhttps://adactio.com/'s presentation at AEA San Francisco on how to evaluate technologies for the web. It made me think a lot about the current iteration of the progressive enhancement and what it means debate and how do we need to accommodate all our users: those at the top end of the spectrum, the people in the middle and the next billion people who will come to our content from much slower connections, using much slower and cheaper devices and for whom data, or more specifically the cost of data, will continue to be the deciding factor on...
There are some news and changes since I last visited ES6 modules. I started hearing more and more about WebPack and how it did the one thing that Rollup doesn't.... it splits the code in different bundles based on the overall size of your Javascript files. The latest news is that modules are now supported in browsers so packaging them may or may not be as necessary any more. ES6 modules defined In ES6 each module is defined in its own file. The functions or variables defined in a module are not visible outside unless you explicitly export them. This...
I haven't looked at Service Workers in a while and wondered how much the SW libraries have changed since I last looked at them. SW-precache and SW-toolbox made creating Service Workers with dynamic caching much easier but there were two separate libraries and SW-precache required a separate file with all the SW-toolbox libraries routes in it. This made it very error prone to edit and update. Workbox.jshttps://workboxjs.org/ is the evolution of Google's Service Worker Libraries. It consolidates all Service Worker build steps into one task Gulp, Webpack and NPM Script versions available and abstracts a lot of the writing and...
Now that we have a way to create components and preview them using Fractal we can look at how we can use the same handlebars templates to build a static web site. Because I've used Gulp to build the rest of the site it's important to me that whatever site generator I work with also uses Gulp. Assemblehttp://assemble.io/ does enough of the work that it's worth putting up with its idiosyncrasies. First the bad. There used to be a Gulp plugin that would make Assembly work with Gulp. The plugin has been deprecated and people cautioned to work directly with...
For the longest time I've resisted building pattern and component libraries for my projects. I've thought about them as a waste of time and resources. I conceptually understand their importance and how they benefit projects. At An Event Apart last year I heard Brad Frosthttp://bradfrost.com/ speak about Atomic Designhttp://atomicdesign.bradfrost.com/table-of-contents/ and, based on my earlier research in Polymer and Web Components, I decided to take a look at design patterns again without web components. Why a style Guide? I'm also planning a full rebuild of my old labs website and decided to have a pattern library to make it easier to...
As I'm working in enhancing the templates for my essay collection I've come up with a need to have a menu to link to the essays I want to make available to readers but not all the writing in the location where these essays are available. Rather than manually creating the menu I've decided t hat it may be better to atomate the process and use JSON and Javascript to create it. I've broken the content in three pieces, the JSON file with the items I want to add, the Javascript to create the menu and a small CSS to...
Most of the time we don't have to worry about alignment and text direction when working with web content. When the language works the same as English we have no problem. We start having issue becomes when we work with languages other than English in the same document. It gets more complicated when our primary language uses a different writing mode than the one we're used to. Think about vertical Kanji or right-to-left Hebrew or Arabic text mixed with your traditional English or latin content. We'll discuss tools that CSS gives you to control how languages other than English appear...
I've been looking at ways to group content in a semantic way. For example, rather than using: markup I would like to find an equivalent unit of content that would allow me to group the children and still be semantically valid. Looking at the code from Dudley Storey's The New Codehttps://thenewcode.com/ that I saw his use of the figure element to do this. Knowing that Dudley would never do something that went against spec I thought I'd look at the figure element and see if would do what I wanted it to do. The figure element is surprisingly flexible in...
New in ES2017 are async functions and the await keyword that will make writing async code easier to read, reason through and understand what caused any error that may get thrown. The hardest part, for me, of working with ES2016 and later is that I don't always see the reasoning behind the new code, the older version of the code still work just as fine. Async / Await are different. They look a lot like the callback code that we used to work with in the ES5 days but they produce the same asynchronous result as if we were writing...
I have to admit that I don't pay as much attention to accessibility as I should. I don't have enough of an audience to merit warranting the extra work that installing accessibility tools and running the tests periodically entail. But what if I could run the accessibility tests every time I run my build process? Then it would only be an issue of acting on the accessibility suggestions and that's a lot easier than running the tests. While at Smashing Conference I talked to one of the presenters and discussed the possibility of building a skeleton build system that contained...
