Link tags: calc
28
clamp() Calculator · Chris Burnell
Like a little mini Utopia:
Handy little tool for calculating viewport-based clamped values.
Line heights in CSS work better with ratios | Andy Bell
There’s a broader point here about declarative design:
Setting very specific values may feel like you’re in more control, but you’re actually rescinding control by introducing fragility in the form of overly-specific CSS.
Pizza Exchange Rate | FlowingData
This is a story about pizza and geometry.
The interactive widget here really demonstrates the difference between showing and telling.
How normal am I?
A fascinating interactive journey through biometrics using your face.
Fluid Space Calculator | Utopia
Type and space are linked, so if you’re going to have a fluid type calculator, it makes sense to have a fluid space calculator too. More great work from Trys and James!
EStimator.dev: the modern JavaScript savings calculator
Find out how much smaller your JavaScript could be.
Sass Color Functions in CSS | Jim Nielsen’s Weblog
I’m not the only one swapping out Sass with CSS for colour functions:
Because of the declarative nature of CSS, you’re never going to get something as terse as what you could get in Sass. So sure, you’re typing more characters. But you know what you’re not doing? Wrangling build plugins and updating dependencies to get Sass to build. What you write gets shipped directly to the browser and works as-is, now and for eternity. It’s hard to say that about your Sass code.
“Let us Calculate!”: Leibniz, Llull, and the Computational Imagination – The Public Domain Review
The characteristica universalis and the calculus racionator of Leibniz.
Fluid scale and tokens: a match made in heaven - Andy Bell
Andy takes Utopia for a spin—it very much matches his approach.
Utopia
This is the project that Trys and James have been working on at Clearleft. It’s a way of approaching modular scales in web typography that uses CSS locks and custom properties to fantastic effect.
Utopia is not a product, a plugin, or a framework. It’s a memorable/pretentious word we use to refer to a way of thinking about fluid responsive design.
Case Study: lynnandtonic.com 2019 refresh - lynnandtonic.com
Lynn gives a step-by-step walkthrough of the latest amazing redesign of her website. There’s so much joy and craft in here, with real attention to detail—I love it!
Website Carbon Calculator – Calculate your websites carbon emissions
Get an idea of how much your website is contributing to the climate crisis.
In total, the internet produces 2% of global carbon emissions, roughly the same as that bad boy of climate change, the aviation industry.
Web Bloat Score Calculator
Page web bloat score (WebBS for short) is calculated as follows:
WebBS = TotalPageSize / PageImageSize
Yes, this is a tongue-in-cheek somewhat arbitrary measurement, but it’s well worth reading through the rationale for it.
How can the image of a page be smaller than the page itself?
Understanding the Albatross - Snook.ca
Jonathan shares his notes on that great flexbox container queries article from Heydon that I linked to.
The Flexbox Holy Albatross | HeydonWorks
Er …I think Heydon might’ve cracked it. And by “it”, I mean container queries.
This is some seriously clever thinking involving CSS custom properties, calc, and flexbox. The end result is a component that can respond to its container …and nary a media query in sight!
Stepping away from Sass
I think Cathy might’ve buried the lede:
The knock on effect of this was removing media queries. As I moved towards some of the more modern features of CSS the need to target specific screen sizes with unique code was removed.
But on the topic of Sass, layout is now taken care of with CSS grid, variables are taken care of with CSS custom properties, and mixins for typography are taken care of with calc().
Personally, I’ve always found the most useful feature of Sass to simply be that you can have lots of separate Sass files that get combined into one CSS file—very handy for component libraries.
The Human Computer’s Dreams Of The Future by Ida Rhodes (PDF)
From the proceedings of the Electronic Computer Symposium in 1952, the remarkable Ida Rhodes describes a vision of the future…
My crystal ball reveals Mrs. Mary Jones in the living room of her home, most of the walls doubling as screens for projected art or information. She has just dialed her visiophone. On the wall panel facing her, the full colored image of a rare orchid fades, to be replaced by the figure of Mr. Brown seated at his desk. Mrs. Jones states her business: she wishes her valuable collection of orchid plants insured. Mr. Brown consults a small code book and dials a string of figures. A green light appears on his wall. He asks Mrs. Jones a few pertinent questions and types out her replies. He then pushes the start button. Mr. Brown fades from view. Instead, Mrs. Jones has now in front of her a set of figures relating to the policy in which she is interested. The premium rate and benefits are acceptable and she agrees to take out the policy. Here is Brown again. From a pocket in his wall emerges a sealed, addressed, and postage-metered envelope which drops into the mailing chute. It contains, says Brown, an application form completely filled out by the automatic computer and ready for her signature.
Eric’s Archived Thoughts: Generating Wireframe Boxes with CSS and HTML5
Eric uses some super-clever CSS to “wireframe up” a web page.
I wonder if this could be turned into a little bookmarklet?
The Orrery at The Interval: An Invitation to Long-Term Thinking — Blog of the Long Now
The Long Now Foundation has been posting some great stuff on their blog lately. The latest is a look at orreries, clocks, and computers throughout history …and into the future.