Tags: a

The Improbable, Bold History of Space Concept Art – How We Get To Next

A brief history of space concept art—Norman Rockwell, Chesney Bonestell, Robert McCall, Pat Rawlings, David Meltzer …all the classics.

Indicating offline | justmarkup

Some interesting interface ideas here for informing users when a service worker is doing its magic.

In the future users may expect a site to work offline after visiting again, but until this happens, I think it is a good idea to let the users know about this feature.

Passing Away In Pixels – The Interconnected

Justin has been thinking about how we ensure our digital legacy survives our passing.

The Long, Remarkable History of the GIF

The history of the GIF—a tale of licensing, compression, and standards.

How we made the RioRun progressive web app | Info | The Guardian

The devs at The Guardian walk through the process of building a progressive web app for the Olympics. There were some gotchas with the life cycle of service workers, but the pay-off was worth it:

Once you get there though, it’s quite magical when you load the page on a phone, switch it to airplane mode, reload, and continue using the app as though nothing was wrong.

MarkApp: Building apps with HTML

Here’s an interesting collection from Lea: small JavaScript libraries that do their configuration declaratively via HTML, rather than in JavaScript.

Mozilla Open Design – branding without walls

Mozilla are updating their brand identity and they’re doing it in the open. A brave, but fascinating move.

Shadow DOM v1: self-contained web components | Web Fundamentals - Google Developers

An in-depth look at the current Shadow DOM spec. It’s well-written but I don’t think this will really click with me until I start playing around with it for myself.

It’s good to see that the examples have some thought given to fallback content.

There’s also a corresponding tutorial on custom elements

Psiu Puxa Wallpapers

Yummy wallpapers for your desktop, tablet, and phone, from NASA and ESA.

SPACEPLAN

I thoroughly enjoyed playing this game. On the face of it, it seems like little more than a cow-clicker, but the way that the plot and the gameplay unfolds is really delightful.

This feels like the kind of game that would only work on the web—keep it in a browser tab in the background, revisiting occasionally throughout the day.

Official Google Webmaster Central Blog: Helping users easily access content on mobile

Two pieces of good news from Google:

  1. 85% of websites qualify as mobile-friendly, so there’s no longer a need to explicitly label them as such in search results.
  2. Google will down-rank sites that have annoying pop-overs demanding you download an app or sign up to an email newsletter when you’re trying to read the damn page.

Why The Longplay Face | Collection

I giggled at quite of few of these mashups.

Empire of the Air: The Imperial Airship Service

The first in a series of articles looking at the history of British airships a century ago …just in time for the revival.

Writing Less Damn Code | HeydonWorks

I’m in complete agreement with Heydon here:

But it turns out the only surefire way to make performant Web Stuff is also to just write less. Minify? Okay. Compress? Well, yeah. Cache? Sounds technical. Flat out refuse to code something or include someone else’s code in the first place? Now you’re talking.

Just like the “mobile first” mindset, if you demand that everything must justify its existence, you end up with a better experience for everyone:

My favorite thing about aiming to have less stuff is this: you finish up with only the stuff you really need — only the stuff your user actually wants. Massive hero image of some dude drinking a latte? Lose it. Social media buttons which pull in a bunch of third-party code while simultaneously wrecking your page design? Give them the boot. That JavaScript thingy that hijacks the user’s right mouse button to reveal a custom modal? Ice moon prison.

Using Feature Queries in CSS ★ Mozilla Hacks – the Web developer blog

A thorough explanation of @supports from Jen, with plenty of smart strategies for using it in your CSS today.

If it weren’t for retargeting, we might not have ad blocking

The more I reflect on the current practices of the online advertising industry, the more I think that ad-blocking is a moral imperative.

10K Apart

The 10K competition—spiritual successor to Stewart Butterfield’s 5K.org—is back. This time there’s no escape clause with web fonts or jQuery. You can lazy-load in more content after the initial 10K payload …but whatever you’re building needs to be usable in that first 10K.

Give it a go. There’s nothing like having a constraint to really get the creative juices flowing.

What is React?

I’m in a similar position to Remy:

I don’t use React. I don’t really gravitate towards larger frameworks, only because my daily work doesn’t require it, and I’m personally more interested in the lower level techniques and parts of the web and JavaScript.

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.

gmetais/sw-delta: An incremental cache for the web

Here’s an interesting use of service workers: figure out the difference (the delta) between the currently-cached version of a file, and the version on the network, and then grab only the bits that have changed. It requires some configuration on the server side (to send back the diff) but it’s an interesting approach that could be worth keeping an eye on.

Download Blisk - a browser for web developers

A browser aimed specifically at web developers. It’s got some nice features around mobile device emulation.

Formspree

There’s this really common use-case I’ve seen at Codebar and Homebrew Website Club, where someone is making a static site, but they just want a contact form that sends data via email. This looks like a handy third-party service to do just that. No registration required: it’s all done via the value of the action attribute in the opening form tag:

action="https://formspree.io/your@email.com"

cursory hack

Sorcery!

(well technically, JavaScript + canvas, but y’know, to-may-to, to-mah-to)

The History of the URL: Path, Fragment, Query, and Auth - Eager Blog

Another dive into the archives of the www-talk mailing list. This time there are some gems about the origins of the input element, triggered by the old isindex element.

Start Building Accessible Web Applications Today - Course by @marcysutton @eggheadio

A great series of short videos from Marcy on web accessibility.

Refactoring CSS Without Losing Your Mind // Speaker Deck

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.

Can’t code, won’t code - cracking the secret of gender imbalance in STEM

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.

Creating An Accessible Modal Dialog

In the same vein as Hugo’s script, Ire walks through the steps involved in making an accessible modal window. Seeing all the thinking and code required for this really highlights the need for a way of making the document in the background inert.

“Researching Design Systems,” an article by Dan Mall

Dan has been researching the history of design systems, annotating as he goes.

Stuff I wish I’d known sooner about service workers

Some helpful “gotchas” that could save you some frustration if you’re starting out with service workers.

Progressive Enhancement for JavaScript App Developers | De Voorhoede

Build JS apps responsibly - cover your basics, render strategically and enhance into true apps.

sw-toolbox

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.

The Future of Browser History — Free Code Camp

I’ve been thinking about this a lot lately. It feels like a user’s browser history is an incredibly rich seam of valuable information just waiting to be presented in a more interesting way.

The History of Email - Eager Blog

The ancestors of the Internet were kind enough to give us a communication standard which is free, transparent, and standardized. It would be a shame to see the tech communication landscape move further and further into the world of locked gardens and proprietary schemas.

The Forgotten Kaleidoscope Craze in Victorian England | Atlas Obscura

A wonderful investigation of a culture-shifting mobile device: the kaleidoscope. A classic Gibsonian example of the street finding its own uses for technology, this story comes complete with moral panics about the effects of augmenting reality with handheld devices.

(I’m assuming the title wasn’t written by the author—this piece deals almost exclusively with pre-Victorian England.)

CSS Writing Mode

Some nifty layout tricks using the writing-mode property in CSS.

Service worker meeting notes - JakeArchibald.com

Jake has written up the notes from the most recent gathering to discuss service workers. If you have any feedback on any of the proposed changes or additions to the spec, please add them. This proposal is the biggie:

We’re considering allowing the browser to run multiple concurrent instances of a service worker.

Official Google Webmaster Central Blog: AMP your content - A Preview of AMP’ed results in Search

Google’s search results now include AMP pages in the regular list of results (not just in a carousel). They’re marked with a little grey lightning bolt next to the word AMP.

The experience of opening of those results is certainly fast, but feels a little weird—like you haven’t really gone to the website yet, but instead that you’re still tethered to the search results page.

Clicking on a link within an AMP spawns a new window, which reinforces the idea of the web as something separate to AMP (much as they still like to claim that AMP is “a subset of HTML”—at this point, it really, really isn’t).

React Isomorphic Demo

It is possible to use React without relying completely on client-side JavaScript to render all your content—though it’s certainly not the default way most tutorials teach React. This ongoing tutorial aims to redress that imbalance.

Besides the main benefit of server rendering giving faster page loads, it also enables large amounts of the site to run without JavaScript. There are many reasons why you would want this, but my personal reasons are that it allows you to completely drop support JavaScript in older browsers, but still have the site function.

25 years ago the world changed forever | W3C Blog

On August 6th, 1991, Tim Berners-Lee sent a message to alt.hypertext newsgroup announcing his WorldWideWeb project.

ServiceWorker: A Basic Guide to BackgroundSync

A nice introduction to using Service Workers to enable syncing in the background: when the user is offline, tasks get queued up and then when the user is back online, those tasks execute.

Horizontal lines around centered content

Here’s another clever CSS technique. It uses flexbox to add horizontal lines either side of centred content.

CSS only scroll indicator

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.)

Battery Status readout as a privacy risk

The security research that went into improving the spec for the Battery Status API. This is why it’s so important that the web holds itself to high standard.

Even most unlikely mechanisms bring unexpected consequences from privacy point of views. That’s why it is necessary to analyze new features, standards, designs, architectures - and products with a privacy angle. This careful process will yield results, decrease the number of issues, abuses and unwelcome surprizes.

Hidden Expectations - daverupert.com

Over the years I’ve come to realize that most difficult part of making websites isn’t the code, it’s the “hidden expectations”, the unseen aspects I didn’t know were my responsibility when I started: Accessibility, Security, Performance, and Empathy.

Web Components and progressive enhancement - Adam Onishi

Adam and I share the same hopes and frustrations with web components. They can be written in a resilient, layered way that allows for progressive enhancement, but just about every example out there demonstrates a “my way or the highway” approach to using them.

We were chatting about this in the Design Systems slack channel, and it helped clarify some of my thoughts. I’ll try to poop out a blog post about this soon.

The Blog That Disappeared - The New York Times

Fortunately there’s a back-up on the Internet Archive, but this tale of Google’s overnight destruction of fourteen years of writing is truly infuriating.

When we use their services, we trust that companies like Google will preserve some of the most personal things we have to share. They trust that we will not read the fine print.

When you pitch your tent in someone else’s walled garden, they can tear down your home whenever they want.

The Lumpy Web - Tales of a Developer Advocate

Paul argues that the biggest problems for interoperability on the web don’t come from support (or lack of support) for entire features, but from the frustrating inconsistencies when features land in different browsers at different times with different implementations:

  • Platform inconsistencies hurt us more than big feature differences, we should start to try and prioritize aligning the platform
  • We need better tools to help us understand what the inconsistencies are and guidance on how to manage them
  • Developers should raise more issues to keep browser vendors accountable when there are differences

Megnut – I’ve been thinking a lot

Sixteen years on, this still rings true.

I realized there are dot-com people and there are web people. Dot-com people work for start-ups injected with large Silicon Valley coin, they have options, they talk options, they dream options. They have IPOs. They’re richer after four months of “web” work than many web people who’ve been doing it since the beginning. They don’t have personal sites. They don’t want personal sites. They don’t get personal sites. They don’t get personal. Web people can tell you the first site they ever saw, they can tell you the moment they knew: This, This Is It, I Will Do This. And they pour themselves into the web, with stories, with designs, with pictures.

Web Design in 4 minutes

This is a wonderful way of progressively explaining the layered approach to building for the web that Charlotte was teaching in her Codebar workshop.

FontShop | The Fonts of Star Trek

Yves Peters examines the typography of Star Trek. Unlike Typeset In The Future, which looks at on-screen typography, this article dives into titles and promotional posters.

A Code Review, Or Yet Another Reason to Love the Web | Brad Frost

I love this back and forth between Brad and Jonathon. I think they’ve both got some good ideas:

  • I agree with Brad that you can start marking up these kind of patterns before you’ve got visual designs.
  • I agree with Jonathon that it’s often better to have a generic wrapper element to avoid making assumptions about which elements will be used.

The Woman Who Put Men On The Moon [Comic]

Margaret Hamilton:

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.

You Know What? Fuck Dropdowns

An entertaining presentation from South By Southwest on the UI element of last resort.

It’s funny because it’s true.

shawnbot/custom-elements: All about HTML Custom Elements

A good introduction to custom elements, one piece of the web components stack.

That said, when using custom elements—or anything involving JavaScript, for that matter—you should always design experiences for progressive enhancement, and plan for the possibility that JavaScript isn’t enabled or available.

Hmmm …that’s kind of hard when JavaScript is required to make custom elements work at all.

Join Fractal on Slack!

If you’re planning on giving Fractal a test drive, jump into this Slack channel. Mark and others will be able to help you out with any questions that aren’t covered in the docs.

AMP Design Principles

These design principles are meant to guide the ongoing design and development of AMP. They should help us make internally consistent decisions.

I’ve added these to my collection of design principles.

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!

Sci Hack Day Dublin on Twitter

When I designed the Science Hack Day logo, I never expected to one day see it recreated with florescent E. coli.

Science and Culture: The value of a good science hack

The story of Science Hack Day …as told in the Proceedings of the National Academy of Sciences of the United States of America!

(a PDF version is also available)

Stop the overuse of overflow menus — Medium

The trouble with overflow menus is that you didn’t actually take anything away, you just obnoxiously obfuscated it.

Words of warning and advice from Daniel.

Instead of prioritizing, we just sweep complexity under the rug and pretend that it doesn’t exist.

Adding Service Worker to a simple website - rossta.net

A nice little walkthrough of a straightforward Service Worker for a content-based site, like a blog.

Fractal v1.0 | Clearleft

Mark sets the scene for Fractal, the fantastic tool he’s built for generating pattern libraries.

This 1.0 release is just a start; it hopefully provides a solid foundation on which we (and anyone else who wants to contribute) can build and expand on in the future.

Exciting!

Fractal Documentation

This is the tool that we use at Clearleft to generate pattern libraries. It’s pretty damn cool. Mark built it. It’s pretty damn cool.

The Service Worker Lifecycle

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.

Vox Product Accessibility Guidelines

I’m not a fan of the checklist approach to accessibility, but this checklist of checklists makes for a handy starting point and it’s segmented by job role. Tick all the ones that apply to you, and this page will generate a list for you to copy and paste.

Exploring the Physical Web (Without Buying Beacons) — Medium

Well, this is interesting! It turns out you can turn your laptop into a beacon for broadcasting a URL to devices that support The Physical Web.

Design Systems

A newsletter dedicated to all things related to design systems, style guides, and pattern libraries.

HTTPS Adoption *doubled* this year

Slowly but surely the web is switching over to HTTPS. The past year shows a two to threefold increase.

Qualities of Successful Pattern Libraries: Pick Any Two - Cloud Four

I think Tyler’s onto something here:

I noticed three qualities that recurred in different combinations. Without at least two, the projects seemed doomed to failure.

  1. User-Friendly
  2. Collaborative
  3. Integrated

I certainly think there’s a difference in how you approach a pattern library intended as a deliverable (something we do a lot of at Clearleft) compared to building a pattern library for an ongoing ever-evolving product.

Teaching web development to design students (Phil Gyford’s website)

Phil’s write-up of teaching web development to beginners is immensely valuable in the run-up to the Codebar workshop that Charlotte is running this weekend. This bit gave both us a real “a-ha!” moment:

It only occurred to me at the end that I should have encouraged the students to try and fix each other’s bugs. If anyone had problems I’d go round and help people and often it’d be a little typo somewhere. Helping each other would acknowledge that this is entirely normal and that a second pair of eyes is often all that’s needed.

Questions for our first 1:1 | Lara Hogan

Shamefully, I haven’t been doing one-to-ones with my front-end dev colleagues at Clearleft, but I’m planning to change that. This short list of starter questions from Lara will prove very useful indeed.

Adapting to Input · An A List Apart Article

Jason breaks down the myths of inputs being tied to device form factors. Instead, given the inherent uncertainty around input, the only sensible approach is progressive enhancement.

Now is the time to experiment with new forms of web input. The key is to build a baseline input experience that works everywhere and then progressively enhance to take advantage of new capabilities of devices if they are available.

The best of Google I/O 2016 | Andrew Betts

Andrew picks out his favourite bits from this year’s Google I/O, covering web payments, CSS containment, and—of course—Service Workers and progressive web apps, although he does note (and I concur):

I wish Google would focus as much attention on ‘normal’ sites that perform navigations as they do on so called ‘app-shell’ (which is just a new name for single-page apps, as far as I can tell), but then many people will be building SPAs and these recipes will make those apps fly. In news publishing we seem to flip flop between traditional page navigations and SPAs, but I’ve never found a SPA news site (or a native app) that I really like more than a normal website. Maybe a really good progressive web app will change that. But I’m not convinced.

Still, as he says:

All this really just underscores how flexible ServiceWorker is and that with it we can disagree on what the right solution is, but we can all get what we want anyway.

A Comprehensive Guide to Font Loading Strategies—zachleat.com

A terrific rundown of all your options when it comes to web font loading.

The Business Case for Progressive Web Apps - Cloud Four

Jason looks at the business reasons for and against building progressive web apps. In short, there’s everything to gain and nothing to lose.

Seriously, why would you not add a Service Worker and a manifest file to your site? (assuming you’re already on HTTPS)

Dennis Cooper fears censorship as Google erases blog without warning | Books | The Guardian

Two weeks ago, writer and artist Dennis Cooper was checking his Gmail when something peculiar happened: the page was refreshed and he was notified that his account had been deactivated – along with the blog that he’d maintained for 14 years.

This is why the Indie Web exists.

His advice to other artists who work predominantly online is to maintain your own domain and back everything up.

The Progress of Web Apps | Microsoft Edge Dev Blog

The roadmap for progressive web apps from Microsoft; not just their support plans, but also some ideas for distribution.

The History of the URL: Domain, Protocol, and Port - Eager Blog

From the ARPANET to the internet, this is a great history of the Domain Name System:

Root DNS servers operate in safes, inside locked cages. A clock sits on the safe to ensure the camera feed hasn’t been looped. Particularly given how slow DNSSEC implementation has been, an attack on one of those servers could allow an attacker to redirect all of the Internet traffic for a portion of Internet users. This, of course, makes for the most fantastic heist movie to have never been made.

Snyk’s Style Guide

…and Anna describes the process of creating the Snyk style guide.

Creating a Bocoup style guide - Bocoup

Susan describes the process behind creating Bocoup’s style guide…

Making And Maintaining Atomic Design Systems With Pattern Lab 2 – Smashing Magazine

A walkthrough of what’s new in Pattern Lab 2. It’s really interesting to see the convergent evolution of ideas here with what’s brewing in Fractal at Clearleft.

The Conjoined Triangles of Senior-Level Development - The Frontside

This is relevant to my interests because I think I’m supposed to be a senior developer. Or maybe a technical director. I’m really not sure (job titles suck).

Anyway, I very much appreciate the idea that a technical leadership position isn’t just about technical skills, but also communication and connectedness.

When we boiled down what we’re looking for, we came away with 12 traits that divide pretty cleanly along those three areas of responsibility: technical capability, leadership, and community.

For someone like me with fairly mediocre technical capability, this is reassuring.

Now if I only I weren’t also mediocre in those other areas too…

Legibility App

A handy tool for testing the legibility of different typefaces under all sorts of conditions.

CSS Diner - Where we feast on CSS Selectors!

Here’s a fun game to help practice those CSS selectors.

How to Make Sense of Any Mess

Did you know that Abby Covert’s book is available online in its gloriously hyperlinked entirety?

EmberCamp London Keynote 2016 // Speaker Deck

I really, really like what Ember is aiming for here:

First, we deliver the raw content, ensuring those on slow connections or without JavaScript get they’re after as soon as possible. Next, we load the minimum set of JavaScript needed to interactivity for that page, keeping transfer time and parsing time low. Once the user has an interactive page, we can start preemptively loading other parts of the application, including frequently-accessed data.

That’s how you get the holy grail of resilience and performance:

Subsequent visits and interactions are therefore nearly instantaneous, because they don’t rely on the network.

I sincerely hope other frameworks are paying attention to this layered approach.

Oh, and I also like this observation:

There’s an age-old argument about the difference between “web pages” and “web apps”. In reality, there’s a continuum between the two.

Moonscape – The Apollo 11 Moonwalk in HD

Moonscape is a free and freely shareable high-definition documentary about the first manned Moon landing. Funded and produced by space enthusiasts from all over the world, it shows the full Apollo 11 landing and moonwalk, using only the original audio, TV and film footage and the original photographs, rescanned and restored from the best available sources, with full English subtitles (other languages will follow).

CSS Containment Module Level 3

A way of declaring the scope of an element’s layout and paint styles, which browsers can then use as a hint to optimise performance. It’s already shipping in Chrome and Opera.

ET Book · Edward Tufte on GitHub

I’ve always loved the way that Edward Tufte consistently uses Bembo to typeset his books. Here’s a version made for screen and freely licensed.

The Search For The Holy Grail: How I Ended Up With Element Queries, And How You Can Use Them Today – Smashing Magazine

An attempt to crack the element query nut. It relies on executing JavaScript at runtime so it doesn’t feel production-ready to me unless you’re already relying on JavaScript to render or style your content. Still, there’s a lot of good thinking has gone into the syntax—it’s worth investigating for that reason alone.

How Will Web Components Change CSS Architecture? - Snook.ca

Depending on how you’re currently structuring your CSS and class attributes, web components might not make all that much of a difference to your workflow.

Chromelens

A handy Chrome extension to simulate different kinds of visual impairment.

Original Apollo 11 guidance computer (AGC) source code.

Margaret Hamilton’s code after scanning and transcribing.

The code is commented too. But there might still be issues.

Typography Handbook

You can think of this as a short book or a long article, but either way it’s a handy overview of typography on the web:

A concise, referential guide on best web typographic practices.

Mind you, I take issue with this assertion:

Establishing a vertical rhythm is simple.