Tags: a

Beyond Progressive Web Apps • cssence.com

Matthias Beitl takes a stab at trying to tackle the tricky UI problem of exposing the URLs of Progressive Web Apps. This stuff is hard.

Vanilla List: The Vanilla Javascript Repository

Here’s a handy directory of scripts that set out to solve one problem without any dependencies. Useful for poking at, picking apart, and learning from.

Tim Brown: Making time to read

I know exactly how Tim feels. It’s hard not to feel guilty when you’re reading something instead of spending the time doing “real work”, but it always ends up being time well spent:

Reading time can be hard to justify, even to oneself. There is no deadline. It’s not going to move any immediate projects forward (most likely). And it often feels like a waste of time, especially if your interests are diverse. But it’s important. Most great work is the product of collaborative thinking.

marmelab/universal.css: The only CSS you will ever need

Ensure that your class names never go out of sync with your style declarations with this one simple trick:

Take any CSS rule you want to apply, replace : by -, and dots by -dot-, and you get the name of the corresponding universal css classname.

The only thing missing is immutability, so I would suggest also putting !important after each declaration in the CSS. Voila! No more specificity battles.

Frend — A collection of accessible, modern front-end components.

A nice little collection of interaction patterns with built-in accessibility and no dependencies.

Revision 263: Im Gespräch mit PPK, Chris Heilmann und Jeremy Keith | Working Draft

The Working Draft podcast is usually in German, but this episode is in English. It was recorded in a casual way by a bunch of people soaking up the sun sitting outside the venue at Beyond Tellerrand. Initially that was PPK and Chris, but then I barged in half way through. Good fun …if you’re into nerdy discussions about browsers, standards, and the web. And the sound quality isn’t too bad, considering the circumstances under which this was recorded.

Responsive Product Comparison Tables - daverupert.com

Dave explains the thinking behind his responsive table pattern I linked to a while back. He’s at pains to point out that you should always make sure a pre-made pattern is right for you instead of just deploying it no-questions-asked:

Using prefabricated, road tested solutions from Apple’s Human Interface Guidelines, Google’s Material Design, Twitter’s Bootstrap, and Brad Frost’s Responsive Patterns is always a good place to start, but don’t settle there. My biggest advice would be to turn off the 27” display and use your sites and projects on your phone, there’s lots of low hanging fruit that could give way to new patterns, tailor-suited to your content.

Meet the Father of Modern Space Art | Atlas Obscura

A profile of Chesley Bonestell. It’s amazing to think how much of his work was produced before we had even left this planet.

State of the gap

Remy looks at the closing gap between native and web. Things are looking pretty damn good for the web, with certain caveats:

The web is the long game. It will always make progress. Free access to both consumers and producers is a core principle. Security is also a core principle, and sometimes at the costs of ease to the developer (but if it were easy it wouldn’t be fun, right?).

That’s why there’ll always be some other technology that’s ahead of the web in terms of features, but those features give the web something to aim for:

Flash was the plugin that was ahead of the web for a long time, it was the only way to play video for heavens sake!

Whereas before we needed polyfills like PhoneGap (whose very reason for existing is to make itself obsolete), now with progressive web apps, we’re proving the philosophy behind PhoneGap:

If the web doesn’t do something today it’s not because it can’t, or won’t, but rather it is because we haven’t gotten around to implementing that capability yet.

Flex Layout Attribute (FLA)

The markup here (with proprietary inline attributes for styling) is a terrible idea but the demo that accompanies is great at showing how flexbox works …I just wish it didn’t try to abstract away the CSS. This is so close to being a really good learning tool for flexbox.

» Autofill: What web devs should know, but don’t

Jason takes good look at the browser support for autocomplete values and then makes a valiant attempt to make up for the complete lack of documentation for Safari’s credit card scanning.

CSS When/Else Rules

A really interesting proposal for more logic constructs in CSS: when/else conditions. At first glance, this looks like it would complicate the language (and one of the most powerful features of CSS is its simplicity), but when you dig a bit deeper you realise that there’s nothing new enabled by this extra syntax—it actually simplifies what’s already possible.

Pakyow Web Framework

This looks like a really interesting server-side framework for Ruby developers. The documentation is nice and clear, and puts progressive enhancement at the heart of its approach.

Semantic CSS - Snook.ca

Snook has been on a roll lately, sharing lots of great insights into front-end development. This is a particularly astute post about that perennial issue of naming things.

No Really, For Everyone | Benjamin Listwon

A heartfelt call to web developers to consider the needs of the many and varied people trying to use what we build.

None of this is about Javascript. None of this is about CSS transforms or WebGL. None of this is about technology at all.

It is about making products that serve all users equally. It is about putting ourselves in others’ shoes. It is about trying to imagine the frustration and difficulty of using our products when the conditions aren’t what we’re used to. It is about being human.

Jessman5 on Twitter: “I made a poster from @adactio’s talk about Resilience. :) This took me way too long…”

I love this illustration that Jess made of my Resilience talk at the Render conference.

Resilience

Spacehack.org

Ariel and Lisa have redesigned the excellent Spacehack site and it’s looking stellar!

Issue 596729 - chromium - Do not show the app banner unless the Manifest has a display set to standalone or fullscreen - Monorail

I am shocked and disgusted by this arbitrary decision by the Chrome team. If your Progressive Web App doesn’t set its manifest to obscure its URL, you get punished by missing out on the add to home screen prompt.

Google is declaring war on URLs again.

Developing Dependency Awareness – Smashing Magazine

A typically superb article by Aaron. Here, he breaks down a resilient approach to building for the web by examining the multiple ways you could add a button to a page. There’s a larger lesson here too:

We don’t control where our web-based products go or how our users access them. All we can do is imagine as many less-than-perfect scenarios as possible and do our best to ensure our creations will continue to do what they’re supposed to do. One of the easiest ways to do that is to be aware of and limit our dependencies.

Building Web Apps for Everyone - O’Reilly Media

Here’s a fantastic and free little book by Adam Scott. It’s nice and short, covering progressive enhancement, universal JavaScript, accessibility, and inclusive forms.

Download it now and watch this space for more titles around building inclusive web apps, collaboration, and maintaining privacy and security.

Did I mention that it’s free?

ICONS #9: Jeremy Keith Tickets, Wed, 15 Jun 2016 at 16:00

I’ll be speaking to students in Vasilis’s class for Communication and Multimedia Design in Amsterdam right before CSS Day. There are (free) tickets available if you’re around. I’ll be talking about digital preservation and long-term thinking on the web.

This meetup is, like all other Icons Meetups, free to attend for everyone. For students and lecturers of CMD Amsterdam, of course. But also for all professional (digital) designers who want to be inspired.

Bad Character - The New Yorker

A fascinating thought experiment from Ted Chiang:

So let’s imagine a world in which Chinese characters were never invented in the first place. Given such a void, the alphabet might have spread east from India in a way that it couldn’t in our history, but, to keep this from being an Indo-Eurocentric thought experiment, let’s suppose that the ancient Chinese invented their own phonetic system of writing, something like the modern Bopomofo, some thirty-two hundred years ago. What might the consequences be?

Android Instant Apps and the web - Broken Links

I’ve been poking around at Google’s information on “instant apps” since they announced it at Google I/O. My initial impressions mirror Peter’s.

Either they allow access to more device APIs (which could be a massive security hole) or else they’re more or less websites.

Podcasting lock-in and the lesson from Penn Station | Manton Reece

While the open web still exists, we really dropped the ball protecting and strengthening it. Fewer people’s first choice for publishing is to start a web site hosted at their own domain. Like the destruction of Pennsylvania Station, sometimes you only know in hindsight that you’ve made a mistake. We were so caught up in Twitter and Facebook that we let the open web crumble. I’m not giving up — I think we can get people excited about blogging and owning their own content again — but it would have been easier if we had realized what we lost earlier.

Owning my words and photos and audio bits – Colin Devroe

By publishing to my own web site first…

  • I feel like I’m curating a library rather than throwing loose papers into a raging torrent.
  • I have the ability to quickly move to another platform if I so wish
  • I can choose how things look and feel
  • I can track, or not track, any metric I’d like to
  • I can publish several different types of media: photos, audio
  • I can turn discussion on or off

Publishing Your Content Online and Syndicating it Elsewhere | W. Ian O’Byrne

A good introduction to the Indie Web approach:

This post was primarily directed at friends and colleagues that already blog in other spaces, and wonder why/how they would re-post content to Medium or elsewhere.

Everything is a Remix: The Force Awakens on Vimeo

The newest Kirby Ferguson video looks at remixing through the lens of the newest Star Wars film.

Bowiebranchia

Nudibranchia or other opisthobranchia compared to the various looks of David Bowie.

Responsive Product Comparison Table

Here’s a nice little pattern from Dave—showing data tables one column at a time on smaller screens.

Render 2016 - Jeremy Keith on Vimeo

Here’s another version of my talk Resilience—the same one I gave at Beyond Tellerrand—this time from the Render conference in Oxford.

Shuffleboard At McMurdo (Idle Words)

Maciej’s first report from Antarctica is here. Put the kettle on and settle in for a grand read.

BBC Blogs - Internet Blog - BBC UX&D on creating a GEL foundation for everyone

Al runs through the process of updating GEL—the BBC’s Global Experience Language design system. I particularly like the thought that’s gone into naming type sizes.

Design systems and Postel’s law | Journal | The Personal Disquiet of Mark Boulton

Marvellous insights from Mark on how the robustness principle can and should be applied to styeguides and pattern libraries (‘sfunny—I was talking about Postel’s Law just this morning at An Event Apart in Boston).

Being liberal in accepting things into the system, and being liberal about how you go about that, ensures you don’t police the system. You collaborate on it.

So, what about the output? Remember: be ’conservative in what you do’. For a design system, this means your output of the system – guidelines, principles, design patterns, code, etc etc. – needs to be clear, unambiguous, and understandable.

FamilySearch Style Guide

A straightforward little pattern library. There’s also the story of making it a living style guide.

When Websites Won’t Take No for an Answer - The New York Times

Our Harry’s in the New York Times! Well, an article on dark patterns is in the New York Times, and Harry is Mr. Dark Patterns.

Not OK, Computer — Track Changes

Ah, how I wish that this were published at a long-lived URL:

The one part of the web that I believe is truly genius, and that keeps standing the test of time, is the URI. The Web gave us a way to point to anything, forever. Everything else about the web has changed and grown to encyclopedic lengths, but URIs have been killing it for decades.

And yet the numbers show we’re hell-bent on screwing all that up with link-shorteners, moving URIs without redirection, and so forth. As always happens in technology we’ve taken a simple idea and found expedient ways to add fragility and complexity to it.

Shane Becker - Dark Matter and the #IndieWeb

Shane gave a talk recently where he outlined his reasons for publishing on the indie web:

Most people reading this will probably have an account at most or all of these sites: Facebook, Instagram, Twitter, YouTube, Vimeo, Tumblr, Wordpress. Many also had accounts at Friendster, Tribe, MySpace, Delicious, Magnolia, Gowalla, Geocities. But no one has an account at any of those (on the second list) anymore. And all of the content that we created on those sites is gone.

All of those super emo feeling you posted to MySpace, they’re all gone. Some of the great web designers of our generation got started on Geocities. That stuff is gone forever. And sure, it was sparkling animated GIFs and neon colors. But that’s important history. Yahoo bought it, left it alone for a while, and then decided one day to turn it off.

Archiving a Website for Ten Thousand Years - The Atlantic

Prompted by the way Craig is handling the shutdown of hi.co, Glenn Fleishman takes a look at other digital preservation efforts and talk to Laura Welcher at the Long Now Foundation.

A time capsule is bottled optimism. It makes material the belief that human beings will survive long enough to retrieve and decode artifacts of the distant past.

Archiving Our Online Communities — Medium

Now this is how you shut down a service:

  • Maintain read-only URLs for at least ten years.
  • Create physical copies etched in metal held by cultural institutions for ten thousand years.
  • Allow users to export their data (of course).

Web projects often lack hard edges. They begin with clarity but end without. We want to close Hi.co with clarity. To properly bookend the website.

And nary a trace of “We are excited to announce…” or “Thank you for joining us on our incredible journey…”

(Such a shame that the actual shut-down notice is only on Ev’s blog, but hopefully Craig will write something on his own site too.)

To the Class of 2050 - The New Yorker

Remember: life is ten per cent what happens to you, ten per cent how you respond to it, and eighty per cent how good your reflexes are when the Tall Ones come at your throat with their pincers.

The inside story of Facebook’s biggest setback | Rahul Bhatia | Technology | The Guardian

The history of Facebook’s attempt to steamroll over net neutrality in India …and how they failed in that attempt, thanks to a grassroots campaign.

Crucially, Facebook itself would decide which sites were included on the platform. The company had positioned Internet.org as a philanthropic endeavour — backed by Zuckerberg’s lofty pronouncements that “connectivity is a human right” — but retained total control of the platform.

The Sonos Pattern Library — zdfs

There’s a lot I disagree with here. I don’t think this pattern library process is very elegant or scalable, and it certainly wouldn’t work for me.

But I’m still linking to it. Why? Because I think it’s absolutely wonderful that people share their processes like this. It doesn’t matter one whit whether or not it would work for me.

Frontend development may have gotten a lot more complicated, but the simple premise of sharing what you’ve learned hasn’t.

I couldn’t agree more!

Apple’s actual role in podcasting: be careful what you wish for – Marco.org

Marco is spot on here. The New York Times article he’s responding to is filled with a weird Stockholm syndrome—the one bit of the web that’s still free of invasive tracking and surveillance is where they wish a centralised power (like Apple) would come in and lock down. Madness!

John sums it up nicely:

Data data data. Publishers crave data — but one of the things I love about podcasts is that the format blocks the collection of most data, because there is no code that gets executed. JavaScript has brought the web to the brink of ruin, but there’s no JavaScript in podcasting. Just an RSS feed and MP3 files.

How Literature Became Word Perfect | New Republic

An engaging look at the history of word processing, word processed by Josephine Livingstone.

Decentralized Web Summit: Locking the Web Open

Oh, how I wish I could make it to this event!

June 8th-9th at Internet Archive, featuring Vint Cerf, Brewster Kahle, and more.

We are bringing together a diverse group of Web architects, activists, engineers, archivists, scholars, journalists, and other stakeholders to explore the technology required to build a Decentralized Web and its impact.

Let’s Write Beautiful CSS Comments | Sparkbox

If you don’t comment your CSS, you’ll confuse other people looking at your code, and, more embarrassingly, you’ll confuse future you. If you do comment CSS, everybody will be less confused, and things will be accidentally broken less often. You will be popular and generally well-liked, and people will remember to send you cards on your birthday. Comment more.

Some good advice here on how to write better comments in CSS.

IndieWebCamp Düsseldorf | Flickr - Photo Sharing!

Lovely, lovely pictures from last weekend’s brilliant Indie Web Camp in Düsseldorf.

IndieWebCamp Düsseldorf in motion

Jeremy Keith on Vimeo

Here’s the video of the talk I just gave at the Beyond Tellerrand conference in Düsseldorf: Resilience.

Rebuilding the Perch UI - creating a pattern library

Rachel and Drew have been beta-testing Mark’s Fractal project for organising a library of components for Perch’s interface. Sounds like it’s working out very, very well indeed!

Bots | A Working Library

Absolutely brilliant stuff from Mandy (again). A long hard at today’s tech industry’s narrow approach to bots and artificial intelligence compared to some far more interesting and imaginative approaches in fiction:

  • Ann Leckie’s superb Imperial Radch series,
  • Kim Stanley Robinson’s Aurora, and
  • Alex Garland’s Ex Machina.

So in addition to frightening ramifications for privacy and information discovery, they also reinforce gendered stereotypes about women as servants. The neutral politeness that infects them all furthers that convention: women should be utilitarian, performing their duties on command without fuss or flourish. This is a vile, harmful, and dreadfully boring fantasy; not the least because there is so much extraordinary art around AI that both deconstructs and subverts these stereotypes. It takes a massive failure of imagination to commit yourself to building an artificial intelligence and then name it “Amy.”

The Design Jones Episode Thirty One – Jeremy Keith on Huffduffer

I really enjoyed chatting to Ade on The Design Jones podcast. I rambled on about design, the web, and all that stuff.

It’s on Soundcloud and here’s the podcast feed.

The Joy of Sparks

This is so cool! The logs of the Indie Web Camp IRC channel visualised as a series of sparklines in the style of Joy Division/Jocelyn Bell Burnell.

Webfonts Last by Frederic Marx

Some smart thoughts on web fonts.

IndieWeb Summit 2016 - Portland, Oregon

If you want to go to the Indie Web Summit on June 3rd to 5th (and you should), there’s a travel assistance fund:

If you are a member of a group that is typically underrepresented (e.g. if you are not straight, white, cis and male), and otherwise could not afford to travel to IndieWeb Summit on your own, an anonymous donor has established a $1000 fund to assist individuals from underrepresented backgrounds with travel and/or lodging costs for the Indieweb Summit in Portland.

Aesthetics of the invisible | Francesco Schwarz

Hidden little details that make a big difference for screen readers.

A website is only as beautiful as the underlying markup.

Rebuilding the Perch UI - not your usual redesign

The Perch Control Panel is progressively enhanced. Almost all functionality of Perch is available even if you completely disable JavaScript, or if JavaScript fails to load.

Wicked Ambiguity and User Experience

This is my kind of talk—John Snow’s cholera map, the Yucca Mountain think-tank, the Pioneer plaque, the Voyager record, the Drake equation, the Arecibo signal, and the love song of J. Alfred Prufrock.

♫ These are a few of my fav-our-ite things! ♫

HTML5 accessibility

A glanceable one-stop-shop for how today’s browsers are dealing with today’s accessibility features. Then you can dive deeper into each one.

what3words | Addressing the world

In this English language alternative to latitude and longitude coordinates, the Clearleft office is located at:

cross.rooms.quick

Of the Web • Kyle Gach

I’ve been on the web for most of my life, but, without a site to call home, I haven’t been of the web for far too long.

On Building Component Libraries | Clearleft

Mark has dumped his brains!

Seriously, there is a lot of thought that has gone into this, and it’s just the beginning: Mark recounts the experience that Clearleft has had with delivering pattern libraries, laying the groundwork for releasing the library-generating tool that he has been building.

Watch this space.

Claude Shannon, the Father of the Information Age, Turns 1100100 - The New Yorker

A lovely profile of Claude Shannon (concluding with an unexpected Brighton connection).

Sign O’ The Times - original video in pure CSS

This is quite wonderful: a recreation of the video for Prince’s Sign O’ The Times made entirely with HTML and CSS.

The history of ‘this website is well-crafted’ hints | Holovaty.com

Adrian runs through the history of well-crafted websites:

  • 1990s: Dynamic websites
  • 2002: All-CSS layouts
  • 2003: Nice URLs
  • 2005: Ajax
  • 2009: Custom web fonts
  • 2010: Responsive web design

I think he’s absolutely right with his crystal ball too:

What’s a big hint that a site is crafted by forward-looking web developers? I’d say it’s service workers, the most interesting thing happening in web development.

But leaving trends aside, Adrian reminds us:

Some things never go out of style. None of the following is tied to a particular time or event, but each is a sign a website was made by people who care about their craft:

  • Making sure the site works without JavaScript
  • Semantic markup
  • Following accessibility standards

An Event Apart News: The Contributions of Others: A Session with Jeremy Keith

Eric asked me some questions and I was only too happy to give some answers.

Sebastian Ly Serena

The greatest form ever made.

Explore New Horizons - StarBnB

Discover exotic places with local hosts in a galaxy far, far away.

OOUX: A Foundation for Interaction Design · An A List Apart Article

I really, really like this approach. I’ve used something similar in my responsive design workshops, where I get people to break things down into nouns and verbs (objects and actions). I think there’s a lot of crossover with good URL design here too—this is kind of like REST for UX designers.

Updating Our Prefixing Policy | WebKit

Ted has snuck a blog post out from behind Apple’s wall of silence, and it’s good news: WebKit is not going to use vendor prefixes for new features.

The Way We Build : Airbnb Design

A look at the tools that AirBnB have made to help them in their design and development process. I hope they’ll share them.

I, Website | CSS-Tricks

Chris’s homage to I, Pencil.

I, Website, am a complex combination of miracles.

Beyond Work

An ongoing photography project from Curtis:

Beyond Work tells stories about humans at work, with no judgement or glorification. It’s an attempt at unearthing the social, cultural and functional world of work, that’s become invisible in everyday life.

The New York Herald, August 7, 1865

A transatlantic cable, hurrah!

Min | A smarter, faster web browser

I lightweight little web browser. It’s quite nice.

What Comes Next Is the Future: Trailer 2 on Vimeo

I particularly like Ethan’s Stop Making Sense era David Byrne suit.

Flexbox Patterns

Here’s a well put-together collection of common patterns that are now much easier thanks to flexbox.

IndieWebCamp Düsseldorf 2016 // beyond tellerrand

Marc writes about why you (yes, you!) should come to Indie Web Camp in Düsseldorf in just under two week’s time.

chartd - responsive, retina-compatible charts with just an img tag

This could be a handy replacement for some Google Charts images of graphs. It uses SVG and is responsive by default.

I bet it wouldn’t be too tricky to use this to make some sparklines.

Color Safe - accessible web color combinations

A nice tool for choosing colour palettes that look good and are also accessible.

IndieWebCamp Nuremberg on Flickr

Great photos from a great gathering.

IndieWebCamp Nuremberg in motion

A Complete Guide to CSS Grid Layout | Chris House

This guide to CSS grid layout is the perfect companion piece to Rachel’s Grid by Example.

Layout Demos by Jen Simmons

If you want to keep up to date with all the coolest stuff landing in CSS, I recommend bookmarking this ever-changing page.

Goodbye CSRF - SameSite to the rescue!

I wasn’t aware of the forthcoming SameSite attribute for cookies—sounds very sensible indeed.

GitHub’s CSP journey - GitHub Engineering

A step-by-step walkthrough of how GitHub has tweaked its Content Security Policy over time. There are some valuable insights here, and I’m really, really happy to see companies share this kind of information.

Clarity 2016 Wrapup by Chris Coyier on CodePen

As well as compèring the event, Chris took the time to make notes at the Clarity conference, dedicated to all things patterny.

Interview with Håkon Wium Lie — net magazine — Medium

A trip down memory lane with Håkon.

It’s not like the web has been done. This is history in the making. The web is only 25 years old. It’s going to be around for a long time, so there are lots of things to develop.

The Internet Archive—Bricks and Mortar Version - Scientific American Blog Network

A profile of the Internet Archive, but this time focusing on its physical space.

The Archive is a third place unlike any other.

Kite - Programming copilot

This looks like it could be a very nifty tool to have at your disposal while coding. I like that it’s editor-agnostic.

A faster FT.com – Engine Room

A data-driven look at impact of performance:

The data suggests, both in terms of user experience and financial impact, that there are clear and highly valued benefits in making the site even faster.

Classic Programmer Paintings

Painters and Hackers: nothing in common whatsoever, but this are classical painters depictions of software engineering.

Why Javascript Development is Crazy

The state of Javascript development is overwhelming and confusing because everyone is overengineering their apps by default without even realizing it.

Interactive Form

I quite like this step-by-step interface for a form, all cleverly handled with the :focus pseudo-class. I’d want to refine some of the usability issues before using it in production, but the progressive disclosure is nice.

Node: Up and Running

One of these days I’m going to step outside of my PHP comfort zone and actually build something in Node. One of these days. When I do, this book looks like a good place to start (and the online version is free).

A debugging thought process

Remy walks us through his performance debugging routine …and now Una must write him a song.

Aligning text smartly in CSS

Here’s a clever way to get text centred when it’s short, but left-aligned when it wraps.

Day-of-talk countdown (with images, tweets) · larahogan · Storify

If you’re at all interested in public speaking, this is a great insight by Lara into what it’s like on the day of a talk.

Scroll Magazine, Edition 1

I wrote the foreword to this inaugural edition of Scroll Magazine which was published for the Respond conference down under. You can get your digital edition here, featuring interviews with Karen, Ethan, and Sara.

Side Projects – AVC

I think the move away from side projects toward doing a startup day one is not all good. There was something great about the ability to experiment with an idea before committing to it and before sucking other people’s money into it.

Messages to the Future, by Heather Ryan · The Manual

History, as the future will know it, is happening today on the web. And so it is the web that we must capture, package, and preserve for future generations to see who we are today.

Digital archivists run up against mismatched expectations:

But did you know that a large majority of web users think that when sharing their thoughts, images, and videos online they are going to be preserved in perpetuity? No matter how many licenses the general population clicks “Agree” to, or however many governing policies are developed that state the contrary, the millions of people sharing their content on websites still believe that there is an implicit accountability that should be upheld by the site owners.