| 5th | 10th | 15th | 20th | 25th | 30th | ||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 12am | |||||||||||||||||||||||||||||||
| 4am | |||||||||||||||||||||||||||||||
| 8am | |||||||||||||||||||||||||||||||
| 12pm | |||||||||||||||||||||||||||||||
| 4pm | |||||||||||||||||||||||||||||||
| 8pm |
Seems like ages since I’ve seen Saqib. He’s been working on something very nifty indeed:
…Seeing AI, a research project that helps people who are visually impaired or blind to better understand who and what is around them. The app is built using intelligence APIs from Microsoft Cognitive Services…
You know that front-end pattern libraries have hit the mainstream when the Nielsen Norman Group get in on the action.
As ever, I’m not sure their sweeping generalisations can be applied to every project, but their checklist approach makes for a good starting point.
Not to sound all “Get off my lawn, kids!” but I think there might be something to this. When you’re requiring hundreds of dependencies to do little tasks that you should be able to code yourself, something’s not right.
But, for the love of all that is programming, write your own bloody basic programming functions. Taking on dependencies for these one-liners is just nuts.
That said, you don’t want reinvent hundreds of wheels either (as most of the comments point out). There’s a balance to be had.
Some good thoughts in here about writing scalable CSS …although the finger-pointing at sites (that are shipping at scale) reminds me a bit of that quote by copywriter Paul Butterworth: “Where the heck were you when the page was blank?”
This could pair up nicely with the most dangerous writing app.
Remember mashups? Mashups were cool.
If you fancy partying like it’s nineteen ninety web 2.0, here’s a growing list of public APIs that return JSON.
Vitaly calls them dirty tricks but this is a handy collection of front-end development techniques. They’re not really dirty …just slightly soiled.
Everything you never wanted to know about conveying elevation information on maps, delivered in Peter’s always-entertaining style and illustrated with interactive examples.
Markdown gets its own media type: text/markdown.
The street finds its own uses for colonial internet practices:
Because the data is completely free, Angolans are hiding large files in Wikipedia articles on the Portuguese Wikipedia site (Angola is a former Portuguese colony)—sometimes concealing movies in JPEG or PDF files. They’re then using a Facebook group to direct people to those files, creating a robust, completely free file sharing network.
Well, we might as well bin the Clearleft website rebranding project. Somebody has beaten us to it.
Minimum viable Service Worker tutorial. Copy, paste, and don’t ask questions.
Also:
Salter Cane play a dark, melancholic folk-rock, full of doom and darkness, murder and mayhem.
If that sounds like your idea of a fun time, come along to the Latest Music Bar in Brighton next Thursday.
The act of linking to this story is making it true.
“I don’t think there’s any law against this,” I said. How could there be a law against something that’s not possible?
I’m so happy that Ember is moving to a server-side rendering model. Not only that, but as Tom points out here, it’s crucial that the server-side rendering is the default and the client-side functionality than becomes an enhancement.
Well, I’m convinced.
An immortal deer wanders the world of Grand Theft Auto for all eternity. It’s remarkably calm and relaxing.
This article on airships has my new favourite sentence in the English language:
During the First World War, Germany and its allies ceased production of sausages so that there would be enough cow guts to make zeppelins from which to bomb England.
Of course it was Simon who pointed me to this. Of course.
On universal design: “We’re reframing disability as an opportunity.”
One day someone will write a history of the Internet, in which that great series of tubes will emerge as one long chain of inventions not just geared to helping people connect in more ways, but rather, to help more and more types of people communicate just as nimbly as anyone else.
If you have a manifest.json file for your site, here’s a handy validator.
I love good typography but I have to agree with the sentiment expressed here.
System fonts can be beautiful. Webfonts are not a requirement for great typography.
Remy sums up the psychological end goal of progressive apps (HTTPS + Service Worker + manifest JSON file) prompting an add to home screen action:
This high bar of entry will create a new mental model for our users.
If I add this app to my home screen, it will work when I open it.
It’s a shame that this charge to turbo-boast the perception of the web on mobile is a bit one-sided: I would love to see Apple follow Google’s lead here. But if Android succeed in their goal, then I think iOS will have to follow suit just to compete.
I don’t care about Opera Mini (I’m not its Product Manager). In the same way, I don’t care about walking sticks, wheelchairs, mobility scooters or guide dogs. But I care deeply about people who use enabling technologies — and Opera Mini is an enabling technology. It allows people on feature phones, low-powered smartphones, people in low-bandwidth areas, people with very small data plans, people who are roaming (you?) connect to the web.
Well, here’s an art project with a difference: it comes with a web site built by Josh, a story written by Piers Bizony, and a book made by Emily.
Just recently on a Clearleft project, some of us were discussing whether there was a reason not to use rems instead of ems for media queries. Apart from one older browser implementation difference, we couldn’t come up with much.
Some in-depth research here supports the use of em values for media queries. Very good to know.
Some solid sensible advice on optimising performance.
If you think people using ad blockers are just anti-ad or want to freeload on publishers, you’re completely missing the point. The online advertising industry has been abusing users for 20 years now, and we’re sick of it.
Blogging through Venn diagrams.
I hadn’t heard of the save-data header. This article shows how you can use a Service Worker to sniff for it and serve up smaller assets, but I’m guessing you could also sniff for it from the server.
Paul is digging deep into flexbox and finding it particularly useful for internationalisation …but there are still some gotchas.
This looks a good (free!) event in London all about the latest browser goodies, all wrapped in the “progressive apps” buzzword.
Alas, I’ll be making my way back from Indie Web Camp Düsseldorf the day this is on.
Una’s [Instagram filters in CSS}(https://github.com/una/CSSgram) are great, but the browser support for CSS filters isn’t as good as, say, the browser support for canvas. Here’s a clever bit of scripting to polyfill filters using canvas.
Here’s a bit of convergent evolution: Hugo’s script is similar to what I wrote about recently.
He also raises a point that Kevin mentioned:
I would like to investigate on the
detailsandsummaryelements as they are basically a native implementation for content toggles.
For some reason details never got much browser love, even though it’s clearly paving a well-trodden cowpath.
The thesis: any film is improved by playing Walk Of Life by Dire Straits over the ending.
The proof: this website.
(this is absorbing and brilliant)
Enduring CSS (not int the sense of “put up with” but in the sense of “long-lasting”) is a new book by Ben Frain all about writing and maintaining modular reusable CSS.
You can read the whole thing for free online or buy an eBook.
Jon outlines his technique for keeping “the 30,000 foot” view when patterns are coalescing during a project.
See also: Andy P.’s experience of working with Jon this way.
An a revelation that comes as a shock to absolutely no one, the JavaScript injected by ad networks can be used as a vector for attack.
This industry-wide problem serves as a great example of how 3rd-party components can compromise the security of an otherwise secure site.
One more reason to install an ad blocker.
A lovely outlook on designing with progressive enhancement:
There will always be users coming from places you didn’t expect, using devices you didn’t test for.
Come for the videos of EnhanceConf. Stay for the skateboarding beagle.
I’m am soooo there!
Iceland, July 22nd: a conference about the material of the web …right up my alley.
You can get a ticket by backing the project on Kickstarter. Be sure to check out all the options.
See you in Reykjavík!
It’s in German, but this presentation by Joschi is a great introduction to Indie Web ideas and building blocks.
A film about Tim Berners-Lee and the World Wide Web. Details are scarce right now but watch this space.
Making web apps? Care about SEO? Here’s Google’s advice:
Use feature detection & progressive enhancement techniques to make your content available to all users.
This is really, really clever. You can’t use generated content (:before and :after) on replaced content. The img element is replaced content …but only when the image actually loads. So if the image fails to load, you can apply specific fallback styles (using :before and :after).
Michael Bierut on that logo …and graphic design in general.
Graphic designers, whether we admit it or not, are trained for the short term. Most of the things we design have to discharge their function immediately, whether it’s a design for a book or a poster, a website or an infographic, a sign system, or a business card. In school critiques, architecture and industrial design students produce models. Graphic designers produce finished prototypes. As a result, the idea that we create things that are unfinished, that can only accrue value over time, is foreign to us. It’s so easy for us to visualize the future, and so hard to admit that we really can’t. That’s what we face every time we unveil a new logo.
In many ways, moving to vanilla JavaScript highlights the ugliness of working with the DOM directly, and the shortcomings of native Element object — shortcomings which Resig solved so incredibly eloquently with the jQuery API.
Having said that, the lessons I’ve learned over the last year have made me a better developer, and the tools built in the process have opened my eyes and given me enough confidence and understanding of vanilla JavaScript that the only scenario where I would personally consider using jQuery again would be a project needing IE8 support.
In this extract from his forthcoming book, Richard looks at when to use ems, when to use rems …and when to use ch (no, me neither).
A good side-by-side comparison of loading techniques, with some clear advice. But pay attention to this note:
While the debate over “Load more” versus infinite scrolling versus pagination has been debated for years, the product loading method shouldn’t be the first thing that most e-commerce vendors spend their development resources on.
The Buckminster Fuller Institute has put together this collection of resources which explain the ideas behind “comprehensive anticipatory design science.”
Seems especially relevant in light of the first issue of the Journal of Design and Science from MIT.
The legacy of the Black Mountain College lives on.
When I’ve been helping Codebar students on their personal projects, everything goes great until some kind of server-side processing is needed. Nine times out of ten, that server-side processing simply doing something with the contents of a contact form. This looks like it could be a useful service to plug into little projects like that.
Here, have some colour palettes.
If Flexbox Froggy was too easy for you, take it to the next level with this tower defence game.
Accept that sometimes, or for some people, your JavaScript will not work. Put some thought into what that means. Err on the side of basing your work on existing HTML mechanisms whenever you can.
If you’re going to override or reimplement something that already exists, do some research on what the existing thing does first. You cannot possibly craft a good replacement without understanding the original.
Remember that for all the power the web affords you, the control is still ultimately in end user’s hands.
This is harsh …but surprisingly effective. Choose a time period—5 minutes, 10, 20—then start writing. If you stop for too long, you lose everything you’ve written.
It’s kinda stressful but it really works.
If you’re intrigued by the kind of design sprints I wrote about recently, here’s a handy collection of resources to get you going.
- Pre-sprint
- Understand: Gather existing knowledge, expose assumptions and unknowns
- Diverge: Illuminating all possible paths
- Converge: Choose the right path
- Prototype: Quickly build the right path
- Test & Learn: Test the right path
An attempt to convey the experience of (one kind of) dyslexia through code.
The full text of Adam’s excellent talk at EnhanceConf.
The videos from EnhanceConf are started to go up already. Stefan’s talk really struck me—all the talks were great but this one had the most unexpected insight for me. It really clarifies a lot of ideas that I’ve been trying to articulate, but which Stefan crystalises by taking the long-zoom view.
This is truly a book apart.
A brief history of lunar sci-fi.
No matter how much we want the science fiction dream to come true – and personally I would love it – the reality is that a lunar colony is very unlikely to ever be financially viable. It would be no surprise if we saw more expeditions to the moon, but all those wonderful visions of the high frontier recreated in space are more likely to apply to destinations with a better long-term future, like Mars, rather than the moon.
Fear and loathing in Houston.
- Humanity will never colonize Mars, never build moon bases, never rearrange the asteroids, never build a sphere around the sun.
- There will never be faster-than-light travel. We will not roam across the galaxy. We will not escape our star.
- Life is probably an entirely unexceptional phenomenon; the universe probably teems with it. We will never make contact. We will never fuck green-skinned alien babes.
- The human race will live and die on this rock, and after we are gone something else will take our place. Maybe it already has, without our even noticing.
- All this is good. This is a good thing.
A wonderful Zooniverse-like project from the New York Public Library:
Help unlock New York City’s past by identifying buildings and other details on beautiful old maps.
Do you live in Stockholm? If so, you’ve got a device lab you can visit.
So feel free to drop by and test your responsive/mobile designs.
Something to remember the next time someone describes an experience as “seamless” and means it to be positive:
This is the Amazon move: absolute obfuscation of labor and logistics behind a friendly buy button. The experience for a Sprig customer is super convenient, almost magical; the experience for a chef or courier…? We don’t know. We don’t get to know. We’re just here to press the button.
I feel bad, truly, for Amazon and Sprig and their many peers—SpoonRocket, Postmates, Munchery, and the rest. They build these complicated systems and then they have to hide them, because the way they treat humans is at best mildly depressing and at worst burn-it-down dystopian.
What would it be like if you didn’t have to hide the system?
A new publication from MIT. It deliberately avoids the jargon that’s often part and parcel of peer-reviewed papers, and all of the articles are published under a Creative Commons attribution licence.
The first issue is dedicated to Marvin Minsky and features these superb articles, all of which are independently excellent but together form an even greater whole…
Design and Science by Joi Ito:
When the cybernetics movement began, the focus of science and engineering was on things like guiding a ballistic missile or controlling the temperature in an office. These problems were squarely in the man-made domain and were simple enough to apply the traditional divide-and-conquer method of scientific inquiry.
Science and engineering today, however, is focused on things like synthetic biology or artificial intelligence, where the problems are massively complex. These problems exceed our ability to stay within the domain of the artificial, and make it nearly impossible for us to divide them into existing disciplines.
Age of Entanglement by Neri Oxman:
This essay proposes a map for four domains of creative exploration—Science, Engineering, Design and Art—in an attempt to represent the antidisciplinary hypothesis: that knowledge can no longer be ascribed to, or produced within, disciplinary boundaries, but is entirely entangled.
Design as Participation by Kevin Slavin:
The designers of complex adaptive systems are not strictly designing systems themselves. They are hinting those systems towards anticipated outcomes, from an array of existing interrelated systems. These are designers that do not understand themselves to be in the center of the system. Rather, they understand themselves to be participants, shaping the systems that interact with other forces, ideas, events and other designers. This essay is an exploration of what it means to participate.
The Enlightenment is Dead, Long Live the Entanglement by Danny Hillis:
As our technological and institutional creations have become more complex, our relationship to them has changed. We now relate to them as we once related to nature. Instead of being masters of our creations, we have learned to bargain with them, cajoling and guiding them in the general direction of our goals. We have built our own jungle, and it has a life of its own.
If you’re thinking about syndicating to Medium from your own site, this is probably the simplest way to do it—let If This, Then That take care of faffing about with the API.
A very lightweight script for toggling the appearance of elements in an accessible way.
There is one truism that has been constant throughout my career on the web, and it’s this: naming things is hard.
Trent talks about the strategies out there for naming things. He makes specific mention of Atomic Design, which as Brad is always at pains to point out, is just one way of naming things: atoms, molecules, organisms, etc.
In some situations, having that pre-made vocabulary is perfect. In other situations, I’ve seen it cause all sorts of problems. It all depends on the project and the people.
Personally, I like the vocabulary to emerge from the domain knowledge of the people on the project. Building a newspaper website? Use journalism-related terms. Making a website about bicycles? Use bike-related terms.
Most importantly, make the naming process a collaborative exercise, as outlined by Alla and Charlotte.
Everything you never knew you wanted to know about the Millennium Falcon, wrapped up in one unsurprisingly insanely detailed essay from Michael.
On the same day—and in the same city—as that Mobile @Scale event that Facebook are hosting, Google are hosting their own free event all about Progressive Web Apps, the buzziest of buzzwords.
Shame I can’t be in two places at once.
I’m speaking at this event at Facebook in London on St. Patrick’s Day. I’ll be there representing the web.
It’s free to attend, but you need to request an invitation.