Tags: im

673

sparkline

KUTE.js | Javascript Animation Engine

This looks like an interesting little JavaScript library for scripting animations.

SlimWiki — Beautiful Wikis for Teams

At the last Clearleft Hackfarm, one of the ideas I proposed was “a wiki that doesn’t suck.” Looks like someone’s finally done it.

History of Icons – a visual brief on icon history by FUTURAMO

An illustrated history of digital iconography.

SmashingConf Barcelona 2016 - Jeremy Keith on Resilience on Vimeo

Here’s the video of the talk I gave at Smashing Conference in Barcelona last month—one of its last outings.

kdzwinel/progress-bar-animation: Making a Doughnut Progress Bar - research notes

This is a thorough write-up of an interesting case where SVG looks like the right tool for the job, but further research leads to some sad-making conclusions.

I love SVG. It’s elegant, scalable and works everywhere. It’s perfect for mobile… as long as it doesn’t move. There is no way to animate it smoothly on Android.

From Pages to Patterns – Charlotte Jackson - btconfBER2016 on Vimeo

The video of Charlotte’s excellent pattern library talk that she presented yesterday in Berlin.

The Mob’s IT Department | Bloomberg Business

You just know that this will end up being made into a film one day. It’s like a downmarket Mr. Robot.

The Tragedy/Farce of the Open Web according to journalists – Baldur Bjarnason

Continuous web death.

The modern journalist is not an expert on the web. They and their colleagues have spent a large part of the last twenty-five years dismissing the open web at every stage. They are not the people you can trust to either accurately assess the web or to make usable websites. You can’t even trust them to make sensible decisions about web strategy. Just look at their damn websites!

Photo Toning with Gradients & Blend Modes

This use-case for blend modes is making me thirsty.

Also: look who’s blogging again!

SpaceTime Coordinates Memento ~ your personal place in space by govy — Kickstarter

This is a rather lovely idea—a disc with eight rings, each marked with the position of a planet, the arrangement of which corresponds to a specific date.

Building Social: A Case Study On Progressive Enhancement – Smashing Magazine

A step-by-step walkthrough of layering on enhancements to a site. The article shows the code used, but it isn’t really the code that matters—it’s the thought and planning that went into it.

Thimble by Mozilla - An online code editor for learners & educators.

This is a really, really nice tool for creating HTML, CSS, and JavaScript without needing a separate text editor. And then you can publish the results to a URL.

It’s a bit like CodePen but it shows the whole HTML document, which makes it particularly useful for teaching front-end development to beginners (ideal for Codebar!).

CodePen for snippets; Thimble for pages.

Is animation “just” an enhancement? + WebGL effects & SVG paths explained - The UI Animation Newsletter  #16.30

Yes! Yes! Yes! Val nails the essence of progressive enhancement:

Never feel like it’s a waste to dedicate time to the enhancements; to put real thought and effort into your animations and what they’ll contribute to the experience. Progressive enhancement is all about freeing up your time to make the enhancements great once you’ve got that basic core functionality covered. That’s the path to making new and wonderful things on the web while also being responsible. It’s quite literally a way to get the best of both worlds.

The last day of hot metal press before computers come in at The New York Times | Aeon Videos

The 1978 short film Farewell, etaoin shrdlu documents the changeover from linotype to digital typesetting at The New York Times.

An evenhanded treatment of the unremitting march of technological progress, Weiss’s film about an outmoded craft is stylistically vintage yet also immediate in its investigation of modernity.

Heydon/fukol-grids

The most minimal responsive, flexible grid library you can find. In fact, here’s the whole thing:

.fukol-grid {
  display: flex; /* 1 */
  flex-wrap: wrap; /* 2 */
  margin: -0.5em; /* 5 (edit me!) */
}

.fukol-grid > * {
  flex: 1 0 5em; /* 3 (edit me!) */
  margin: 0.5em; /* 4 (edit me!) */
}

Magic randomisation with nth-child and Cicada Principle | Charlotte Jackson, Front-end developer

Here’s the really clever technique that Charlotte used on the speakers page for this year’s UX London site.

I remember that Jon was really impressed that she managed to implement his crazy design.

the new code – Even Stevens: Using Round and Space in Repeated Background Images

See, when I first heard about background-repeat: round; I thought it was something to do with making things circular. But no, it’s about tiling a background image so that nothing gets cut off. The amount of tiling required is rounded to the nearest whole number.

Now I get it.

GreenSock | “will-change” must change? Animators beware.

This will-change property that was intended to SOLVE problems for animators may end up doing the opposite.

It seems wise for the browsers to step back and let the spec authors fill in the implementation details and gain consensus before moving forward.

Web Animation Workshops

Val Head and Sarah Drasner have teamed up to offer a two-day workshop on web animation. If you have a chance to attend, do it!