Tags: ar

2720

sparkline

Building a CSS-only image gallery (with fallbacks)

A great step-by-step walkthrough of building a really nice image gallery without any JavaScript.

The end result is really impressive but there’s still the drawback that the browser history will be updated every time you click on an image thumbnail (because the functionality relies on ID attributes referenced via :target). Depending on your use-case, that may or may not be desirable.

A Look Back at the History of CSS | CSS-Tricks

The evolution of CSS, as told by the author of the excellent History of the Web newsletter.

@20 (Ftrain.com)

Paul Ford marks two decades of publishing on his own site.

Some days I want to erase this whole thing—much of the writing is sloppy and immature, and I was, too. But why bother to hit the red button? The path of the Internet has seen fit to do that for me.

Failing to distinguish between a tractor trailer and the bright white sky | booktwo.org

James talks about automation and understanding.

Just because a technology – whether it’s autonomous vehicles, satellite communications, or the internet – has been captured by capital and turned against the populace, doesn’t mean it does not retain a seed of utopian possibility.

FriendChip Beacons - With support of Eddystone and Physical Web

I quite like the idea of broadcasting my URL from a friendchip bracelet.

“async” attribute on img, and corresponding “ready” event · Issue #1920 · whatwg/html

It looks like the async attribute is going to ship in Chrome for img elements:

This attribute would have two states:

  • “on”: This indicates that the developer prefers responsiveness and performance over atomic presentation of content.
  • “off”: This indicates that the developer prefers atomic presentation of content over responsiveness.

Creating accessible menus-Part 1

James has been tweaking the accessibility of his site navigation. I’m looking forward to the sequel.

The Nature of Code

A web book with interactive code examples.

How can we capture the unpredictable evolutionary and emergent properties of nature in software? How can understanding the mathematical principles behind our physical world help us to create digital worlds? This book focuses on the programming strategies and techniques behind computer simulations of natural systems using Processing.

18F: Digital service delivery | Building a large-scale design system: How we created a design system for the U.S. government

Maya Benari provides an in-depth walkthrough of 18F’s mission to create a consistent design system for many, many different government sites.

When building out a large-scale design system, it can be hard to know where to start. By focusing on the basics, from core styles to coding conventions to design principles, you can create a strong foundation that spreads to different parts of your team.

There’s an interface inventory, then mood boards, then the work starts on typography and colour, then white space, and finally the grid system.

The lessons learned make for good design principles:

  • Talk to the people
  • Look for duplication of efforts
  • Know your values
  • Empower your team
  • Start small and iterate
  • Don’t work in a vacuum
  • Reuse and specialize
  • Promote your system
  • Be flexible

INCREDIBLE DOOM

A print & web comic series about 90’s kids making life-threatening decisions over the early internet.

The first issue is online and it’s pretty great.

Robtober 2017 | Rob Weychert

What an excellent example of a responsive calendar!

JavaScript Systems Music

A massively in-depth study of boundary-breaking music, recreated through the web audio API.

  1. Steve Reich - It’s Gonna Rain (1965)
  2. Brian Eno - Ambient 1: Music for Airports, 2/1 (1978)
  3. Brian Eno - Discreet Music (1975)

You don’t have to be a musician or an expert in music theory to follow this guide. I’m neither of those things. I’m figuring things out as I go and it’s perfectly fine if you do too. I believe that this kind of stuff is well within reach for anyone who knows a bit of programming, and you can have a lot of fun with it even if you aren’t a musician.

One thing that definitely won’t hurt though is an interest in experimental music! This will get weird at times.

An Epitaph for Newsvine » Mike Industries

Newsvine has closed. Mike reflects on what he built, with a particular eye to the current online news situation.

When we look at how the average person’s news and media diet has changed over the last decade or so, we can trace it directly back to the way these and other modern organizations have begun feeding us our news. Up until 10 or 15 years ago, we essentially drank a protein shake full of news. A good amount of fruits and vegetables, some grains, some dairy, some tofu, and then a little bit of sugar, all blended together. Maybe it wasn’t the tastiest thing in the world but it kept us healthy and reasonably informed. Then, with cable news we created a fruit-only shake for half the population and a vegetable-only shake for the other half. Then with internet news, we deconstructed the shake entirely and let you pick your ingredients, often to your own detriment. And finally, with peer-reinforced, social news networks, we’ve given you the illusion of a balanced diet, but it’s often packed with sugar, carcinogens, and other harmful substances without you ever knowing. And it all tastes great!

There’s also this interesting litmus test for budding entrepreneurs:

We didn’t know for sure if it was going to work, but the day we decided we’d be happy to have tried it even if it failed was the day we ended up quitting our jobs (incidentally, if you are thinking about leaving your job for a new risky thing, this is the acid test I recommend).

Web Components: The Long Game – Infrequently Noted

One of the things we’d hoped to enable via Web Components was a return to ctrl-r web development. At some level of complexity and scale we all need tools to help cope with code size, application structure, and more. But the tender, loving maintainance of babel and webpack and NPM configurations that represents a huge part of “front end development” today seems…punitive. None of this should be necessary when developing one (or a few) components and composing things shouldn’t be this hard. The sophistication of the tools needs to get back to being proportional with the complexity of the problem at hand.

I completely agree with Alex here. But that’s also why I was surprised and disheartened when I linked to Monica’s excellent introduction to web components that a package manager seemed to be a minimum requirement.

When Should You Use Which Image Format? JPG? PNG? SVG?

Amber has been investigating which image formats make sense for which situations.

Choosing image format is only one step towards optimising images on the web. There are many, many other steps to consider, and so, so much to learn!

When the news goes sideways – James Donohue – Medium

The BBC has been experimenting with some alternative layouts for some articles on mobile devices. Read on for the details, but especially for the philosophical musings towards the end—this is gold dust:

Even the subtext of Google’s marketing push around Progressive Web Apps is that mobile websites must aspire to be more like native apps. While I’m as excited about getting access to previously native-only features such as offline support and push notifications as the next web dev, I’m not sure that the mobile web should only try to imitate the kind of user interfaces that we see on native.

Do mobile websites really dream of being native apps, any more than they dreamt of being magazines?

A Personal Computer for Children of All Ages (PDF)

Alan Kay’s initial description of a “Dynabook” written at Xerox PARC in 1972.

Draggable JS – JavaScript drag and drop library

This looks like a very nice little JavaScript library for drag’n’drop. The site works as an example of the functionality in action.

Brought to you by Shopify, the company enabling Breitbart.

CSS and SVG animation workshop by codebarbrighton

There were two days of Codebar workshopping on the weekend as part of the Brighton Digital Festival. Cassie talked people through this terrific CSS animation tutorial, making this nifty Brighton-based piece.  

Photon Design System

Most design systems I link to are for websites, so interesting to see this one for a web browser: Firefox.

There are guidelines for tone of voice and motion design as well as the usual guidelines for typography, colour, and interface elements.