Flash is in the pan
Cameron counts the ways in which Flash was like a polyfill.
Yeah, that’s right: The Man In Blue is back!
5th | 10th | 15th | 20th | 25th | 30th | ||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
12am | |||||||||||||||||||||||||||||||
4am | |||||||||||||||||||||||||||||||
8am | |||||||||||||||||||||||||||||||
12pm | |||||||||||||||||||||||||||||||
4pm | |||||||||||||||||||||||||||||||
8pm |
Cameron counts the ways in which Flash was like a polyfill.
Yeah, that’s right: The Man In Blue is back!
Such a great primer on game theory—well worth half an hour of your time.
A starter kit of CSS that gives you some basic styles that you can tweak with custom properties.
For when you don’t need the whole boot.
Also:
Shoelace doesn’t ship with a grid system because you don’t need one. You should use the CSS Grid Layout instead.
I approve this message!
Following on from that intro-level book on JavaScript, here’s a handy list of resources for learning more advanced JavaScript.
This looks like a good introductory book to JavaScript, DOM scripting, and Ajax.
You can read it for free here or buy a DRM-free ebook.
People of Sydney, you’re in luck. Charlotte is starting up a Sydney chapter of Codebar. If you know someone there who is under-represented in the tech industry, and they’re looking to learn how to code, please tell them about this.
Some want to become full-time developers, whereas others want to learn the basics of coding to enhance their current jobs. Some want to learn programming as a hobby. Whatever the reason, we’d love to see you there!
Also, if you’re a developer in Sydney, please consider becoming a tutor at Codebar.
I promise that tutoring is not scary! We ask that you let us know which areas you feel comfortable tutoring when you sign up, so you choose what you teach. It’s absolutely okay to not know answers during sessions, but knowing how to look for them is helpful.
Oh, and if you’ve got a space in Sydney that can accommodate a class, please, please consider become a Codebar sponsor.
Another great deep dive by Heydon into a single interface pattern. This time it’s the tooltip, and its cousin, the toggletip.
There’s some great accessibility advice in here.
Rachel is maintaining this (short) list of browser bugs with CSS Grid, inspired by the excellent Flexbugs.
Grid shipped into browsers](https://gridbyexample.com/browsers) in a highly interoperable state, however there are a few issues - let’s document any we find here.
Jina invented an entirely new genre for her Patterns Day talk—autobiographical fantasy.
Hadley points to the serious security concerns with AMP:
Fundamentally, we think that it’s crucial to the web ecosystem for you to understand where content comes from and for the browser to protect you from harm. We are seriously concerned about publication strategies that undermine them.
The anchor element is designed to allow one website to refer visitors to content on another website, whilst retaining all the features of the web platform. We encourage distribution platforms to use this mechanism where appropriate. We encourage the loading of pages from original source origins, rather than re-hosted, non-canonical locations.
That last sentence there? That’s what I’m talking about!
A blog dedicated to documenting the letterforms on display in Berlin.
Riffing on Rachel’s talk at Patterns Day:
At the Patterns Day conference last month, Rachel Andrew mentioned something interesting about patterns. She said that working with reusable interface components, where each one has its own page, made her realise that those work quite well as isolated test cases. I feel this also goes for some accessibility tests: there is a number of criteria where isolation aids testing.
Hidde specifically singles out these patterns:
Given my experience publishing Resilient Web Design as a web book, I think I should take a good look at this nascent spec.
What we envision for Packaged Web Publications is similar to the goals and techniques of Progressive Web Apps: breaking the boundaries between web sites and mobile apps, an emphasis on “offline” paradigms, and so on. The time is right to broaden the scope and power of the web to include publications.
Improbable Botany is a brand-new science fiction anthology about alien plant conquests, fantastical ecosystems, benevolent dictatorships and techno-utopias.
This is the book plants don’t want you to read…
The illustrations look beautiful too.
Web developers aren’t going to shed many tears for Flash, but as Bruce rightly points out, it led the way for many standards that followed. Flash was the kick up the arse that the web needed.
He also brings up this very important question:
I’m also nervous; one of the central tenets of HTML is to be backwards-compatible and not to break the web. It would be a huge loss if millions of Flash movies become unplayable. How can we preserve this part of our digital heritage?
This is true of the extinction of any format. Perhaps this is an opportunity for us to tackle this problem head on.
A great example of progressive enhancement in action.
You can perfectly use CSS grid layout today if you don’t expect exactly the same appearance in every single browser, which isn’t possible to achieve nowadays anyway. I’m well aware that this decision isn’t always up to us developers, but I believe that our clients are willing to accept those differences if they understand the benefits (future-proof design, better accessibility and better performance). On top of that, I believe that our clients and users have — thanks to responsive design — already learned that websites don’t look the same in every device and browser.
James gives—if you’ll pardon the pun— hands-on advice on making sites that consider motor impairment:
Far from being a niche concern, visitors with some form of motor impairment likely make up a significant percentage of your users. I would encourage you to test your website or application with your less dominant hand. Is it still easy to use?
I’m looking for work. I’d prefer to work remotely with a product team and to work in the areas I love: accessibility, CSS, and HTML. But it turns out those three things are considered “easy” in the industry right now. Which is fascinating because if you talk to anyone who uses assistive technology to surf the web or who doesn’t use a mouse, or who is accessing content in a different manner, you’ll find out it isn’t so easy.
Somebody hire Susan already!
This is easily the most relatable 100 Days project I’ve seen:
I began posting a daily dialogue with the little voice in my head who tells me I’m no good.
Now you can back already-funded the Kickstarter project to get the book …and a plush demon.
The videos from UX London 2017 are available for your viewing pleasure.
Donate money to support Codebar:
By donating to codebar you are helping to promote diversity in the tech industry so that more women, LGBTQA and other underrepresented folks will be able to get started with programming and raise their skills to the next level.
Rachel’s fantastic talk from Patterns Day. There’s a lot of love for Fractal specifically, but there are also some great points about keeping a pattern library in sync with a live site, and treating individual components as reduced test-cases.
Well, well, well …following on from my post about container queries, it turns out that Eric has also been thinking about wrangling custom properties. He’s even written some code.
Here’s an intriguing project—peer-to-peer browser and hosting. I thought it might be using the InterPlanetary File System under the hood, but it’s using something called Dat instead.
It’s all very admirable, but it also feels a little bit 927.
If you thought Vitaly’s roundup of date pickers was in-depth, wait ‘till you get a load of this exhaustive examination of slider controls.
It pairs nicely with this link.
I wrote this song while my colleague Tim Berners-Lee was inventing something called “The World Wide Web” a few offices away. The song was published in 1993, when less that 100 websites existed.
The first image ever published on the web was of this band, Les Horribles Cernettes …LHC.
Language is a technology. It’s a particularly strange one that’s made of squiggles and sounds and maps of meaning, but like any other technology, it’s hackable.
Good advice on reducing unintended stress via email.
Negativity bias is a tendency for negatives to have a greater effect than positives on our emotional state.
For email this can have radical effects: positive emails seem neutral, neutral emails seem negative, and even slightly negative emails can lead to actual, measurable pain.
Even with the best of intentions we can come off distant — or just plain mean.
In which I have a conversation with a polar bear.
Very well-mannered species …I’ll miss them when they’re gone.
I think “it’s simple” shouldn’t be used to explain something.
Luke just demoed this at Codebar. It’s a lovely audio/visualisation of the solar system—a sonic orrery that you can tweak and adjust.
Hypnotic.
In July we started receiving audio signals from outside the solar system, and we’ve been studying them since.
Tweets contain sound samples on Soundcloud, data visualisations, and notes about life at the observatory …all generated by code.
ARP is a fictional radio telescope observatory, it’s a Twitter & SoundCloud bot which procedurally generates audio, data-visualisations, and the tweets (and occasionally long-exposure photography) of an astronomer/research scientist who works at ARP, who is obsessive over the audio messages, and who runs the observatory’s Twitter account.
Time for another video from Patterns Day. Here’s Sareh Heidari walking us through Grandstand, the CSS framework at the BBC.
Alex Kearney looks back on two years of owning her own data.
With a fully functional site up and running, I focused on my own needs and developed features to support how I wanted to use my site. In hind-sight, that’s probably the most indie thing I could’ve done, and how I should’ve started my indieweb adventure.
This really resonates with me.
One of the motivating features for joining the indieweb was the ability to keep and curate the content I create over time.
Terrific post!
Here’s to two more years.
A series of small suggestions that anyone can try so that they can better empathise with people who experience digital products differently.
These prompts are intended to help build empathy, not describe any one person’s experience. These prompts are not intended to tokenize the experience of the individuals experiencing these conditions.
I really like this “evil” design exercise that Jared has documented on Ev’s blog.
I broke them up into small groups of three, spreading each role across separate groups. I then asked each person to grab a sheet of paper and make their own list of ways they imagined the product’s user experience could be made worse.
Drew has been adding webmention support not just to his own site, but any site using Perch. This account of his process is a really good overview of webmentions.
The latest video from Patterns Day is up—Ellen’s superb philosophical presentation: Patterns in Language, Language in Patterns.
There’s so much packed into this one, it might take more than one viewing to take it all in.
This looks like a sensible way to detect if the user is offline, and provide appropriate feedback, like making certain links or forms inactive.
Thanks to jQuery, you probably don’t need jQuery. Just look at all these methods that started life in jQuery, that are now part of the standardised DOM API:
remove()
prepend()
before()
replaceWith()
closest()
This resonates a lot—we’ve been working on something similar at Clearleft, for very similar reasons:
We rode the folk knowledge train until it became clear that it was totally unscaleable and we struggled to effectively commute know-how to the incoming brains.
At Made By Many, they’ve sliced it into three categories: Design, Technology, and Product Management & Strategy. At Clearleft, we’re trying to create a skills matrix for each of these disciplines: UX, UI, Dev, Research, Content Strategy, and Project Management. I’m working on the Dev matrix. I’ll share it once we’ve hammered it into something presentable. In the meantime, it’s good to see exactly the same drivers are at work at Made By Many:
The levels give people a scaffold onto which they can project their personalised career path, reflecting their progression, and facilitating professional development at every stage.
Once again, we can learn from Christoper Alexander’s A Pattern Language when it comes to create digital design systems, especially this part (which reminds me of one of the panes you can view in Fractal’s default interface):
- Each pattern’s documentation is preceded with a list of other patterns that employ the upcoming pattern
- Each pattern’s documentation is followed by a list of other patterns that are required for this pattern
The slides from Calum’s presentation about progressive web apps. There are links throughout to some handy resources.
A great short talk by Tim. It’s about performance, but so much more too.
So many folks spend time on their CSS and their UX/UI but still come up with URLs that are at best, comically long, and at worst, user hostile.
This primer on progressive web apps starts by dispelling some myths:
- Your thing does not have to be an “Application” to be a PWA.
- Your thing does not have to be a Javascript-powered single page app.
- PWAs are not specifically made for Google or Android.
- PWAs are ready and safe to use today.
Then it describes the three-step programme for turning your thing into a progressive web app:
- The Manifest.
- Go HTTPS.
- The Service Worker.
Kate’s book—a “jolly dystopia”—will get published if enough of us pledge to back it. So let’s get pledging!
There’s a curiously coloured scheme afoot in Blighty. In an effort to tackle dispiriting, spiralling levels of crime and anti-social behaviour, the government has a new solution: to dye offenders purple.
We don’t want the field to de-democratize and become the province solely of those who can slog through a computer science degree.
So we need new tools that let everyone see, understand, and remix today’s web. We need, in other words, to reboot the culture of View Source.
Vitaly’s been bitten with date-picker fever. Here’s his deep, deep, deep dive into one interface element.
You can help support the indie web community with their fairly modest costs: about $200 each month for hosting, domain names, and the like. Also:
We want IndieWeb events to be as accessible as possible, regardless of personal barriers. Because of this, we have offered a travel scholarship fund in the past to underrepresented groups thanks to our generous sponsors. Your support will allow us to continue to offer and expand this scholarship fund, helping make sure that IndieWebCamps represent everyone.
The videos are coming! The videos are coming!
Here’s the first one: Laura Elizabeth opening the show at Patterns Day.
I’ve heard of people having their domain names hijacked before, but this is the first time I’ve heard of an entire top level domain being nicked.
People of the Twin Cities and environs: I will be giving a talk at The Nerdery in Bloomington on Friday evening. It’s free to attend. Swing on by if you’re in the neighbourhood.
- Networking and Happy Hour: 5:00 - 6:00 p.m.
- Keynote: 6:00 - 7:00 p.m.
- Networking and Q-and-A: 7:00 - 7:30 p.m.
We’re building on a web littered with too-heavy sites, on an internet that’s unevenly, unequally distributed. That’s why designing a lightweight, inexpensive digital experience is a form of kindness. And while that kindness might seem like a small thing these days, it’s a critical one.
I love the way Matthias sums up his experience of the Beyond Tellerrand conference. He focuses on three themes:
I heartily agree with his reasons for attending the conference:
There are many ways to broaden your horizons if you are looking for inspiration: You could do some research, read a book or an article, or visit a new city. But one of the best ways surely is the experience of a conference, because it provides you with many new concepts and ideas. Moreover, ideas that were floating around in your head for a while are affirmed.
I love seeing people go from Codebar to full-time dev work. It’s no surprise in Zara’s case—she’s an excellent front-end developer.
Jon’s worried that thinking about components first might damage the big picture.
One doesn’t create a design system starting with a loose collection of parts before creating the whole.
Won’t somebody think of the parents!?
Without creative direction, a design system becomes a group of disconnected elements existing alongside one another.
I can’t remember the last time I was genuinely surprised, delighted, and intrigued by an online story like this.
Geek humour is no laughing matter, as Chris demonstrates here with his thorough dissection of that coffee mug.
CSS is weird. It’s unlike any other code, and that makes a lot of programmers uncomfortable. But used wisely it can, in fact, be awesome.
It’s not often I say this, but read the comments.
Ah, the age-old question!
The Venn diagram here pretty much maps to how I think about these different terms, and how they relate to one another.
Tell it, brother!
PWAs don’t require you use a particular JavaScript framework or any JavaScript framework at all. You don’t need to be building a Single Page App either.
Here’s a fun premise for a collection of sci-fi short stories:
Flight 008 through a temporary wrinkle in the local region of space-time. What these passengers will soon find out as they descend into SFO is that the wrinkle has transported them 20 years in the future, and the year is now 2037.
Read the stories of the passengers from Flight 008, imagined by the world’s top science fiction storytellers, as they discover a future transformed by exponential technologies.
Authors include Bruce Sterling, Madeline Ashby, Paulo Bacigalupi, and Gregory Benford.
A transcript of the superb talk that Ellen delivered at Patterns Day. So good!
A series of posts on the decisions and trade-offs involved in being a tech lead:
I think good tech leads spend a lot of their time somewhere in between the two extremes, adjusting the balance as circumstances demand.
Stop dilly-dallying and just get this work done, okay?
I frequently see web developers struggling to become better, but without a path or any indication of clear direction. This repository is an attempt to sharing my experiences, and any contributions, that can help provide such a direction.
It’s broken down into four parts:
I don’t necessarily agree with everything here (and I really don’t like the “rockstar” labelling), but that’s okay:
Anything written here is open to debate and challenges are encouraged.
Rachel uncovers a great phrase for dealing with older browsers:
It isn’t your fault, but it is your problem.
She points to multiple ways of using CSS Grid today while still providing a decent experience for older browsers.
Crucially, there’s one message that hasn’t changed in fifteen years:
Websites do not need to look the same in every browser.
It’s crazy that there are still designers and developers who haven’t internalised this. And before anyone starts claiming that the problem is with the clients and the bosses, Rachel has plenty of advice for talking with them too.
Your job is to learn about new things, and advise your client or your boss in the best way to achieve their business goals through your use of the available technology. You can only do that if you have learned about the new things. You can then advise them which compromises are worth making.
Dave explains how Jekyll Includes are starting to convert him to web components. The encapsulation is nice and neat. And he answers the inevitable “but why not use React?” question:
Writing HTML that contains JavaScript, not JavaScript that contains HTML, feels good to me.
The key feature for me is that this approach doesn’t have to depend on JavaScript in the browser:
I like that Web Components are an entirely client-side technology but can be rendered server-side in existing tech stacks whether it’s Jekyll, Rails, or even some Enterprise Java system.
Here’s an interesting proposal to slightly amend the semantics of the small
element so it could apply to the use-case that hgroup
was trying to cover.
A nice little pattern library from Rachel and Drew for the Perch admin interface. Within folders, they’re using Brad’s atomic design nomenclature, and the whole thing is managed with Fractal.
Paul has published the slides and transcript of his knock-out talk at Patterns Day. This a must-read: superb stuff!
Design systems are an attempt to add a layer of logic and reasoning over a series decisions made by complex, irrational, emotional human beings. As such, they are subject to individual perspectives, biases, and aspirations.
How does the culture in which they are made effect the resulting design?
If you feel you are being watched, you change your behavior. Big Data is supercharging this effect.
Some interesting ideas, but the tone is so alarming as to render the message meaningless.
As our weaknesses are mapped, we are becoming too transparent. This is breeding a society where self-censorship and risk-aversion are the new normal.
I stopped reading at the point where the danger was compared to climate change.
A look at our relationship with waiting, and how that is manifested in the loading icons in our interfaces.
For me, in my moments of boredom, as I turn to my phone and refresh my social media feed, I imagine that what’s on the other side of the buffering icon might be the content that will rid me of boredom and produce a satisfying social connection. The buffering icon here represents my hopes for the many ways that my social media feeds can satisfy my longings at any given moment. They rarely do, though I believe that we are half in love with the buffering icon here because it represents the promise of intimacy or excitement across the distances that separate us.
Steven Johnson dives deep into the METI project, starting with the Arecibo message and covering Lincos, the Drake equation, and the Fermi paradox.
He also wrote about what he left out of the article and mentions that he’s writing a book on long-term decision making.
In a sense, the METI debate runs parallel to other existential decisions that we will be confronting in the coming decades, as our technological and scientific powers increase. Should we create superintelligent machines that exceed our own intellectual capabilities by such a wide margin that we cease to understand how their intelligence works? Should we ‘‘cure’’ death, as many technologists are proposing? Like METI, these are potentially among the most momentous decisions human beings will ever make, and yet the number of people actively participating in those decisions — or even aware such decisions are being made — is minuscule.
This is an excellent proposal from Emil. If we can apply display: contents
to fieldsets, then we would finally have a way of undoing the byzantine browser styles that have hindered adoption of this element. This proposal also ensures backwards compatibility so there’d be no breakage of older sites:
The legacy appearance of fieldsets probably needs to be preserved for compatibility reasons. But
display: contents
is not supported in any old browsers, and is most likely used on exactly zero sites using the legacy look of fieldsets.
Whaddya say, browser makers?
You are on a website. There are exits to the north, south, east and west.
>...
If you’ve never been to UX London, this short video communicates the flavour of the event nicely.
A three-part series by Remy looking at one interface pattern (a sticky header) and how his code evolved and changed:
A great blow-by-blow account of Patterns Day by Hidde.
This is a really great screencast on getting started with React. I think it works well for a few reasons:
There’s a little bit of “here’s one I prepared earlier” but, on the whole, it’s a great step-by-step approach, and one I’ll be returning to if and when I dip my toes into React.
If you were at Patterns Day and you liked the music that was playing during the breaks, here’s the playlist. All the artists are based in Brighton.