Link archive: January, 2018

Nature takes over – ROMAIN THIERY | Photographe professionnel

Ballardian spaces.

Stimulus 1.0: A modest JavaScript framework for the HTML you already have

All our applications have server-side rendered HTML at their core, then add sprinkles of JavaScript to make them sparkle.

Yup!—I’m definitely liking the sound of this Stimulus JavaScript framework.

It’s designed to read as a progressive enhancement when you look at the HTML it’s addressing.

Keeping aspect-ratio with HTML and no padding tricks

A clever little hack to preserve an aspect ratio for any HTML element.

We use two important attributes:

• SVG knows how to maintain aspect ratio
• CSS grid knows how to make overlapping items affect each other’s size

A Tale of Two Rooms: Understanding screen reader navigation | The Paciello Group

A nice analogy to help explain what it’s like to navigate with a screen reader—and how much well-structured markup can help make it easier.

HTML templating with vanilla JavaScript ES2015 Template Literals – Ben Frain

Ben makes the very good point that template literals allow you to do a lot of useful stuff that previously would’ve required a library:

Template Literals afford a lot of power with no library overhead. I will definitely continue to use them when complexity of handlebars or similar is overkill.

Chris made a similar observation a little while back. Throw in a little script like lit-html and now you’ve got DOM-diffing too. You might not need insert-current-framework-name after all.

Kinda cool that these mini-libraries exist that do useful things for us, so when situations arise that we want a feature that a big library has, but don’t want to use the whole big library, we got smaller options.

How to use variable fonts in the real world | Clagnut

The gorgeous website for this year’s Ampersand conference might well be one of the first commercial uses of variable fonts in the wild. Here, Richard documents all the clever things Mark did to ensure good fallbacks for browsers that don’t yet support variable fonts.

The Power of Serverless

Chris has set up a whole site dedicated to someone-else’s-server sites with links to resources and services (APIs), along with ideas of what you could build in this way.

Here’s one way to think about it: you can take your front-end skills and do things that typically only a back-end can do. You can write a JavaScript function that you run and receive a response from by hitting a URL. That’s sometimes also called Cloud Functions or Functions as a Service, which are perhaps better names, but just a part of the whole serverless thing.

Arch Mission

Off-site backups of humanity’s knowledge and culture, stored in different media (including pyramidal crystals) placed in near-Earth orbit, the moon, and Mars.

We are developing specialized next-generation devices that we call Archs™ (pronounced “Arks”), which are designed to hold and transmit large amounts of data over long periods of time in extreme environments, including outer space and on the surfaces of other planetary bodies.

Our goal is to collect and curate important data sets and to install them on Archs™ that will be delivered to as many locations as possible for safekeeping.

To increase the chances that Archs™ will be found in the future, we aim for durability and massive redundancy across a broad diversity of locations and materials – a strategy that nature itself has successfully employed.

Robin Rendle › How to Read the Internet

The past, present and future of RSS.

If I had to choose my Twitter account over my RSS setup I wouldn’t hesitate for a second — I’d throw Twitter right into the ocean.

Global Diversity CFP Day

Julie is organising the Brighton edition of the Global Diversity Call-For-Proposals Day (and I’m providing the venue) on Saturday, February 3rd from 11am to 3pm. If you’ve ever wanted to speak at a conference, please come along:

On Saturday 3rd February 2018 there will be numerous workshops hosted around the globe encouraging and advising newbie speakers to put together your very first talk proposal and share your own individual perspective on any subject of interest to people in tech.

Microblogging / Paul Robert Lloyd

Paul weighs up the pros and cons of using silos (like Twitter and Facebook) and using the Indie Web. This bit made me want to stand on my desk and cry, “Oh captain, my captain!”:

“The market has proven that consumers want freely available social networks that are easy to use, and used by everyone else. Only centralised services can provide this, not familiarity with a command line and a succession of acronyms and protocols”, says my not entirely fictional naysayer.

I’m not sure this argument follows. While the human desire to connect and communicate easily with each other has been proven many times over, it’s becoming clear that all-encompassing centralised networks are not the solution. That way lies algorithmically-skewed streams of consciousness, layered upon sordid business models and Californian ideology. Fuck that.

The web is agreement, but that doesn’t mean we agree to use the same websites.

PonziCoin

Yet another cryptocurrency …except that this was meant to be satire.

This has gotten crazy out of hand, I apologize but we will no longer be selling PonziCoin on this site because this was a joke.

Buttondown

This looks like an interesting alternative to TinyLetter for writing and sending email newsletters, like all the cool kids are doing.

The King vs. Pawn Game of UI Design · An A List Apart Article

I love this analogy and I love this approach—starting with the simplest possible thing and building up from there. This article talks about taking that approach for UI design, but it’s pretty much the same thing I talk about for development in Resilient Web Design.

As Shakespeare once didn’t say, progressive enhancement by any other name would smell as sweet.

Safari 11.1

Squee! The next time there’s an update for OS X and iOS, Safari will magically have service worker support! Not only that, but Safari on iOS will start using the information in web app manifests for adding to home screen.

That’s an impressive turnaround.

Explore Georeferenced Maps - Spy viewer - National Library of Scotland

This is a fascinating way to explore time and place—a spyglass view of hundred year old maps overlaid on the digital maps of today.

React, Redux and JavaScript Architecture

I still haven’t used React (I know, I know) but this looks like a nice explanation of React and Redux.

The IndieWeb outside of Facebook is full of opportunities - The Garage

A nice description of syndication via POSSEing.

(I never thought I’d find myself linking to quality content on Go Daddy.)

Doctype Brighton

A new webby meet-up in Brighton organised by Davs Howard. It’ll be one the first Thursday of the month at The Joker. I often find myself in The Joker on Thursday nights anyway (for the wings) so I’ll be heading along to the inaugural event on February 1st.

Ampersand Web Typography Conference | 29 June 2018 | Brighton, UK

Save the date! The best web typography conference in the world is back in Brighton on June 29th, and this time it’s at the best venue: The Duke Of York’s.

In fact, you can do more than saving the date: you can snap up a super early bird ticket for whopping £85 saving.

Seedship

A thoroughly enjoyable adventure game in your browser. You are the AI of a colony starship. Humanity’s future is in your hands.

We need more phishing sites on HTTPS!

All the books, Montag.

If we want a 100% encrypted web then we need to encrypt all sites, despite whether or not you agree with what they do/say/sell/etc… 100% is 100% and it includes the ‘bad guys’ too.

Bad Month for the Main Thread - daverupert.com

JavaScript is CPU intensive and the CPU is the bottleneck for performance.

I’m on Team Dave.

But darn it all, I just want to build modular websites using HTML and a little bit of JavaScript.

Book - Broad Band — Claire L. Evans

Coming to a bookshelf near you in March 2018: the untold story of the women who made the internet.

Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility | CSS-Tricks

What it says on the tin—a few suggestions to ensure the accessibility of your site.

People and tooling | susan jean robertson

I can’t help but also wonder if we’re using tools to solve problems they weren’t meant to solve, like how to communicate with or manage a team.

Fears of the IndieWeb

Most of my online friends and acquaintances will never understand or participate in the IndieWeb, and so I require a bridge between these worlds. On one side I choose what content to post and how it is stored, and it exists mainly on an island that few visit regularly. On the other side is nearly everyone I know, blissfully ignorant of my real home on the web and unable to see any content shared there without manual intervention or working plugins.

This does not all seem bad, though. Maintaining control will require more attention be placed on managing my content, and this time must come from somewhere. I imagine that I’ll slowly begin using social media less, writing more, and learning more about how to develop solutions to problems that arise within my setup.

Web Trend Map 2018 – iA

If you are one of those old or young bloggers, please join in. Drop Facebook, drop Twitter and drop Medium for original thought. Own your traffic. You can use them to engage in discussion. But don’t get lost in there. Write daily. Publish as often as you have something to say. Link to other blogs.

Finding Dead CSS – CSS Wizardry

Here’s a clever idea from Harry if you’re willing to play the long game in tracking down redundant CSS—add a transparent background image to the rule block and then sit back and watch your server logs for any sign of that sleeper agent ever getting activated.

If you do find entries for that particular image, you know that, somehow, the legacy feature is potentially still accessible—the number of entries should give you a clue as to how severe the problem might be.

Dude, you broke the future! - Charlie’s Diary

The transcript of a talk by Charles Stross on the perils of prediction and the lessons of the past. It echoes Ted Chiang’s observation that runaway AIs are already here, and they’re called corporations.

History gives us the perspective to see what went wrong in the past, and to look for patterns, and check whether those patterns apply to the present and near future. And looking in particular at the history of the past 200-400 years—the age of increasingly rapid change—one glaringly obvious deviation from the norm of the preceding three thousand centuries—is the development of Artificial Intelligence, which happened no earlier than 1553 and no later than 1844.

I’m talking about the very old, very slow AIs we call corporations, of course.

Secure Contexts Everywhere | Mozilla Security Blog

I’m all in favour of HTTPS everywhere, but this kind of strong-arming just feels like blackmail to me.

All new CSS properties won’t work without HTTPS‽ Come on!

I thought Mozilla was better than this.

Laws of UX

1. Fitts’s Law
2. Hick’s Law
3. Jakob’s Law
4. Law of Prägnanz
5. Law of Proximity
6. Miller’s Law
7. Parkinson’s Law
8. Serial Position Effect
9. Tesler’s Law
10. Van Restorff Effect

Not listed:

1. Murphy’s Law
2. Sturgeon’s Law

How To Make A Drag-and-Drop File Uploader With Vanilla JavaScript — Smashing Magazine

A step-by-step guide to implementing drag’n’drop, and image previews with the Filereader API. No libraries or frameworks were harmed in the making of this article.

Regarding the Em Dash - The Millions

I like a good em dash, me.

Better Typography with Font Variants - Jonathan Harrell | CSS Blogger & Teacher, UI/UX Designer, Front-End Developer

A quick guide to all the font-variant-... stuff in CSS.

A techie’s rough guide to GDPR — Cennydd Bowles

In this excerpt from his forthcoming book, Cennydd gives an overview of what GDPR will bring to the web. This legislation is like a charter of user’s rights, and things don’t look good for the surveillance kings of online advertising:

The black box will be forced open, and people will find it’s full of snakes.

Meet the New Dialog Element

Move over, JavaScript alerts; HTML dialogs are here.

russellgoldenberg/scrollama: Scrollytelling with IntersectionObserver.

This looks like a handy JavaScript library for scroll-based events. But “scrollytelling?” No. Just …no.

TASAT – There’s a Story about That

An initiative by David Brin and the Arthur C. Clarke Center For Human Imagination at UC San Diego. You are confronted with a what-if scenario, and your task is to recall any works of speculative fiction that have covered it.

Accessing more than a hundred years of science fiction thought experiments, TASAT taps into a passionate, global community of writers, scholars, librarians, and fans. We aim to curate a reading list applicable to problems and possibilities of tomorrow.

Social Decay on Behance

If only our digital social networks were to exhibit this kind of faded grandeur when they no longer exist.

Asgardia - The Space Nation

Remember those offshore forts that would get taken over and repurposed as tax/data havens? Well, this is like that …but in space. Half design fiction, and half ponzi scheme, this will give those libertarian seasteaders a run for the money (in a made-up currency, of course).

The Human Computer’s Dreams Of The Future by Ida Rhodes (PDF)

From the proceedings of the Electronic Computer Symposium in 1952, the remarkable Ida Rhodes describes a vision of the future…

My crystal ball reveals Mrs. Mary Jones in the living room of her home, most of the walls doubling as screens for projected art or information. She has just dialed her visiophone. On the wall panel facing her, the full colored image of a rare orchid fades, to be replaced by the figure of Mr. Brown seated at his desk. Mrs. Jones states her business: she wishes her valuable collection of orchid plants insured. Mr. Brown consults a small code book and dials a string of figures. A green light appears on his wall. He asks Mrs. Jones a few pertinent questions and types out her replies. He then pushes the start button. Mr. Brown fades from view. Instead, Mrs. Jones has now in front of her a set of figures relating to the policy in which she is interested. The premium rate and benefits are acceptable and she agrees to take out the policy. Here is Brown again. From a pocket in his wall emerges a sealed, addressed, and postage-metered envelope which drops into the mailing chute. It contains, says Brown, an application form completely filled out by the automatic computer and ready for her signature.

clean-code-javascript

Opinionated ideas on writing JavaScript. I like it when people share their approaches like this.

Third-Party Scripts | CSS-Tricks

Hell is other people’s JavaScript.

Third-party scripts are probably the #1 cause of poor performance and bad UX on the web.

Saving Your Web Workflows with Prototyping · Matthias Ott – User Experience Designer

A well-written (and beautifully designed) article on the nature of the web, and what that means for those of us who build upon it. Matthias builds on the idea of material honestly and concludes that designing through prototypes—rather than making pictures of websites—results in a truer product.

A prototyping mindset means cultivating transparency and showing your work early to your team, to users – and to clients as well, which can spark excited conversations. A prototyping mindset also means valuing learning over fast results. And it means involving everyone from the beginning and closely working together as a team to dissolve the separation of linear workflows.

TNZ Pattern Library Docs

New Zealand has a pattern library (in Fractal, no less).

Turning Design Mockups Into Code With Deep Learning - FloydHub Blog

Training a neural network to do front-end development.

I didn’t understand any of this.

Legends of the Ancient Web

An absolutely fantastic talk (as always) from Maciej, this time looking at the history of radio and its parallels with the internet (something that Tom Standage touched on his book, Writing On The Wall). It starts as a hobbyist, fun medium. Then it gets regulated. Then it gets used to reinforce existing power structures.

It is hard to accept that good people, working on technology that benefits so many, with nothing but good intentions, could end up building a powerful tool for the wicked.

My Pod

Merlin mentioned this service on a recent podcast episode. If you have an Amazon Echo, you can authenticate with this service and then point it at an RSS feed …like your Huffduffer feed, for example. From then on, Alexa becomes a Huffduffer player.

Tiny Wins

Making low effort/high impact changes to interfaces.

This reminds me of something we talk about at Clearleft a lot called “tiny lessons”—it’s the idea that insights and learnings don’t always have to be big and groundbreaking; there’s a disproportionate value in sharing the small little things you learn along the way.

Little UI details from @steveschoger, in HTML and CSS

Suggestions for small interface tweaks.

The internet doesn’t suck - Mark Surman

We need to keep our eyes on the prize: making sure the internet does not suck for as many people as possible for as long as possible. That’s the work we need to be doing. And we should do it not from a place of fear or despair, but from a place of joy.

AMP letter

I signed this open letter.

We are a community of individuals who have a significant interest in the development and health of the World Wide Web (“the Web”), and we are deeply concerned about Accelerated Mobile Pages (“AMP”), a Google project that purportedly seeks to improve the user experience of the Web.

Hypertext and Our Collective Destiny

The text of a fascinating talk given by Tim Berners-Lee back in 1995, at a gathering to mark the 50th anniversary of Vannevar Bush’s amazing article As We May Think. The event also drew together Ted Nelson, Alan Kay, Douglas Engelbart, and Bob Kahn!

Thanks to Teodara Petkova for pointing to this via the marvellous Web History Community Group.

Trends in Digital Tech for 2018 - Peter Gasston

Peter looks into his crystal ball for 2018 and sees computers with eyes, computers with ears, and computers with brains.

The Origin of Stimulus

I really like the look of this markup-driven JavaScript library from the same people who brought us the pjax library Turbolinks.

The philosophy behind these tools matches my own philosophy (which I think is one of the most important factors in choosing a tool that works for you, not against you).

Improving URLs for AMP pages – Accelerated Mobile Pages Project

Good news! Google will graciously allow non-Google-hosted AMP pages to get the AMP blessing in search results.

Bad news! It requires publishers to package up their AMP pages in a new packaging format that browsers don’t support yet.

Careful Now | CSS-Tricks

Even more concerning than browser-specific websites is seeing browsers ship non-standardized features just because they want them, not behind any vendor prefix or flag. There was a time when web developers would have got out the pitchforks if a browser was doing this, but I sense some complacency seeping in.

Async + Await

Slides from a conference talk with a really clear explanation of how async + await works with promises.

I’m harvesting credit card numbers and passwords from your site. Here’s how.

This is a “what if?” scenario, but it’s all too plausible.

For site owners, the (partial) solution is to have a strong Content Security Policy.

For users, the solution is to disable JavaScript.

(In the wake of Spectre and Meltdown, this is now a perfectly legitimate action for security-conscious web users to take; I hope your site can support that.)

The HSB Color System: A Practicioner’s Primer – Learn UI Design

A nice clear explanation of specifying colour using HSB (not to be confused with HSL).

Barry P*********t on Twitter: “To better understand my web experience, and how I can control my privacy online, I’m undertaking a few little ‘experiments’.

Following in Charlie’s footsteps.

A Sliding Nightmare: Understanding the Range Input | CSS-Tricks

Ana goes into exhaustive detail on all the differences in the shadow DOM and styling of input type="range" across browsers.

I’m totally fine with browsers providing different styling for complex UI elements like this, but I wish they’d at least provide a consistent internal structure and therefore a consistent way of over-riding the default styles. Maybe then people wouldn’t be so quick to abandon native elements like this in favour building their own UI components from scratch—the kind of over-engineering that inevitably ends up being under-engineered.

Why So Many Men Hate the Last Jedi But Can’t Agree on Why | Bitter Gertrude

While not every white man who dislikes The Last Jedi overtly dislikes its gender balance or diversity, many feel a level of discomfort with this film that they can’t name, and that expresses itself through a wide variety of odd, conflicting complaints about its filmmaking.

Owning My Own Content - TimKadlec.com

Hell, yeah!

I write to understand and remember. Sometimes that will be interesting to others, often it won’t be.

But it’s going to happen. Here, on my own site.

Introducing Web Payments: Easier Online Purchases With The Payment Request API — Smashing Magazine

A nice overview of the Payment Request API, which is getting more and more browser support.

Improving the Accessibility of 24 ways | CSS-Tricks

Paul walks us through the process of making some incremental accessibility improvements to this year’s 24 Ways.

Creating something new will always attract attention and admiration, but there’s an under-celebrated nobility in improving what already exists. While not all changes may be visual, they can have just as much impact.

Learn JavaScript with Zell

This JavaScript training course looks like it’s really well planned to take you from zero to hero—there’s a whole module on progressive enhancement.

Can Preload Cut the Mustard? | Filament Group, Inc., Boston, MA

Ooh, this is clever! Scott shows how you can use rel="preload" to conditionally load JavaScript (say, for screens above a certain size). The browser support isn’t quite there yet, but the thinking here is smart.

Herman: Automated Pattern Libraries | OddBird

A lightweight style guide generator. This one uses SassDoc to parse out the documentation for colours, type, etc.

How DIY communities are pushing the frontiers of science | Labs | eLife

A report on Science Hack Day Berlin (published on the excellent eLife website).

When I put together the first Science Hack Day back in 2010, I had no idea how amazingly far it would spread—all thanks to Ariel.

The Significance of the Twitter Archive at the Library of Congress | Dan Cohen

It’s a shame that this archiving project is coming to end. We don’t always know the future value of the present:

Researchers have come to realize that the Proceedings of the Old Bailey, transcriptions from London’s central criminal court, are the only record we have of the spoken words of many people who lived centuries ago but were not in the educated or elite classes. That we have them talking about the theft of a pig rather than the thought of Aristotle only gives us greater insight into the lived experience of their time.

Back to Bradshaw’s / Paul Robert Lloyd

I really like getting Paul’s insights into building his Bradshaw’s Guide project. Here he shares his process for typography, images and geolocation.

A Browser You’ve Never Heard of Is Dethroning Google in Asia - WSJ

I’m always happy to see a thriving market of competition amongst browsers—we had a browser monopoly once before and it was a bad situation.

(That said, UC Browser has its own issues.)

Dwitter

A social network for snippets of JavaScript effects in canvas, written in 140 characters or fewer. Impressive!

Robust Client-Side JavaScript – A Developer’s Guide · molily

This is a terrific resource on writing client-side JavaScript without making too many assumptions.

It starts by covering some of the same topics as Resilient Web Design—fault tolerance, Postel’s law, progressive enhancement—but then goes deep, deep, deep into the specifics of applying that to JavaScript.

And the whole thing is available here for free under a Creative Commons licence!

The Golden Record

We asked you to tell us what you’d put on a new Golden Record. Here’s what you chose.

Ever thought about what you’d put on the Voyager golden record? Well, what are you waiting for? Your website can be your time capsule.

unDraw

Liberally licensed SVG illustrations by Katerina Limpitsouni with customisable colour schemes.

Building a webic community

The field of front-end has yet to be defined, because our industry moves too quickly and the range of skills required seems to grow with every passing day. We need to realise that it is impossible to be an expert in every one of those skills, and that’s perfectly fine.

The “File Not Found” series on Science Friday

A three-part series on digital preservation:

1. Ghosts In The Reels
2. The Librarians Saving The Internet
3. Data Reawakening

Build a culture for better design – insights from the Leading Design Conference 2017

A great round-up of Leading Design—one of the best events I attended in 2017.

Data portability

2018 will be the year that GDPR hits the fan. Jeni has lots of thoughts about what data portability could mean for individuals.

All That Glisters ◆ 24 ways

I thought this post from Drew was a great way to wrap up another excellent crop from 24 Ways.

There are so many new tools, frameworks, techniques, styles and libraries to learn. You know what? You don’t have to use them.

Chris likes it too.

Why Web Developers Need to Care about Interactivity — Philip Walton

Just to be clear, this isn’t about interaction design, it’s about how browsers and become unresponsive to interaction when they’re trying to parse the truckloads of Javascript web developers throw at them.

Top tip: lay off the JavaScript. HTML is interactive instantly.