Marcy Sutton is collecting good examples of websites and interfaces where accessibility and beautiful design go hand-in-hand. Subscribed.
I have a simple rule of thumb when it comes to programming:
less code === less potential issues
This rule of thumb controls my own feelings towards a solution. It shouldn’t take 120 MB of code to uglify some JS. But maybe I’m wrong.
In practice, this dependency hell has bitten me so often already that my life expectancy probably sank by 2-3 years. You want to build a JS file? Please update Webpack first. Oh, that new version of Webpack is no longer compatible with your Node version. Oh, your new Node version is no longer compatible with that other dependency. Oh, now you have 233 detected security issues in all your node_modules but you can’t fix them because that would break something completely unrelated.
Ugh. Jeremy Keith comments:
The longer I spend in this field, the more convinced I am that web performance is not a technical problem; it’s a people problem.
Terence Eden explains how different screen technologies, human biology, and fingerprint grease make “pixel perfection” a pointless goal:
There is no grid. There never has been. You can align to theoretical pixels - but as soon as the image hits a physical screen, it will be adjusted to best fit reality.
An obsession with pixel perfect rendering is futile.
Every Layout expands on this idea, specifically as it pertains to CSS:
Suffice it to say that, while screens are indeed made up of pixels, pixels are not regular, immutable, or constant. A
400pxbox viewed by a user browsing zoomed in is simply not
400pxin CSS pixels. It may not have been
400pxin device pixels even before they activated zoom.
See also: Ian Mallett’s Subpixel Zoo: A Catalog of Subpixel Geometry.
Ollie Williams welcomes the new CSS properties for styling underlines:
Finally we can demarcate links without sacrificing style thanks to two new CSS properties.
text-underline-offsetcontrols the position of the underline.
text-decoration-thicknesscontrols the thickness of underlines, as well as overlines, and line-throughs.
I’ve been working on a blog post about this topic, and Ollie does a good job of covering some of the points I want to make. But I want to go further and explore implementation quirks, the details where the new properties don’t quite go far enough, and make a case for why underlines shouldn’t be pixel-aligned.
Last march, I wrote a proposal for Can I email, a website similar to caniuse.com dedicated to support in email clients.
Today, barely six months after, I am really happy and pleased to announce that with the help of my colleagues and members of the email geeks community, we’re officially launching caniemail.com.
Wow, this was sorely needed.
Tim Kadlec explores strategies for dealing with the Save-Data header without degrading the experience, because not every user that enables it will be aware of the potential consequences:
The possibilities are endless. If you treat data as a constraint in your design and development process, you’ll likely be able to brainstorm a large number of different ways to keep data usage to a minimum while still providing an excellent experience. Doing less doesn’t mean it has to feel broken.
NetNewsWire 5.0 is shipping!
In case you haven’t been following along until just now: NetNewsWire is an open source RSS reader for Mac. It’s free! You can just download it and use it. No strings.
My RSS reader of choice.
Dave Rupert is, like me, a longtime Jekyll user. He’s trying out Eleventy — which I’m super curious about — and getting good results. The massive performance difference when compared to Jekyll is very compelling to me, but so is the flexibility to write little bits of code to extend functionality without much fuss:
On the Cathedral vs. Bazaar spectrum, Eleventy operates more on the bazaar end. By that I mean it doesn’t prescribe much. You want a bunch of filters? Write your own, Eleventy only comes with two. You want multiple layouts? Write a bit of JS to get those registered. Did you remember to setup an
.eleventyignore? Even the Sass and JS pipelines are BYO.
Posting a new short “note” on my site currently requires me to commit a new markdown file to the repository on Github. That’s doable (for a developer), but not really convenient, especially when you’re on the go and just want to share a quick link.
The new link sharing basically has three main parts:
- a form that collects and sends the shared link data, and
- a serverless function to process it and create a new file.
Gotta get on this train! I’m already working on it, though my solution will be based on the Micropub spec. But that live preview is sweet and now I want it too.
In elevating frontend to the land of Serious Code we have not just made things incredibly over-engineered but we have also set fire to all the ladders that we used to get up here in the first place.
Eric Bailey posted a terrific list of principles that should be kept in mind when working on web accessibility.
Digital accessibility work is not easy, but it is vital. It is a holistic, multifaceted discipline that touches on multiple interconnected social and technological issues.
Chris Coyier’s latest talk puts all the complexity of modern front-end development in perspective:
All the very huge responsibilities front-end developers already have:
- Pulling of the design
- Making the design part of a system
- Making sure it is accessible
- Worrying about the performance
- Testing things across browsers
- Testing things across devices
- Sweating the UX
Oh hello, big pile of new responsibilities
- Component-driven design, designing our own abstractions
- Site-level architecture
- Fetching our own data
- Talking to APIs
- Mutating data
- State management
The vast majority of respondents are still using Sass and vanilla CSS? Wow! This made me pause and think. Because I feel there’s an analogy here between that unseen dark matter, and the huge crowd of web developers who are using such “boring” technology stacks.
These developers are quietly building their sites and apps, day in, day out. But they are rendered invisible as they are not making use of the cutting-edge technologies that the 1% of the bleeding edge love to talk about.
They are the 99% of the web universe that is quietly getting on, not blogging about their technology stack, not publishing amazing new tooling. Simply building things.
Sass and not much else? It me. Though I am using some state-of-the-art tech like the fancy underlines made possible by CSS Text Decoration Module Level 4 😎
min()accepts one or more values and returns the smallest value. The magic of the function is that, just like
calc(), the arguments can use different units, which allows us to return values that change dynamically based on context.
min()is one of three new comparison functions introduced as part of the CSS Values and Units Module Level 4. There’s also
max(), which naturally does the inverse of
clamp()is a convenience function that applies both a minimum and a maximum to a single value.
This is brilliant and I can’t wait until I can change my
Upgrading legacy applications was one of the usecases Vue was designed around. It means that developers can piecemeal upgrade bits of an application as necessary.
In my experience Angular, React, and a lot of other frameworks ultimately require you to go all in early and establish a large toolchain around these frameworks. Angular prescribes a lot with its amazing CLI. React on the other hand doesn’t prescribe anything, but requires you to self-assemble and wield a somewhat complex toolchain. But as Evan put it in his JSConf Asia talk, Vue sits in the middle of the “Cathedral and the Bazaar”. Vue has useful tooling, but it’s all optional and you can use only what you need. In some ways, Vue’s grafting capabilities really does make it seem like a jQuery replacement you can drop in to give your components superpowers as needed.