This one is definitely for service worker nerds only. I’ve been trying to get my head around this idea of “foreign fetch” which allows third parties to install service workers—could be handy for sites with APIs like Huffduffer and The Session. This article does a good job of explaining the somewhat tangled process.
Lyza put together some example code for her Smashing Conference talk on service workers. If you haven’t written a service worker before, these are really nice examples of how to grok it bit by bit.
I’m in a similar position to Remy:
But, like Remy, I’m interested in knowing what are the ideas and techniques embedded within large frameworks that will end up making their way into the web stack:
What I want to know is: what should I be taking away from React into my own continued evolution as a web developer?
There are some good responses in the comments.
A talk from Harry on the whys and hows of refactoring CSS. He mentions the
all: initial declaration, which I don’t think I’ve come across before.
Adult training represents a way into coding for millions of women who never learnt when they were younger. Meetups such as those run by organisations such as Women Who Code and Codebar can introduce women to the collaborative, problem-solving world of programming.
Some helpful “gotchas” that could save you some frustration if you’re starting out with service workers.
If you’re going to dip your toes into the world of service workers, this handy library from the Chrome team is a good place to start.
Here’s another clever CSS technique. It uses flexbox to add horizontal lines either side of centred content.
This is witchcraft. I’ve been deconstructing the CSS to figure out how this works and it’s really clever.
(Hint: try commenting out some of the CSS and see what happens.)
Never let fear get in the way! Don’t be afraid to continue even when things appear to be impossible, even when the so-called “experts” say it is impossible. Don’t be afraid to stand alone, to be different, to be wrong, to make and admit mistakes, for only those who dare to fail greatly can ever achieve greatly.
A workshop for codebar students: Build a portfolio or blog site | Charlotte Jackson, Front-end developer
Charlotte did a fantastic job putting this workshop together on the weekend. It was inspiring!
The life cycle of a Service Worker—with all its events and states—is the one bit that I’ve never paid that much attention to. My eyes just glaze over when it comes to installation, registration, and activation. But this post explains the whole process really clearly. Now it’s starting to make sense to me.
Margaret Hamilton’s code after scanning and transcribing.
A very handy collection:
This book contains frontend coding patterns (and anti-patterns) that will assist developers in building accessible e-commerce web pages, widgets and workflows.
I like that it contains a list of anti-patterns too.
There’s also a corresponding collection of working demos.
A plug-in for Craft CMS for receiving webmentions. I’ll have to tell Charlotte about this (she’s using Craft for her site).
Here’s a handy directory of scripts that set out to solve one problem without any dependencies. Useful for poking at, picking apart, and learning from.
Here’s a nice little pattern from Dave—showing data tables one column at a time on smaller screens.
If you don’t comment your CSS, you’ll confuse other people looking at your code, and, more embarrassingly, you’ll confuse future you. If you do comment CSS, everybody will be less confused, and things will be accidentally broken less often. You will be popular and generally well-liked, and people will remember to send you cards on your birthday. Comment more.
Some good advice here on how to write better comments in CSS.
This looks like it could be a very nifty tool to have at your disposal while coding. I like that it’s editor-agnostic.
I quite like this step-by-step interface for a form, all cleverly handled with the
:focus pseudo-class. I’d want to refine some of the usability issues before using it in production, but the progressive disclosure is nice.
Well, this is rather wonderful! A one-stop-shop for exploring UI patterns on CodePen …this is going to be time sink.
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.
Minimum viable Service Worker tutorial. Copy, paste, and don’t ask questions.
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
summaryelements 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.
An attempt to convey the experience of (one kind of) dyslexia through code.
A very lightweight script for toggling the appearance of elements in an accessible way.
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.
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!
You can do anything with CSS these days.
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.
I was just helping out with some debugging at work and it reminded me of this great talk/post by Remy:
- Replicate: see the bug
- Isolate: understand the bug
- Eliminate: fix the bug
Codebar had a very good 2015.
Of the 137 workshops run, “100 of those workshops were organised by our two busiest chapters, London and Brighton”—50 each.
A nice self-contained script for animating items into view as the document scrolls.
(I’m very confused by the tagline for ScrollReveal—”Easy scroll animations for web and mobile browsers”—eh? Mobile browsers are web browsers …”web” is not a synonym for “desktop”.)
Use a framework if you must but never presume it’s viable over the long-term. Newer and better alternatives will appear before you’re half-way through your project. Never forget frameworks are an option — you don’t have to use one.
I have no hands-on experience with React, but this tutorial by Jack Franklin looks like a great place to start. Before the tutorial begins he succinctly and clearly outlines the perfect architecture for building on the web today:
- The next time a user clicks, rather than being sent to the server, the client-side app is in control.
Y’know, I had a chance to chat briefly with Jack at the Edge conference in London and I congratulated him on the launch of a Go Cardless site that used exactly this technique. He told me that the decision to flip the switch and make it act as a single page app came right at the end of the project. I think that points to a crucial mindset that’s reiterated here:
This is a nifty use of Service Workers—using a cache to mitigate unresponsive Content Delivery Networks.
The stuff in here about
Promise.race is particularly useful for “lie-fi” scenarios: instead of thinking about the network connection in a binary way (either it’s available or it isn’t), considering the scenario of a crappy network connection seems more realistic.
Regular expressions are my kryptonite. I’m rubbish at them and I can never keep the vocabulary in me head.
Mark recommended this tool so I’m going to give it a go the next time I have to resort to regex.
A great walkthrough of setting up a Service Worker for a blog. The code is here but more importantly, as Brandon says:
I wouldn’t be able to implement this myself if it wasn’t for some of the awesome people I mentioned earlier sharing their experience. So share, share, share!
A lovely little script from Nat to create a nice montage of images. It works by progressively enhancing a regular series of images in the markup.
Aaron has created a nice straightforward way to allow to POSSE posts from your Jekyll website to Medium.
A profile—published on Ada Lovelace Day—of Margaret Hamilton’s work on the Apollo project.
More of this kind of thing, please!
It seems grossly unfair to refer to this as an article. It’s a short book. It’s a very good short book; lucid and entertaining in equal measure. A very enjoyable read.
It is, unfortunately, surrounded by some distracting “enhancements” but perhaps you can use your cleaner-upper software of choice to route around their damage: Instapaper, Pocket, Readability, whatever works for you.
I think there’s a lot of truth to this. By any objective measurement, PHP is clearly inferior to just about every other programming language out there …but its preinstalled out-of-the-box nature means it’s the path of least resistance.
This article first appeared in Fast Company almost twenty years ago. It’s a fascinating look into the culture and process that created and maintained the software for the space shuttle. It’s the opposite of Silicon Valley’s “move fast and break things.”
To be this good, the on-board shuttle group has to be very different — the antithesis of the up-all-night, pizza-and-roller-hockey software coders who have captured the public imagination. To be this good, the on-board shuttle group has to be very ordinary — indistinguishable from any focused, disciplined, and methodically managed creative enterprise.
Charlotte’s opening remarks at the most recent Codebar were, by all accounts, inspiring.
I was asked to give a short talk about my journey into coding and what advice I would give to people starting out.
This is a fascinating bit of web archeology: John has annotated the code from one of the earliest versions of jQuery.
Jo writes about hosting Codebar Brighton. I share her enthusiasm—it feels like a great honour to be able to host such a great community event.
(Initially it required jQuery but I tweaked it to avoid those dependencies and Yuri very kindly merged my pull request—such a lovely warm feeling when that happens.)
This is such a simple little adjustment, but I think it’s kinda brilliant: tweaking the display of your site’s maps to match the season.
Watch this space.
If your site is written in Ruby (even if it’s made with a static site generator like Jekyll), you can add webmention support with Jason’s newly-open-sourced code.
You Don’t Need jQuery! – Free yourself from the chains of jQuery by embracing and understanding the modern Web API and discovering various directed libraries to help you fill in the gaps.
The tone is a bit too heavy-handed for my taste, but the code examples here are very handy if you’re weaning yourself off jQuery.
This was a fun podcast—myself and Cyd from Code For America talk to Karen and Ethan about how we worked together. Good times.
The audio is available for your huffduffing pleasure.
This is fascinating—it looks like there might be an entirely practical reason for Microsoft to skip having a version 9 of Windows …and it’s down to crappy pattern-matching code that’s supposed to target Windows 95 and 98.
This is exactly like the crappy user-agent sniffing that forced browsers to lie in their user-agent strings.
A really handy bit of code from Aaron for building a robust file uploader. A way to make your web-based photo sharing more Instagrammy-clever.
A great piece by Erin on the value of a code of conduct for conferences, filled with practical advice.
Once you decide to create a code and do it thoughtfully, you’ll find the internet overflows with resources to help you accomplish your goals, and good people who’ll offer guidance and advice. From my own experience, I can say that specificity and follow-through will make your code practical and give it teeth; humane language and a strong connection to your community will make it feel real and give it a heart.
Those lovely people at Filament Group share some of their techniques for making data tables work across a range of screen sizes.
Ten facets of web development that you can choose to focus on. One of them is from me …but other nine are worth paying attention to.
Scott’s trying to find out the best ways to load critical CSS first and non-critical CSS later. Good discussion ensues.
A lovely little from Josh that allows you to draw shapes in a canvas element and then copy the resulting code.
Those smart people at Filament Group have gathered their open-source code into one handy place. Useful!
I’m not sure if I agree completely with every point, but this is a great shortlist of things you can do to make your code more resilient and understandable (thereby making you, by any sensible definition, a better programmer).
Well, this is pretty nifty: Dan Gilmour is at Indie Web Camp in San Francisco and he’s already got some code up and running on his site.
Y’know, I’m not missing South by Southwest in the slightest this year …but I’m really missing Indie Web Camp.
Tom is running a Node School at 68 Middle Street on the evening of March 27th. I plan to attend and finally wrap my head around all this Node stuff.
Mike writes about what it was like being a client for a change. After working with him on the Code for America project, I can personally vouch for him as a dream client:
Clearleft’s pattern deliverables are the special-special that made the final work so strong. Jon Aizlewood’s introduction to the concept convinced me to contact Clearleft. Jeremy Keith’s interest in design systems kicked off the process, and Anna Debenham’s fucking rock star delivery brought it all home.
Great stuff from James Wragg and the gang at Madgex: a way of lazy-loading ads for responsive sites without messing with the ad code.
Nice! A Yeoman generator for scaffolding your own pattern primer.
(Those are just words, aren’t they? Y’know, as opposed to a sentence that would actually make sense to most right-thinking people.)
A great post from Anna on the front-end styleguides she’s worked on for A List Apart and Code for America. ‘Twas a pleasure working with her on the Code for America project.
A-mer-ica! Fuck yeah!
Don’t get me wrong: jQuery is great, but for a lot of projects, you might not need 90% of the functionality it provides. So try starting with vanilla JS and only pulling in jQuery if and when you need it.
There’s something very satisfying about this televisual sleuthing:
Images of the computer code appearing in TV and films and what they really are.
Here’s a heartwarming tale. It starts out as a description of processing.js project for Code Club (which is already a great story) and then morphs into a description of how anyone can contribute to make a codebase better …resulting in a lovely pull request on Github.
Some excellent research for web developers: find out which unicode characters have the widest support—release useful for choosing icons.
This is handy: a version of my pattern primer that can be run with Grunt.
Good luck getting that script updated for the thousands of sites and applications, you say to yourself, where it’s laying dormant just waiting to send devices the wrong content based on a UA substring.
Some good advice on how to mothball (rather than destroy) a project when it reaches the end of its useful life. In short, build a switch so that, when the worst comes to the worst, you can output static files and walk away.
In all your excitement starting a new project, spend a little time thinking about the end.
Planetary: collecting and preserving code as a living object | Smithsonian Cooper-Hewitt, National Design Museum in New York
Aaron Straup-Cope and Seb Chan on the challenges of adding (and keeping) code to the Cooper-Hewitt collection:
The distinction between preservation and access is increasingly blurred. This is especially true for digital objects.
The politics of code.
Josh has been teaching HTML and CSS schoolkids. I love the pages that they’ve made. I really mean it. I genuinely think these are wonderful!