Tags: ratio

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.

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.

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)

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.

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.

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.

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.

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.

Man-Computer Symbiosis

J. C. R. Licklider’s seminal 1960 paper. I’ve added it to this list of reading material.

The title should, of course, read “Person-Computer Symbiosis.”

It’s ok to say what’s ok | Government Digital Service

I really like this list. I might make a similar one for the Clearleft office so what’s implicit is made explicit.

It’s ok to:

  • say “I don’t know”
  • ask for more clarity
  • stay at home when you feel ill
  • say you don’t understand
  • ask what acronyms stand for
  • ask why, and why not
  • forget things

Richard Dawkins, Mount Improbable: Play With Evolution

A lovely interactive demonstration of evolution, based on the original code Richard Dawkins used for Climbing Mount Improbable.

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.

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

Will we ever walk again on the surface of the moon?

A brief history of lunar sci-fi.

No matter how much we want the science fiction dream to come true – and personally I would love it – the reality is that a lunar colony is very unlikely to ever be financially viable. It would be no surprise if we saw more expeditions to the moon, but all those wonderful visions of the high frontier recreated in space are more likely to apply to destinations with a better long-term future, like Mars, rather than the moon.

Building Inspector by NYPL Labs

A wonderful Zooniverse-like project from the New York Public Library:

Help unlock New York City’s past by identifying buildings and other details on beautiful old maps.

Journal of Design and Science

A new publication from MIT. It deliberately avoids the jargon that’s often part and parcel of peer-reviewed papers, and all of the articles are published under a Creative Commons attribution licence.

The first issue is dedicated to Marvin Minsky and features these superb articles, all of which are independently excellent but together form an even greater whole…

Design and Science by Joi Ito:

When the cybernetics movement began, the focus of science and engineering was on things like guiding a ballistic missile or controlling the temperature in an office. These problems were squarely in the man-made domain and were simple enough to apply the traditional divide-and-conquer method of scientific inquiry.

Science and engineering today, however, is focused on things like synthetic biology or artificial intelligence, where the problems are massively complex. These problems exceed our ability to stay within the domain of the artificial, and make it nearly impossible for us to divide them into existing disciplines.

Age of Entanglement by Neri Oxman:

This essay proposes a map for four domains of creative exploration—Science, Engineering, Design and Art—in an attempt to represent the antidisciplinary hypothesis: that knowledge can no longer be ascribed to, or produced within, disciplinary boundaries, but is entirely entangled.

Design as Participation by Kevin Slavin:

The designers of complex adaptive systems are not strictly designing systems themselves. They are hinting those systems towards anticipated outcomes, from an array of existing interrelated systems. These are designers that do not understand themselves to be in the center of the system. Rather, they understand themselves to be participants, shaping the systems that interact with other forces, ideas, events and other designers. This essay is an exploration of what it means to participate.

The Enlightenment is Dead, Long Live the Entanglement by Danny Hillis:

As our technological and institutional creations have become more complex, our relationship to them has changed. We now relate to them as we once related to nature. Instead of being masters of our creations, we have learned to bargain with them, cajoling and guiding them in the general direction of our goals. We have built our own jungle, and it has a life of its own.

Atomic Classification | Trent Walton

There is one truism that has been constant throughout my career on the web, and it’s this: naming things is hard.

Trent talks about the strategies out there for naming things. He makes specific mention of Atomic Design, which as Brad is always at pains to point out, is just one way of naming things: atoms, molecules, organisms, etc.

In some situations, having that pre-made vocabulary is perfect. In other situations, I’ve seen it cause all sorts of problems. It all depends on the project and the people.

Personally, I like the vocabulary to emerge from the domain knowledge of the people on the project. Building a newspaper website? Use journalism-related terms. Making a website about bicycles? Use bike-related terms.

Most importantly, make the naming process a collaborative exercise, as outlined by Alla and Charlotte.

Outline Your Talk with Presenter Notes — Ladies in Tech

Continuing the topic of public speaking, Jenn has a really good technique for figuring out how to arrange the pieces of your talk without getting bogged down in designing slides.

How to prepare and write a tech conference talk | wunder

Lena’s in-depth run-down of how she puts together a conference talk. If you’re new to public speaking, this is well worth reading.

Together • Ludwig Wendzich

Bootstrap is a product of Twitter. If you want your team to work like Twitter’s team, then by all means use Bootstrap. Pick up their design language. Their tool chain. Their decisions. Don’t be surprised when it feels off every time you use it. It will.

The same goes for Material Design. Foundation. These are all products built by other teams to work for their process. Their structure.

Finding the right tool is not what I am advocating for. Making it is.

Generate Mozilla Security Recommended Web Server Configuration Files

This is useful if you’re making the switch to HTTPS: choose your web server software and version to generate a configuration file.

Our Generation Ships Will Sink / Boing Boing

Kim Stanley Robinson pours cold water on the premise of generation starships for crewed interstellar travel.

The more I hear about Aurora, the more I think I might enjoy reading it.

How can we fix internet comments?

Here’s an interesting approach to making comments more meaningful:

Instead of blindly publishing whatever people submit, we first ask them to rate the quality and civility on 3 randomly-selected comments, as well as their own. It’s a bit more work for the commenter, but the end result is a community built on trust and respect, not harassment and abuse.

90 Days

John is joining us at Clearleft for three months and he’s documenting every single day—in quite some detail!

If you’ve ever wanted to be a fly on the wall at Clearleft, well, this is pretty close.

Why availability matters

A superb illustration of why playing the numbers game and dismissing even a small percentage of your potential audience could be disastrous.

It’s not 1% of people who always can’t see your site and 99% of people who always can. It’s 1% of visits. Almost all the people who don’t get your site correctly actually should have been able to. They don’t have JavaScript turned off. They’re not browsing on a WAP phone over a 2g connection from a shanty town. They’re you, in a cellar bar or a hotel room or waiting for the phone network to wake back up.

2 Kinds of People

Dividing the world in two.

When Neil Armstrong and Edmund Hillary Took a Trip to the North Pole | Atlas Obscura

Hillary, legendary for being the first to scale Mount Everest with teammate Tenzing Norgay, was on board, and Armstrong was, too, saying he was curious to see what the North Pole looked like from ground level, as he’d only seen it from the moon. Astronaut problems.

Project Kronos on Vimeo

A beautiful bit of design fiction.

Creating the Schedule // beyond tellerrand

Marc and I have chatted before about the challenges involved in arranging the flow of talks at a conference. It’s great that he’s sharing his thoughts here.

Talking design

Mariana Mota is writing a book on the collaborative design process. She’s sharing her research videos as she goes.

The first video features Gerry Leonidas.

An immigration lawyer reviews Paddington

Sounds like a cute idea, right?

In fact it’s the best thing you’re ever likely to read on Peruvian ursine immigration.

Wanderers - a short film by Erik Wernquist on Vimeo

A vision of humanity’s exploration of our solar system.

Living on the Electromagnetic Border

Continuous partial City And The City, courtesy of James.

Those of us who reside on the “right” side of fixed, physical borders seem to cross the electromagnetic border every day, whether overtly, by entering the right passwords and credit card numbers, or covertly, as when using VPNs to watch TV programs viewable only in other territories. Those on the “wrong” side are subjected to a different but analogous battery of tests, intensifying at the physical border but often carried out far from it, in networked enclaves or foreign transit zones or aboard floating teleconference platforms in international waters.

ysltf on Huffduffer

Sam Greenspan from the brilliant 99% Invisible podcast has created a Huffduffer feed based on his “You Should Listen To Friday” Tumblr blog.

If you have a Huffduffer account, add this to your collective.

And definitely subscribe to this RSS feed in your podcast app of choice.

Science Hack Day: Serious Fun in the Making

It’s impossible to predict the creations that will spring forth when people gather in the spirit of participation, collaboration, and benign anarchy at the next Science Hack Day, but the results are certain to be inspired, and inspiring.

Tabletop Whale

Beautiful visualisations of science and nature.

Made with love by a designer with a molecular biology degree.

Keep ’em Separated — ericportis.com

I share the concerns expressed here about the “sizes” attribute that’s part of the new turbo-powered img element (or “the picture element and its associates”, if you prefer). Putting style or layout information into HTML smells bad.

This is a concern that Matt Wilcox has raised:

Change the design and those breakpoints are likely to be wrong. So you’ll need to change all of the client-side mark-up that references images.

I can give you a current use-case: right here on adactio.com, you can change the stylesheet …so I can’t embed breakpoints or sizes into my img elements because—quite rightly—there’s a separation between the structural HTML layer and the presentational CSS layer.

A Single Div

Wonderfully creative use of CSS gradients, borders, box-shadows, and generated content.

Kyle Bean - Whistleblower

If you picked up the Guardian this weekend, you’ll have seen some brilliant work by Kyle on the cover (and inside) the magazine section.

Best Collaborative Project : The Net Awards 2014

Well, this is nice: the Line-mode browser hack has been nominated in the Best Collaborative Project in the Net awards.

But 24 Ways has also been nominated, and let’s face it, that really is the best collaborative project.

Windows of New York | A weekly illustrated atlas

Lovely little graphics inspired by New York architecture.

An Hour of Code spawns hours of coding

Here’s a heartwarming tale. It starts out as a description of processing.js project for Code Club (which is already a great story) and then morphs into a description of how anyone can contribute to make a codebase better …resulting in a lovely pull request on Github.

Ask About Going Home

Some examples to illustrate the UK Border Agency’s latest campaign.

Galaxy Zoo Quench

This is quite remarkable. Now that the Galaxy Zoo project from Zooniverse has successfully classified all its data (already a remarkable achievement), its volunteers are now collaborating on writing a scientific paper.

There’s something going on here. This isn’t just a “cool” or “cute” link—this is the first stirring of something entirely new that is made possible by network technology.

Reflections on An Event Apart DC 2013

Jason pulls together some of the themes that emerged at An Event Apart DC this week.

A few words on Doug Engelbart

A beautiful eulogy for Doug Engelbart by Bret Viktor, not celebrating the laundry list of his inventions, but celebrating his intent in making the world a better place.

Engelbart had an intent, a goal, a mission. He stated it clearly and in depth. He intended to augment human intellect. He intended to boost collective intelligence and enable knowledge workers to think in powerful new ways, to collectively solve urgent global problems.

2001: A Space Odyssey

A really nice piece on Robert McCall, who was artist-in-residence at NASA and worked as conceptual artist on Kubrick and Clarke’s 2001: A Space Odyssey.

Kyle Bean - Portfolio

Kyle’s new site is looking lovely and responsive (thanks to Josh). But mostly it just gets out of the way so you can take in his truly amazing work.

Antiphonal Geometry · Harmony and proportion in responsive web design

This is the full text of Owen’s talk at the Responsive Day Out. It makes for a terrific read!

Springboard – Coming soon from Clearleft

The latest Clearleft product will be like having an intensive set of discovery, collaboration, and exploration workshops in a box. Perfect for startups and other small businesses short on time or budget.

It starts in Spring but you can register your interest now.

Antiphonal Geometry: harmony and proportion in responsive web design

The slides from Owen’s magnificent talk at the Responsive Day Out …but you really had to be there.

Editorially: Write Better

A collaborative writing tool built by a dream team. I’ve been using it for a while now and it’s very nice indeed.

Metadesign at Hack Farm by James Box

James’s notes from the most recent Hack Farm show that, even without a finished product, there were a lot of benefits.

Rhythm And Proportion In Grids And Type - Vanseo Design

A really nice piece on scale, ratio and rhythms in web design.

Organized Wonder | Curated documentaries, interviews, short films, and other top videos from around the web.

This is like a video version of Huffduffer (without the timeshifting). It’s very nicely done.

Jess & Russ

This is so lovely! The story of Jessica and Russ’s romance, illustrated by fifteen of their friends.

Fictional magazine covers from Blade Runner - a set on Flickr

Magazine covers created by Tom Southwell for background scenes in Blade Runner.

Horn

Context-Free Patent Art

This is wonderfully random: illustrations used to illustrate patent applications but without the context.

inspiring toilets

Inspired by the recent .net magazine article on “20 leading web designers’ desks for your inspiration”, here’s a blog dedicated to the place where the real web design magic happens: the designer’s poostation.

Deutsch Doodles

These lovely doodles from Carla give me Fernweh for Germany.

GATHER. A Graphic Novel by Anton Peck — Kickstarter

Anton is a fantastic artist. Therefore, this graphic novel will be fantastic. Therefore, you should back the hell out of it.

A List Apart: Articles: Creating Intrinsic Ratios for Video

This really is a ridiculously smart way of keeping third-party videos scalable in responsive layouts. I’ve just implemented it on this year’s dConstruct site.

Throw away Photoshop and be true to your medium | Government Digital Service

How designing in the browser works for rapid iteration.

Whales | Home

Yet another fantastic citizen science project from Zooniverse: Whale.fm.

You can help marine researchers understand what whales are saying. Listen to the large sound and find the small one that matches it best.

Sly Mongoose: A Responsive Digital Comic Proof-of-Concept

A responsively designed comic. Yeah, you heard me right. Responsive. Comic!

Just keep going — Owltastic — writing about web design by Meagan Fisher

A very honest post from Meagan that I can relate to (and Jessica too, I suspect).

Web Typography for the Lonely

A collection of experiments in typography using canvas, SVG, JavaScript and whatever else it takes.

100 Year Starship Study

Now this looks like a fascinating project …and there’s a symposium happening in Florida at the end of September with Jill Tartar, Stewart Brand and more. I want to go to there.

Explorations in Typography / Mastering the Art of Fine Typesetting

What a great way to sell a book with “explorations” in the title—play around with the font size, leading, alignment (and browser window size).

Archives & Museum Informatics: Museums and the Web 2010: Papers: Cope, A.S., Buckets and Vessels

Here’s one to add to Instapaper or Readability to savour at your leisure: Aaron Straup Cope’s talk at Museums and the Web 2010:

This paper examines the act of association, the art of framing and the participatory nature of robots in creating artifacts and story-telling in projects like Flickr Galleries, the API-based Suggestify project (which provides the ability to suggest locations for other people’s photos) and the increasing number of bespoke (and often paper-based) curatorial productions.

Get Ratio

A handy little tool for quickly generating ratios (like the golden section) from a number.

The Story of the HTML5 Shiv « Paul Irish

This dovetails nicely with my recent post about the spirit of distributed collaboration. Here’s a great little bit of near-history spelunking from Paul, all about styling new HTML5 elements in pesky older versions of Internet Explorer.

In Radiolab We Trust

A great way of supporting the best podcast on the planet: a limited set of prints by five designers, illustrators and artists. Grab yours quick before they’re all gone.

Samantha Warren’s Web Design Blog | Design ~ Web Typography ~ Inspiration

An excellent design technique from Samantha that allows you to nail down a visual vocabulary without using something as wishy-washy as a mood board or as rigid as a fully-blown comp. Brilliant!

The style tile is not a literal translation of what the website is going to be, but a starting point for the designer and the client to have a conversation and establish a common visual language.

F*ck Yeah Headlines

Each weekday I find a headline on a major news site, and illustrate it without reading a word of the story.

100 Little Robots (by) Anton Peck (in) Journal

I love watching an artist at work. Right after watching the accompanying video, I ordered a robot postcard from Anton.

Brendan Dawes - FOTB2010 on Vimeo

Brendan giving one of the “inspired sessions” at last year’s Flash On The Beach one evening in the Brighton Dome.

The Web Is a Customer Service Medium (Ftrain.com)

An excellent piece of writing on the fundamental question of the web: Why Wasn’t I Consulted?

New Statesman - Inside the Parliament Square kettle

A well-written account of a disgraceful situation. "We all go down together, horses looming above us, baton blows still coming down on our heads and shoulders. I am genuinely afraid that I might be about to die, and begin to thumb in my parents' mobile numbers on my phone to send them a message of love."

Split Postage

A nifty idea to help you people save on postage by clubbing together to make a single Amazon purchase.

8 BIT WOOD | serving all your wooden pixel needs

We need to make sure that Shaun Inman never discovers this site.

Frank Chimero - How to Have an Idea

Stephen Johnson wrote a book. Frank Chimero did a doodle.

Simon Collison | Colly | Journal | dConstruct workshop

Colly shows the results of his dConstruct workshop: great stuff!

Unicorn Being a Jerk : C. W. Moss

That unicorn is such a jerk.

Frank Chimero — Holiday

Burnout is a bitch.

Evolution and Creativity: Why Humans Triumphed - WSJ.com

Matt Ridley's new book sounds like a corker.

Design Swap - Spreading camaraderie through good design

An exercise in collaboration and perspective: let another designer touch your website while you touch theirs.

Don’t listen to Le Corbusier—or Jakob Nielsen : Cheerful

A beautiful call to arms against engineerism in design. Software cries out for love.

Good Kickoff Meetings

The companion website to Kevin Hoffman's IA Summit talk, this is a hugely valuable resource for an often-overlooked part of the design process: the kick-off meeting.

Axe Cop

A web comic written by a 5 year old (illustrated by his father).

kung fu grippe : Making the Clackity Noise

I want to frame this and mount it on my wall so I will see it every day.

Jonathan Harris . World Building in a Crazy World

I don't agree with everything in these vignettes but they make for an good, thought-provoking read.

Questionable Characters | Home

A beautifully presented site wherein Ben and Frank endeavour to answer your design-related questions.

teoskaffa.com AND THAT'S WASSUP

I don't normally like all-Flash sites and I really don't like sites that mess with my cursor* but this one works really well. * I'm looking at you, Harry Potter Twitter site with the password anti-pattern.

Missed Connections

"Messages in bottles, smoke signals, letters written in the sand; the modern equivalents are the funny, sad, beautiful, hopeful, hopeless, poetic posts on Missed Connections websites. Every day hundreds of strangers reach out to other strangers on the strength of a glance, a smile or a blue hat. Their messages have the lifespan of a butterfly. I'm trying to pin a few of them down."

Incredibles - The Chairs

All the chairs in Pixar's The Incredibles.

Ficly - A better, shorter story

Ficlets is back ...as Ficly. Take that, AOL: this site is just too good to roll over and die.

What’s Golden | Jason Santa Maria

An excellent piece by Stan in which he questions (without rejecting out of hand) applying proportion-based rules to the web, a medium with inherently fluid proportions.

concept ships

An online animated spaceship and experimental aircraft art magazine. Gorgeous.