| 5th | 10th | 15th | 20th | 25th | 30th | ||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 12am | |||||||||||||||||||||||||||||||
| 4am | |||||||||||||||||||||||||||||||
| 8am | |||||||||||||||||||||||||||||||
| 12pm | |||||||||||||||||||||||||||||||
| 4pm | |||||||||||||||||||||||||||||||
| 8pm |
Adam Silver has written a free online book all about writing maintainable CSS. It dives straight into naming things and takes it from there.
MaintainableCSS is an approach to writing modular, scalable and of course, maintainable CSS.
If you have to use a carousel, it doesn’t have to be complicated. Chris runs through some of the options out there. It turns out you can get surprisingly far with CSS alone.
Lara’s new book really is excellent. I was lucky enough to get an early preview and here’s what I said:
Giving a talk in public can be a frightening prospect but with Lara Hogan at your side, there’s no limit to what you can accomplish. This book is your shield and sword. Speak, friend, and conquer!
It’s still many years away from being a viable storage option, but here’s the latest on using DNA to back up our collective data.
Magnetic tape may survive a few decades, and DVDs even longer, but they are by no means immortal. Data stored in DNA, provided it’s kept cold and dry, could last for thousands of years.
When it seems like all our online activity is being tracked by Google, Facebook, and co., it comforts me to think of all the untracked usage out there, from shared (or fake) Facebook accounts to the good ol’ sneakernet:
Packets of information can be distributed via SMS and mobile 3G but also pieces of paper, USB sticks and Bluetooth.
Connectivity isn’t binary. Long live the papernet!
Digital seems like it’s forever because it’s infinitely reproducible, but someone has to think to make that canonical copy or it’s gone-gone.
In this five-year old eulogy for a BBS, Alexis Madrigal ponders the deaths of social networks. Friendster, MySpace, Vine …plus ça change, plus c’est la même chose.
We find that the detected signals have exactly the shape of an ETI signal predicted in the previous publication and are therefore in agreement with this hypothesis.
Jamie Zawinski tells the story of how John Carpenter’s They Live led to Shepard Fairey’s Obey Giant which led to Mozilla’s logo.
So that was the time that I somehow convinced a multi-billion dollar corporation to give away the source code to their flagship product and re-brand it using propaganda art by the world’s most notorious graffiti artist.
I haven’t made a website with React, but if and when I do, this Node.js framework looks like it aligns nicely with my priorities. It’s all about the universal JavaScript (the artist formerly known as isomorphic JavaScript).
Excellent guidelines from GDS on providing services that work well on mobile. The watchwords are:
Native and hybrid apps are rarely justified.
This use-case for blend modes is making me thirsty.
Also: look who’s blogging again!
Here’s an interesting metric for measuring performance: take the overall page weight of a URL and divide it by the file size of the screenshot of that URL.
This is an interesting API that just landed in the newest version of Chrome behind a token—it gives you programmatic access to the OS’s share functionality via a (secure) website.
Paul finishes this rundown with the interesting bit:
Future work will also level the playing field for web apps, by allowing them to register to be a “share receiver”, enabling web-to-app sharing, app-to-web sharing and web-to-web sharing.
Maybe I’ll get to see a native “huffduff this” option in my lifetime.
A collection of assumptions programmers often make.
“Dates and Times” is tied with “Human Identity” for the most links.
This is a very thoughtful analysis of different approaches to writing maintainable CSS, which—let’s face it—is the hard bit.
I often joke that I don’t want to hire a code ninja. Ninjas come in the middle of the night and leave a bloody mess.
I want a code janitor. Someone who walks the hallways of code, cleaning up pieces, dusting up neglected parts, shinning up others, tossing unnecessary bits. I prefer this gentler, more accurate analogy. This is the person you want on your team. This is a person you want in your code reviews.
Also, can I just say how refreshing it is to read an article that doesn’t treat the cascade like a disease to be wiped out? This article even goes so far as to suggest that the cascade might actually be a feature—shock! horror!
The cascade can help, if you understand and organize it. This is the same as any sophisticated software design. You can look at what you’re building and make responsible decisions on your build and design. You decide what can be at a top-level and needs to be inherited by other, smaller, pieces.
There’s a lot of really good stuff in here to mull over.
My hope for this article is to encourage developers to think ahead. We’re all in this together, and the best we can do is learn from one another.
Dave’s Kickstarter project looks like it could be very handy on Fridays a beer o’clock in the Clearleft office.
This uses generated content in CSS to make the aria-label attributes visible on small screens—clever!
Mandy is fighting the good fight for the open web from within Vox Media. Her publishing tools have been built with a secret weapon…
This practice — which I refer to unoriginally as progressively enhanced storytelling — also has the added benefit of helping us make our content more accessible to more kinds of users, especially those with disabilities.
A nicely-documented styleguide from Atlassian. It’s not a component library, though—there’s no code here.
John is rightly puzzled by AMP:
Can someone explain to me why a website would publish AMP versions of their articles?
Sadly, there is an answer to that question: if a website is so bloated and horrible to use that people won’t stick around to read an article, then AMP starts to look like a good option.
But I don’t have an answer for John’s other question:
Why would any website turn their entire mobile audience — a majority share of their total audience, for many sites today — over to Google?
A selection from an ongoing photography project—seven years and counting—leading up to the launch of the Orion project.
The fascinating history of India’s space program is the jumping-off point for a comparison of differing cultural attitudes to space exploration in Anab’s transcript of her Webstock talk, published on Ev’s blog.
From astronauts to afronauts, from cosmonauts to vyomanauts, how can deep space exploration inspire us to create more democratic future visions?
This is an unintuitive—but very handy—use of of the flex-grow property. The use-case outlined here is fairly common.
I love the way that Charlotte is documenting her learning process. In this third part of the quantity queries + flexbox saga, it turns out that flexbox is capable of doing the magic all by itself!
Kevin writes a plea on Ev’s blog for better contrast in web typography:
When you build a site and ignore what happens afterwards — when the values entered in code are translated into brightness and contrast depending on the settings of a physical screen — you’re avoiding the experience that you create. And when you design in perfect settings, with big, contrast-rich monitors, you blind yourself to users. To arbitrarily throw away contrast based on a fashion that “looks good on my perfect screen in my perfectly lit office” is abdicating designers’ responsibilities to the very people for whom they are designing.
I spoke my brains in this podcast episode, all about web components, progressive enhancement and backwards compatibility.
This is a rather lovely idea—a disc with eight rings, each marked with the position of a planet, the arrangement of which corresponds to a specific date.
A ten-year old paper that looks at the history of the ARAPNET and internet to see how they dealt with necessary changes.
Changing a large network is very difficult. It is much easier to deploy a novel new protocol that fills a void than it is to replace an existing protocol that more or less works.
Alla looks at a few different ways of organising the contents of a pattern library, based on her experience with the FutureLearn team.
A step-by-step walkthrough of layering on enhancements to a site. The article shows the code used, but it isn’t really the code that matters—it’s the thought and planning that went into it.
Good stuff from Aaron…
Progressive enhancement embraces the idea of experience as a continuum rather than some singular ideal.
Progressive enhancement should not be viewed as a challenge to JavaScript any more than concepts like namespacing, test driven development, or file concatenation & minification are; it’s just another way to improve your code.
Progressive enhancement’s focus on providing a baseline experience that makes no assumptions about browser features will provide a robust foundation for any project.
Equal parts clever and scary. By using autocomplete in HTML and some offscreen positioning in CSS, it’s possible to extract some unexpected personal information.
I expect browsers will be closing these holes pretty quickly.
Listen to the sound of Wikipedia’s recent changes feed. Bells indicate additions and string plucks indicate subtractions. Pitch changes according to the size of the edit; the larger the edit, the deeper the note.
Clever! By exploiting the redirect pattern that most social networks use for logging in, and assuming that site’s favicon isn’t stored in a CDN, it’s possible to figure out whether someone is logged into that site.
Jake goes into the details of what exactly is happening when a service worker is installed or replaced.
This is easily the most complex part of working with service workers, and I think I’m beginning to wrap my head around it, but the good news is that, for the most part, you don’t really need to know the ins and outs of this to get started (and dev tools are now making it easier to nuke from orbit if this begins to bite).
This is so great! Charlotte takes two previous ideas she’s been writing about (quantity queries and flexbox) and puts them together in a new way.
It took me a while to get around what the nth-child selectors are doing here, but Charlotte does such great job of explaining the CSS that even I could understand it.
Riffing on an offhand comment I made about progressive enhancement being a form of “technical credit”, Chris dives deep into what exactly that means. There’s some really great thinking here.
With such a wide array of both expected and unexpected properties of the current technological revolution, building our systems in such a way to both be resilient to potential failures and benefit from unanticipated events surely is a no-brainer.
The dreadful headline makes this sound like another pearl-clutching moral panic, but there’s some good stuff in this somewhat hagiographic profile.
Harris is developing a code of conduct—the Hippocratic oath for software designers—and a playbook of best practices that can guide start-ups and corporations toward products that “treat people with respect.” Having companies rethink the metrics by which they measure success would be a start.
A good overview of ideas and techniques for structuring CSS and naming classes.
Spoiler: the answer is “Yes!”.
It’s a way of building web applications that’s very similar to making a sandwich.
This talk is itself a tasty sandwich of good stuff.
This is a really, really nice tool for creating HTML, CSS, and JavaScript without needing a separate text editor. And then you can publish the results to a URL.
It’s a bit like CodePen but it shows the whole HTML document, which makes it particularly useful for teaching front-end development to beginners (ideal for Codebar!).
CodePen for snippets; Thimble for pages.
This is a truly fantastic example of progressive enhancement applied to a form.
What I love about this is that it shows how progressive enhancement isn’t a binary on/off choice: there are layers and layers of enhancements here, from simple inline validation all the way to service workers and background sync, with many options in between.
Superb!
Una has put together a nice collection of patterns that use CSS for interactions. JavaScript would certainly be more suitable for many of these, but they still provide some great ideas for robust fallbacks.
Harry demonstrates a really good use for CSS custom properties—allowing users to theme an interface.
This is such a great perspective on what it’s like to build for the web over the long term. The web will always be a little bit broken, and that’s okay—we can plan for that.
The Web has history. If you build with web technology it will stick around. We try not to break the web even if it means the mistakes and bad decisions we have made in the past (and will make in the future) get set in stone.
A somewhat contentious title but there’s some really smart thinking here about choosing and evaluating technology.
The slidedeck version is even clearer.
A browser for Android that specifically touts privacy and security as its key features.
Here’s an epic brain dump by Vitaly on the challenges of putting together a pattern library and then maintaining it.
Sacrificing consistency for usability is fine. A slightly open-ended, inconsistent but heavily used pattern library is better than a perfectly consistent pattern library that is never used.
I agree with Chris’s conclusion here, but for a different reason. Here’s a shocking thought: what if the cascade is a feature not a bug?
gasp!
(no really; imagine if programmers stopped trying to bend CSS to their immutable will, and instead embraced its declarative power)
We should be asking why we need a framework or a tool before just dropping it in. It’s not to say that you shouldn’t learn new things. YOU ABSOLUTELY SHOULD BE CONTINUOUSLY LEARNING! But you should ensure that you have a solid base to work from.
A fascinating look at an attempt to redefine the taxonomy of online porn.
Porn is part of the ecosystem that tells us what sex and sexuality are. Porn terms are, to use Foucault’s language, part of a network of technologies creating truths about our sexuality.
Reminds of the heady days of 2005, when it was all about tagging and folksonomies.
The project, at its most ambitious, seeks to create a new feedback loop of porn watched and made, unmoored from the vagaries of old, bad, lazy categories.
Yes! Yes! Yes! Val nails the essence of progressive enhancement:
Never feel like it’s a waste to dedicate time to the enhancements; to put real thought and effort into your animations and what they’ll contribute to the experience. Progressive enhancement is all about freeing up your time to make the enhancements great once you’ve got that basic core functionality covered. That’s the path to making new and wonderful things on the web while also being responsible. It’s quite literally a way to get the best of both worlds.
Hey, it’s Jamie! (and Lion, of course)
The 1978 short film Farewell, etaoin shrdlu documents the changeover from linotype to digital typesetting at The New York Times.
An evenhanded treatment of the unremitting march of technological progress, Weiss’s film about an outmoded craft is stylistically vintage yet also immediate in its investigation of modernity.
I’m about to start reading Ursula M. Franklin’s The Real World of Technology based on Mandy’s recommendation. The audio files from original series of lectures on which the book is based are still available here, but alas not in any huffduffable form.
Finally! Apple are being sued for refusing to allow any non-Webkit browsers to be installed on iOS.
I’m not usually in favour of legal action but in this case, there doesn’t seem to be any other recourse.
We would be delighted at Nexedi to create a Web browser for iOS with better HTML5 support based on a recent version of Blink library for example. But as soon as we would publish it, it would be banned from Apple’s AppStore. Many developers have experienced this situation already. Many companies are being hurt by this situation. Some companies have already begged Apple to improve HTML5 support in iOS with little significant results.
Another typically excellent talk from Maciej, this time to the Library of Congress. Digital preservation, surveillance, machine learning …it’s all in there, and it makes for grim reading, but there’s also optimism:
My dream for the web is for it to feel like big city. A place where you rub elbows with people who are not like you. Somewhere a little bit scary, a little chaotic, full of everything you can imagine and a lot of things that you can’t. A place where there’s room for chain stores, room for entertainment conglomerates, but also room for people to be themselves, to create their own spaces, and to learn from one another.
I heard nothing but good things about this talk from the Fronteers conference. There’s some great stuff in here—I really like its historical perspective.
AMP loads super, super quickly and is simply a better experience right now. So can we add enough design to make an AMP page feel like The Verge?
What a depressing conclusion! But I guess it’s easier than, y’know, actually fixing the bloated Verge website, packed with megabytes and megabytes of invasive trackers. It’s no wonder people prefer the AMP experience. Yet the idea of improving the website isn’t even raised in this whole article.
Then again, this is the same guy who tried to lay the blame for The Verge’s abysmal performance at the feet of web browsers.
Charlotte is a big fan of feature queries.
The most minimal responsive, flexible grid library you can find. In fact, here’s the whole thing:
.fukol-grid {
display: flex; /* 1 */
flex-wrap: wrap; /* 2 */
margin: -0.5em; /* 5 (edit me!) */
}
.fukol-grid > * {
flex: 1 0 5em; /* 3 (edit me!) */
margin: 0.5em; /* 4 (edit me!) */
}
PPK responds in his typically strident way to posts by Tim and Bastian. I don’t agree with everything here, but I very much agree with this:
It’s not about what works for you. It’s about what works for your users.
If a very complicated set-up with seven brand-new libraries and frameworks and a bunch of other tools satisfies you completely as a web developer but slows your sites down to a crawl for your users, you’re doing it wrong.
If serving your users’ needs requires you to use other tools than the ones you’d really like to use, you should set your personal preferences aside, even though it may make you feel less good. You have a job to do.
But it’s worth remembering this caveat too.
A good reminder from Roger on how to hide images from an SVG sprite from assistive technology (use aria-hidden) and how to expose them (use title elements within the sprite).
Benjamin’s retrospective on three years of volunteering at web conferences, some of them run by Clearleft.
Eric walks through a really nice use of CSS shapes and @supports on a page of the An Event Apart site.
It’s a nice little illustration of how we can use advanced features of CSS right now, without the usual wait for widespread support.
Krystal’s excellent annotated collection of onboarding examples.
This is a clever quick’n’dirty way of prototyping iterations on an existing site using dev tools and screenshots.
I’ve been thinking a lot lately about how we evaluate technologies (it will be the subject of my next talk). Tim is thinking along the same lines. I like his list of four questions to ask when weighing up the pros and cons of any web tool:
- Who benefits from the use of this tool and how?
- Who suffers and how?
- How does it fail?
- Does the abstraction feed the core?
Interviews with the designers who make on-screen interfaces for sci-fi films.
This is how Graham proposed to Linzi …and you can try it out for yourself.
(I must’ve got something in my eye when I got to the end of the level. Weird.)
This crystallises something I’ve been thinking about for a while. There’s a fundamental philosophical idea underpinning CSS reset or normalise boilerplate that feels at odds with the belief that it’s perfectly fine for websites to look different in different browsers and devices.
Here’s the really clever technique that Charlotte used on the speakers page for this year’s UX London site.
I remember that Jon was really impressed that she managed to implement his crazy design.
Here’s the video of the talk I gave in Berlin recently. I had a lot to squeeze into a short time slot so I just went for it, and I got bit carried away …but people seemed to like that.
