I know I should remain calm and sceptical about announcements like this, but …SQUEEEE!
Wednesday, June 27th, 2018
Between the utopian and dystopian, which vision of the future seems more likely to you? Which vision seems more true to how we currently live with technology, in the form of our smartphones and social media apps?
Tuesday, June 26th, 2018
The horror …the horror.
A walkthrough of the process of creating a futuristic interface with CSS (grid and animation).
While this is just one interpretation of what’s possible, I’m sure there are countless other innovative ideas that could be realized using the tools we have today.
I have to admit, I didn’t realise that text reszing behaved differently for user preferences compared to page zoom. For that reason alone, I’m going to avoid setting font sizes in pixels.
If 2 to 3% (or more!) of your users are relying on a custom font size, you should know that so you can either support that user preference or make a conscious decision to not support it. Doing anything less is frankly irresponsible, especially considering that users with larger font sizes may be using those sizes to compensate for visual disabilities.
Prompted by his time at Clearleft’s AI gathering in Juvet, Chris has been delving deep into the stories we tell about artificial intelligence …and what stories are missing.
And here we are at the eponymous answer to the question that I first asked at Juvet around 7 months ago: What stories aren’t we telling ourselves about AI?
The Gov.uk design system is looking very, very good indeed—nicely organised with plenty of usage guidelines for every component.
Guidance on using components and patterns now follow a simple, consistent format based on task-based research into what users need in order to follow and trust an approach.
Adriana Blum lists progressive web apps that are doing very, very well from Twitter, Trivago, Starbucks, Forbes, Debebhams, West Elm, Washington Post, Pinterest, AliExpress, and Lancôme.
Instead of choosing between the immediacy of a mobile website and the rich experience offered by native apps, you can now offer your target audiences the best of both and improve the commercial performance of your business to boot.
Sunday, June 24th, 2018
If you’re thinking of writing something that explains a weird thing you struggled with on the Internet, do it! Don’t worry about the views and likes and Internet hugs. If you’ve struggled with figuring out this thing then be sure to jot it down, even if it’s unedited and it uses too many commas and you don’t like the tone of it.
A really excellent piece from Derek on the history of community management online.
You have to decide what your platform is for and what it’s not for. And, yeah, that means deciding who it’s for and who it’s not for (hint: it’s not bots, nor nazis). That’s not a job you can outsource. The tech won’t do it for you. Not just because it’s your job, but because outsourcing it won’t work. It never does.
Saturday, June 23rd, 2018
There are some handy performance tips from Ben in this slide deck.
In this talk we’ll study how browsers determine which requests should be made, in what order, and what prevents the browser from rendering content quickly.
If only all documentation was as great as this old manual for the ZX Spectrum that Remy uncovered:
The manual is an instruction book on how to program the Spectrum. It’s a full book, with detailed directions and information on how the machine works, how the programming language works, includes human readable sentences explaining logic and even goes so far as touching on what hex values perform which assembly functions.
When we talk about things being “inspiring”, it’s rarely in regards to computer manuals. But, damn, if this isn’t inspiring!
This book stirs a passion inside of me that tells me that I can make something new from an existing thing. It reminds me of the 80s Lego boxes: unlike today’s Lego, the back of a Lego box would include pictures of creations that you could make with your Lego set. It didn’t include any instructions to do so, but it always made me think to myself: “I can make something more with these bricks”.
Jake’s blow-by-blow account of uncovering a serious browser vulnerability is fascinating. But if you don’t care for the technical details, skip ahead to to how different browser makers handled the issue—it’s very enlightening. (And if you do care for the technical details, make sure you click on the link to the PDF version of this post.)
A good ol’ rant from Robin.
Before jumping to conclusions, read the whole thing. Robin isn’t having a go at people who consider themselves full-stack developers; he’s having a go at the people who are only hiring back-end developers and expecting them to automatically be “full stack.”
Friday, June 22nd, 2018
A clever use of
localStorage to stop data from being lost when your visitors are offline.
Thursday, June 21st, 2018
People of Boston: I’m doing a book reading at your CSS meet-up on Wednesday, June 27th.
(Marketing genius that I am, I won’t be reading from my newest book, which is on sale now, but from the previous book, which is available for free online.)
Wednesday, June 20th, 2018
A lot of the issues here are with abuses of the
placeholder attribute—using it as a label, using it for additional information, etc.—whereas using it quite literally as a placeholder can be thought of as an enhancement (I almost always preface mine with “e.g.”).
Still, there’s no getting around that terrible colour contrast issue: if the contrast were greater, it would look too much like an actual pre-filled value, and that’s potentially worse.
- Know where you stand before starting the journey
- Make sure everyone is speaking the same language
- Integrate the right tools into your team’s workflow
A collection of collections.
This site is dedicated to compiling and sharing useful resources for Designers and UI Developers.
Tuesday, June 19th, 2018
What’s happening right now at the US border is heartbreaking and inexcusable. We’re donating 25% of all profits today and tomorrow (June 19 & 20) to RAICES, to help reunite detained immigrant parents and children.
A terrific cautionary look at the history of machine learning and artificial intelligence from the new laugh-a-minute book by James.
Monday, June 18th, 2018
Tom Standage—author of the brilliant book The Victorian Internet—relates a tale of how the Chappe optical telegraph was hacked in 19th century France, thereby making it one of the earliest recorded instances of a cyber attack.
Developer happiness is only a benefit if it first does no harm to others. Even better if it genuinely amplifies benefits to those further up chain of priorities.
Ultimately you can’t control when and how things go wrong but you do have some control over what happens. This is why progressive enhancement exists.
This really, really resonates with me:
I think the thing I struggle the most with right now is determining when something new is going to change the way our industry works for the better (like responsive web design did 5 or 6 years ago), and when it’s just a fad that will fade away in a year or three (which is how I feel about our obsession with things like Angular and React).
I try to avoid jumping from fad to fad, but I also don’t want to be that old guy who misses out on something that’s an important leap forward for us. I spend a lot of time thinking about the longer term impact of the things we make (and make with).
Sunday, June 17th, 2018
This looks like a really good (and free!) online book all about design ops.
Dave is liking the word “telepresence”:
On social media we broadcast our presence and thoughts over radio and wire and I likewise consume your projections as they echo back to me. We commune over TCP/IP.
Just wait until he discovers the related neologism coined by Ted Nelson.
Saturday, June 16th, 2018
The focus of the A Book Apart series is what makes it great …and that means having to reject some proposals that don’t fit. Even though I’ve had the honour of being a twice-published A Book Apart author, I also have the honour of receiving a rejection, which Jeffrey mentions here:
In one case we even had to say no to a beautifully written, fully finished book.
That was Resilient Web Design.
So why did we turn down books we knew would sell? Because, again—they weren’t quite right for us.
It was the right decision. And this is the right advice:
If you’ve sent us a proposal that ultimately wasn’t for us, don’t be afraid to try again if you write something new—and most importantly, believe in yourself and keep writing.
An even-handed assessment of the benefits and dangers of machine learning.
Friday, June 15th, 2018
Do we have too many design systems?
Spoiler: the answer is “no”. There. Saved you a click.
(Not really; you should definitely click.)
Wednesday, June 13th, 2018
I find this soooo relatable:
I know when I look at a design (heck, even if I know I’m not going to be building it), my front-end brain starts triggering all sorts of things I know will be related to the task.
Difference is, Chris comes up with some very, very clever techniques.
Refresh for a new design challenge.
Tuesday, June 12th, 2018
Here’s a really quick (ten minute) talk about the offline user experience that I gave at the Delta V conference recently. I’m quite happy with how it turned out—there’s something to be said for having a short and snappy time slot.
There’s a common misconception that making a Progressive Web App means creating a Single Page App with an app-shell architecture. But the truth is that literally any website can benefit from the performance boost that results from the combination of HTTPS + Service Worker + Web App Manifest.
I’ve been wondering about this for quite a while: surely demanding specific patterns in a password (e.g. can’t be all lowercase, must include at least one number, etc.) makes it easier to crack them, right? I mean, you’re basically providing a ruleset for brute-forcing.
Turns out, yes. That’s exactly right.
When employees are faced with this requirement, they tend to:
- Choose a dictionary word or a name
- Make the first character uppercase
- Add a number at the end, and/or an exclamation point
If we know that is a common pattern, then we know where to start…
This is really good breakdown of what’s different about CSS (compared to other languages).
These differences may feel foreign, but it’s these differences that make CSS so powerful. And it’s my suspicion that developers who embrace these things, and have fully internalized them, tend to be far more proficient in CSS.
Monday, June 11th, 2018
If you don’t fancy watching this video, Eric Runyon has written down the salient points about what it means for developers now that websites can be viewed on the Apple Watch. Basically, as long as you’re writing good, meaningful markup and you’ve got a sensible font stack, you’re all set.
Or, as Tim puts it:
When we build our sites in a way that allows people using less-capable devices, slower networks and other less than ideal circumstances, we end up better prepared for whatever crazy device or technology comes along next.
Mandy’s experiments with text effects in CSS are kinda mindblowing—I can’t wait to see her at Ampersand at the end of the month!
Sunday, June 10th, 2018
¶, &, @, ‽, ☺, #, and ☛.
Friday, June 8th, 2018
A nice intro to variable fonts.
Thursday, June 7th, 2018
Six steps to kickstart a web performance culture:
- Your dev environment is not your user’s environment
- It’s better to learn the fundamentals than the library
- Get the time to experiment and validate
- Educate your colleagues
- Share and celebrate success (and failure) stories
- Make performance part of your workflow
I think being simultaneously curious and skeptical of new technology is healthy attitude to have.
I want to learn new things in order to keep making good websites. I also think there’s a lot of value in talking about the difficulty in learning new things.
Tuesday, June 5th, 2018
And so whenever I look at AMP I wonder whether the technology and process itself might be bad (which is arguable) but the efforts might lead to something longer lasting, another movement inspired because of it, despite it, a movement that we can all benefit from.
The steps that the Canva team took to turbocharge their design ops.
I’ll talk about why creating a shared design system has boosted our organizational productivity—and how you can help your teams improve product quality while reducing your company’s ‘design debt’.
“Ah, this is good news!”, I thought, reading this update about how service worker scripts won’t be cached.
And that was the moment when I realised what an utter nerd I had become.
A thorough explanation of the history and inner workings of Cross-Origin Resource Sharing.
Like tales of a mythical sea beast, every developer has a story to tell about the day CORS seized upon one of their web requests, dragging it down into the inexorable depths, never to be seen again.
Monday, June 4th, 2018
I had fun answering these questions.
I really like the way that this pattern library includes research insights to provide justification for design decisions.
I was just talking about how browser-based games are the perfect use-case for service workers. Andrzej Mazur breaks down how that would work:
- Add to Home screen
- Offline capabilities
- Progressive loading
Andy Bell is documenting is journey of getting to grips with web components. I think it’s so valuable to share like this as you’re learning, instead of waiting until you’ve learned it all—the fresh perspective is so useful!
I continue to write stuff down on my little corner of the Web (does it have corners?) and I encourage you to do the same, as all these little bits of flotsam and jetsam become something a lot lot bigger.
Sunday, June 3rd, 2018
In my experience, there’s no casual mode within React. You need to be all-in, keeping up with the ecosystem, or else your knowledge evaporates.
I think Dave is right. At this point, it’s possible to be a React developer exclusively.
React is an ecosystem. I feel like it’s a disservice to anyone trying to learn to diminish all that React entails. React shows up on the scene with Babel, Webpack, and JSX (which each have their own learning curve) then quickly branches out into technologies like Redux, React-Router, Immutable.js, Axios, Jest, Next.js, Create-React-App, GraphQL, and whatever weird plugin you need for your app.
And, as Jake points out, you either need to go all in or not at all—you can’t really incrementally add Reactness to an existing project.
This forthcoming documentary on Ursula K. Le Guin looks like it will be very good indeed.
Friday, June 1st, 2018
I’ve been enjoying the stories over on Upsideclown so it’s great to get a peak inside Matt’s writing brain here.
I also happen to really, really like his four stories:
I wouldn’t say I’m great at writing fiction. I find it tough. It is the easiest thing in the world for me to pick holes in what I’ve written. So instead, as an exercise—and as some personal positive reinforcement—I want to remind myself what I learnt writing each one, and also what I like.
Beneath the URL shorteners, the web!
It’s increasingly apparent that a more digitally literate citizenry would be good for a thousand different reasons. A great way to start would be to make URLs visible again, to let people see the infrastructure they’re living in.
This is a great illustrated explanation of how DNS resolution works.
First of all, don’t panic—this browser vulnerability has been fixed, so the headline is completely out of proportion to the reality. But my goodness, this was a clever technique!
The technique relies on luring users to a malicious site where the attacker embeds iframes to other sites. In their example, the two embedded iframes for one of Facebook’s social widgets, but other sites are also susceptible to this issue.
The attack consists of overlaying a huge stack of DIV layers with different blend modes on top of the iframe. These layers are all 1x1 pixel-sized, meaning they cover just one pixel of the iframe.
Habalov and Weißer say that depending on the time needed to render the entire stack of DIVs, an attacker can determine the color of that pixel shown on the user’s screen.
The researchers say that by gradually moving this DIV “scan” stack across the iframe, “it is possible to determine the iframe’s content.”