Tags: code



A Webring Kit | Max Böck - Frontend Web Developer

Inspired by Charlie, here’s a straightforward bit of code for starting or joining your own webring.

Offline fallback page with service worker - Modern Web Development: Tales of a Developer Advocate by Paul Kinlan

Paul describes a fairly straightforward service worker recipe: a custom offline page for failed requests.

Inline an SVG file in HTML, declaratively & asynchronously!

Woah! This is one smart hack!

Scott has figured out a way to get all the benefits of pointing to an external SVG file …that then gets embedded. This means you can get all the styling and scripting benefits that only apply to embedded SVGs (like using fill).

The fallback is very graceful indeed: you still get the SVG (just not embedded).

Now imagine using this technique for chunks of HTML too …transclusion, baby!

A progressive disclosure component - Andy Bell

This is a really nice write-up of creating an accessible progressive disclosure widget (a show/hide toggle).

Where it gets really interesting is when Andy shows how it could all be encapsulated into a web component with a progressive enhancement mindset

HTML periodical table (built with CSS grid)

This is a nifty visualisation by Hui Jing. It’s really handy to have elements categorised like this:

  • Root elements
  • Scripting
  • Interactive elements
  • Document metadata
  • Edits
  • Tabular data
  • Grouping content
  • Embedded content
  • Forms
  • Sections
  • Text-level semantics

if statements and for loops in CSS - QuirksBlog

Personally, I find ppk’s comparison here to be spot on. I think that CSS can be explained in terms of programming concepts like if statements and for loops, if you squint at it just right.

This is something I’ve written about before.

Unpoly: Unobtrusive JavaScript framework

This looks like it could be an interesting library of interface patterns.

Sparkline Sound-Off – Chris Burnell

Chris has made sonic sparklines on his site too, but they’re far more musical than mine. Here’s his explanation of how he did it.

Sliding In And Out Of Vue.js — Smashing Magazine

This aspect of Vue appeals to me more than the all-or-nothing vibe I get from React:

By enabling incremental adoption, Vue’s progressive nature means that individuals can start using it here and there, a bit at a time, without having to do massive rewrites.

Programming as translation – Increment: Internationalization

Programming lessons from Umberto Eco and Emily Wilson.

Converting the analog into the digital requires discretization, leaving things out. What we filter out—or what we focus on—depends on our biases. How do conventional translators handle issues of bias? What can programmers learn from them?

indiekit | An IndieWeb publishing toolkit

Paul is making a micropub endpoint for static sites—very cool!

nexus-project / nexus-browser · GitLab

Here’s the source code for the WorldWideWeb project we did at CERN.

Minimal Google Analytics Snippet | Minimal Analytics

If you really, really have to add Google Analytics to a sites, here’s a way to do it in a more performant way, without the odious Google Tag Manager.

CodePen - Solar System 3D Animation (Pure CSS)

This orrery is really quite wonderful! Not only is it a great demonstration of what CSS can do, it’s a really accurate visualisation of the solar system.

Readable Code without Prescription Glasses | Ocasta

I saw Daniel give a talk at Async where he compared linguistic rules with code style:

We find the prescriptive rules hard to follow, irrespective of how complex they are, because they are invented, arbitrary, and often go against our intuition. The descriptive rules, on the other hand, are easy to follow because they are instinctive. We learned to follow them as children by listening to, analysing and mimicking speech, armed with an inbuilt concept of the basic building blocks of grammar. We follow them subconsciously, often without even knowing the rules exists.

Thus began some thorough research into trying to uncover a universal grammar for readable code:

I am excited by the possibility of discovering descriptive readability rules, and last autumn I started an online experiment to try and find some. My experiment on howreadable.com compared various coding patterns against each other in an attempt to objectively measure their readability. I haven’t found any strong candidates for prescriptive rules so far, but the results are promising and suggest a potential way forward.

I highly recommend reading through this and watching the video of the Async talk (and conference organisers; get Daniel on your line-up!).

What is tree shaking and how does it work?

The context here is JavaScript, not apples or olives.

This is yet another great explainer from Ire. Tree shaking is one of those things that I thought I understood, but always had the nagging doubt that I was missing something. This article really helped clear things up for me.

Learn Vanilla JS

Chris Ferdinandi is a machine!

A vanilla JS roadmap, along with learning resources and project ideas to help you get started.

The World’s Writing Systems

What a lovely timeline of civilisation. This site makes for a nice companion piece to that database of dimensioned drawings—they’re both delightful to explore.

A declarative router for service workers - JakeArchibald.com

An interesting proposal from Jake on a different way of defining how service worker fetch events could be handled under various conditions. For now, I have no particular opinion on it. I’m going to let this stew in my mind for a while.

The power of progressive enhancement

Andy’s slides:

We dive into why progressive enhancement is important and how we can leverage the power of Vanilla JavaScript, Web Components and modern CSS to deliver a hack-free, lightweight and progressive experience for our users.