« Oatmeal

Spring break is winding down, and all familial travel for at least a few weeks is done. I am excited to find my way back into the “regular” routine.

Work this week has been pretty busy, and I’ve been writing a bit of css. This week’s log features some css tidbits.

How to make a great anime adaptation

I think the article’s sub-headline pretty much sums it up:

First, get earnest. Second, get expressionist. Finally, get corny.

Set up a live static personal web site in seconds with Indie Web Server 8.0.0

I’ve been using Netlify for all my static sites, lately, but this project looks like a neat alternative for those who don’t mind a wee bit of server administration.

Art Direction For The Web Using CSS Shapes

Bending text, and the web to one’s (design) will.

fyi: [hidden] is a lie

In summary:

The solution is tragic and it’s to either not use hidden (because it’s a lie), or to pepper your apps with

[hidden] { display: none !important }

and they both suck, so have fun!

CSS masonry with flexbox, :nth-child(), and order

Confession: I once spent well over a week attempting to accomplish this exact thing in plain ol’ css without any luck. I had to resort to using — *shutters* — javascript.

It seems that that CSS Working Group approved CSS Nesting!

👋 SASS and friends.

WebAuthn; A better alternative for securing our sensitive information online

I’ve mixed feelings about this — but tbh, I am not in the lease qualified to opine one way or the other. That being said, I’m really digging the .guide TLD.

Video of a Japanese Space Probe Touching Down on an Asteroid

While I was struggling get some react and an API to cooperate other people were landing a probe on an asteroid.

The Geography of America’s Mobile and ‘Stuck,’ Mapped

The United States is facing a new class distinction: those who are mobile across state lines, and those who are stuck.

I catch myself (panicked) thinking about this a lot in the context of climate change, wondering where we should live if we are going to be stuck there.

Technical communication is particularly hard for newcomers

One of the key components to good technical communication is the right amount of context.

Cache-Control for Civilians

One of the most common and effective ways to manage the caching of your assets is via the Cache-Control HTTP header. This header applies to individual assets, meaning everything on our pages can have a very bespoke and granular cache policy. The amount of control we’re granted makes for very intricate and powerful caching strategies.

Handy dandy skip to point link

The Growing Complexity Of Developing Websites and the Growing Ease Of Using Site Builders

Developers like to develop. They like code and development tools and they’re bringing more of those things to the design and development of websites. Instead of writing HTML and CSS directly, now we’re told to write both inside Javascript.

Continuing,

The downside of this change is that it’s becoming more difficult for someone new (particular on the design side) to enter the field. The barrier for entry is increasing as the requirements are growing more complex.

I think this is spot on — something that I believe is missing from this conversation, however, is that raising the barrier for entry also runs the risk of making the community even more homogenous.

The Great Divide

Very much in-line with the previous entry:

The divide is between people who self-identify as a (or have the job title of) front-end developer, yet have divergent skill sets.

This article is nice in that it spells out a solution, and offers some guidance for how best to talk about the work of front-end development…and points out that front-end development can mean a lot of different things to a different people.

An exercise in progressive enhancement

A recent project I’ve been tinkering with was a good use case for me to familiarise myself with the actual implementation of a site that works without Javascript, but is enhanced by Javascript when it is available.

Making Things Better: Redefining the Technical Possibilities of CSS by Rachel Andrew

A CSS tech-talk liveblog,

CSS tries to avoid data loss.

Writing in Emacs

A nice little assortment of packages for writing words inside of emacs. I’ll also take this as an opportunity to plug my homespun config that I’m still really digging: tilde.el

Code hidden in Stone Age art may be the root of human writing

🤯

Climate crisis and a betrayed generation

Leading to ⤵️

The Servant Economy

West Marches: Running Your Own

Zelda Breath of the Wild meets table top gaming! An open world, sandbox style RP is something I’ve always wanted to try…maybe set on the high seas! 🏴‍☠️

Check out all these historical Jolly Roger flags from wikipedia

Shout out to the best from the collection, Jacquotte Delahaye’s “Back From the Dead Red” flag

For those times you need a little rainbow

.rainbow {
  text-fill-color: transparent;
  background-image: linear-gradient(90deg, #F79533 0%, #F37055 15%, #EF4E7B 30%, #A166AB 44%, #5073B8 58%, #1098AD 72%, #07B39B 86%, #6DBA82 100%);
  background-size: cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
          background-clip: text;
}

When applied to text, this class changes text’s color from whatever it is by default to a rainbow 🌈.

It is an interesting bit of css because it achieves this by essentially turning the text into a knockout overlay on top of an embedded background image (the rainbow gradient). The text itself is transparent, allowing the background beneath (behind) to show through. This is all achieved without needing to convert the text to svg, or use some weird font. Straight up css 🦄.

Explaining Code using ASCII Art

People tend to be visual: we use pictures to understand problems. Mainstream programming languages, on the other hand, operate in an almost completely different kind of abstract space, leaving a big gap between programs and pictures.

Cyberfeminism ~1990s - present, Cyberfeminist Index by Mindy Seu

“I’m currently working on a printed publication, a la the Whole Earth Catalog and the New Woman’s Survival Catalog, that will provide an overview of cyberfeminism and its evolution into networked feminism (like social media activism), xenofeminism (gender-abolition), and posthumanism/bio-hacktivism. It will be a resource guide: a sampling of books, essays, collectives, online communities, hackerspaces, etc.”

China’s urban policy unit just met for the first time in 38 years. Here’s what it recommended

This article does a bonkers good job laying out how quickly and how much China’s urban and suburban areas are growing.

Networking - 🚂 Choo Documentation

I’ve been exploring alternatives to React lately, and keep coming back to Choo. I very much like this bit from its documentation:

A fun way to think about browsers, is as a standardized Virtual Machine (VM) that includes high-level APIs to do networking, sandboxed code execution and disk access. It runs on almost every platform, behaves similarly everywhere, and is always kept backwards compatible.

What if JavaScript Wins?

Technology has always existed in a social context, and evaluations of the risk or reliability of a tech platform have always relied on social indicators. But the acceleration of these patterns, and the extending of the social networks around code to include the majority of working coders, means that institutional indicators (like “which company funds its development?”) now come second to community-based signals.

Similarly, top-down indications of technical maturity like documentation (often an artifact of outside investment in making a technology accessible to a new audience) are complemented, or even eclipsed, by bottoms-up indicators like how many people have bookmarked a framework, or how many people answer comments about a toolkit.

Tbh, I wasn’t all that interested in this pieces discussion of the pros and cons of JavaScript, but the author, Anil Dash of Glitch does an excellent job articulating the squishier side of why this and such system prevails over that and which thing-a-ma-bob that may be “technically” better.

The piece reminds me of something I recently heard John Siracusa talk about on a podcast — he speculated that software may be the most complicated non-biological thing that humans have ever built. At first I thought it was hubris, but then, as he continued to make his point and draw a line from software to hardware to physics and the physicality of computing I was swayed.

What we often think of as being ethereal and “digital” is, at the end of the day, still in meatspace…

See also “Being Popular” by Paul Graham.

Why I Write CSS in JavaScript

I’m skeptical of CSS in JS for a few reasons, but this article softened my views. I still don’t love it, but my reasons for not loving it aren’t technical, really.

Pragmatic rules of web accessibility that will stick to your mind

Good high-level intro. I could see this being valuable for someone trying to convince “management” of accessibilities “value.”

Time to Panic. The planet is getting warmer in catastrophic ways. And fear may be the only thing that saves us.

‘Our little brown rat’: first climate change-caused mammal extinction

RIP. Expecting more news of this sort in the coming years is terrifying, but also, hopefully, key to catalyzing change.

A Journey Into the Animal Mind

Crows are among the most sophisticated avian technologists.

That is a solid sentence. I read it allowed to myself a few times when I came across it.

Cisco Trash Map, On railroads, oil rigs, uranium mines, 7-11 pizzas, Thelma and Louise, ruination, salvage, and the limits of the garbage gaze.

…I absorbed the common critique of ruin porn — that it tends to erase history and inspire myth. It’s true that as a high schooler I had a pretty vague sense of the politics that made Milwaukee’s ruins. But mythmaking has always shaped the U.S. landscape…

…Ruins are the idealized structures of a vaguely defined past; rubble is the aftermath of specific events that people live in, reuse, and form material relationships to…

Medieval trade networks v.4

A detailed map of medieval trade routes. I always find this sort of thing fascinating and, in my experience lacking from contemporary historical education in the U.S. History is often presented as vignettes, as specific narratives, that are disjointed from a large context. I love how a map like this helps to contextualize the ecology, or maybe society? of history.

Five Lessons From Seven Years of Research Into Buttons

The first point is interesting, and click bait-y “1. Buttons Aren’t Actually Easy to Use”

I think it may be better presented as “buttons require context.”

Or, perhaps “The value of a good label.”

CSS: From Zero to Hero

The crashiest crash course for all things CSS. Covers all the basics — you won’t be ready to tackle all the things, but you’ll be good to go for most things.

How Many .com Domain Names Are Unused?

Some key features:

There are currently 137 million .com domain names registered.1 Of these, roughly 1/3 are in use (businesses, personal websites, email, etc.), another 1/3 appear to be unused, and the last 1/3 are used for a variety of speculative purposes.

My take away, as always, is that the internet is REALLY big…but only a little itty bit of it sees a meaningful amount of traffic. Leading us to…

Why isn’t the internet more fun and weird?

Three things MySpace got right

1. To make a page on MySpace, all it took was text in a textbox.
2. The text could be words or code.
3. Anyone could read the words and see the code.

Continuing, later:

The internet is the great equalizer (1996). People used to believe that. Today, it sounds sarcastic.

We — the programmers, designers, product people — collectively decided that users don’t deserve the right to code in everyday products. Users are too stupid. They’d break stuff. Coding is too complicated for ordinary people. Besides, we can just do the coding…so why does it matter?

I’m all for making the internet weird again. It is something I’m trying to get more cozy doing here, on my personal website.

And if you want to do that (make the internet weird again) we should preserve folks’ ability to get their feet wet, and their hands dirty on the web!

HTML, CSS and our vanishing industry entry points

However, when it comes to frameworks and approaches which build complexity around writing HTML and CSS, there is something deeper and more worrying than a company having to throw away a couple of years of work and rebuild because they can’t support a poorly chosen framework.

When we talk about HTML and CSS these discussions impact the entry point into this profession. Whether front or backend, many of us without a computer science background are here because of the ease of starting to write HTML and CSS. The magic of seeing our code do stuff on a real live webpage! We have already lost many of the entry points that we had. We don’t have the forums of parents teaching each other HTML and CSS, in order to make a family album. Those people now use Facebook, or perhaps run a blog on wordpress.com or SquareSpace with a standard template. We don’t have people customising their MySpace profile, or learning HTML via Neopets. We don’t have the people, usually women, entering the industry because they needed to learn HTML during that period when an organisation’s website was deemed part of the duties of the administrator.

Neopets forever.

Also, read this thread, then read it again…and then maybe a 3rd time.

Decentralization is Not Enough

This (medium) post does a great job spelling out the pitfalls of a lot of the new wave of web tech that is purported to be “saving” the web, or whatever. It is groovy if you a nerd…but essentially this new tech is just helping to build a walled garden for nerds. Sure “anyone” can join…but very often you must be this nerd to enter. I think this is a very real issue for the IndieWeb community, too.

Leaving the web-punditry-zone now.

A few early marketing thoughts

I’ve been re-assessing my freelance work, and found this post from Julia Evans to be wicked timely.

I’m not really certain if I should be doing any marketing, to be honest, and if I should be doing any, I’m not sure what kind I ought to be doing.

The 26,000-Year Astronomical Monument Hidden in Plain Sight

On the western flank of the Hoover Dam stands a little-understood monument, commissioned by the US Bureau of Reclamation when construction of the dam began in 01931. The most noticeable parts of this corner of the dam, now known as Monument Plaza, are the massive winged bronze sculptures and central flagpole which are often photographed by visitors. The most amazing feature of this plaza, however, is under their feet as they take those pictures.

The plaza’s terrazzo floor is actually a celestial map that marks the time of the dam’s creation based on the 25,772-year axial precession of the earth.

I’m hooked. Also, are they gonna make a 3rd National Treasure movie? I’m ready for it.

This metal is powering today’s technology—at what price?

The “renewable” future — replacing one sort of extraction with another.

Life Without the Everything Store

Kottke’s digestion (always primo) or go straight to the source: I Tried to Block Amazon From My Life. It Was Impossible.

tl;dr? Amazon. It is everywhere. It is hard to avoid. Really, really hard to avoid, most especially if you do pretty much nearly anything online. Amazon is legion.

WebSockets the UNIX way; Full duplex messaging between web browsers and servers

PIPES!

Five-minute Explainer: What Is Gravity?

What even is gravity? Learn in (about) five minutes! I very much enjoy Emily St’s science writing.

Designing for the web ought to mean making HTML and CSS

The medium is the message…and sometimes we use the wrong medium to communicate a message.

…regression is lurking, because the industry is making it too hard to work directly with the web. The towering demands inherent in certain ways of working with JavaScript are rightfully scaring some designers off from implementing their ideas at all. That’s a travesty.

Follow up! Paying tribute to the web with View Source

Make Your ARIA Labels Sing on Key

This article does a great job contextualizing aria-labels, and how best to implement them. The audio examples provided are perfect — I think it is interesting that I’ve never actually seen anyone else bother to create examples like this before. The audio examples bring aria-labels from an abstract concept, to a concrete interface element.

When To Buy Your Own ISBNs

Sharing this because I had no clue one could purchase ISBN numbers, let alone their power!

Twitter aliens

A story told on Twitter, in the first person, featuring aliens, a smart phone, and bananas.

It is raining today, meaning today is a ‘CSS’ and ‘JS’, kinda day. 🌧👾🔧