This post will explore what is Lighthouse, how to use Lighthouse in Chrome DevTools and Pagespeed Insights and some of its drawbacks and benefits. What is Lighthouse? Lighthouse is an open-source, automated tool to help you improve the quality of web pages. You can run it on any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more. It is available as a Chrome extension, a Node module, and a CLI tool. Lighthouse can be run in Chrome DevTools, from the command line, or as a Node module. It is also integrated...
Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. This post will explore Coree Web Vitals, what they are and how they can be improved What are Core Web Vitals? Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the fieldhttps://web.dev/articles/user-centric-performance-metricshowmetricsaremeasured, and reflects the real-world experience of a critical user-centrichttps://web.dev/articles/user-centric-performance-metricshowmetricsaremeasured outcome. The metrics that make up Core Web Vitals will evolve over time. The current set focuses on three aspects of...
Performance has become a very important part of the development process. It is not always easy to do and it's even harder to do it right. This post will cover some basics of performance as I understand it with different techniques and tools that can be used to measure performance. Assumptions Before we look at the tools and techniques, let's look at some assumptions that we can make about performance: Performance is location and time dependent : Running the same tool at different times may produce different results. This is because the network conditions may change, the server may be...
Over time I've read over and over that we should break down tasks in Javascript to avoid blocking the main thread but I never really understood how to do it. This post will explore one way to break down tasks in Javascript when working with arrays. The problem When we have a long-running task in Javascript, it blocks the main thread and makes the page unresponsive. This is a problem because the main thread is responsible for handling user interactions and rendering the page. Rick Viscomi explains this problem in his article Breaking down tasks in Javascripthttps://calendar.perfplanet.com/2024/breaking-up-with-long-tasks-or-how-i-learned-to-group-loops-and-wield-the-yield/. I've used the...
In JavaScript, cloning refers to creating a copy of an object or data structure. Depending on the method used, the clone may be shallow basic duplication or deep comprehensive duplication. A structured clone is a deep copy created through specific APIs. This post will cover both shallow and structured cloning in Javascript, their differences and when to use each. Shallow Cloning A shallow clone copies the references of an object’s properties rather than duplicating the actual objects in memory. Characteristics: Only the first level of the object is duplicated Nested objects are not copied, instead, their references are copied Changes...
Rather than using a third-party build system we can create our own custom system tailored to our requirements. This allows us to have more control over the build process and customize it to our needs. The following is the minimal set of required tasks: Watching for changed files using Chokidarhttps://www.npmjs.com/package/chokidar Typescript Babel Bundling with Rolluphttps://rollupjs.org/ PostCSS The post will discuss how to implement these tasks in a custom build system in w Node environment using Node 20.x, and how to enhance it further with additional tasks. Configuration files Before we start writing the build script, we need to set up...
Typescript is a superset of Javascript.It provides type checking and object-oriented programming features on top of Javascript. This post will explore Typescript and some basic areas: What it is How it works Installation Configuration Background Typescript is a superset of Javascript that adds type checking and additional features to Javascript. It is a statically typed language, the type of a variable is known at compile time. This allows for better error checking and code completion in an IDE and prevents many common runtime errors in Javascript front-end code. All valid Javascript code is also valid Typescript code but not all...
This post will cover a technique to style adjacent siblings using CSS selectors and the :has pseudo-class as described in Selecting Previous Siblingshttps://frontendmasters.com/blog/selecting-previous-siblings/ by Chris Coyier. The idea is that we style the target elements using nested selectors, and then use universal selectors, the parent selector and the has pseudo-class to style the adjacent selectors in both directions. This is the basic structure for the page: css .card { &:hover { / Styles for the card being hovered / / next card / & + { } / next card after that / & + + { } / previous...
When it comes down to printing web pages we haven't had much control over the output. The browser would just render the page as it is and print it. But with the introduction of CSS Paged Media, we can now control how the page is rendered when printed. This post will cover how to use CSS Paged Media to control the layout of the printed page and some tricks to make the printed page look better. How does Paged Media Work? CSS Paged Media is a module of CSS that defines how documents are formatted for print or other types...
When they were first introduced in ES6/ES2015, Template Literalshttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Templateliterals created a new, easier IMO, way to produce strings of text, either on their own or interpolated with variables. Tagged template literals let you parse a template literal with a function. This further enhances This post provides a brief overview of template and tagged template literals and cover String Literals and Tagged String Literals Review of String Concatenation When Javascript was first introduced, strings were created by manually concatenating strings and variables. For example: js const firstName = 'John'; const lastName = 'Wick'; const fullNameCoolness = firstName + ' ' +...
