Infrequent musings on web development, books and life
Two weeks ago, I noticed a tweet by Jason Lengstorf about a Netlify project called Dusty Domains . The idea: use a domain that you registered but never actually used, "ship a site to Netlify and turn that dusty domain you’ve been squatting on into real money for charity". Well. I have plenty domains, most of them unused. And I had had an idea about a particular one a few days earlier. In 2019,…
I have been working on a series of web forms lately. At the end of many days, I often had not made much actual progress, but my brain felt like a fried vegetable anyway. While I was working on a feature today, a multilingual text input component, I realized why: I have been juggling a lot of languages this whole time. Languages First, there is HTML and the elements that comprise a simple form:…
Ellen Ullman writes in her book Life in Code: A Personal History of Technology, 'Until I became a programmer, I didn't thoroughly understand the usefulness of such isolation: the silence, the reduction of life to thought and form […]' Craig Mod with another beautifully crafted piece of writing. This feels very much like a rallying cry to Homebrew Website Clubs. Incidentally, the HWC Bonn - a…
A quick tip to control the seemingly uncontrollable text‑decoration: line‑through . Too long, didn't read: Use text-underline-offset and @supports to progressively enhance finer control over your strikethroughs. (via @zachleat )
But the GOV.UK pages are written in simple HTML. They are designed to be lightweight and will work even on rubbish browsers. They have to. This is for everyone. Not everyone has a big monitor, or a multi-core CPU burning through the teraflops, or a broadband connection. […] Go sit in an uncomfortable chair, in an uncomfortable location, and stare at an uncomfortably small screen with an…
In a field that has elevated boy geniuses and rockstar coders, obscure hacks and complex black-boxed algorithms, it's perhaps no wonder that a committee-designed language meant to be easier to learn and use-and which was created by a team that included multiple women in positions of authority-would be held in low esteem. But modern computing has started to become undone, and to undo other parts of…
It's not our fault. We've all been caught in a world of unreliable drives, inconsistent services, and fragmented technology. There is only so much effort we can put toward this. So I run my too clever by half scripts and continue with my occasional, half-hearted backing-up strategy that backs up some things some of the time. And I hope that I never have to use them. We rushed to the internet, with…
Matt Hobbs penned a really good description of the role of a front-end developer. A frontend developer bridges the gap between technology and design. They are a cross between an interaction designer and a software developer. […] All frontend development work should be focused on putting user needs first. A frontend developer is the person that all the team's work flows through. They will…
In accessibility testing, and when making coffee, we are shooting for the smoothest experience. We want to get to the essence of the thing we're making. We want to filter out the grit and bitterness and include everything that makes our final product enjoyable. This is an extremely excellent analogy. I have a feeling it could do wonders for making the realm of accessibility testing tools more…
You know that creepy feeling when you see a Facebook ad about a conversation you just had in real life? How it makes you think that your phone is listening to every conversation and using it for retargeting? Simon Pitt explains why that is unlikely (we're saved by physics!) and how we still end up believing it's true.
Eric with a wonderful essay about the history and value of the term a11y . It's about the hashtag, the numeronym and the question whether it itself is accessible - but it's also about so much more. Eric merely brushes the topics of ableism and allyship yet drops just enough thought-provoking insights to make you dive into his citations after finishing this article. I think I will re-read this…
A video of a 2014 talk by Susan Kare, best known for her interface elements and typefaces for the first Apple Macintosh. Her work is incredible, especially because many of the choices she made (trash icon, paint bucket icon, lasso icon, etc.) still persist to this day. Extremely well spent 19 minutes of interface history.
How to build a filterable list of things annualbeta Blog Bookmarks About July 28, 2020 How to build a filterable list of things Recently, one of our clients asked us to build a filter UI for a list of things. I thought it might be fun to write up how I approach a brief like that. This will not be a technical tutorial, but there is a functional demo that you can inspect with dev tools. What am I…
[…] what we work on affects not only our bank accounts, but our careers and lives in general. I like to think about projects the same way I think about calories-they're good for you unless you have too many, or they come in unhealthy packages, so you better make them count. An excellent post that - at 9 years old! - really stands the test of time. Still relevant, and always will be! (via @fehler )
A variant of Scott Jehl's clever idea for async CSS loading, but this one handles CSP (which may not allow inline JS) and provides a no-JS fallback.
A missing or incorrect accessible name in some form or other is right up there with poor color contrast in the list of most common accessibility errors across the web. More recently, a greater awareness of accessibility and an increase in the use of ARIA attributes has resulted in a sort of reverse naming problem, where elements that cannot or should not be named get artificial names through ARIA.…
This is… pretty nifty!
URLs have been around for more than 20 years. They're a method of 'identifying a resource', which means 'unambiguously pointing to something on the internet.' That's how they're normally used: URLs point to websites, articles, images, songs, videos, downloads - everything. Most people don't give them much thought, in part because web browsers increasingly hide URLs away. But some URLs have special…
The future I want - the future I see - is one with tooling that's accessible to the greatest number of people (including designers), that can intelligently move work between server and client as appropriate, that lets us build experiences that compete with native on UX (yes, even for blogs!), and where upgrading part of a site to 'interactive' or from 'static' to 'dynamic' doesn't involve…
The human brain isn't particularly good at basic logic and now there's a whole career in doing nothing but really, really complex logic. Vast chains of abstract conditions and requirements have to be picked through to discover things like missing commas. Doing this all day leaves you in a state of mild aphasia as you look at people's faces while they're speaking and you don't know they've finished…
[T]here is a swath of use cases which would be hard without React and which aren't complicated enough to push beyond React's limits. But there are also a lot of problems for which I can't see any concrete benefit to using React. Those are things like blogs, shopping-cart-websites, mostly- CRUD -and-forms-websites. For these things, all of the fancy optimizations are optimizations to get you closer…
Atomic CSS-in-JS can be seen as 'automatic atomic CSS': You don't need to create a class name convention anymore Common and one-off styles are treated the same way Ability extract the critical CSS of a page, and do code-splitting An opportunity to fix the CSS rules insertion order issues in JS
Removing underlines from links in HTML text presents an accessibility challenge. In order for a design to be considered accessible, there is now a three-sided design contraint - or what I call 'The Contrast Triangle'. This is both a fantastic explanation and tool! (via @dboudreau )
An excellent, nuanced article about ethical and legal implications regarding the use of Webmentions. Three key points: Misrepresentation of meaning Often seen on Twitter: users explicitly state in their bio that 'likes' are not endorsements but personal bookmarks. Displaying such interaction as a 'like' on a connected blog misrepresents the original intention . Opaque processing of personal…
The HTML title attribute is problematic. It is problematic because it is not well supported in some crucial respects, even though it has been with us for over 23 years. With the rise of touch screen interfaces, the usefulness of this attribute has decreased. The accessibility of the title attribute has fallen victim to a unfortunate combination of poor browser support, poor screen reader support…
An interesting look under the hood of Facebook's CSS. Some cool ideas in there, but I'm not fond of 'spacer s'.
Amazing playground for generative art via CSS declarations.
When faced with overwhelming content, focusing on user behavior can help define the design approach. Sound advice! The game changer in this project was the realization that users don't need to view a large data set all at once. By focusing on the discrete steps of how information is consumed, we were able to limit the presented content to the absolutely relevant. (via…
With the release of Firefox 72 on January 7, 2020, CSS Motion Path is now in Firefox, new Edge (slated for a January 15, 2020 stable release), Chrome, and Opera (and other Blink-based browsers). That means each of these browsers supports a common baseline of offset-path: path(), offset-distance, and offset-rotate. The time to explore their possibilities is now.
In an effort to make the levels of the feedback ladder easier to remember and use, Kristen came up with metaphorical names to describe each step. The idea is that you're living in a house that's still being built. Each of the 'inconveniences' we've listed (mountain, boulder, pebble, sand, dust) has a different level of impact on your day-to-day life in the house. For example, you may notice dust…
Rands (Michael Lopp) shares how he uses Slack to communicate with the least possible effort. He shares A useful set of communication primitives that is 90% keyboard shortcuts and 10% mindset. I like it!
A fascinating deep-dive into the history of the humble URL. (via @adactio )
The main idea of this article is to show how the Svelte compiler compiles the Svelte syntax into statements of codes that I've shown above. It does what it says on the box! 😉
I just love great commit messages. This one seems over-the-top, but the closer you look, the better it gets.
Code isn't just obscure commands in a file. It requires you to have a map in your head, to know where the good libraries, the best documentation, and the most helpful message boards are located. If you don't know where those things are, you will spend all of your time searching, instead of building cool new things. A wonderful essay about all things programming.
A primer for all things variable fonts! Welcome to the most radical change in type since Gutenberg. Variable fonts let you add nuance and artistry to your web typography without bogging down your site. Now you can accomplish what used to require several files with a single file and some CSS! The goal of this site is to show you how variable fonts tick. Discover how they can benefit user interface…
Adding alternative text for images is the first principle of web accessibility. It is also one of the most difficult to properly implement. The web is replete with images that have missing, incorrect, or poor alternative text. Like many things in web accessibility, determining appropriate, equivalent, alternative text is often a matter of personal interpretation. Through the use of examples, this…
If I ask anyone what accessibility means to them, usually the first thing that they can identify is 'Adding alt text!' All you have to do is add alt tags to your images makes your site way more accessible, right? I love the enthusiasm to reduce accessibility errors, but I am about to give you an infuriating response. It depends. Adding alt text may mean that you don't get pesky errors about…
🤯🚀
Browsers historically have had a single HTTP Cache. This meant that if www.a.example and www.b.example both used cdn.example/jquery-1.2.1.js then JQuery would only be downloaded once. Yay! Unfortunately, a shared cache enables a privacy leak. Noooo! Browsers are responding by partitioning the cache. Alright…? What does this mean for developers? The main thing is that there's no longer any…
The Agile Manifesto is an immune response on the part of programmers to bad management. The document is an expression of trauma , and its intellectual descendants continue to carry this baggage. Wow. Now that is an interesting perspective. Conceptual friggin' integrity The one idea from the 1970s most conspicuously absent from Agile discourse is conceptual integrity. This-another contribution from…
The loading attribute allows a browser to defer loading offscreen images and iframes until users scroll near them. loading supports three values: lazy : is a good candidate for lazy loading. eager : is not a good candidate for lazy loading. Load right away. auto : browser will determine whether or not to lazily load. This is so cool! It's available in Chrome and easy to implement as an enhancement…
Eric Elliott with a nuanced, data-driven analysis of the pros and cons of TypeScript: That said, TypeScript hit an inflection point in 2018, and in 2019, a large number of production projects will use it. As a JavaScript developer, you may not have a choice. The TypeScript decision will be made for you, and you shouldn't be afraid of learning and using it. But if you're in the position of deciding…
I was surprised by the effect it had on me. I'd assumed that my skepticism and media literacy would inoculate me against such distortions. But I soon found myself reflexively questioning every headline. It wasn't that I believed Trump and his boosters were telling the truth. It was that, in this state of heightened suspicion, truth itself-about Ukraine, impeachment, or anything else-felt more and…
Don't get me wrong: server-side rendering is great …if what you're sending from the server is functional. It's the combination of hollow HTML sent from the server, followed by a huge browser-freezing dump of JavaScript that is an anti-pattern. This use of server-side rendering followed by hydration feels like progressive enhancement, because it separates out the delivery of markup and scripts. But…
Eevee pulls out all the stops with this mammoth piece about CSS history. In the beginning, there was no CSS. This was very bad. Well, it wasn't all bad , but it was… tedious. Very, very tedious. 😁 CSS 2 introduced the > child selector, so you could write stuff like ul.foo > li to style special lists without messing up nested lists, and IE 6! Didn't! Fucking! Support! It! Oh dear, yes. I remember…
To answer the question in the title of this post: yes, it's better to self-host as the performance gains are substantial . (via @fontspeed )
[There are many] different tools and techniques to generate SVGs from images and use them as placeholders. The same way WebP is a fantastic format for thumbnails, SVG is also an interesting format to use in placeholders. We can control the level of detail (and thus, size), it's highly compressible and easy to manipulate with CSS and JS.
Serving a website seems pretty simple: Send some HTML, the browser figures out what resources to load next. Then we wait patiently for the page to be ready. Little may you know, a lot is going on under the hood. Have you ever wondered how browser figures out which assets should be requested and in what order? Today we're going to take a look at how we can use resource priorities to improve the…
The benefits of immutable mean that when a page is refreshed, which is an extremely common social media scenario, elements that were previously marked immutable with an HTTP response header do not have to be revalidated with the server. Lacking this hint, the browser needs to guess which objects may or may not change on reload - wasting time on one hand or risking website incompatibility on the…