| 5th | 10th | 15th | 20th | 25th | 30th | |||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 12am | ||||||||||||||||||||||||||||||
| 4am | ||||||||||||||||||||||||||||||
| 8am | ||||||||||||||||||||||||||||||
| 12pm | ||||||||||||||||||||||||||||||
| 4pm | ||||||||||||||||||||||||||||||
| 8pm |
Ben Terrett on balancing the needs of an individual user with the needs of everyone else.
Of course we care about our clients: we want them to be successful and profitable. But we think there’s a balance to be struck between what success means for just the user or customer, and what success means for society.
Telling other people working on the web and doing a great job building web sites that they are useless because they focus on HTML and CSS is very wrong.
The sentiment is that front-end development is a problem to be solved: “if we just have the right tools and frameworks, then we might never have to write another line of HTML or CSS ever again!” And oh boy what a dream that would be, right?
Well, no, actually. I certainly don’t think that front-end development is a problem at all.
What Robin said.
I reckon HTML and CSS deserve better than to be processed, compiled, and spat out into the browser, whether that’s through some build process, app export, or gigantic framework library of stuff that we half understand. HTML and CSS are two languages that deserve our care and attention to detail. Writing them is a skill.
Paul was at the Material conference in Iceland too, and we had some good chats. Here, he speaks his brains with Deep Thoughts prompted by the event.
I really get where he’s coming from when he says that “certain websites feel more ‘webby’ than others”, but it sure is tricky to nail down.
The story of Long Bets, specifically that one.
Given the nature of the long bet I’ve got running, I’m surprised that the Long Now Foundation are publishing on Medium. Wanna bet how long this particular URL will last?
Okay, I knew about the Python shortcut—I mentioned it in Going Offline—but I had no idea it was so easy to do the same thing for PHP. This is a bit of a revelation for me!
Once in the desired directory, run:
php -S localhost:2222Now you can go to “localhost:2222” in your browser, and if you have an index.html or .php file in your root directory, you’re in business.
I quite like Phil’s idea of having charts like this. It might be a fun project for Homebrew Website Club to do something like this for my site.
This could’a, should’a, would’a been a great blog post.
March 1981: Shakin’ Stevens was top of the charts, Tom Baker was leaving Doctor Who and Clive Sinclair was bringing computers to the masses. Britain was moving into a new age, and one object above all would herald its coming.
Remember when I wrote about using push without notifications? Sebastiaan has written up the details of the experiment he conducted at Indie Web Camp Berlin.
Flickr is removing anything over 1,000 photos on accounts that are not “pro” (paid for) in 2019. We highlight large and amazing accounts that could use a gift to go pro. We take nominations and track when these accounts are saved.
Chris Ferdinandi has a good rule of thumb:
If something I want to do with JavaScript can be done with CSS instead, use CSS.
Makes sense, given their differing error-handling models:
A JavaScript error can bring all of the JS on a page to screeching halt. Mistype a CSS property or miss a semicolon? The browser just skips the property and moves on. Use an unsupported feature? Same thing.
But he also cautions against going too far with CSS. Anything to do with state should be done with JavaScript:
If the item requires interaction from the user, use JavaScript (things like hovering, focusing, clicking, etc.).
‘Sfunny; I remember when we got pseudo-classes, I wrote a somewhat tongue-in-cheek post called :hover Considered Harmful:
Presentation and behaviour… the twain have met, the waters are muddied, the issues are confused.
A time capsule for the long now. Laser-etched ceramic tablets in an Austrian salt mine carry memories of our civilisation in three categories: news editorials, scientific works, and personal stories.
You can contribute a personal story, your favorite poem, or newspaper articles which describe our problems, visions or our daily life.
Tokens that mark the location of the site are also being distributed across the planet.
Some tips for getting responsive images to work well on the Apple Watch:
- test your layouts down to 136-
pxwide- include
300w-ish resources in your full-widthimg’ssrcsets- art direct to keep image subjects legible
- say the magic
metawords
As it turns out, some sites are much harder to archive than others. This article goes through the process of archiving traditional web sites and shows how it falls short when confronted with the latest fashions in the single-page applications that are bloating the modern web.
I just binge-listened to the six episodes of the first season of this podcast from Stephen Fry—it’s excellent!
It covers the history of communication from the emergence of language to the modern day. At first I was worried that it was going to rehash some of the more questionable ideas in the risible Sapiens, but it turned out to be far more like James Gleick’s The Information or Tom Standage’s The Victorian Internet (two of my favourite books on the history of technology).
There’s no annoying sponsorship interruptions and the whole series feels more like an audiobook than a podcast—an audiobook researched, written and read by Stephen Fry!
Fax machines, pop-up books, radioactive televisions, writing boxes, microfilm readers, nuclear bomb cores, cupholders, bidets, jet engines, index cards, wiffle balls, oil barrels, lightning rods, playing cards, air conditioning, hair dryers, wheelchair ramps, handbags, diving bells, slippers, laundry chutes, sewing machines, pockets, skee-ball, safety pins, chalkboards, tote bags, holograms, hearing aids, dollhouses, billboards, airports, flash drives, cardigans, beer cans, stethoscopes, text editors, mugs, wallpaper, towel dispensers, bumber stickers, staplers, microscopes, fingerless gloves, wire hangers, toast, and more.
I’ll be in my bunk.
The tools that characterize a person’s time and place in technological history are the ones that a person actually uses, the technologies relied upon so heavily that they can feel like an extension of oneself. This is part of how technology can define a culture, and why sometimes you forget the thing you’re using is technology at all. Until, eventually, inevitably, the technology is all but forgotten.
The terrific Hugo-winning short story about inequality, urban planning, and automation, written by Hao Jinfang and translated by Ken Liu (who translated The Three Body Problem series).
Hao Jinfang also wrote this essay about the story:
I’ve been troubled by inequality for a long time. When I majored in physics as an undergraduate, I once stared at the distribution curve for American household income that showed profound inequality, and tried to fit the data against black-body distribution or Maxwell–Boltzmann distribution. I wanted to know how such a curve came about, and whether it implied some kind of universality: something as natural as particle energy distribution functions, so natural it led to despair.
When is a space not a space?
Tom talks about ogham stones and unicode.
A great primer by Ire:
Web workers, service workers, and worklets are all scripts that run on a separate thread. So what are the differences between these three types of workers?
Imagine a PWA podcast app that works offline and silently receives and caches new podcasts. Sweet. Now we need a permissions model that allows for silent notifications.
Scroll around this massive video of a timelapse of one day’s footage from the Himawari 8 satellite in geostationary orbit around our homeworld.
Tim recently gave an excellent talk at FFConf. He mentioned this variation of Markdown, specifically for writing coding tutorials that update as you scroll. You can see it in action on his Generative Artistry site.
Kind of reminds of some of Bret Viktor’s work.
I had to read through this twice, but I think I get it now (I’m not the sharpest knife in the drawer). Very useful if you’re doing theming in CSS.
A fascinating look at standards in the real world. In this case, it’s the kilogram, which is shedding its French Revolutionary roots in favour of the Planck constant.
Our messy human measurements have transcended their messy humanness; they have been melded with an eternal truth.
Mention of The Master Of The Kilogram reminded me of The Keeper Of Time.
Jigsaw puzzle companies tend to use the same cut patterns for multiple puzzles. This makes the pieces interchangeable, and I sometimes find that I can combine portions from two or more puzzles to make a surreal picture that the publisher never imagined. I take great pleasure in “discovering” such bizarre images lying latent, sometimes for decades, within the pieces of ordinary mass-produced puzzles.
Taking the idea of the Clock of the Long Now and applying it to a twitterbot:
Software may not be as well suited as a finely engineered clock to operate on these sorts of geological scales, but that doesn’t mean we can’t try to put some of the 10,000 year clock’s design principles to work.
The bot will almost certainly fall foul of Twitter’s API changes long before the next tweet-chime is due, but it’s still fascinating to see the clock’s principles applied to software: longevity, maintainability, transparency, evolvability, and scalability.
Software tends to stay in operation longer than we think it will when we first wrote it, and the wearing effects of entropy within it and its ecosystem often take their toll more quickly and more destructively than we could imagine. You don’t need to be thinking on a scale of 10,000 years to make applying these principles a good idea.
Remember when I said that if we want to see CSS exclusions implemented in browsers, we need to make some noise?
Well, Rachel is taking names, so if you’ve got a use-case, let her know.
This just blew my mind! A fiendishly clever pattern that allows you to inline resources (like critical CSS) and cache that same content for later retrieval by a service worker.
Crazy clever!
A handy in-browser image compression tool. Drag, drop, tweak, and export.
I guess this domain name is why our local developmemnt environments stopped working.
Anyway, it’s a web interface onto Lighthouse (note that it has the same bugs as the version of Lighthouse in Chrome). Kind of like webhint.io.
Rachel does some research to find out why people use CSS frameworks like Bootstrap—it can’t just be about grids, right?
It turns out there are plenty of reasons that people give for using frameworks—whether it’s CSS or JavaScript—but Rachel shares some of my misgivings on this:
In our race to get our site built quickly, our desire to make things as good as possible for ourselves as the designers and developers of the site, do we forget who we are doing this for? Do the decisions made by the framework developer match up with the needs of the users of the site you are building?
Not for the first time, I’m reminded of Rachel’s excellent post from a few years ago: Stop solving problems you don’t yet have.
Some advice from Andy on creating a dark theme for your website. It’s not just about the colours—there are typography implications too.
Harry takes a look at the performance implications of loading CSS. To be clear, this is not about the performance of CSS selectors or ordering (which really doesn’t make any difference at this point), but rather it’s about the different ways of getting rid of as much render-blocking CSS as possible.
…a good rule of thumb to remember is that your page will only render as quickly as your slowest stylesheet.
A great selection of links about design systems, collected and categorised.
I remember a couple of years back when Jen came to visit Clearleft to chat to us about CSS grid, this use-case that Rob describes here came up almost immediately.
But despair not—Rachel points to a potential solution. I saw potential solution, because if we want to see this implemented in browsers, we need to make some noise.
If you buy this bundle of books, you get Going Offline in some very, very good company.
Ethan ponders what the web might be like if the kind of legal sticks that exist for accessibility in some countries also existed for performance.
‘Sfunny, this exact use-case (styling a profile component) came up on a project recently and I figured that CSS grid would be the right tool for the job.
Publishing on the web really is quite marvellous:
…an endless thrill, a sort of everlasting, punk-rock feeling and I hope it will never really go away.
This is very, very good news. Following on from the recent announcement that a huge swathe of Flickr photos would soon be deleted, there’s now an update: any photos that are Creative Commons licensed won’t be deleted after all. Phew!
I wonder if I can get a refund for that pro account I just bought last week to keep my Creative Commons licensed Flickr pictures online.
As well as graciously hosting Indie Web Camp Berlin on the weekend at Mozilla’s offices, Yulia has also drawn this super-cute comic.
You could create components that strike the perfect balance between reuse and context sensitivity. But defining the components of your design system is just the first step. It has to make its way into the product. If it doesn’t, a design system is like a language with no extant literature or seminal texts.
Marissa Christy outlines the reasons why your design system might struggle:
- The redesign isn’t prioritized
- The tech stack is changing
- Maintenance takes discipline
But she also offers advice for counteracting these forces:
- Get buy-in from the whole team
- Prioritize a lightweight re-skin on older parts of the product
- Treat a design system like any other product project: start small
- Don’t wait for others. Lead by example.
- Finally, don’t compare yourself to others on the internet
I’ve got a lot of photos on Flickr (even though I don’t use it directly much these days) and I’ve paid up for a pro account to protect those photos, but I’m very worried about this:
Beginning January 8, 2019, Free accounts will be limited to 1,000 photos and videos.
That in itself is fine, but any existing non-pro accounts with more than 1000 photos will have older photos deleted until the total comes down to 1000. This means that anyone linking to those photos (or embedding them in blog posts or articles) will have broken links and images.
Tears in the rain.
Day one of Indie Web Camp Berlin is done, and it was great! Here’s Charlie’s recap of the sessions she attended.
Bruce reveals that the theory and the reality are somewhat different when it comes to the accessibility of inline elements like em and strong.
This instance of collective action from inside a tech company is important, not just for the specifics of Google, but in acting as an example to workers in other companies.
And of all the demands, this is the one that could have the biggest effect in the US tech world:
An end to Forced Arbitration.
A proposed flag for the planet.
Rachel gives us the run-down on what’s coming soon to Cascading Style Sheets near you, including an aspect-ratio unit and a matches selector (as originally proposed by Lea).