Great write up on the current best practices around hiding elements keeping all users in mind:

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

Or if you need to unhide when focused (better for keyboard users etc.):

.visually-hidden:not(:focus):not(:active) {
  /* ... */
}

Alternatively, need to hide an element from non-visual users (screen readers, smart speakers, reading mode), use aria-hidden: true and then if you also need to hide visually:

.my-component[aria-hidden="true"] {
  display: none;
}

Or use the HTML5 hidden attribute.

Some interesting results from the latest Software House frontend survey. Surprised to see that over a third of respondents reckoned CSS-in-JS would be a "fad" and gone in three years; personally only Redux on that list seems likely (a suspicion their results elsewhere corroborate as many people seem to be moving away from Redux to Hooks and the Context API).

Incredible to see Netlify beating out GCP and Azure for hosting usage, though given that two of the experts interviewed for the final results are from Vercel I do wonder how closely TSH are tied to the Jamstack community. Also a surprisingly large number of people using micro frontends... I should probably try to work out what they are 😂

SEO questions I think missed the mark, as these days a lot of SEO maintenance is done via SEO tools or outsourced (in my experience), and similarly, I think it's a stretch to claim that the dev/design divide is closing just because developers are likely to have used Zeplin or InVision. If anything, I feel like these tools may have widened the divide by making it easier to cut all communication lines, just email a link instead.

The most worrying element though is this:

Only just over half of respondents said they actively "take care of accessibility" within the applications they work on.

The hell are the other half doing then? It's one thing when that kind of result crops up in surveys focusing on JS or the whole tech team, but in a frontend survey!? Making the application useable is literally our job, so if you aren't responsible for accessibility what are you responsible for? Sigh... 🤦‍♂️

Our trip to the Outer Hebrides a few years ago has made us incredibly wistful to return at some point, so this list of great food spots is perfect:

• North Uist Distillery now produces Downpour gin (love the name ♥) and are working on a whisky using the oldest barley breed in the UK: bere
• Hebridean Smokehouse in Clachan for smoked scallops and pâté
• Namara Café in Grimsay for seafood (at the back of the Kallin Shellfish shop); the bacon and scallop rolls are a speciality, crab rolls are exceptional
• Uist Scandi Bakery in Lochboisdale (South Uist) has great cinnamon buns and sourdough
• Scallop Shack, Uig on Lewis for cheap local scallops (honesty box system so need cash or can be preordered via Facebook)
• Flavour chocolates include a Harris Gin variety (Harris Gin also getting a mention, obviously)
• Sam's Seafood Shack, a blue caravan near Clements Church in Rodel, has a daily menu depending on the catch

Also, Tigharry Schoolhouse sounds like a great holiday rental in the Uists. Plus, the Euston to Glasgow sleeper gets you within striking distance and Car Hire Hebrides is a useful company to remember.

I've been battling microformats a lot recently, wish I'd found this page of best practice markup examples earlier, it's a great resource.

I've somehow only just discovered JSON Feed, a take on RSS and Atom built a little more for modern needs (and using JSON instead of XML, obviously). Looks cool, might see if I can throw something together to support it here (at some point) 😊

Tracy has written a really solid article that covers a lot of what I consider the positives of the IndieWeb movement. With her mentioning of digital gardens and personal filing systems, she's clearly gone on (or going on) a similar journey to me 😉 She also touches on an element I'd never really considered:

I’ve long said the future of the web is curation — there’s so much content, much of it crap or irrelevant — and I want to hear what real people find interesting.

The idea of personal websites (and associated social feeds) as a curation tool, a kind of distributed filter network, is a neat one. So much of what I bookmark or write about here has come from Slack channels, RSS feeds, or word of mouth. It had never really occurred to me that a network of personal websites could create a more useful equivalent to an algorithmic feed, one which is still likely highly related to your own interests but also just as likely to throw a curveball that shows you something new or challenging. Neat idea.

I also really rather like this sentiment:

Recentering how I use the web based on my needs rather than the private services that are available.

What a wonderful analogy of the web in 2020. Social media, Big Tech, IndieWeb, cosy web, all bundled together with flowing prose.

Plus, good Lord, this article is eminently quotable (and beautifully written, though at time of bookmarking also not finished):

... beneath the dust of broken links, tracking scripts, and terms of use, hypertext is still magic, and every link is a wonder.

We're standing with one foot in the remnants of the old web, the other caught in the vortex of the new web, trying to find ways to adapt.

Indieweb nostalgia and cozyweb retreat are both responses to the same idea: that the web is worth saving, defending, and growing.

We don't have to scatter underground or retreat into isolated islands, we can be stewards of the web itself, the web that is.

... they're out there, building and hoping others will dismantle the city and join them on the frontier.

(that said, I think the summary of the IndieWeb is perhaps a little too generalised; there's plenty of new thought and consideration of what silos are doing well going on in that community, not just an outright rejection of the modern web as portrayed)

Netlify's microsite celebrating their millionth user is a brilliant experiment, so it's great to see them immediately posting a "making of" article on CSS Tricks. It's a beautifully rendered SVG illustration showing the service's history, popping in key milestones as you scroll. There are also some really nice-to-see features, such as the prominent animation toggle that is always visible, for those who may not enjoy the various movement effects.

Sarah covers all the various technologies that they used. I was surprised to see the entire site is a VueJS app comprised almost entirely of a single SVG element, with animations handled with GreenScok. Cool! Better yet, the article has a ton of advice on making SVGs as accessible as possible, including a video showing what it's like to browse with a screen reader. Really interesting to see their use of role="presentation" in particular.

I'm number 496,180 by the way. Quite surprised to be in the top 500,000!

... if racial discrimination is defined as treating, considering, or making a distinction in favor or against an individual based on that person’s race, then racial discrimination is not inherently racist. The defining question is whether the discrimination is creating equity or inequity. If discrimination is creating equity, then it is antiracist. If discrimination is creating inequity, then it is racist.

Someone reproducing inequity through permanently assisting an overrepresented racial group into wealth and power is entirely different than someone challenging that inequity by temporarily assisting an underrepresented racial group into relative wealth and power until equity is reached. The only remedy to racist discrimination is antiracist discrimination. The only remedy to past discrimination is present discrimination. The only remedy to present discrimination is future discrimination.

As President Lyndon B. Johnson said in 1965, “You do not take a person who, for years, has been hobbled by chains and liberate him, bring him up to the starting line of a race and then say, ‘You are free to compete with all the others,’ and still justly believe that you have been completely fair.” As U.S. Supreme Court Justice Harry Blackmun wrote in 1978, “In order to get beyond racism, we must first take account of race. There is no other way. And in order to treat some persons equally, we must treat them differently.”

An excerpt from How to be an Antiracist by Ibram X. Kendi, which I really need to pick up.

A neat trick (now third hand) for storing the scroll position of a sidebar or other element in local storage, allowing you to keep it constant across pages without the user seeing it flash into place:

let sidebar = document.querySelector(".sidebar");

let top = localStorage.getItem("sidebar-scroll");
if (top !== null) {
  sidebar.scrollTop = parseInt(top, 10);
}

window.addEventListener("beforeunload", () => {
  localStorage.setItem("sidebar-scroll", sidebar.scrollTop);
});

I'm a huge fan of Dougal Dixon's After Man and even managed to attend the 2018 (re)-launch party for the reprint of the book. That means I was lucky enough to see the original pitch document for the book, but only briefly (there were a lot of people and I was more interested in meeting Dougal himself, getting books signed, etc.). Luckily, Darren has done a great job writing up the pitch document, including scanning a number of the pages. Very cool and I agree that the biome dioramas being cut was a real shame 😮

What a cool idea 😎 A set of line illustrations (SVG etc. goodness) that you can mix'n'match to create avatars, all fully modular. Currently it's an open-source graphics resource, but I could totally see this becoming an API that you can query for a pseudo-random avatar generator.