Explore My Notes

Accessible anchor links | Amber Wilson

Excellent write-up by Amber on making accessible anchor links (those little floating chains/hash symbols next to headlines).

Relatedly, Stephanie Eckles has recently published a SmolCSS tutorial on the same pattern with some interesting variations (CodePen).

On the preferred HTML order for anchor links, specifically to prevent screen reader confusion:

I realised the <a> element should exist as a sibling of the heading element, rather than a child of it.

On providing some kind of text label with a link:

When there is no information about a link available, the screen reader falls back to the href value (e.g. https://example.com/blog/nice-post/). This makes the purpose of the link hard to decipher.

On the problematic use of aria-label and hiding purely aesthetic/visual text with aria-hidden:

First, aria-label is not actually brilliant for accessibility, as some translation services can have trouble accessing its value. So, it's best to add text content to the <a> element, and make sure to visually hide it.
Second, the # can be left in and hidden from screen readers using aria-hidden, while still being visible on the page.

Code snippet for the final solution:

<h2 id="introduction">Introduction</h2>
<a href="#introduction">
  <span aria-hidden="true">#</span>
  <span class="hidden">Section titled introduction</span>
</a>

Code snippet for an accessible header link (can use ::before to add icons or #):

<h2 id="introduction">
  <a href="#introduction">
    Introduction
  </a>
</h2> 

📆 25 Feb 2021  | 🔗

Facebook vs publishers | Jonathan Baekdal

I find the whole Australian link tax to be silly and a rare instance where I'm very much on the side of Big Tech, but Thomas has done a much better job of explaining why it's all a farce than I ever could.

It's particularly fascinating given that he's an "insider" in the industry, but one whose business would be hurt by the proposed laws. Link taxes help old media, but hurt their new competition. They also reward old media for having an incompetent digital model and for failing to invest in their own services.

As Jonathan notes, newspapers have never been analogous to search engines. You don't open a broadsheet to find where you can buy a car or to locate extremely specific information. Any traffic directed from these kinds of searches is therefore new.

The newspapers did not help this car dealer sell any cars. You provided no leads, no sale, no nothing. Why should you get a cut of the money brands are paying to Google?

On why Google is not stealing traffic, but providing it (in most cases):

And then the newspapers have the audacity to tell the politicians that "Google is stealing our traffic and our links". No they are not. This traffic wouldn't even exist if it wasn't for Google. This is new traffic that Google makes possible for us.

On the traditional advertising model used by magazines and publishers; get people to consume as many adverts as possible on their way to the content:

For instance, many years ago, I did a study about what was actually in a print magazine, and here is what Vogue Magazine looked like in 2009:
Graph of page use in an edition of Vogue magazine from 1996. The first article was on page 75 out of roughly 330 total. The first 50 pages are almost all adverts; the next 100 are an even mixture of ads and articles; followed by a final third which is mainly photography and almost no ads.
So out of a 300+ page magazine, you're getting maybe 70 pages of actual written content?

On the benefits of amplification, which would be impossible without freely shareable links:

Amplification is good because it drives extra traffic that you would otherwise not get if Facebook didn't exist.

On why publishers are cutting their nose off to spite their face when targeting Facebook:

If you force Facebook to pay you, as a publisher you are even more incentivized to push things to Facebook, while Facebook is incentivized to reduce your amplification rate. This is the opposite of what you want.

Why would you ever do that?

As a newspaper, you should be incentivized to create a direct relationship with your audience, while Facebook should be incentivized to give you as much extra traffic as possible. Paying for links does not do that!

On why it isn't as simple as forcing companies to pay taxes in every country they operate in (hint: you're getting them to pay taxes multiple times for the same service, and you're potentially taking taxes without having any citizens involved):

So this is far more complicated than the media makes it out to be, and the suggestions I have seen from the media are all nationalistic. They punish companies for being global
So the way publishers talk about taxing Google is basically saying Google should be taxed twice.
But you are still suggesting a model that doesn't work and that punishes companies for reaching people across the world.

This is nationalism. It has no place in a connected world.

On why traditional analytics models are simply not fit for purpose; the models that publishers want no longer fit the world they have:

So, let me ask you a question. Imagine if someone visits your newspaper and reads three pages (including the front page). And then imagine that someone visits you via Facebook, only sees one page per visit, but comes back four times.

Which one is better?

On the fact that link taxes hurt small publishers, digital media, and independent journalists by starving them of amplification and audience:

One thing that many people in traditional media don't seem to understand is that the link is the single most important thing that we have, and
this is especially true for smaller independent publishers (like me
It's not Facebook who is undermining democracy. It's Murdoch and every single newspaper who has joined his destruction of linking.

📆 23 Feb 2021  | 🔗

  • The World Wide Web
  • Big Tech
  • law
  • link tax
  • Australia
  • journalism
  • media
  • new media
  • Murdoch
  • Google
  • Facebook
  • social media
  • web traffic
  • taxes
  • analytics
  • newspaper 

An interactive guide to CSS transitions | Josh W Comeau

Once again, Josh has put together an excellent introductory tutorial to a subject that is still packed with useful tips for even the most advanced user; in this case, CSS transitions.

On the will-change CSS property and how it allows developers to specify that an element should use the GPU (hardware acceleration):

will-change is a property that allows us to hint to the browser that we're going to animate the selected element, and that it should optimize for this case.

In practice, what this means is that the browser will let the GPU handle this element all the time. No more handing-off between CPU and GPU, no more telltale “snapping into place”.

👆 Helps to prevent rendering discontinuities as an element is passed between CPU and GPU.

On thinking about animations in a more organic, user-oriented way:

I believe most developers think in terms of states: for example, you might look at this situation and say that we have a “hover” state and a default state. Instead, what if we thought in terms of actions? We animate based on what the user is doing, thinking in terms of events, not states. We have a mouse-enter animation and a mouse-leave animation.

Excellent tip: use transition-delay to prevent things like dropdown menus from collapsing if the user accidentally moves out of them. It provides a little leeway in the UX.

On benefits of using transform over other attribute changes:

There's another benefit to hardware acceleration: we can take advantage of sub-pixel rendering.

Another useful tip: use wrapping elements to remove the "doom flicker", that moment where hovering an element moves it out of the cursor's hitbox, and it just bounces between :hover states rapidly. Example:

<button class="btn">
  <span class="background">Hello World</span>
</button>

<style>
  .background {    
    will-change: transform;
    transition: transform 450ms;
  }

  .btn:hover .background {
    transition: transform 150ms;
    transform: translateY(-10px);
  }
</style>

📆 23 Feb 2021  | 🔗

  • HTML & CSS
  • Animation
  • will-change
  • CSS
  • transitions
  • animation
  • hardware acceleration
  • guide
  • hover
  • menus
  • UX
  • UI
  • doom flicker
  • tips
  • fix 

42 admissions | Ben Werdmüller

Ben has crafted an incredibly thoughtful, powerful, and quotable article on just about everything, but particularly life online and how people in the web community might be able to go about improving it.

On blogging for connection as opposed to crafting a personal brand:

That's not what I'm doing. I'm putting myself out there for connection: as one human looking for like-minded humans. That's what the promise of the internet and social media always was for me. It's not a way to sell; it's a way to build community. We have an incredible network that links the majority of people on the planet together so they can learn from each other. Using that to make a buck, while certainly possible, seems like squandering its potential. We all have to make a buck, or most of us do. But there's so much more.
There's a gaping chasm between "here's what I'm thinking about" and "I! Am! A! Thought! Leader!", and I don't want to intentionally be in the second camp.

On Locard's exchange principle and the epigraph from Octavia Butler's Parable of the Sower:

That's the promise of the internet for me: every contact leaves a trace. All that you touch, you change. The internet is people, the internet is community, the internet is change itself.

On conservative ideologies and the sinister side of information control:

Our little forum was on one of the 1,000 most popular sites on the internet, after all. I still quietly think some organization wanted to seed a particular ideology through internet communities, although I have no way to prove it.

All that you touch, you change. All that you change, changes you. Every contact leaves a trace.

What if someone intentionally designs the contact and the trace?

On the dangers of overly reactive or entrenched censorship development from a desire to reduce disinformation:

Words are dangerous: they can change the world. There will always be people who want to change the world for the worse. And there will always be people who want to prevent us from hearing other peoples' words because they would change the world for the better.

On the colonialist nature of design-thinking; specifically how a group of people (likely with privilege) try to go about building a solution to a problem they don't have by attempting to engage with that community that does:

The idea inherently diminishes their own agency and intelligence, but more than that, it strip mines the communities you're helping of value.

On Clubhouse:

And I'm dismayed by the exclusionary discourse on platforms like Clubhouse that are implicitly set up as safe spaces for the oppressive mainstream.

📆 22 Feb 2021  | 🔗

  • The World Wide Web
  • Anthropocenic View
  • Clubhouse
  • inclusion
  • censorship
  • disinformation
  • fake news
  • blogging
  • branding
  • Locard's exchange principle
  • Octavia Butler
  • community
  • social media
  • colonialism 

Ectogenesis and generative art | Tyler Hobbs

I stumbled onto Tyler's site while trying to find some examples of SVG manipulation and all I can say is wow 🤯 I've been a fan (and proponent) of generative art for many years, but Tyler's work is some of the best I've ever seen. My favourite on his current homepage has to be this wonderful pattern called Ectogenesis. Truly beautiful:

Generative art depicting half-domed shapes of variable size with swirling trails around them, akin to schools of jellyfish all battling the same current, disappearing off into the horizon.
The colours, the movement, the surreal ambience: it's an absolutely lovely piece of work.

Creating textures with SVG filters | Sara Soueidan

A fantastic overview of the feTurbulence SVG filter, including interactive examples of all the relevant attributes, how they can be combined, and some of the cool things you can (glitch buttons, squiggly text animations, and dynamically generating extremely impressive paper textures).

In other words, the feTurbulence filter primitive generates and renders Perlin noise. This kind of noise is useful in simulating several natural phenomena like clouds, fire and smoke, and in generating complex texture like marble or granite.

Associative trails | adactio

Some very resonant musings from Jeremy on why he blogs:

But I don’t think about other people when I’m adding something to my website. My audience is myself.

I know there’s lots of advice out there about considering your audience when you write, but when it comes to my personal site, I’d find that crippling. It would be one more admonishment from the inner critic whispering “no one’s interested in that”, “you have nothing new to add to this topic”, and “you’re not quailified to write about this.” If I’m writing for myself, then it’s easier to have fewer inhibitions.
If someone else gets some value from a quick blog post that I dash off here, that’s always a pleasant surprise. It’s a bonus. But it’s not my reason for writing. My website is primarily a tool and a library for myself. It just happens to also be public.

A movement to green the web | Michelle Thorne

A powerful and insightful piece by Michelle on the direct environmental impact the tech sector has, the way in which tech workers can demand further accountability and action, and the reality that green energy/land use aren't the only relevant factors. For the web to be truly "green", in should also help elevate social goals and embrace a holistic approach to climate action.

In the tech sector, when people talk about greening the web, they usually talk about energy. But really we should be talking about power

We need to go beyond tech solutionism and towards intersectional climate justice work. We need to go beyond individual action. We need to shift the power of systemic inequalities, hold major polluters to account, and dismantle the forces—financial, political and cultural—that hold us back from a greener internet and a more sustainable society.
Our work will not be done even if all of the internet runs on green energy—we need the internet to work within planetary boundaries and to uphold the human rights of every person.

On the commitments of firms like Amazon and Google to become more environmentally conscious and reach net-zero (kinda amazing):

And then to meet these targets, Big Tech became the biggest corporate buyers of green energy in the world.

Improving online readability | Piccalilli

Where has this article been my whole life! Andy's posts are often brilliant, but this an absolute gold mine of information, from ideal character lengths to clever type-setting tricks. And I thought I knew at least a little bit about CSS 😂

On using the :not pseudo-class to pre-emptively use the cascade to stop future conflicts on broad rules e.g. a:not([class]) { ... } :

We qualify elements with the :not pseudo class because if you have a link that’s supposed to look like a button that has a .button class on it, you don’t want global link styling to get in the way of the styling that .button generates, so this approach helps that.

👆 This is one of those absolute AHA! moments. I generally don't find myself clashing with specificity in CSS, but I feel like this pattern might have prevented/fixed the few times it does happen. So long as there isn't a blank class, I guess, but it could be extended to a:not([class]), a[class=""] { ... }.

Andy also recommends setting classless anchor elements to use the currentColor keyword, thereby inheriting the styles of their containing text 🤯 e.g.

a:not([class]) {
  color: currentColor;
}

On providing high contrast text selection:

Lastly, selection styles! I like to add a high contrast selection style, personally. It’s a handy inclusion strategy because folks might find your colours hard to read, so giving them the inverse when they select it’s helpful.

And finally, just a really interesting usage of the em-dash:

globally, too—especially if your blog is just articles, but to keep things future-friendly, we’re

I've never seen an em-dash used like this, as a break and then immediate return to flow. It may be a typo, but it reads perfectly well. After my double-take to see if I'd missed a line, I re-read it and it just worked. If the pattern were more common, I don't think I'd question it. Not sure of the grammatical side of things, but I like it a lot.

📆 21 Feb 2021  | 🔗

  • HTML & CSS
  • Inclusion
  • Typography
  • CSS
  • anchor
  • :not
  • class
  • specificity
  • currentColor
  • contrast
  • selection
  • a11y
  • em-dash
  • guide
  • tutorial
  • readability
  • type system
  • design tokens 

Life happens | Tantek Çelik

There's a lot I like about the IndieWeb community, but one of the best elements is a constant determination to strive to be better. Their recent adoption of an official "Life Happens" policy is a great example. It's a commitment to recognise that, well, life happens and that being part of an online community, or volunteering time/effort, is never a requirement. That slipping out for a bit is not just okay, but encouraged, whatever the reason. And providing a framework for supporting individuals in the community to whom life is happening.

The idea came from Tantek, and he sums it up nicely on his recent blog post:

That yes, if and when “life happens” to you that:
  • we want you to take care of what you need to take care of
  • you are encouraged to prioritize those things most important to you, and that the community will not judge or shame you in any way
  • you should not feel guilty about being absent, or abruptly having to stop participating
  • it is ok to ask for help in the community with any of your community projects or areas of participation, no matter what size or importance
  • the community will be here for you when you’re able to and want to return

I think I might be a design engineer... | Trys Mudford

I can see this article becoming an oft-cited "turning point" in frontend development, like Ethan Marcotte's A List Apart post on responsive design. It's certainly a beautifully crafted argument for why your engineering team needs some Design Engineers, yesterday.

Some useful quotes on the why/what of design engineers:

How do we take all of the good ideas that have preceded our involvement in the project, tie them all together elegantly, and deliver them to the user appropriately.
As web developers in a larger build chain, I think our goal is to ‘translate’ the design in the best way possible.
But the primary focus is on doing anything they [design engineers] can to help translate the design for the engineering team.
And I just love this concept (a man can dream):
CSS is the primary language of the design engineer.

I find it fascinating that there are elements to Trys' explanation of a Design Engineer that almost feel more like frontend DevOps (Design Ops? probably taken 😂) or system architecture. I think that's probably a little true; it's certainly an interesting thought to consider.

A design engineer must balance the user experience with the developer experience, both empowering the team to write great code in whatever way is right to them, whilst ensuring that doesn’t detrimentally harm the user experience.

On "back-of-the-front" developers:

I’m generalising, but developers in these fields tend to be ‘systems thinkers’ and approach things with a programming > design mindset—that’s just how their brains tend to work in my experience. Their skills are in writing elegant, robust and scalable code to ensure our products don’t fall over when things go awry. Their skills are in breaking down the whole product into sensible chunks, storing data efficiently, and making it easy to query. Their skills are in preventing data being leaked, stopping users from storing corrupt data, and ceasing hackers in their stride.

Their skills (again, generalising), are not in realising the nuance of a design. And that’s great!

And finally:

...but as we know from the design & engineering ‘owl grievances’...

This is just a wonderful sentence that I'm incredibly glad exists 👏🦉

Design engineer | Adactio

Interesting thoughts on the term "Design Engineer", alongside some excellent historical context around Clearleft and carving out a niche doing "front-of-the-frontend" work.

In my experience, the term “full stack developer” is often self-applied by back-of-the-front-end developers who perhaps underestimate the complexity of front-of-the-front development.
That’s why I was so excited by the term “design engineer,” which I think I first heard from Natalya Shelburne. There’s even a book about it and the job description sounds very much like the front-of-the-front-end work but with a heavy emphasis on the collaboration and translation between design and implementation.
Personally, I’m not a fan of using the term “engineer” to refer to anyone who isn’t actually a qualified engineer...

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.