Here there be robots: A medieval map of Mars
Mappa Mundi Rubrum.
Archive: February, 2016
135
| 5th | 10th | 15th | 20th | 25th | |||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 12am | |||||||||||||||||||||||||||||
| 4am | |||||||||||||||||||||||||||||
| 8am | |||||||||||||||||||||||||||||
| 12pm | |||||||||||||||||||||||||||||
| 4pm | |||||||||||||||||||||||||||||
| 8pm |
Monday, February 29th, 2016
Performance is a feature. Why performance is an opportunity for online businesses.
The problem is that performance is a feature that is not on anyone’s product roadmap.
For whatever reason, the fact that it correlates directly to bounce rate, time on site, pages-per-visit etc. has not struck home with many product owners.
Most websites, certainly in the publishing industry where I have worked for a good part of my career, see those metrics as core KPIs. So you would think that anything that improved them would get prioritised. But no.
Ignacio Villanueva
Ignacio asked me some questions. I was happy to answer them.
Walmart Web Style Guide
A pattern library of Walmart’s front-end code.
Independently published
Jessica writes about The Heroine’s Journey.
Remy explains Why I love working with the web.
Ludwig dreams of designers and developers working Together.
Charlotte documents her technique Teaching the order of margins in CSS.
Craig field-tests The Leica Q.
Robin thinks about The New Web Typography.
Michael dives deep into A Complete History of the Millennium Falcon.
What do they all have in common? Nothing …other than the fact that each person chose to write on their own website. I’m grateful for that. These are all wonderful pieces of writing—they deserve a long life.
The New Web Typography › Robin Rendle
A wonderfully thoughtful piece on typography, Jan Tschichold and the web. This really resonated with me:
It’s only been over the past year or so in which I’ve recognised myself as a ‘Web designer’ with a capital W, as I now believe that something happens to information and technology, and even typography itself, when people pass through these interconnected networks and interact with hypertext.
It’s for these reasons that I don’t believe in “digital design” or “designing for screens” and it’s why I’m often attracted to one particular side of this spectrum.
Robin proposes three “principles, suggestions, outlines, or rather things-that-I-ought-to-be nervous-about when setting text on the web”:
- We must prioritise the text over the font, or semantics over style.
- We ought to use and/or make tools that reveal the consequences of typographic decisions.
- We should acknowledge that web typography is only as strong as its weakest point.
There’s an in-depth look at applying progressive enhancement to web type, and every single link in the resources section at the end is worth investigating.
Oh, and of course it’s beautifully typeset.
It’s 2016 and I still come across people who use the word “web” to mean “desktop” and the word “mobile” to mean “native.”
Cannot parse.
Today’s twinsies: Mark and Ben are wearing the same jumper.
A 5 day sprint with Clear Left exploring library self-service machine software – Leon Paternoster
Myself and Batesy spent last week in Ipswich doing an intense design sprint with Suffolk Libraries. Leon has written up process from his perspective as the client—I’ll try to get a case study up on the Clearleft website soon.
This is really great write-up; it captures the sense of organised chaos:
I can’t recommend this kind of research sprint enough. We got a report, detailed technical validation of an idea, mock ups and a plan for how to proceed, while getting staff and stakeholders involved in the project — all in the space of 5 days.
Sunday, February 28th, 2016
Ox cheek and mustard stew.
What an unexpected pattern in three very different links today…
Jon Aizlewood | Is marketing being reborn as CX?
Aaaaand, once again, the Acheulean hand ax makes an appearance, this time in Jon’s rant about marketing.
A decade or more ago, digital marketing was more of a blunt instrument. It was like the first stone axe - crude, but it got the job done.
That’s three links in one day that reference the same prehistoric technology. What coincidental synchronicity!
Terraforming on Vimeo
There’s that Acheulean hand ax again.
The first ever object to be designed by man 1.7 million years ago was a flint hand axe. Flint has the same molecular structure as a crystal and they both consist of silica. The project juxtaposes the flint hand axe with the latest crystal technology; Xero chaton the world’s smallest precision cut crystal measuring 0.6mm in diameter, smaller than a grain of sand.
How to lint your Sass/CSS properly with Stylelint — Creative Nightly
Linting CSS seems like a very good idea, especially if you’re not the only one writing the CSS. This guide is going to come in very handy when I give it a try.
Preload: What Is It Good For? – Smashing Magazine
A comprehensive overview of rel="preload" which looks very useful indeed …I just wish it wasn’t (like “nofollow”) a nonsensical value for the rel attribute: a resource can’t have a relationship of “preload” to the linking document.
Send Audio from the Web to Your Own Personal Podcast Using Huffduffer – Camden Bucey
Well, this is nice…
Have you ever stumbled across a piece of audio online that you’d like to listen to later? Perhaps a friend messaged a podcast episode or news report to you, but you weren’t in a position to listen to it at the moment. You need Huffduffer.
Perth Device Lab – An Open Device Lab brought to you by Humaan
This might be the most remote open device lab yet. Looks pretty great.
Shakshuka.
Go Charlotte!
Victory!
Cheering on @lottejackson at the Brighton half marathon. Go Charlotte!
Hand Ax Technology - A Legend In Sustainability
Even more intriguing than their vast distribution across three continents is their time depth. Acheulean hand axes have been found at sites spanning 1.5 million years of human existence, dating from roughly 1.6 million years ago to about 100,000 years ago. That makes the Acheulean ax the most sustainable technology that members of our genus (Homo) ever developed. Consider, in contrast, the amount of technological change that has occurred in just the last 150 years (since the first telephone call), one ten-thousandth the amount of time the Acheulean hand ax was made and used. Or consider the amount of technological change in just the last 10 years (since the first iPhone was introduced), one one-hundred-fifty-thousandth the amount of time that Acheulean hand axes were made and used. In the memorable words of my former professor Arthur J. Jelinek, hand axes represent “mind-numbing technological stability.”
Saturday, February 27th, 2016
Yaki-onigiri.
Chicken and spring onion.
Quail teriyaki.
Chicken wings and chicken hearts.
Mackerel.
Pork belly.
Chicken skin.
Kara-age.
Edamame and pickles.
Old Man.
Meze plate.
Fools rush in where angels fear to upgrade to PHP 7.
Friday, February 26th, 2016
Eating toast. In Ipswich.
Morning coffee.
Thursday, February 25th, 2016
Cheese plate.
Sea bass.
Scallops.
Toastie.
Wearing my birthday cowl.
Hey @Han,
You say it’s your birthday,
It’s my birthday too, yeah.
They say it’s your birthday,
Happy birthday to ya!
Wednesday, February 24th, 2016
Listening in on the Ipswich ukelele club.
Our home for the week.
“CAN I GET SOME POST-IT NOTES AND SHARPIES?”
“This is a library.”
“Oh, right. whispers Can I get some post-it notes and sharpies?”
Tuesday, February 23rd, 2016
This is a nice AirBnB.
Alas, no Homebrew Website Club in Brighton tomorrow evening—normal service will resume in 15 days.
Ipswich.
Monday, February 22nd, 2016
Big Issue.
Passing by the Olympic Park, which is looking very Ballardian today.
Sunday, February 21st, 2016
Connected Copies, Part Two | Hapgood
A really good explanation of how a peer-to-peer model for the web would differ from the current location-centric approach.
What really interests me is the idea of having both models co-exist.
You just have to think about the ways in which our location-centrism is contributing to the problems we are hitting, from the rise of Facebook, to the lack of findability of OER, to the Wikipedia Edit Wars.
hunt
This looks like it could be quite a handy (and relatively lightweight) script for attaching events—like animations—to an item’s visibility, so the events only trigger when the item is scrolled into view.
All our imagined futures | A Working Library
Science fiction as a means of energising climatic and economic change:
Fiction, and science fiction in particular, can help us imagine many futures, and in particular can help us to direct our imaginations towards the futures we want. Imagining a particular kind of future isn’t just day dreaming: it’s an important and active framing that makes it possible for us to construct a future that approaches that imagined vision. In other words, imagining the future is one way of making that future happen.
But it’s important that these visions are preserved:
It’s very likely that our next Octavia Butler is today writing on WattPad or Tumblr or Facebook. When those servers cease to respond, what will we lose? More than the past is at stake—all our imagined futures are at risk, too.
Outline Your Talk with Presenter Notes — Ladies in Tech
Continuing the topic of public speaking, Jenn has a really good technique for figuring out how to arrange the pieces of your talk without getting bogged down in designing slides.
How to prepare and write a tech conference talk | wunder
Lena’s in-depth run-down of how she puts together a conference talk. If you’re new to public speaking, this is well worth reading.
What happens next with Conversational UIs — Cennydd Bowles
Cennydd speaks his brains on conversational interfaces—a refreshing counterpoint to Chris’s cheerleading.
Saturday, February 20th, 2016
Still working on that last one percent.
Frontend Design | Brad Frost
Well, this pretty much sums up the front-end team at Clearleft:
Frontend design involves creating the HTML, CSS, and presentational JavaScript code that makes up a user interface.
I’ve often said that at Clearleft, development is always in the service of design. And like Brad, I often find myself defining that work by what it isn’t:
They understand UX principles and best practices, but may not spend their time conducting research, creating flows, and planning scenarios
They have a keen eye for aesthetics, but may not spend their time pouring over font pairings, comparing color palettes, or creating illustrations and icons.
They can write JavaScript, but may not spend their time writing application-level code, wiring up middleware, or debugging.
They understand the importance of backend development, but may not spend their time writing backend logic, spinning up servers, load testing, etc.
Eternal 5D data storage could record the history of humankind
360 terabytes of data stored for over 13 billion years:
Coined as the ‘Superman memory crystal’, as the glass memory has been compared to the “memory crystals” used in the Superman films, the data is recorded via self-assembled nanostructures created in fused quartz. The information encoding is realised in five dimensions: the size and orientation in addition to the three dimensional position of these nanostructures.
The Secret Lives of Tumblr Teens | New Republic
A fascinating insight into some of Tumblr’s most popular accounts:
Some posts get more than a million notes—imagine a joke whispered in biology class getting a laugh from a city the size of San Francisco.
It’ll be a real shame when Tumblr disappears.
That’s “when”, not “if”. Remember:
In 2013, Yahoo bought Tumblr.
Keeping a smart home guest-friendly — Sensors and sensibility
In web development, we have this concept of progressive enhancement, which means that you start by building websites with the very most basic blocks - HTML elements. Then you enhance those basic elements with CSS to make them look better, then you add JavaScript to make them whizzy - the benefit being that if the JS or the CSS fail to load, you’ve still go the basic usable blocks underneath. I’m following this same principle in the house.
Related: this great chat between Jen Simmons and Stephanie Rieger.
Farewell, Umberto.
“The world exploded into a whirling network of kinships, where everything pointed to everything else, everything explained everything else…”
Friday, February 19th, 2016
Rocking out with rhythm section of @SalterCane.
Enhance! Conf!
Two weeks from now there will be an event in London. You should go to it. It’s called EnhanceConf:
EnhanceConf is a one day, single track conference covering the state of the art in progressive enhancement. We will look at the tools and techniques that allow you to extend the reach of your website/application without incurring additional costs.
As you can probably guess, this is right up my alley. Wild horses wouldn’t keep me away from it. I’ve been asked to be Master of Ceremonies for the day, which is a great honour. Luckily I have some experience in that department from three years of hosting Responsive Day Out. In fact, EnhanceConf is going to run very much in the mold of Responsive Day Out, as organiser Simon explained in an interview with Aaron.
But the reason to attend is of course the content. Check out that line-up! Now that is going to be a knowledge-packed day: design, development, accessibility, performance …these are a few of my favourite things. Nat Buckley, Jen Simmons, Phil Hawksworth, Anna Debenham, Aaron Gustafson …these are a few of my favourite people.
Tickets are still available. Use the discount code JEREMYK to get a whopping 15% off the ticket price.
There’s also a scholarship:
The scholarships are available to anyone not normally able to attend a conference.
I’m really looking forward to EnhanceConf. See you at RSA House on March 4th!
New edition
Six years ago I wrote a book and the brand new plucky upstart A Book Apart published it.
Six years! That’s like a geological age in internet years.
People liked the book. That’s very gratifying. I’m quite proud of it, and it always gives me a warm glow when someone tells me they enjoyed reading it.
Jeffrey asked me a while back about updating the book for a second edition—after all, six years is crazy long time for a web book to be around. I said no, because I just wouldn’t have the time, but mostly because—as the old proverb goes—you can step in the same river twice. Proud as I am of HTML5 For Web Designers, I consider it part of my past.
“What about having someone else update it?” Well, that made me nervous. I feel quite protective of my six year old.
“What about Rachel Andrew?” Ah, well, that’s a different story! Absolutely—if there’s one person I trust to bring the up to date, it’s Rachel.
She’s done a fine, fine job. The second edition of HTML5 For Web Designers is now available.
I know what you’re going to ask: how much difference is there between the two editions? Well, in the introduction to the new edition, I’m very pleased to say that Rachel has written:
I’ve been struck by how much has remained unchanged in that time.
There’s a new section on responsive images. That’s probably the biggest change. The section on video has been expanded to include captioning. There are some updates and tweaks to the semantics of some of the structural elements. So it’s not a completely different book; it’s very much an update rather than a rewrite.
If you don’t have a copy of HTML5 For Web Designers and you’ve been thinking that maybe it’s too out-of-date to bother with, rest assured that it is now bang up to date thanks to Rachel.
Jeffrey has written a lovely new foreword for the second edition:
HTML5 for Web Designers is a book about HTML like Elements of Style is a book about commas. It’s a book founded on solid design principles, and forged at the cutting edge of twenty-first century multi-device design and development.
Twin Jameses.
Wednesday, February 17th, 2016
Progressive Enhancement Gets a Conference, From the Notebook of Aaron Gustafson
Aaron interviews Simon who’s organising the upcoming EnhanceConf which is going to be ruddy good.
Tuesday, February 16th, 2016
Chicken wings and sriracha.
Bringing out the birthday cake for @lottejackson.
Happy birthday, Charlotte!
Monday, February 15th, 2016
How To Write Telegrams Properly by Nelson E. Ross
A delightful and informative booklet from 1928.
Launching FrancisCMS onto the IndieWeb
Jason is open-sourcing the code for his site’s Content Management System, filled with lots of Indie Web goodness.
Sunday, February 14th, 2016
Dog truth.
The Leica Q — Craig Mod
Set aside some time: Craig is reviewing a camera again (and you remember how epic that was last time).
Watch the Watchers
Monika’s end-of-year piece is rather excellent:
The map exposes the network of fibre optic internet cables that lie deep below the sea giving an unfettered glimpse of the government’s counterterrorism tactics and the murky justifications behind them.
They used my picture so I’d better huffduff this…
http://www.npr.org/sections/money/2015/09/16/440951873/episode-651-the-salmon-taboo
Beef and Bordeaux. Meat and Medoc. Cattle and Claret.
Matchmaking on Valentine’s Day.
10 Tauri, my light cone approacheth.
https://twitter.com/5point9billion/status/698841577356140544
Saturday, February 13th, 2016
Pork chip peperonata.
Flat white.
Friday, February 12th, 2016
Wrote the sentence “This call to arms fell on deaf ears”, then promptly gave myself a slap for abusing clichés and body parts. Deleted.
Ethical Web Development
I really, really like these principles. Time to add them to the list.
I don’t like any of these words…
(alt=”Gamification for Marketing Workshop”)
Transmetropolitan Brighton street art (paging @warrenellis).
16 CSS Lessons via Post-it® Notes
’Sfunny—I was just talking about how important it is to keep document ways of teaching the basics of CSS, then I come across this delightful series of explanations.
(I hope Kaylan posts this to her own site as well as Ev’s blog.)
Teaching the order of margins in CSS | Charlotte Jackson, Front-end developer
Y’know, all too often we’re caught up in the latest techniques and technologies. It’s easy to forget that there are people out there trying to learn this whole web thing from scratch. That’s why I think blog posts like this are so, so important!
Based on her experience teaching CSS at Codebar, Charlotte describes how she explains margins. Sounds simple, right? But is that because we’ve internalised this kind of thing? When was the last time we really thought about the basic building blocks of making websites?
Anyway, this is by far the best explanation of margin shorthand properties that I’ve seen.
More of this kind of thing, please!
Thursday, February 11th, 2016
Chicken, chickpeas, and chorizo.
Myself and @qwertykate just went outside to see the ISS fly over and wave at the Tims.
Had a fun @Clearleft front-end pow-wow with special guest @malditogeek.
Last week it was @Jack_Franklin.
It’s like Parkinson for devs.
#nodigitaldarkage? — Blog of the Long Now
A note of optimism for digital preservation:
Where a lack of action may have been more of the case in the 01990s, it is certainly less so today. In the early days, there were just a handful of pioneers talking about and working on digital preservation, but today there are hundreds of tremendously intelligent and skilled people focused on preserving access to the yottabytes of digital cultural heritage and science data we have and will create.
Banjos and Discrete Technologies | stevebenford
An examination of how sites like The Session are meshing with older ideas of traditional Irish music:
There is a very interesting tension at play here – one that speaks directly to the design of new technologies. On the one hand, Irish musicians appear to be enthusiastically adopting digital media to establish a common repertoire of tunes, while on the other the actual performance of these tunes in a live session is governed by a strong etiquette that emphasizes the importance of playing by ear.
There’s an accompanying paper called Supporting Traditional Music-Making: Designing for Situated Discretion (PDF).
Vanishing boxes with display contents
I’ve seen the exact problem that Rachel describes here—flexbox only applied to direct children, meaning the markup would have to be adjusted. display: contents looks like a nifty solution.
The Pain With No Name · An A List Apart Article
This rousing call-to-arms by Abby the IA makes a great companion piece to her interview on The Big Web Show.
Mia!
Wednesday, February 10th, 2016
Pork vindaloo.
Handling redirects with a Service Worker
When I wrote about implementing my first Service Worker, I finished with this plea:
And remember, please share your code and your gotchas: it’s early days for Service Workers so every implementation counts.
Well, I ran into a gotcha that was really frustrating but thanks to the generosity of others, I was able to sort it out.
It was all because of an issue in Chrome. Here’s the problem…
Let’s say you’ve got a Service Worker running that takes care of any requests to your site. Now on that site, you’ve got a URL that receives POST data, does something with it, and then redirects to another URL. That’s a fairly common situation—it’s how I handle webmentions here on adactio.com, and it’s how I handle most add/edit/delete actions over on The Session to help prevent duplicate form submissions.
Anyway, it turns out that Chrome’s Service Worker implementation would get confused by that. Instead of redirecting, it showed the offline page instead. The fetch wasn’t resolving.
I described the situation to Jake, but rather than just try and explain it in 140 characters, I built a test case.
There’s a Chromium issue filed on this, and it will get fixed, but it in the meantime, it was really bugging me recently when I was rolling out a new feature on The Session. Matthew pointed out that the Chromium bug report also contained a workaround that he’s been using on traintimes.org.uk. Adrian also posted his expanded workaround in there too. That turned out to be exactly what I needed.
I think the problem is that the redirect means that a body is included in the GET request, which is what’s throwing the Service Worker. So I need to create a duplicate request without the body:
request = new Request(url, {
method: 'GET',
headers: request.headers,
mode: request.mode == 'navigate' ? 'cors' : request.mode,
credentials: request.credentials,
redirect: request.redirect
});
So here’s what I had in my Service Worker before:
// For HTML requests, try the network first, fall back to the cache, finally the offline page
if (request.headers.get('Accept').indexOf('text/html') !== -1) {
event.respondWith(
fetch(request)
.then( response => {
// NETWORK
// Stash a copy of this page in the pages cache
let copy = response.clone();
stashInCache(pagesCacheName, request, copy);
return response;
})
.catch( () => {
// CACHE or FALLBACK
return caches.match(request)
.then( response => response || caches.match('/offline') );
})
);
return;
}
// For HTML requests, try the network first, fall back to the cache, finally the offline page
if (request.headers.get('Accept').indexOf('text/html') !== -1) {
request = new Request(url, {
method: 'GET',
headers: request.headers,
mode: request.mode == 'navigate' ? 'cors' : request.mode,
credentials: request.credentials,
redirect: request.redirect
});
event.respondWith(
fetch(request)
.then( response => {
// NETWORK
// Stash a copy of this page in the pages cache
let copy = response.clone();
stashInCache(pagesCacheName, request, copy);
return response;
})
.catch( () => {
// CACHE or FALLBACK
return caches.match(request)
.then( response => response || caches.match('/offline') );
})
);
return;
}
Now the test case is working just fine in Chrome.
On the off-chance that someone out there is struggling with the same issue, I hope that this is useful.
Share what you learn.
It’s Homebrew Website Club at 6pm in @68MiddleSt this evening—come along and tinker with your own website in the company of other tinkerers.
Tuesday, February 9th, 2016
Purpose.
Fosteresque.
Monday, February 8th, 2016
Prohibition Of Discriminatory Tariffs For Data Services Regulations, 2016 (PDF)
Good news for net neutrality from India:
No service provider shall enter into any arrangement, agreement or contract, by whatever name called, with any person, natural or legal, that has the effect of discriminatory tariffs for data services being offered or charged to the consumer on the basis of content.
HTTPS + manifest.json + Service Worker = “Add to Home Screen” prompt.
Battling BEM – 5 common problems and how to avoid them
We tend to use a variant of BEM in our CSS at Clearleft. Glad to see that when we’ve hit these issues, we’ve taken the same approach.
» The Power of Responsive Design Sprints
Really interesting to see how Jason, Lyza, and co. are handling the process side of responsive design by using Agile sprints. This is how we’re doing it at Clearleft too.
There’s a really good point in here about starting with small-screen sketching:
For most of the sprint, we focus on small screens. We’re often asked how things will work on wider screens early in a sprint, but we try to resist thinking about that yet.
If you’ve managed to organize your life to fit inside a New York City apartment, you’re not going to have any trouble adjusting to a big house in the suburbs. The same is true of responsive designs.
If you nail the small screen design, the larger sizes will be easy by comparison.
Pulled pork bun.
Sunday, February 7th, 2016
Enhance’n’drag’n’drop
I’ve spent the last week implementing a new feature over at The Session. I had forgotten how enjoyable it is to get completely immersed in a personal project, thinking about everything from database structures right through to CSS animations,
I won’t bore you with the details of this particular feature—which is really only of interest if you play traditional Irish music—but I thought I’d make note of one little bit of progressive enhancement.
One of the interfaces needed for this feature was a form to re-order items in a list. So I thought to myself, “what’s the simplest technology to enable this functionality?” I came up with a series of select elements within a form.
It’s not the nicest of interfaces, but it works pretty much everywhere. Once I had built that—and the back-end functionality required to make it all work—I could think about how to enhance it.
I brought it up at the weekly Clearleft front-end pow-wow (featuring special guest Jack Franklin). I figured that drag’n’drop would be the obvious enhancement, but I didn’t know if there were any “go-to” libraries for implementing it; I haven’t paid much attention to the state of drag’n’drop since the old IE implement was added to HTML5.
Nobody had any particular recommendations so I did a bit of searching. I came across Dragula, which looked pretty solid. It’s made by the super-smart Nicolás Bevacqua, who I know shares my feelings about progressive enhancement. To my delight, I was able to get it working within minutes.
There’s a little bit of mustard-cutting going on: does the dragula object exist, and does the browser understand querySelector? If so, the select elements are hidden and the drag’n’drop is enabled. Then, whenever an item in the list is dragged and dropped, the corresponding (hidden) select element is updated …so that time I spent making the simpler non-drag’n’drop interface was time well spent: I didn’t need to do anything extra on the server to handle the data from the updated interface.
It’s a simple example but it demonstrates that the benefits of starting with the simpler universal interface before upgrading to the smoother experience.
Brussels sprouts.
Design without touching the surface – Leapfroglog
My concern is that by encouraging the practice of doing UX design without touching the surface of a product, we get shitty designs. In a process where UX and UI are seen as separate things the risk is one comes before the other. The UX designer draws the wireframes, the UI designer gets to turn them into pretty pictures, with no back-and-forth between the two. An iterative process can mitigate some of the damage such an artificial division of labour produces, but I think we still start out on the wrong foot. I think a better practice might entail including visual considerations from the very beginning of the design process (as we are sketching).
Surma.link – New ways to make your web app jank with Houdini – An introduction
This is a really good primer on all the pieces that make up the Houdini approach to CSS—giving authors access to low-level APIs for rendering.
As is often repeated here, it’s still early days and caution is advised, but it’s still a good idea to wrap your head around what’s coming down the standards pipe.
There’s even more specs in Houdini’s list of drafts, but the future of those is rather uncertain and they are not much more than a placeholder for an idea at this point. Examples include custom overflow behaviors, CSS syntax extension API, extension of native scroll behavior and similar ambitious things that allow you to screw up your web app even worse than ever before. Rejoice!
Saturday, February 6th, 2016
Grrr …this Service Worker bug in Chrome is really messing up a project I’m working on right now: https://adactio.com/swtest/
Tonkatsu ramen.
Kara-age.
Daikon salad.
Friday, February 5th, 2016
Bean burrito.
Thursday, February 4th, 2016
Service Worker notes
Here’s a disconnected hodge-podge of things related to Service Workers I’ve noticed recently…
Service Workers have landed in Firefox. When it was first unveiled in a nightly build a few people spotted some weird character issues on sites like mine that are using Service Workers, but that should all be fixed in the next release.
A while back I voted up Service Workers on Microsoft’s roadmap for Edge. I got an email today to say that the roadmap priority is high:
We intend to begin development soon.
Here’s a little gotcha that had me tearing my hair out until I tracked down the culprit: don’t use Header append Vary User-Agent in your site’s Apache config file. I don’t know why it snuck in there in the first place, but once I removed it, it fixed a weird issue that Aaron T. Grogg pointed out to me whereby my offline page would get cached, but not my CSS.
I really like this proposal for:
<link rel="serviceworker" href="/serviceworker.js">
It makes sense to me that I should be able to point to the Service Worker of a page in the same way that I point to a style sheet. It makes sense as a rel value too: “the linked resource has the relationship of ‘serviceworker’ to the current document.”
Also, I’m just generally a fan of declarative solutions. This feels like another good example of functionality that starts life in an imperative language (JavaScript) and then becomes declarative over time (see also: :hover, the required attribute, etc.).
Lyza wrote a fantastic article on Smashing Magazine that goes into all the details of her Service Worker. I must admit to feeling extremely gratified when she wrote:
First, I’m hugely indebted to Jeremy Keith for the implementation of service workers on his own website, which served as the starting point for my own code.
Going through her code, she made this remark:
Note: I use certain ECMAScript6 (or ES2015) features in the sample code for service workers because browsers that support service workers also support these features.
That’s a really good point. I haven’t messed around much with ES6 HipsterScript stuff partly because I haven’t yet set up a transpiler, so it was nice to know that my Service Worker is a “safe space” to try some stuff out in the browser. I refactored my JavaScript to use const, let, and =>.
Jake is looking for feedback on a specific part of Service Worker functionality around URLs. If I can wrap my head around what’s being described, I’ll chime in.
Finally, I had a nice little Service Worker moment earlier today. I was doing some updates on my web server that required a reboot. When I checked in Chrome to see how long adactio.com was down, I was surprised to see that the downtime appeared to be …zero. “That’s odd” I thought, “How can my site still be reachable if the server is …oh!” That’s when I realised I was seeing a cached version of my homepage. My Service Worker was doing it’s thing.
I had been thinking of Service Workers as a tool to help in situations where the user agent goes offline. But of course it’s an equally useful tool for when the server goes offline. This was a nice reminder of that.
Together • Ludwig Wendzich
Bootstrap is a product of Twitter. If you want your team to work like Twitter’s team, then by all means use Bootstrap. Pick up their design language. Their tool chain. Their decisions. Don’t be surprised when it feels off every time you use it. It will.
The same goes for Material Design. Foundation. These are all products built by other teams to work for their process. Their structure.
Finding the right tool is not what I am advocating for. Making it is.
The Many Faces Of… Punch Dancing
Last time I was in Austin I met up with Trent who got very animated when as he described a childhood strapping shinguards to his arms and recreating the montage fighting/dancing scenes from the finest of 80s movies.
That explains where this website is coming from.
Generate Mozilla Security Recommended Web Server Configuration Files
This is useful if you’re making the switch to HTTPS: choose your web server software and version to generate a configuration file.
I was just rebooting my web server and I couldn’t figure out why my site was still available …until I realised it was the Service Worker.
Developer Resources : Microsoft Edge Dev
Microsoft are officially on board with implementing Service Workers in Edge:
Roadmap Priority: High — We intend to begin development soon.
Short note on improving usability of scrollable regions
Three very easy to implement additions to scrollable areas of your web pages: tabindex="0", role="region", and an aria-label attribute.
Link rel=serviceworker - Chrome Platform Status
Ooh, I really like this idea! Pointing to your Service Worker the same way you point to your style sheet makes a lot of sense to me.
Wednesday, February 3rd, 2016
Jeremy Kard
You can do anything with CSS these days.
Performance budgeting.
Supraterranean Homesick Blues.
Tuesday, February 2nd, 2016
Schnitzel Holstein.
Ingredients.
Timeshifting.
https://www.youtube.com/watch?v=MGxjIBEZvx0
Johnny’s in the basement mixin’ up the medicine, I’m on the pavement thinkin’ ’bout the government.
Burger and cheese fries.
Monday, February 1st, 2016
Making A Service Worker: A Case Study – Smashing Magazine
Lyza has written an excellent deep dive into Service Workers, complete with code.
I’m really chuffed that she gave me a shout-out to my exhortation:
So if you decide to play around with Service Workers, please, please share your experience.
By the way, I like her point about this being a good opportunity to use ES6/ES2015/HipsterScript features like arrow functions in the browser: any browser that supports Service Workers also supports the latest JavaScript.
A simple HTML5 Progress bar | Charlotte Jackson, Front-end developer
I love this little markup pattern: simple, accessible and elegant …with some quirky CSS gotchas around styling non-standard prefixed pseudo-elements. They came from the Shadow DOM …dun dun DUN!
Links, Buttons, Submits, and Divs, Oh Hell | Adrian Roselli
Use the right element for the job.
- Does the Control Take Me to Another Page? Use an Anchor.
- Does the Control Change Something on the Current Page? Use a Button.
- Does the Control Submit Form Fields? Use a Submit.
The accessibility stack: making a better layer cake » Simply Accessible
A great description of a solid architectural approach to building on the web (and not just for accessibility either).