Explore My Notes

Generative social media card editor | George Francis

Man, I wish I'd been able to put something together like this back when I was managing a content team. The ability to just type directly into an image and have the background generatively populate so that it doesn't overlap the text is just 👨‍🍳🤏

Discovered via the excellent viewBox newsletter.

Crowdsourced Pokéstop locations | Pogomap

Very useful tool for checking whether an area contains locations relevant to Pokémon Go i.e. Pokéstops, Gyms, and Nests. Looks like it's built on OpenStreetMap, and therefore open for community editing.

📆 03 Mar 2021  | 🔗

  • L-Space
  • Pokémon Go
  • map
  • OpenStreetMap
  • open source
  • tool 

Dispatching webmentions with a Netlify build plugin | Qubyte Codes

I've been trying to get this working since the Beta of Netlify plugins, and along comes Mark with a fully working example 😂 Definitely want to look into the source code (GitHub) and see if I can get this running here. Also, clever way of doing a quick feed comparison (I think I might try to identify updated database entries somehow, but then I am running a server, just not using it 😁):

I wrote build plugin inside the repo for this site which makes a request for the atom feed of my site before the build is run, and compares it to the generated atom feed after.

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 

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.