Tags: ratio

194

sparkline

Keeping aspect-ratio with HTML and no padding tricks

A clever little hack to preserve an aspect ratio for any HTML element.

We use two important attributes:

  • SVG knows how to maintain aspect ratio
  • CSS grid knows how to make overlapping items affect each other’s size

People and tooling | susan jean robertson

I can’t help but also wonder if we’re using tools to solve problems they weren’t meant to solve, like how to communicate with or manage a team.

Dude, you broke the future! - Charlie’s Diary

The transcript of a talk by Charles Stross on the perils of prediction and the lessons of the past. It echoes Ted Chiang’s observation that runaway AIs are already here, and they’re called corporations.

History gives us the perspective to see what went wrong in the past, and to look for patterns, and check whether those patterns apply to the present and near future. And looking in particular at the history of the past 200-400 years—the age of increasingly rapid change—one glaringly obvious deviation from the norm of the preceding three thousand centuries—is the development of Artificial Intelligence, which happened no earlier than 1553 and no later than 1844.

I’m talking about the very old, very slow AIs we call corporations, of course.

Third-Party Scripts | CSS-Tricks

Hell is other people’s JavaScript.

Third-party scripts are probably the #1 cause of poor performance and bad UX on the web.

Hypertext and Our Collective Destiny

The text of a fascinating talk given by Tim Berners-Lee back in 1995, at a gathering to mark the 50th anniversary of Vannevar Bush’s amazing article As We May Think. The event also drew together Ted Nelson, Alan Kay, Douglas Engelbart, and Bob Kahn!

Thanks to Teodara Petkova for pointing to this via the marvellous Web History Community Group.

The HSB Color System: A Practicioner’s Primer – Learn UI Design

A nice clear explanation of specifying colour using HSB (not to be confused with HSL).

The Golden Record

We asked you to tell us what you’d put on a new Golden Record. Here’s what you chose.

Ever thought about what you’d put on the Voyager golden record? Well, what are you waiting for? Your website can be your time capsule.

unDraw

Liberally licensed SVG illustrations by Katerina Limpitsouni with customisable colour schemes.

Future Historians Probably Won’t Understand Our Internet - The Atlantic

You can’t log into the same Facebook twice.

The world as we experience it seems to be growing more opaque. More of life now takes place on digital platforms that are different for everyone, closed to inspection, and massively technically complex. What we don’t know now about our current experience will resound through time in historians of the future knowing less, too. Maybe this era will be a new dark age, as resistant to analysis then as it has become now.

The Real Danger To Civilization Isn’t AI. It’s Runaway Capitalism.

Spot-on take by Ted Chiang:

I used to find it odd that these hypothetical AIs were supposed to be smart enough to solve problems that no human could, yet they were incapable of doing something most every adult has done: taking a step back and asking whether their current course of action is really a good idea. Then I realized that we are already surrounded by machines that demonstrate a complete lack of insight, we just call them corporations.

Related: if you want to see the paperclip maximiser in action, just look at the humans destroying the planet by mining bitcoin.

Curation - Snook.ca

In the name of holy engagement, the native experience of products like Twitter, Facebook, and Instagram are moving away from giving people the ability to curate. They do this by taking control away from you, the user. By showing what other people liked, or by showing recommendations, without any way to turn it off, they prevent people from creating a better experience for themselves.

Teletype for Atom

A plug-in that lets multiple people collaborate on the same document in Atom. Could be useful for hackdays and workshops.

Relative Requirements – CSS Wizardry

I really like this exercise by Harry. I’ve done similar kinds of grading using dot-voting in the past. It feels like an early step to establishing design principles: “this over that.”

By deciding what we value up-front, we have an agreement that we can look back on in order to help us settle these conflicts and get us back on track again.

Relative Requirements remove the personal aspect of these disagreements and instead focuses on more objective agreements that we made as a team.

Web Design Museum

The museum exhibits over 800 carefully selected and sorted web sites that show web design trends between the years 1995 and 2005.

Distilling How We Think About Design Systems

Advice on building design systems:

  • If you can avoid being ambiguous, please do.
  • Favor common understanding over dictionary correctness.
  • Make great operations a priority.
  • Don’t get trapped in defining things instead of explaining things.

How to write a talk - Notist

Rachel describes her process of putting technical talks together:

This method of creating a talk is the one that I find gets me from blank page to finished slide deck most effectively.

She also acknowledges that many other processes are available.

If you are stuck, and your usual method isn’t working, don’t be afraid to try a different approach even if just to get the ideas moving and take you away from staring at the blank page! You might discover that some types of talk benefit from an alternate starting point. There really are no rules here, other than that you do end up with a talk before you need to walk out on that stage.

Design Systems | susan jean robertson

Susan reviews Alla’s superb book on design systems:

If you’re interested in or wanting to create a design system or improve the one you have or get buy in to take your side project at work and make it part of the normal work flow, read this book. And even better, get your colleagues to do the same, so you’ll have a shared understanding before you begin the hard work to build your own system.

Susan also published her highlights from the book. I really like that!

The Era of Newshammer - daverupert.com

Dave has redesigned his site. Now it’s extra Dave-y.

Service Worker Registration  |  Web Fundamentals  |  Google Developers

Hmm …seems like I should probably wait for the load event before triggering navigator.serviceworker.register().

INCREDIBLE DOOM

A print & web comic series about 90’s kids making life-threatening decisions over the early internet.

The first issue is online and it’s pretty great.