When working with media querieshttps://developer.mozilla.org/en-US/docs/Web/CSS/CSSmediaqueries is that we can't reuse media queries. A naive approach is to define the value as a CSS variable in the :root pseudo-class. css :root { --width: 20em; } And then use the variable in the media query. Unfortunately, this doesn't work. css / This will not work / @media min-width: var--width { } Instead of using CSS variables, we can use custom media querieshttps://developer.mozilla.org/en-US/docs/Web/CSS/@mediaCustommediaqueries. These are aliases for media queries. This is a two step process. First, we define the media query using @custom-media. The value for the custom media is included in parentheses...
This post will discuss leading, how to control it in CSS and the new text-box-trim property. Leading is the space between blocks of text; the term comes from the strips of lead that were used to separate lines of metal type. I had a hard time wrapping my head around this concept so I did some research and came accross the following: Consider that a typographic letter has multiple peaks. There’s the x-height, which marks the top of the letter “x” and other lowercase characters not including ascenders or overshoots, the cap height, which marks the top of uppercase characters...
Most of the time we measure the time it takes for a page to load, the number of requests, the size of the assets, etc. But we often forget that the user's perception of performance is not always aligned with these metrics. In essence, how fast is fast enough? This post will try to answer this question and explore perceived performance as a way to improve the user experience. Defining perceived performance The definition I'm using here based on Psychology of Speed: A Guide to Perceived Performancehttps://calibreapp.com/blog/perceived-performance: Perceived performance refers to how fast or responsive a website or app feels...
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...
