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!
If, like me, you’ve been using the “export to SVG” plugin for Fireworks and then opening up the resultant file to trim it down, Josh has got you covered: here’s a version of “export to SVG” that will result in much slimmer files.
I can empathise with Scott’s worries about fragmentation on the front-end with Saas, Styles, LESS, Compass, yada, yada, yada.
I want to share my code with everyone who writes CSS, not a subset of that group.
Best. Chrome extension. EVER!
Paul’s Chrome extension replaces every instance of “the cloud” with “the moon” (something I do in my head anyway).
It’s forked from an extension that replaces every instance of “the cloud” with “the clown.”
Oh, and Ben has written a version for Safari …forked from code that converts every instance of “the cloud” to “my butt.”
A nice feature on Seb in the latest issue of Make magazine.
A clear explanation of the current state of homomorphic encryption.
And this is why user-agent sniffing not a future-friendly technique. A new mobile browser comes along, and it has to spoof a fake UA string to all of these sites.
It’s a Red Queen arms race.
I like the sound of the book that Chris is writing for Smashing Magazine. It sounds like a very future-friendly approach to front-end development.
Related to my rant on links that aren’t actually links: buttons that aren’t actually buttons.
A beautiful timelapse visualisation of code commits to Flickr from 2004 to 2011.
A gorgeous collection of experiments that showcase just how much is possible in browsers today.
Remember when I made that canvas sparkline script? Remember when Stuart grant my wish for an SVG version? Well, now Tom has gone one further and created a hosted version on sparksvg.me
Not a fan of sparklines? Bars and circles are also available.
Code Club + Raspberry Pi + Hack Day = Awesomeness from Josh
A great short talk from Clare about Code Club.
This is a great free service for generating small subsetted icon fonts. Launch the app and have a play around — you can choose from the icons provided or you can import your own SVG shapes.
Nice touch: you can get the resulting font (mapped to your choice of unicode characters) base-64 encoded for your stylesheet.
Less wireframing, more prototyping.
It’s a long one, and it’s kind of meta, but if you have any interest in the idea of programming, this in-depth knowledge bomb from Bret Victor is well worth your time.
A short piece on the experiment that James conducted with Lighthouse in the foyer of the Cleareft office building, trying to show some kind of physical representation of coding.
Stuart on the importance of View Source.
It’s kinda nuts that in the space of just a few months, Code Club has gone from being an idea by Clare and Linda into something with an all-star promo video.
Have you thought “There must be a good reason for the blink element.” Well, read on.
This responsive image technique has a lot of moving parts but it seems pretty solid.
A fantastic taste of what you can expect in Seb’s Creative Coding workshop.
This is an excellent idea: get a whole bunch of after-school code clubs going to teach kids how to code in Scratch.
Mark has put together this rather excellent prototyping tool. It’s basically the V from an MVC system. You can easily move stuff around, change data …all the good stuff you want to do quickly and easily when you’re prototyping in the browser.
I don’t understand the maths, but the logic is fascinating.
Maybe it’s because I’m a bit of a control freak, but I can really empathise with what Lea is saying here: sometimes the developer convenience you get from using someone else’s code can result in quite a bit of redundant code. I feel that this is particularly a problem on the front end.
Mozilla will be supporting H.264 …but they’re not happy about it.
I won’t sugar-coat this pill. But we must swallow it if we are to succeed in our mobile initiatives. Failure on mobile is too likely to consign Mozilla to decline and irrelevance.
As if you needed another reason why QR codes are shit ..are you certain you’ve proofed it?
This cracked me up. There are two possibilities: either this is really is very funny or I am very nerdy.
Jonathan gives a thorough overview of the various tools and frameworks out there to help build native, hybrid and mobile web apps. He also shares his decision-making process on when to build what.
That Scott is one smart cookie. He has come up with a workaround (using the accelerometer) for that annoying Mobile Safari orientation/zoom bug that I blogged about recently.
I still want Apple to fix this bug as soon as possible—the fact that such smart people are spending so much effort on ingenious hacks shows just how much of a pain-point this is.
Before there were HTTP codes, there were telegraphic codes. The Victorian internet indeed!
A look back at some of the best code for journalism over the past year.
I had a lovely conversation at the Update after-party with Georgie about the infographic dress she was wearing. It’s quite lovely.