CSS Grid Gotchas And Stumbling Blocks – Smashing Magazine
A great practical article from Rachel answering some frequently asked questions about—what else?—CSS Grid.
A great practical article from Rachel answering some frequently asked questions about—what else?—CSS Grid.
Most design systems I link to are for websites, so interesting to see this one for a web browser: Firefox.
There are guidelines for tone of voice and motion design as well as the usual guidelines for typography, colour, and interface elements.
This is a fascinating exercise—take a good set of design principles and test them for reversibility. The results are entirely plausible.
I’ve taken this exercise to the extreme. The philosophy behind inclusive design is that the thing you create works for everybody, no matter the context. The idea behind this experiment in Exclusive Design is that you design something for one specific person, in a controlled environment, in a specific context. Tailor made.
Maybe I should add these to my collection.
From the library of Alexandria to the imagined canals of mars to the spots on the sun, this is a beautifully written examination of the chronology contained within the bristlecone pine.
The oldest of the living bristlecones were just saplings when the pyramids were raised. The most ancient, called Methuselah, is estimated to be more than 4,800 years old; with luck, it will soon enter its sixth millennium as a living, reproducing organism. Because we conceive of time in terms of experience, a life spanning millennia can seem alien or even eternal to the human mind. It is hard to grasp what it would be like to see hundreds of generations flow out from under you in the stream of time, hard to imagine how rich and varied the mind might become if seasoned by five thousand years of experience and culture.
There is only the briefest passing mention of the sad story of Don Currey.
Are you the creator, programmer, or quality-tester of a podcasting application? This page provides a range of podcasts that exemplify a range of atypical use case from merely uncommon to exceedingly fringe. If your app can handle all these, you’re doing well.
The title is pure clickbait, and the moral panic early in this article repeats the Toyota myth, but then it settles down into a fascinating examination of abstractions in programming. On the one hand, there’s the problem of the not enough abstraction: having to write in code is such a computer-centric way of building things. On the other hand, our world is filled with dangerously abstracted systems:
When your tires are flat, you look at your tires, they are flat. When your software is broken, you look at your software, you see nothing.
So that’s a big problem.
Bret Victor, John Resig and Margaret Hamilton are featured. Doug Engelbart and J.C.R. Licklider aren’t mentioned but their spirits loom large.
Anecdotes about the development of Apple’s original Macintosh, and the people who made it.
Like a real-life Halt And Catch Fire.
A near-future tale of post-Brexit Kafkaesque isolationism in the skies.
It turned out that taking back control also meant creating an aerial deadzone. Nothing can fly in here without a Library of Alexandria’s worth of paperwork, and nothing can fly out without the same.
Five years ago, Hixie outlined the five metrics that a competitor to the web would have to score well in:
You come at the king, you best not miss.
This book—released today—looks right up my alley.
After World War I, Smith used her talents to catch gangsters and smugglers during Prohibition, then accepted a covert mission to discover and expose Nazi spy rings that were spreading like wildfire across South America, advancing ever closer to the United States. As World War II raged, Elizebeth fought a highly classified battle of wits against Hitler’s Reich, cracking multiple versions of the Enigma machine used by German spies.
I honestly think if browsers implemented this, 80% of client-rendered Single Page Apps could be done as regular good ol’-fashioned websites.
Having to reimplement navigation for a simple transition is a bit much, often leading developers to use large frameworks where they could otherwise be avoided. This proposal provides a low-level way to create transitions while maintaining regular browser navigation.
Excellent presentation slides on all things Indie Web.
It looks like this is landing in Chrome. The
navigator.connection.type property will allow us to progressively enhance based on connection type:
A web application that makes use of a service worker to cache resources during installation might have different bundles of assets that it might cache: a list of crucial assets that are cached unconditionally, and a bundle of larger, optional assets that are only cached ahead of time when
There are potential security issues around fingerprinting that are addressed in this document.
Refresh to get a new randomly generated constellation.
A lovely bit of creative JS from Emily
A good analysis, but my takeaway was that the article could equally be called Why it’s tricky to measure Client-side Rendering performance. In a nutshell, just looking at metrics can be misleading.
Pre-classified metrics are a good signal for measuring performance. At the end of the day though, they may not properly reflect your site’s performance story. Profile each possibility and give it the eye test.
And it’s always worth bearing this in mind:
Well, this is simply delightful.
Here’s a great free curriculum for teaching HTML and CSS.
There’s a lot of misinformation on the internet as to how to build a PWA and how “appy” and SPA-y one must be.
This simply isn’t true. Disappointingly, It is what most of the documentation, blog posts and public discourse seem to imply.
I’m so, so happy to see some pushback against the misinformation that progressive web apps automatically imply client-side rendered single page apps built from scratch. There’s so much value to be had in turbo-charging an existing site into a progressive web app.
But what we don’t need is yet another TLA like Alien Web Apps.
A really interesting proposal from Lea that would allow CSS authors to make full use of selectors but without increasing specificity. Great thoughts in the comments too.
This could be a one-word article: don’t.
More specifically, don’t design websites for any specific device. That way lies pain (and it is not the way of the web).
But read on for a textbook example of how not to introduce new CSS properties. Apple proposed the new syntax that they’re shipping. Now it’s getting standardised …with a different name. So basically Apple are shipping the equivalent of a vendor-prefixed property without the vendor prefix.
This forthcoming sci-fi quarterly publication looks intriguing:
Each issue contains a part of a previously untranslated novel as well as essays looking at the world through the lens of different writers.
I’m loving their typeface. It’s called Marvin. It was specially made for the magazine, and available to download and use for personal use for free.
Marvin gets its distinctive voice not only from its Art Nouveau vibe but also from its almost geometrically perfect construction. Its roundness and familiarity with Bauhaus typefaces shows its roots in geometric sans serifs at the same time.
The story of its (re)construction is fascinating. (Thanks for the heads-up, Jason.)
A great bit of web history spelunking in search of the first websites that allowed users to interact with data on a server. Applications, if you will. It’s well written, but I take issue with this:
The world wide web wasn’t supposed to be this fun. Berners-Lee imagined the internet as a place to collaborate around text, somewhere to share research data and thesis papers.
This often gets trotted out (“the web was intended for scientists sharing documents”), but it’s simply not true that Tim Berners-Lee was only thinking of his immediate use-case; he deliberately made the WWW project broad enough to allow all sorts of thitherto unforeseen uses. If he hadn’t …well, the web wouldn’t have been able to accommodate all those later developments. It’s not an accident that the web was later used for all sorts of unexpected things—that was the whole idea.
Anyway, apart from that misstep, the rest of the article is a fun piece, well worth reading.
You can use
navigator.storage.estimate() to get a (vague) idea of how much space is available on a device for your service worker caches.
The real story in this mess is not the threat that algorithms pose to Amazon shoppers, but the threat that algorithms pose to journalism. By forcing reporters to optimize every story for clicks, not giving them time to check or contextualize their reporting, and requiring them to race to publish follow-on articles on every topic, the clickbait economics of online media encourage carelessness and drama.
One more reason not to use sticky headers on mobile.
Ethan’s foreword for Alla’s brilliant book.
(I know the book is brilliant because I was reviewer throughout. Pre-order it now.)
I had the great pleasure of finally meeting Hui Jing when Mozilla invited me along to Singapore to speak at their developer roadshow. Hui Jing is speaking at each one of the events on the roadshow, and documenting the journey here.
She’s being very modest about her talk: it was superb! Entertaining and informative in equal measure, delivered with gusto. Seriously, frontend conference organisers, try to get Hui Jing to speak about CSS at your event—you won’t regret it.
You could add a bunch of proprietary CSS that Apple just pulled out of their ass.
Or you could make sure to set a background colour on your
I recommend the latter. Because reasons.
Make Twitter Great Again:
Fix Twitter is a browser extension to always show “replying to” in replies and threads along with an option to restore the old-school @-mentions.
A lot of “CSS is not real programming” arguments are a basic misunderstanding what CSS is there to achieve. If you want full control over and interface and strive for pixel perfection – don’t use it. If you want to build an interface for an inclusive and diverse web, CSS is a great tool.
Christian does a good job of describing the much-misunderstood declarative nature of CSS.
In any case, belittling people who write CSS and considering them not real developers is arrogant nonsense.
Ooh, this is a tricky scenario. If you decide to redirect all URLs (from, say, a
www subdomain to no subdomain) and you have a service worker running, you’re going to have a bad time. But there’s a solution here to get the service worker to remove itself.
The server-side specifics are for NGINX but this is also doable with Apache.
Well, I guess it’s time to change all my locally-hosted sites from
.dev domains to
.test. Thanks, Google.
I had the honour of being invited along to kick off the first leg of Mozilla’s Developer Roadshow in Singapore.
Two of my favourite things together at last: pattern libraries and service workers. Infusion is a tool for generating pattern libraries that also work offline.
Thinking about it, it makes total sense that a pattern library should be a progressive web app.
There are some great service worker optimisation tips in these slides.
A really nice example of progressive enhancement: creating a layout with
inline-block, then flexbox, then Grid.
There’s going to be a CodePen meetup in Brighton as part of the Brighton Digital Festival. Should be fun! See you there.
The reality is transpiling and including polyfills is quickly becoming the new norm. What’s unfortunate is this means billions of users are getting trillions of bytes sent over the wire unnecessarily to browsers that would have been perfectly capable of running the untranspiled code natively.
script type="module" and put your transpiled fallback in
Most developers think of
<script type="module">as way to load ES modules (and of course this is true), but
In my experience, “full-stack developers” always translates to “programmers who can do frontend code because they have to and it’s ‘easy’.” It’s never the other way around. The term “full-stack developer” implies that a developer is equally adept at both frontend code and backend code, but I’ve never in my personal experience witnessed anyone who truly fits that description.
When every new website on the internet has perfect, semantic, accessible HTML and exceptionally executed, accessible CSS that works on every device and browser, then you can tell me that these languages are not valuable on their own. Until then we need to stop devaluing CSS and HTML.
Here’s the closing keynote I gave at Frontend Conference in Zurich a couple of weeks back.
Perhaps the most permanent action that any human being has accomplished in the history of our species is when one of our ancestors placed this cave bear skull on a rock, where still it sits, tens of thousands of years later.
An astonishing dose of perspective delivered via a lovely bit of hypertext by Matt.
There are some delightfully dark touches to this Cory Doctorow coming-of-age near-future short story of high school students seizing the means of production.
Some great ideas here about using metaphors when explaining technical topics.
I really like these four guidelines for good metaphors:
Rob has redesigned his site and it’s looking lovely. Here’s the first part of a three-part series on the rationale behind the relaunch:
I don’t pretend everything I do or say online is worthy of preservation. But while I’m still breathing, I want to be the one who decides what gets preserved and what doesn’t. And I want it all to be available in one place. Owning and operating my own site is the only way.
I like Chris’s list of criteria for the nebulous role of senior developer:
- A senior front end developer has experience.
- A senior front-end developer has a track record of good judgment.
- A senior developer has positive impact beyond the code.
- A senior developer is helpful, not all-knowing.
- A senior front-end developer is a force multiplier.
An organisation has formed here in the UK as a response to the increasing threats to the web:
We are called to come together in response to growing political and social uncertainty, direct threats to the profession, and a lack of vocal and proactive representation to organise as a representative, independent, and politically responsible industry body.
The inaugural AGM is happening in Edinburgh tomorrow. Get along to that if you can. Otherwise, there’s always Slack.
I like their manifesto; let’s put it to the test-o.
This blog post saved my ass—the Huffduffer server was b0rked and after much Duck-Duck-Going I found the answer here.
I’m filing this away for my future self because, as per Murphy’s Law, I’m pretty sure I’ll be needing this again at some point
A Mozilla-backed project for journalists, publishers, and online communities. The Talk part of it is aiming to fix online comments. The Washington Post is going to try it out.
Along the lines of John’s recent post, Henrik makes the business case for progressive web apps.
He also points out how they can be much better than native apps for controlling hardware.
They can be up and running in a fraction of the time whether or not they were already “installed” and unlike “apps” can be saved as an app on the device at the user’s discretion!
Essentially they’re really great for creating “ad hoc” experiences that can be “cold started” on a whim nearly as fast as if it were already installed.
From Designing Products with Sound by Amber Case and Aaron Day:
Sound eases cognitive burdens.
Sound is also a powerful brand differentiator.
Sound is emotional.
Finally, sound impacts productivity.
Not every product needs sound design.
Most technologies are overestimated in the short term. They are the shiny new thing. Artificial Intelligence has the distinction of having been the shiny new thing and being overestimated again and again, in the 1960’s, in the 1980’s, and I believe again now.
Rodney Brooks is not bullish on the current “marketing” of Artificial Intelligence. Riffing on Arthur C. Clarke’s third law, he points out that AI—as currently described—is indistinguishable from magic in all the wrong ways.
This is a problem we all have with imagined future technology. If it is far enough away from the technology we have and understand today, then we do not know its limitations. It becomes indistinguishable from magic.
Watch out for arguments about future technology which is magical. It can never be refuted. It is a faith-based argument, not a scientific argument.
Here’s a snowclone I can get behind: X is too important to be left to men.
I am convinced that it is not the girls that must change, but rather society’s view of “computing” and the whole culture of the computing industry.
With the advent of artificial intelligence, this is about to get really serious. There are worrying signs that the world of big data and machine learning is even more dominated by men than computing in general. This means that the people writing the algorithms for software that will control many automated aspects of our daily lives in the future are mainly young, white men.
The perils of self-translation.
I’m often baffled by the number of people who seem to think that you can translate from one language to another simply by pulling the words of one language from a dictionary and plugging them into the syntax of the other. It just doesn’t work that way, friends.
Read to the end for a wonderfully delicious twist in the tale.
John makes the point that unless you’re one of the big, big players, your native app is really going to struggle to find an audience. But that’s okay—a progressive web app might be exactly what you need.
In short, using native apps as a path to reaching a large number of potential customers and benefitting from crucial network effects is close to impossible.
But, in the meantime, the Web has responded to the very significant impact that native apps had on user behaviour.
For me, the strength of the web has never been about how it can help big companies—it’s about how it can amplify and connect the niche players.
A deep dive into the CSS declaration that Jen told me she wants on a T-shirt.
Following on from Ruth’s piece, here are some more thoughts on sound in UI from Roman Zimarev, the creator of icon sounds.
He makes a distinction between notification sounds and interaction sounds, as well as talking about sound identity in branding.
This article about a specific security flaw in voice-activated assistants raises a bigger issue:
User-friendliness is increasingly at odds with security.
This is something I’ve been thinking about for a while. “Don’t make me think” is a great mantra for user experience, but a terrible mantra for security.
Our web browsers easily and invisibly collect cookies, allowing marketers to follow us across the web. Our phones back up our photos and contacts to the cloud, tempting any focused hacker with a complete repository of our private lives. It’s as if every tacit deal we’ve made with easy-to-use technology has come with a hidden cost: our own personal vulnerability. This new voice command exploit is just the latest in a growing list of security holes caused by design, but it is, perhaps, the best example of Silicon Valley’s widespread disregard for security in the face of the new and shiny.
If you’re interested in predicting the future of the web, just look at what high-performance native systems look like, then figure out how we can apply those ideas in the browser.
I like that Tom encourages learning from native, but not at the expense of the web (hint, hint, Google devrels encouraging slavish imitation of native apps in progressive web apps with no regard for URLs).
Our job now is figuring out how to adapt the ideas of high-performance native code while preserving what makes the web great: URLs, instant loading, and a security model that allows us to forget that we run thousands and thousands of untrusted scripts every day.
We’re getting rid of advertisers and digging back to our roots: community-based, community-built, and determinedly non-commercial.
A List Apart has given me so, so much over the years that becoming a supporter is quite literally the least I can do.
This is the way the web ends
This is the way the web ends
This is the way the web ends
Not with a bang but a duopoly.
These are ingenious. I think the chain fork is my favourite, but the uncomfortable broom is pretty great too.
Then there’s the inflatable doorknob.
Time-shifted photographs of my hometown in Ireland.
This looks like a really nice writing interface. It currently exports to Medium, Tumblr, and Twitter …but it would be really nice if it could post to a micropub endpoint.
I love John’s long-zoom look at web development. Step back far enough and you can start to see the cycles repeating.
Underneath all of these patterns and practices and frameworks and libraries are core technologies. And underlying principles.
These are foundations – technological, and of practice – that we ignore, overlook, or flaunt at our peril.
An interesting idea from Ruth—using subtle sounds to augment inline form validation.
There aren’t any extremely established best practices for this stuff. The best we can do is make tasteful choices and do user research. Which is to say, the examples in this post are ideas, not gospel.
I’ve gotten a little tired of showing up to a Medium-powered site on a non-medium.com domain and getting badgered to Sign Up! or Get Updates! when I’m already a Medium user.
A Chrome extension to Make Medium Readable Again by:
- Keeping the top navigation bar from sticking around
- Hiding the bottom “Get Updates” bar completely
- (Optionally) hiding the clap / share bar
- (Optionally) loading all post images up front, instead of lazy loading as you scroll
Shame there isn’t a mobile version to get rid of the insulting install-our-app permabutton.
Perhaps the blockchain is the technology equivalent of the panda. You hear an awful lot about it without ever being clear what exactly it’s for and why we should care if it disappears.
Russell Davies on the megafauna of technology.
The other big hitters are probably drones, robots, AI and self-driving cars. It used to be smartphones and 3D printing, but they’ve become too ubiquitous and banal. You can’t be charismatic if you’re everywhere.
I’ve had a few conversations with members of the Google AMP team, and I do believe they care about making the web better. But given how AMP pages are privileged in Google’s search results, the net effect of the team’s hard, earnest work comes across as a corporate-backed attempt to rewrite HTML in Google’s image. Now, I don’t know if these new permutations of AMP will gain traction among publishers. But I do know that no single company should be able to exert this much influence over the direction of the web.
Of course, information existed before Shannon, just as objects had inertia before Newton. But before Shannon, there was precious little sense of information as an idea, a measurable quantity, an object fitted out for hard science. Before Shannon, information was a telegram, a photograph, a paragraph, a song. After Shannon, information was entirely abstracted into bits. The sender no longer mattered, the intent no longer mattered, the medium no longer mattered, not even the meaning mattered: A phone conversation, a snatch of Morse telegraphy, a page from a detective novel were all brought under a common code. Just as geometers subjected a circle in the sand and the disk of the sun to the same laws, and as physicists subjected the sway of a pendulum and the orbits of the planets to the same laws, Claude Shannon made our world possible by getting at the essence of information.
Here’s Amber’s great talk from the great Material conference last month in Iceland.
Amber Wilson worked in the field of Psychology for many years and is now a budding Web developer at a design agency in Brighton. New to Web development, she is continually eager to improve her skills.
(The silhouettes of Jessica, me, and Joschi in the front row make it look like Mystery Science Theater 3000.)
George Lucas, Ted Chiang, Greg Egan, Stanley Kubrick, Tom Stoppard, William Shakespeare, and Ridley Scott are all part of Matt’s magnificent theory that the play is the thing.
Rosencrantz and Guildenstern are replicants.
Characters look like people, except they exist for only the duration of a movie — only while they are necessary. They come with backstory and memories fully established but never experienced, partly fabricated for the job and partly drawn from real people known by the screenwriter. At the end, they vanish, like tears in rain.
Triple the hand-wringing in this combined review of three books:
What this means is that even more than it is in the advertising business, Facebook is in the surveillance business. Facebook, in fact, is the biggest surveillance-based enterprise in the history of mankind. It knows far, far more about you than the most intrusive government has ever known about its citizens. It’s amazing that people haven’t really understood this about the company. I’ve spent time thinking about Facebook, and the thing I keep coming back to is that its users don’t realise what it is the company does. What Facebook does is watch you, and then use what it knows about you and your behaviour to sell ads. I’m not sure there has ever been a more complete disconnect between what a company says it does – ‘connect’, ‘build communities’ – and the commercial reality.
An interesting approach to digital preservation: storing digital video in the DNA of bacteria.
Manifest files can have categories now. Time to update those JSON files.
A fantastic piece by Aaron who—once again—articulates what I’ve been thinking:
Your site—every site—should be a PWA.
He clearly explains the building blocks of progressive web apps—HTTPS, a manifest file, and a service worker—before describing different scenarios for different kinds of sites:
Progressive Web Apps may seem overly technical or beyond the needs of your project, but they’re really not. They’re just a shorthand for quality web experiences—experiences that can absolutely make a difference in our users’ lives.
This article makes a good point about client-rendered pages:
Asynchronously loaded page elements shift click targets, resulting in a usability nightmare.
…but this has nothing, absolutely nothing to do with progressive web apps.
More fuel for the fire of evidence that far too many people think that progressive web apps and single page apps are one and the same.
I’m doubling down on owning my own content, so I’m excited to have a less-crusty home for it all.
It’s fun! In a world where even sites that aren’t Medium dot com are looking like Medium dot com, I’m excited to try something different.