The attrhttps://developer.mozilla.org/en-US/docs/Web/CSS/attr function allows you to use the value of an HTML attribute in your css. It has been around for a while, but it was limited to using the value of an attribute as a string. The following example uses the value of the data-color attribute to set the background color of a div element: css div { background-color: attrdata-color; } There is a problem. attrdata-color is always parsed as a string, and could only ever be referenced as a string value and used in the content property of a pseudo element. There has been new functionality introduced recently...
A lot of times we think of HTML as a static, inflexible, language. But there are many things you can do with HTML that are not obvious unless you look for them. This post will look at two specific things you can do with HTML range inputs: adding tickmarks and a live value display. Range inputs with ticks datalist When using a range input on its own, you specify a minimum and maximum value, and the user can select any value in between. html As you can see below, on its own, the range input is not very informative. It...
This post will cover my research on the WebGPU API. WebGPU is a lower level API that will work with underlying native GPU APIs like Vulkan Khronos Group, Metal Apple, and Direct3D 12 Microsoft, providing a unified and efficient way for web developers to utilize GPU capabilities. There is no relationship between WebGPU and the previous WebGL APIs, which targeted different OpenGL specifications. WebGPU provides access to non-graphical computation tasks through compute shaders, which can be used for general-purpose computing tasks that can benefit from parallel processing. Differences with WebGL The following sections will compare WebGL and WebGPU in terms...
JSON5 is a superset of JSON that allows for more flexible syntax and features. This post will disccus reasons why I prefer JSON5 over JSON. What is JSON5 The JSON5 Data Interchange Format is a superset of JSON so valid JSON files will always be valid JSON5 files that expands its syntax to include some productions from ECMAScript 5.1 ES5. It's also a subset of ES5, so valid JSON5 files will always be valid ES5 and fully compaible with ES2019 and later. The following ECMAScript 5.1 features, which are not supported in JSON, have been in JSON5. Objects Object keys...
This post will look at two areas related to reading online: How people read online How to determine optimal font sizes? Is there such a thing? If people scan the content of your page, what font size will make it easier to scan and what font sizes will drive people away? How do people read online? Starting in 1997 with his report How Users Read on the Webhttps://www.nngroup.com/articles/how-users-read-on-the-web/, Jakob Nielsenhttps://www.nngroup.com/people/jakob-nielsen/, and later his team at the Nielsen Norman Grouphttps://www.nngroup.com/, have researched how people read, or don't read, online. Their latest research blog post: How People Read Online: New and Old...
Text that is visually hidden cannot be found by the browser's find-in-page feature and may not be visible to accessible technology like screen readers. This is a problem for screen reader users, who rely on this feature to navigate content. This post explains how to make hidden text findable for everyone. The problem hidden text in a web page is not searchable when you use the browser's built-in find-in-page feature. This is a problem for screen reader users, who rely on this feature to navigate content. For example, if a user is looking for a specific word or phrase in...
CSS has progressed enormously in the last few years. This is both good and bad. The good : CSS has become very powerful and it has gained many new features that make design and development work easier. : You can now use CSS to achieve tasks that previously required JavaScript or were impossible to do on the web. The bad : It has become hard to keep all of CSS in your head and, even to know what you're looking for in references like MDNhttps://developer.mozilla.org/, web.devhttps://web.dev/ or your favorite resource : CSS has also evolved in both the length of...
Compression has been around for a long time, and it's a key part of web performance. In this post, we'll compare three popular compression methods: GZip, Brotli, and Zstd. We will first look at each compression standard, compare them when compressing a file and then look at how they can be used in the web, on their own and with compression dictionaries. The compression methods We will work with three compression: GZip, Brotli, and Zstd. GZip : GZip is a file format and a software application used for file compression and decompression. The program was created as a free software...
The different values for text-wrap provide reading experience enhancements for headings and long-form text. This post will look at two values for the text-wrap property: balance and pretty. text-wrap: balance text-wrap: balance wraps text in a way that best balances the number of characters on each line, enhancing layout quality and legibility. Because counting characters and balancing them across multiple lines is computationally expensive, text-warp: balance only works for small blocks of text: six lines or less in Chromium browsers and ten lines or less in Firefox. text-wrap: pretty When using text-wrap: pretty, text is wrapped across lines at appropriate...
A somewhat contrarian view on designing websites is to design for bad performance. This post will explore the idea of how designing for bad performance can lead to better user experiences. Credit where credit is due: The ideas from this post are taken from Designing websites for bad performancehttps://calendar.perfplanet.com/2024/designing-websites-for-bad-performance/ Bad performance, what? Bad performance is a reality for many users around the world. It's easy to forget that not everyone has access to high-speed internet connections or the latest devices. This is not a problem exclusive to developing countries. Even in developed countries, there are areas with poor internet connectivity...
