Explore My Notes

CSS animations within SVG | viewBox

A very neat little trick. Embedding @keyframes within your SVG <style> element makes it animate when it loads, whether rendered as an image or a background (or, I assume, inlined). It can even be used in favicons on Firefox 🤩 Example with corresponding <img>:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    circle {
      animation: bounce 2s infinite ease-in-out alternate;
      transform-origin: 50px 50px;
    @keyframes bounce {
      to {
        transform: scale(0);
  <circle cx="50" cy="50" r="25" />

<img src="https://viewbox.club/tips/assets/img/CSS_Keyframes.svg" alt="">

📆 29 Jul 2020  | 🔗

  • Animation
  • CSS
  • SVG
  • animation
  • favicon
  • Firefox
  • keyframes 

Clever quote design and arrow use | The Markup

The Markup have recently been doing a great job of analysing some of the big names in the tech world and highlighting some less-than-stellar behaviour or situations. However, what's really caught my eye is their article design; it's beautiful 😍 I wanted to grab a few screenshots of one of their most recent articles (though these styles are used across the site):

Design of quote, highlighted from main article text through larger text and shifted into a side column.
There's something that's always attractive about a good three-column article layout.
Pullquote/statistic highlighted by larger text and moving into a right hand column.
The subtle differences between quotes and cited data are subtle but excellent; think I prefer the use of the citation within the border here.
Correction design, a simple box with an elegant border.
Corrections are very simple but they also jump out at the reader, plus it's always nice to see them at all.
Design of image annotation, offset to the side of the image but with key words highlighted in red and a bold red arrow arcing towards the image.
I adore these little arrows. I've been wanting to try something similar myself for a while so have been digging around the source code a bit.
Photo of Adam Goldstein offset slightly overlapping the text and with a small arrow pointing the description to the image.
Again, the arrows are subtle but really attention-grabbing and just look so nice.

As an FYI it looks like the layout is largely being done via absolute positioning. Arrows are ::before and ::after elements. I still find it a real shame that CSS Grid has yet to catch up to these layouts, but there are some interesting specs on the horizon. 🤞

📆 29 Jul 2020  | 🔗

  • Web Design
  • Google
  • journalism
  • design
  • quote
  • figure
  • citation
  • correction
  • article
  • grid
  • columns
  • layout
  • aside 

Why a skip navigation link is useful | Adam Laki

I'd never heard of a "skip link" before but it's a neat idea that's clearly been around for some time. Basically, it's a link placed at the very start of the <body> that's visually hidden until focused, but which provides a direct anchor link to the main content of the page. That allows keyboard users/screen readers to skip over headers, navigation bars, etc. if they just want to get to an article. Here's a simple HTML/CSS pattern:

<a class="skip-link" href="#main">Skip to content</a>
<main id="main">Your main content...</main>

.skip-link {
    color: #fff;
    background: #000;
    padding: 0.5rem 1rem;
    display: inline-block;
    font-weight: 700;
    border-radius: 4px; 
    box-shadow: 0 0 25px rgba(0,0,0,0.2);
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;

.skip-link:focus {
    top: 2rem;
    outline: 5px solid rgba(0,0,0,0.1);

WordPress is renaming 'master' to 'trunk' on Git repositories | WordPress Tavern

The debate around the common practice of naming the primary branch in Git "master" continues, but I thought the statement from WordPress had some interesting points. They largely mirror my own views – preferring the use of "trunk" – but they also point out that the term "main" has been used as an othering statement in some Eastern cultures (specifically Japanese is mentioned). As they put it:

Language is not always easy, especially when addressing a global community, each with their own terms that are possibly discriminatory.

Discover your creative type | Adobe

Adobe have put together a creative questionnaire, replete with quirky designs and animations. Not too sure about the actual style choices, but it's certainly consistent. At any rate, I'm apparently a Dreamer; I see the hidden meanings behind facts and figures, use imagination to tie disparate concepts together, and am an empathetic introvert (to oversimplify). Eh, it doesn't feel a million miles off, but it's also a bit too far onto the "creative" side in many ways. Still, there are some interesting descriptions here and you can view all of the eight profiles without taking the quiz, so it's a nice reference point to consider different viewpoints.

Take me to another useless website please | The Useless Web

A quirky little tool quite similar to the Whimsical Web, only for websites that serve no purpose. A few random presses took me to a site which is just a never-ending stream of 8-bit corndogs raining down from the browser windows; another which was just a picture of a mango set against a starburst background; one which hijacked your cursor so every single click took you to a "tweet this site" widget; and one which had a cursor-controlled, semi-fluid "waving arms tube" that emitted incredibly intense flashing images if you moved your mouse too fast 😵 Useless indeed!

Stuff about webmention | fluffy

A partial response to Marty and yet further interesting thoughts on what the term "webmention" has come to mean, and what the technology could become.

Webmention-as-reaction is fine, but it’s very difficult to get good UX with webmention-as-comments. Reply chains are difficult to follow, especially if one of the links in the chain breaks

^ that, in particular, is something I've been thinking about a lot lately with my own implementation. I think I'm coming to the conclusion that Webmentions are fine to support, but maybe aren't a good replacement for actual native comment systems. Then again, with static sites, native comment systems create their own headaches.

Fluffy (as ever) also raises some useful points around community moderation and the potential for abuse.

Testing microformats | Microformats.io

Very useful! A service that can take any URL and output the parsed results as JSON, letting you quickly see your site as a machine would. Helped me catch that my rel=me links were duplicating themselves due to a difference in capitalisation on two of them 👍

📆 19 Jul 2020  | 🔗

  • Frontend
  • IndieWeb
  • microformats
  • parsing
  • testing
  • tool 

What we talk about when we say "webmentions" | Marty McGuire

These are all fantastic things that are built on top of Webmention but that I often feel are conflated with Webmention.

I'm in the middle of (ahem) adding Webmention support to this site, so I found this take on some of the many things that can mean by Marty pretty interesting, particularly as someone who (on first glance) envisioned a bold-new, Webmention-driven world and rapidly discovered it's a lot more nuanced than all that. His conclusion, though, feels like a particularly useful frame of reference when thinking about the technology:

Maybe Webmention can be thought of as less of a "building block" and more like a glue. You can do so many things with glue, like combining a bunch of planks into a table, or building a parade float sculpture with papier-mâché, or doctoring the photo in a passport!

You wouldn't call them all "glue".

Adding Lighthouse scores to my site's footer | Zach Leat

...as a performance advocate, I feel that it’s important to keep myself honest and to have some transparency behind the sites I build.

Using a combination of Speedlify and Google Lighthouse tool, Zach is able to display web performance scores in his footer, bespoke for each page. He seems to be doing so client-side, though I don't fully understand the reasoning. He's using 11ty, so there's a build process involved. Zach points out that the Lighthouse score would be "stale" if pulled in during build time but that doesn't feel right. I'd expect the Lighthouse score of a static page to be constant until that page was updated, which would require another build anyway. I guess if he's doing a lot with client-side JS that may not be the case 🤷‍♂️ I also admit that he is the web perf specialist and I am not, so I am likely missing something.

Either way, it's a cool feature and a neat example of API-driven, Jamstack goodness 👍

Preload page links on hover | instant.page

Gatsby's page-fetching is a feature I consider a double-edged sword (though I'll admit I also don't fully understand it 😅). On the one hand, I'm all for anything that decreases load time between pages on a site. On the other, pre-caching a bunch of content that the user may never need feels like an extremely wasteful practice. InstantPage takes a slightly different approach, instead triggering the page request when a link is hovered (or touched on mobile). In their estimation that can reduce latency by 100s of milliseconds, so we're not talking huge wins here, but a minor UX bump. Assuming the page weight added from the client-side JS doesn't offset it, of course...

Sneak peek at Sunlit 3.0 | Manton Reece

A new product aiming to be an "Instagram replacement" and photo-blogging tool from the creator of Micro.blog‽ Colour me intrigued! 🤔 Sunlit looks very nice, will be interested to see how it develops.

Made By Me, But Made Possible By:


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.