One of the things that has always bugged me is how to display relative dates on a web page in the Eleventy template that I chose to use for this blog. This post will explore the issue, how the template currently displays dates and how to use intl.RelativeTimeFormathttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/RelativeTimeFormat to display relative dates without using third-party libraries. Displaying dates in human readable formats As currently implemented, The Eleventy template uses the following filter to display dates in a human-readable format. This code uses the Luxonhttps://moment.github.io/luxon/ library to format dates. This is a lighter alternative to Moment.jshttps://momentjs.com/ and other heavy duty date...
Talking about web browser support for a given CSS or Javascript is deceptively simple. This post will explore a definition of browser support, different strategies to support a feature accross browsers, the concepts of graceful degradation and progressive enhancement, and how to handle features that can't be polyfilled. How to evaluate browser support When talking about browser support, we are actually asking three related questions: 1. How essential is the feature to the application? 2. Is the feature supported in all browsers? 3. Is there a way to polyfill or provide an alternative for the feature? For most CSS and...
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...
