Tags: ar

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!

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.

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.

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.

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.

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

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.

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.

The :target Trick

An alternative to using the :checked pseudo-class for sprinkling in some behaviour—you can use the :target pseudo-class. It might mess up the browser history though.

An Event Apart News: Ten Years, Ten Speakers: Part II

Ten of us reminisce about where we were and what we were doing a decade ago.

Ten years ago I was writing on my blog. Lots of other people were writing on their blogs back then too. That would soon change, though. Twitter and Facebook were picking up steam and soon they’d be luring bloggers away with enticing and seductive short-form convenience. I’ve stubbornly continued writing on my own site. I fully intend to keep on writing there for the next ten years too.

ForEveryone.Net - Trailer on Vimeo

I can’t wait for this documentary to come out (I linked to its website a while back).

Persistent Domains by Tim Berners-Lee

This sixteen year old cool URI has not changed. I think this idea of domains entering an archive state is worth pursuing.

Also, I love the science fictional footnote “Note for readers after 2100”.

Global Defense

Dave is making a nifty in-browser game that you can play by yourself or in co-operative mode. If your device has a gyroscope, you can use that to aim. Very cool!

(And it looks like it’s all set to become a progressive web app once it’s running on HTTPS.)

The Internet | Thought Economics

The World Wide Web, with all of its pages, blogs and so on- has allowed human expression in ways that would have been uneconomic and out of reach before. The most dramatic effect has been this ability for almost anyone to express himself or herself whenever they want to- and potentially be heard by many others.

Vint Cerf there, taking part in this wide-ranging discussion with, among others, Kevin Kelly and Bob Metcalfe.

The introduction leans a bit too heavily on Nicholas Carr for my liking, but it ends up in a good place.

The internet connects us cognitively and becomes a membrane through which our minds can interact, manifesting a whole new iteration of our species, who have begun to exist in a connected symbiotic relationship with technology.

The internet is the first technology we have created, that makes us more human.

.generation on Vimeo

A cautionary tale of digital preservation.

.generation is a short film that intimately documents three millennials in the year 2054 - uncovering their relationships with technology in the aftermath of the information age.

Rivets.js — Lightweight and powerful data binding + templating solution for building modern web applications

Mark recommended this JavaScript library as lightweight alternative to Vue.js …itself a kind of lightweight alternative to React. Basically I’m interested in the data-binding stuff.

Astrum - A lightweight pattern library for any project

One more tool for making pattern libraries. This one looks fairly simple and straightforward.

MarkSheet: a free HTML and CSS tutorial - Free tutorial to learn HTML and CSS

This looks like a great resource for beginners looking to learn HTML and CSS.

The Foundation of Technical Leadership · An A List Apart Article

Story of my life:

I have to confess I had no idea what a technical leader really does. I figured it out, eventually.

Seriously, this resonates a lot with what I find myself doing at Clearleft these days.

Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns” (Pre-Release) – Smashing Magazine

I think it’s a safe bet that this new book by Heydon will be absolutely brilliant.

It’s a handbook with valuable, time-saving techniques that will help you avoid hacky workarounds and solve common issues effectively.

The Languages Which Almost Were CSS - Eager Blog

A wonderful deep dive into the history of styling languages before CSS. I love spelunking down these internet history potholes—fascinating stuff!

Screw Mastery

The joy of starting from scratch:

I remembered a really nice thing: how to be goofily, absurdly proud of myself for figuring something out, a kind of pride I usually reserve for my children. This is the best part of dropping back to zero. The list of things you have to master is endless. And when you get one right — even a little, tiny one — everyone notices and gives you an adult version of an extra candy in your lunchbox.

My talk writing process (so far) | Charlotte Jackson, Front-end developer

Charlotte outlines the process she used in creating her talk at Dot York. It was a real joy to see it come together.

Designing Modular UI Systems Via Style Guide-Driven Development – Smashing Magazine

Striking that balance between the reusability of modular components and maintaining a big-picture vision of the overall design:

We should always strive to use patterns in an application. For example, consistent use of colors and font sizes can quickly indicate to the user elements in the UI that can be interacted with. However, avoid using a pattern just because it has been implemented before; rather, use it because it really solves the problem at hand.

Standardizing the Social Web

The slides from Aaron’s talk at OS Bridge in Portland, looking at the formats and protocols powering the indie web.

Resilience Poster Talk from Jeremy Keith by jessman5Stuff on Etsy

This beautiful poster could be the ideal decoration for your home or office.

You can download the original size (DIN A3) and print it to hang it on the walls in your office or wherever you want.

My talk at Dot York: Learn and Teach | Charlotte Jackson, Front-end developer

Here’s the full text of Charlotte’s fantastic short talk at the Dot York event last week. I’m so, so proud of her.

Brief History of the Internet - Internet Timeline | Internet Society

From twenty years ago, a look back at the origins of the internet, written by its creators.

ARPAWOCKY

RFC 527

Building better accessibility primitives

On the need for a way to mark parts of a document as “inert” while the user is interacting with modal content.

Declarative Design Tools | Jon Gold

Jon introduces a new tool with a very interesting observation: up until now, all our graphic design tools have been imperative rather than declarative

With our current tools we’re telling the computer how to design the vision we have in our head (by tapping on our input devices for every element on the screen); in our future tools we will tell our computers what we want to see, and let them figure out how to move elements around to get there.

» Introducing Drizzle Cloud Four Blog

A new pattern library tool, this time from the smart people at Cloud Four. It’s called Drizzle and it started life as a fork of Fabricator.

Apprenticeship: A better path to mastering our craft | Louder Than Ten

I’ve been thinking a lot about learning, teaching, mentoring, coaching …this article by Ivana McConnell from last year is packed with gold nuggets of wisdom concerning apprenticeships.

As lifelong learners, we may be reluctant to call ourselves “masters.” But that’s missing the point, and it discounts the fact that teaching is learning. We’re not there to guarantee mastery—we’re there to give our apprentices fundamentals, to foster their respect, and make journeymen (or women) out of them. Mastery will come; we just offer the tools.

Making your JavaScript Pure · An A List Apart Article

I really like this piece by Jack. All the things he’s talking about—pure functions and referential transparency—are terms I was previously unfamiliar with …but the concepts smell familiar. It’s good to have terminology (and reasoning) to apply to the way I structure my JavaScript.

The Web’s Creator Looks to Reinvent It - The New York Times

“The web is already decentralized,” Mr. Berners-Lee said. “The problem is the dominance of one search engine, one big social network, one Twitter for microblogging. We don’t have a technology problem, we have a social problem.”

“Apprenticeships,” an article by Dan Mall

I really love what Dan is doing with his apprenticeship programme—I hope we can do something like this at Clearleft.

Miscellany № 74: zombies always make a hash of things – Shady Characters

A thoroughly lovely look at the octothorpe that skewers a myth or two along the way.

PURL: A Portable Content Store - Not Enough Neon

I need to wrap my head around the details of this approach, but it sounds like it might be something I could do here on my site (where I feel nervous about my current dependency on a database).

Network Effect

The latest piece from Jonathan Harris explores online life in all its mundanity, presenting it in an engaging way, all the while trying to make you feel bad for doing exactly what the site is encouraging you to do.

Progressively less progressive | Andrew Betts

I agree with everything Andrew says here. Progressive web apps are great, but as long as Google heap praise on mobile-only solutions (like the Washington Post doorslam) and also encourage separate AMP sites, they’re doing a great disservice to the web.

More features arrive regularly to make this “one web” even better and easier to maintain. Service worker, streams, app manifests, payment request, to name a few. But adding these features one at a time to large, mature applications like WaPo or FT or Nikkei is a slow and painstaking process. That’s why it’s taking us a long time for us to tick off all these new features, and why it seems like madness to try and build the entire app several times over.

However, by creating the concept of PWAs and marketing them as they do, Google is encouraging publishers to ‘start again’. And they’re doing exactly the same thing with AMP.

matthiasott/webmention: Webmention Plugin for Craft CMS

A plug-in for Craft CMS for receiving webmentions. I’ll have to tell Charlotte about this (she’s using Craft for her site).

Progressive Enhancement and Modern JavaScript ― Caolan

I think JavaScript frameworks have been blinkered to the needs of many developers (most websites are not SPAs or run by Node, nor should they be) for too long. We need to find a way to apply the lessons of modern frameworks to the rest of the web - it would be sad if everyone had to run JavaScript on their server and good-old resilient HTML was considered only as a fallback.

Introducing Multirange: A tiny polyfill for HTML5.1 two-handle sliders | Lea Verou

You’re supposed to be able to create two-handled sliders with input type="range" but the browser support isn’t there yet. In the meantime, Lea has created a nice lightweight polyfill.

adactio - Upcoming.org Archive

My old Upcoming.org profile is back online, along with everyone else’s:

This is a static historical archive more than 7 million events saved from Upcoming’s first ten years.

I’m enjoying this trip down memory lane, recalling fun times from the last decade.

Not The Post I Wanted To Be Writing… – Infrequently Noted

Phew! Alex seems to have calmed down. He’s responding to my concerns about exposing URLs in progressive web apps, but thankfully without the absolutist rhetoric or insults. Progress!

DRY: Do Repeat Yourself - QuirksBlog

Y’know, I think PPK might be on to something here. It’s certainly true that developers have such an eversion to solving a problem twice that some users end up paying the cost (like in the examples of progressive enhancement here).

I will be pondering upon this.

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.

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.

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.

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.

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

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.

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.

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.

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.

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!

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.

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!

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.

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.

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

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

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.

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.

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.

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.

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.

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.