There are two new CSS properties that may help with the layout shift core vitals issue. The content-visibility property allows us to tell the browser when to render an element. The “magic” value here is auto, which tells the browser not to render an element until it’s visible in the viewport. This makes page loads significantly faster, the browser doesn't need to render above-the-fold content initially. The content-visibility property works hand in hand with the contain-intrinsic-size property to prevent potential issues with Cumulative Layout Shift. Because the browser isn’t rendering the element fully on load, there may be some shift...
Bazel is hard to get to work but it's really interesting to work with once you get started. Like Ant and other build systems I've worked with before they use their own terminology and their own tooling to make things work better for their intended audiences. These are some notes that I've collected along the way... they've informed my own research and are good things to keep in mind as you work with the tool and its ecosystem. Why Use Bazel In my opinion, Bazel works best in a monorepo with multiple languages attached, whether the monorepo builds a single...
Just like with the frontend, the backend gives you multiple choices of languages and feature sets for working with Bazel. C/C++, Go and Rust are the three languages that I tested generating WASM codehttps://publishing-project.rivendellweb.net/webassembly-a-new-swiss-army-knife/ with so it may be interesting to see how well they work with Bazel and how they abstract WASM generation. We can keep all the code for our project in a single monorepo and let Bazel sort out what tools to use to compile which part. I use C and C++ as the baseline for testing Bazel with backend languages. It also works slightly differently from...
Bazel presents multiple choices for building your site or app's styles. I've taken three of these choices for a deeper look. The first one, working with Less and Stylus, shows how to work with NPM packages. We could use the same techniques to work with other packages outside the Bazel toolchains, we'll have to test to see if they work. The other two, PostCSS and SASS show how to work within the Bazel structure using Bazel toolchains and methodology. I haven't decided which one to use for my projects; been thinking about moving away from SASS for a while but...
In the last posthttps://publishing-project.rivendellweb.net/first-look-bazel-build-system/ we looked at Bazel, what it is, installation on macOS using homebrew, and a Bazel-based project's basic configuration. This post will look at using Bazel to run Typescript and Node.js builds using Bazel. Future posts will look at styling and backend toolchains Javascript, Typescript and Node.js To work directly with Javascript we'll leverage two items - Every Javascript file is also a legal Typescript file - We're already looking at implementing a Node.js based build system that will use Javascript/Typescript Before Bazel will work we need to install the following Node packages. bash npm i -D...
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...
