Explore My Notes

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...

Why I'm losing faith in UX | Creative Good

A sobering look into the history of the UX industry. I think the outlined three "phases of UX" seem pretty on point from my own experience: from idealistic, trusted advisor; to oft-ignored and frequently devalued; to the antithesis of what it set out to be. To mimic the article, it's not that good UX teams and practitioners no longer exist (they definitely do), but that big companies are now more likely to listen to how user psychology can drive short-term profits over long-term satisfaction.

Suddenly the "get rich quick" mentality that had caused the 2008 crash was being adopted by senior leadership at Big Tech firms. Now it was data and algorithms, not UX, that mattered most.
"We're lying to our users," one anguished UX designer told me, explaining that leadership regularly ordered the UX team to create designs that were intentionally misleading. Apparently it helped boost profits.
Increasingly, I think UX doesn't live up to its original meaning of "user experience." Instead, much of the discpline today, as it's practiced in Big Tech firms, is better described by a new name: UX is now "user exploitation."

The mention of how Amazon has become a company famed for its dedication to user experience into one which uses six pages of dark patterns in order to cancel a subscription is, frankly, disheartening.

We're headed into a dangerous time, when our society is run on digital platforms, and UX isn't leading the way to ensure that those tools are usable.

Fluid typography with CSS clamp | Piccalilli

A simple and informative example of how the new CSS clamp property can be used to create fluid layouts (in this case, specifically a fluid type system).

The key is in three CSS variables:

  1. --fluid-type-min for the lower bound;
  2. --fluid-type-target as the "ideal, fluid setting", using calc() to sidestep accessibility issues when zooming;
  3. --fluid-type-max for the upper bound.

With that applied, you can target specific HTML elements and provide meaningful values using the rem unit, e.g:

For the <h1>, we increase the --fluid-type-target to a larger, 5vw. By increasing the viewport unit, we speed up the rate of growth, which will help to maintain its extra large size. To reduce the rate of growth and have less difference between your minimum and maximum sizes: reduce the size of --fluid-type-target.

Here's a snippet of Andy's code:

p {
  font-size: clamp(
    var(--fluid-type-min, 1rem),
    calc(1rem + var(--fluid-type-target, 3vw)),
    var(--fluid-type-max, 1.3rem)
For all three custom properties, we are setting the default value as the second parameter.
It’s really important to test that your text gets large enough when you zoom in and small enough when you zoom out—it should be very obviously larger or smaller.

Atkinson Hyperlegible | Braillie Institute

A font designed to make text as legible as possible. Particularly impressive attention to making sure letterforms are still distinctive even when extremely blurred. Best of all: it's completely free to use.

Syndicating content to Twitter from Eleventy | Max Böck

I feel like Max is about two years ahead of me on everything 😁 Here I am thinking about getting Twitter syndication working on Netlify, and he wrote a perfect tutorial back in 2019. Definitely need to give this a spin! The basic concept is to provide a JSON feed of new "tweets" (or thoughts, or notes, or whatever you want to call them) and then use a Netlify "Function" to parse that feed, connect to the Twitter API, and fire off your tweets on build. Very cool!

To trigger our custom function everytime a new version of the site was successfully deployed, we just need to name it deploy-succeeded.js. Netlify will then automatically fire it after each new build, while also making sure it’s not executable from the outside.

Identifying bugs of the UK | British Bugs

British Bugs does what it says on the tin, providing a treasure trove of photos and information about all manner of bugs found in the UK.

Bird sightings in the UK | Bird Guides

The Bird Guides forum was an invaluable resource whilst we were failing to see the bearded vulture that made the UK it's home last summer, and I've continued to check in from time-to-time since. In particular, their live sightings map is a brilliant tool for checking whether any rarities have been spotted nearby, or just discovering wild areas with good bird populations.

Species guide to Leicestershire and Rutland | Nature Spot

Niche? Sure 😂 But the Nature Spot website offers some excellent photo identification slides for a lot of species found across the UK. I've found it particularly useful for determining flies and beetles.

Identifying British wildlife | UK Safari

Particularly great for invertebrate species, but UK Safari has put together a wide collection of photos on a huge variety of critters found in the British Isles. Particularly great that biomorphs and invasive/introduced species are included.

British mammal identification guide | Mammal Society

A brilliant resource from the Mammal Society of Britain: a comprehensive list of all mammal species that occur in or around the British Isles, including identification diagnostics, known ranges, lifestyle habits, and general information.

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.