Year round learning for product, design and engineering professionals

Weekend Reading–November 8th 2024

This week’s roundup of articles on web design and development we found interesting.

What’s a Single-Page App?

Okay, let’s define the extrema of each axis:

  • Server-side rendering (SSR) is when HTML is produced on a server and sent to the browser.
  • Client-side rendering (CSR) is when HTML (or some other representation, such as the result of a JSX transform) is produced on the client and applied to the DOM.
  • A multi-page app (MPA) is when a hyperlink click or form submission results in the browser replacing the current page with an entirely new document.
  • A single-page app (SPA) is when the browser never replaces the page with a new document, and instead makes all changes through client-side DOM manipulation.

Source: What’s a Single-Page App? | jakelazaroff.com

Jake Lazaroff goes deep into the question “What is a Single Page App?”

The button element

The button element is undoubtedly the most misunderstood and least utilized of all HTML. As a sometime accessibility consultant myself, it’s no exaggeration that I’ve encountered fewer buttons that are s than are other, incorrect elements. That is, ones not helpfully called “button”.

Source: The button element: HeydonWorks

Heydon Pickering’s excellent, irreverent and comprehensive (it will include every one) series on HTML elements reaches button.

DevTools Tips

If you’re a web developer, DevTools Tips is for you! Whatever your level of experience, and whatever browser you prefer using for web development, use DevTools Tips to learn new tips and tricks on a regular basis.

Source: DevTools Tips

Nearly 200 tips for making the most of browser devtools

JavaScript dos and donts

November 7, 2024

Do use JavaScriptWhen the core functionality of a feature cannot function with only HTML.

Source: JavaScript dos and donts

Mu-An Chiou articulates heuristics for when to use JavaScript (and when not).

Foundations: form validation and error messages

As well as labelling text fields with input and labels, form validation and error messages are also essential to making forms accessible to everyone.Forms are crucial for interactive web experiences, but they can often lead to errors requiring validation. Inaccessible validation and feedback can cause frustration and can sometimes result in form abandonment. However, when made accessible, the process becomes seamless and frictionless.

Source: Foundations: form validation and error messages

Everyone benefits from accessibility efforts. Here the Demelza Feltham from Tetralogical looks at the accessibility of form validation.

The most effective ways to improve Core Web Vitals

Over the years, the web community has built up a wealth of web performance optimization knowledge. While any one optimization may improve performance for many sites, all of them at once can feel overwhelming and, realistically, only some of them are applicable to any given site.

Unless web performance is your day job, it’s probably not obvious which optimizations will be the most impactful for your site. You likely won’t have time for all of them, so it’s important to ask yourself what are the most impactful optimizations you can choose to improve performance for your users?

Source: The most effective ways to improve Core Web Vitals

A roundup from Google of the best ways to improve your core web vitals score from Google–it’s continually revised to keep it up to date.

Tooltip Best Practices

In this article, I try to summarize the best practices mentioned by various accessibility experts and their work (like this, this, and this) into a single article that’s easy to read, understand, and apply.Let’s begin.

Source: Tooltip Best Practices

With the arrival of the popover API, tooltips have become much easier to develop, removing the need for external libraries for this common UI pattern. They come with a number of accessibility challenges, which this article covers in detail.

Server-first Web Components with DSD, HTMX, and Islands

Over the last several years, browsers have made huge strides in bringing native components to HTML. In 2020, the first Web Component features reached parity across all major browsers, and in the years since, the list of capabilities has continued to grow. In particular, early this year, streaming Declarative Shadow DOM (DSD) finally reached universal support when Firefox shipped its implementation in February. It is this strategic addition to the HTML standard that unlocks a number of new, powerful server possibilities.

In this article, we’ll look at how to leverage existing server frameworks people already use, to level up to native components, without piling on mounds of JavaScript. While I’ll be demonstrating these techniques with Node.js, Express, and Handlebars, nearly every modern web framework today supports the core concepts and extensibility mechanisms I’ll be showing. So, whether you’re working with Node.js, Rails, or even C# and .NET, you’ll be able to translate these techniques to your stack.

Source: Server-first Web Components with DSD, HTMX, and Islands

A detailed look at server rendered declarative web components, and how they fit into modern web technology stacks.

PDF Accessibility on the Web: Tricks and Traps – Part 1

Let me start by making two simple statements. It would be a very good thing if all PDF documents on the web were converted to HTML. That’s not going to happen. I want to be clear that I’m not here to pile on PDFs. That’s not going to help. My view is that PDFs are currently, and widely, used as web content and therefore must be accessible.  To do that, the first thing is to get some perspective. PDF was not invented for the presentation of web content. 

Source: PDF Accessibility on the Web: Tricks and Traps – Part 1

PDFs are a reality on the Web, as much as we might wish that all Web content were HTML. And as such, we need to be concerned with their accessibility. Part I of a two part series on making them so by good friend of Web Directions Ricky Onsman

Color fonts

COLRv0 fonts are limited to solid colors. COLRv0 is supported by all web browsers. They work in Sketch app and the Affinity suite of applications. The professional font creation tools Glyphs and FontLab can both be used to create COLRv0 typefaces.

Source: Color fonts

A roundup of various color fonts, and TIL there are different kinds of color font formats! More info there as well.

delivering year round learning for front end and full stack professionals

Learn more about us

Web Directions South is the must-attend event of the year for anyone serious about web development

Phil Whitehouse General Manager, DT Sydney