Google has an interesting build system for their internal applications and projects called Blaze. Bazel is the open-source version of that project. According to its documentationhttps://docs.bazel.build/versions/master/bazel-overview.htmlwhy-should-i-use-bazel, Bazel offers the following advantages: - High-level build language. Bazel uses an abstract, human-readable language to describe the build properties of your project. Unlike other tools, Bazel operates on the concepts of libraries, binaries, scripts, and data sets, shielding you from the complexity of writing individual calls to tools such as compilers and linkers - Bazel is fast and reliable. Bazel caches all previously done work and tracks changes to both file content and...
I love Puppeteerhttps://developers.google.com/web/tools/puppeteer/, it's almost the perfect tool to test sites and do screenshots of the projects we're working on. It was originally a Chrome only tool, meaning it would only work with headless Chromium; it then graduated to working with headless Firefox as well... but Safari/WebKit is missing. This is the most basic example of using Puppeteer. It will navigate to a site and create a screenshot of the above-the-fold content. We can use Puppeteer to navigate the pages and simulate interactions js const puppeteer = require'puppeteer' const screenshot = 'github-chromium.png'; async => { const browser = await puppeteer.launch{...
One of the things that took me a while to fully understand is event delegation and the associated concepts of event bubbling and event targeting. The idea is that, when we add an event listener to an element, there are multiple events triggered and not just on the element the event is attached to. If we take the following HTML. How can we attach a single event so that it will work in all li elements and those we might add in the future? html item 01 item 02 item 03 item 04 item 05 item 06 item 07 item...
The hardest thing for me to do when working in the performance space is to understand what the metrics represent and whether we should aim for top performance or where to draw the line of "this is good enough". Part of this is based on the little touches we can put on our sites like animations or elements other than content, how they will affect performance and whether those effects will be felt equally across the users of the site. The metrics I try to meet and what they mean The best performance metrics around, I think, are Google's Core...
When researching material for another post I came across an image-set attribute in CSS. I thought it would be interesting to take a look at how it works and whether it has any limitations we should be aware of. Using image-set as the value of the background-image attribute we can add a set of images that use rules similar to what the HTML responsive images would use. css .img { background-image: urlexamples/images/image-regular.jpg; background-image: -webkit-image-set urlexamples/images/image-regular.jpg 1x, urlexamples/images/image-large.jpg 2x, ; } The idea is that, if the browser supports the image-set attribute unprefixed or not, it will then take the appropriate...
One of the reasons why I've been so interested in learning and using the WordPress REST API is to learn how to use WordPress as a headless CMShttps://www.sanity.io/blog/headless-cms-explained, one where the content management is decoupled from the presentation layer. I've also told myself that in 2020 I would start looking at Vue and possibly React more seriously as a way to create user interfaces and static sites. In February 2020, Sarah Drasner wrote How To Create A Headless WordPress Site On The JAMstackhttps://www.smashingmagazine.com/2020/02/headless-wordpress-site-jamstack/ for Smashing Magazine and released the codehttps://github.com/netlify-labs/headless-wp-nuxt on Github and, as the lazy developer, I will use...
Masonry layouts are interesting and a challenge to do with existing web Javascript since there's no way to do it natively with HTML and/or CSS. > Masonry is a grid layout based on columns. Unlike other grid layouts, it doesn’t have fixed height rows. Basically, Masonry layout optimizes the use of space inside the web page by reducing any unnecessary gaps. Without this type of layout, certain restrictions are required to maintain the structure of layout. From: Understanding Masonry Layouthttps://www.sitepoint.com/understanding-masonry-layout/ — Sitepoint 2014 The earliest example I remember of masonry layout is the Pinteresthttps://www.pinterest.com/ home page. !Pinterest home page showing...
One thing that particularly caught my attention when researching xAPI and SCORM was the xAPI Activities. An activity is a group of verbs and activities that describe actions specific to a group or a sub-group. They are part of the answer to my question: > How can I build the statement: Person A implemented technology X?. This post will discuss some of the elements in a profile and provide some introductory information about them. While profiles are technical in nature, I believe that they are also useful for designers and teams looking to implement the verbs in a profile. When...
When working with WordPress, one of the things I enjoyed was how easy it made it to use Gettext-based translation tooling and functionality to localize themes and plugins. I was thinking that it would be nice if there was an equivalent toolset for Javascript. node-gettexthttps://www.npmjs.com/package/node-gettext seems to fit the bill nicely. It provides facilities to load and work with existing PO files and it provides the basic tooling that we need to work directly with PO files generate with other tools. Even though Node now supports ESM and their related methods I'm sticking to CommonJS for a while longer so...
Note This feature needs an Origin Trial Keyhttps://web.dev/origin-trials/ for your origin. If you choose not to go for an Origin Trial then you and your users will need to enable the Font Access APIs flag font-access in chrome://flags and restart the browser. The web has had custom font capabilities from very early on in the history of CSS. CSS introduced @font-face in 1998 as part of CSS 2. It allowed developers to link to font files and use them to display content on the web. As with many things in the early days of the web, different browser vendors decided...
