Tags: im

816

sparkline

page-transitions-travelapp

A demo of page transition animations by Sarah—she’s written about how she did it. I really like it as an example of progressive enhancement: you can navigate around the site just fine, but with JavaScript you get the smooth transitions as a bonus.

All of this reminds me of Jake’s proposal for navigation transitions in the browser. I honestly think this would solve 80% of the use-cases for single page apps.

Animating Progress - Snook.ca

Jonathan goes down the rabbit hole of trying to animate a progress element.

The Untold Story of Jaime Levy, Punk-Rock Cyber-Publishing Pioneer

This excerpt from Claire L. Evans’s new book Broad Band sounds like Halt and Catch Fire, but for real.

Many people saw the web for the first time in Jaime’s loft, on a Mac II her hacker friend Phiber Optik set up with a 28.8K internet connection. As avant-garde guitarist Elliott Sharp performed live, and another friend, DJ Spooky, played house tracks, Jaime’s guests gathered around the Mac’s small screen. At the top of 1994, there were fewer than 1,000 websites in the world, mostly personal home pages. These converts would call themselves the “early true believers,” counting the year of their arrival online as a mark of status, the way the first punks claimed 1977.

Keep Pixelated Images Pixelated as They Scale | CSS-Tricks

This is a potentially useful bit of CSS that I had no idea existed.

Was There a Civilization On Earth Before Humans? - The Atlantic

So, could researchers find clear evidence that an ancient species built a relatively short-lived industrial civilization long before our own? Perhaps, for example, some early mammal rose briefly to civilization building during the Paleocene epoch about 60 million years ago. There are fossils, of course. But the fraction of life that gets fossilized is always minuscule and varies a lot depending on time and habitat. It would be easy, therefore, to miss an industrial civilization that only lasted 100,000 years—which would be 500 times longer than our industrial civilization has made it so far.

Starability - Accessible rating system demo

Accessible star ratings (progressively enhanced from radio buttons) with lots of animation options. The code is on Github.

Lazy Loading Images and Video  |  Web Fundamentals  |  Google Developers

Jeremy Wagner offers a deep dive into lazy loading images (and video) with some advice for considering the no-JavaScript situation too.

setInterval(_=>{ document.body.innerHTML = [ …”😮😀😁😐😑😬” ][~~(Math.random()*6)] },95)

A tiny snippet of JavaScript for making an animation of a talking emoji face.

Carbon

This service could be quite handy if you’re making a presentation that involves showing code—it generates syntax-highlighted images of code.

Animated SVG Radial Progress Bars - daverupert.com

Using a single path SVG, a smidge of CSS, and ~6 lines of JavaScript.

In this days of monolithic frameworks, I really like seeing modest but powerful patterns like this—small pieces that we can loosely join.

Compressive Images Revisited - TimKadlec.com

Tim explains why that neat trick of making a really big JPEG with quality set to 0% is no longer necessary, and how the savings you make in bandwidth with that technique are nullified by the expense of the memory footprint needed.

Empty half the Earth of its humans. It’s the only way to save the planet | Kim Stanley Robinson | Cities | The Guardian

Kim Stanley Robinson explores the practicalities of E.O. Wilson’s Half Earth proposal.

There is no alternative way; there is no planet B. We have only this planet, and have to fit our species into the energy flows of its biosphere. That’s our project now. That’s the meaning of life, in case you were looking for a meaning.

Elephant - WordRidden

We went on a safari after the Pixel Up conference in South Africa. It was an amazing experience …but there was also The Elephant Incident.

And now I don’t need to write about it because I could never come close to recounting it as brilliantly as Jessica has done here.

The darkness closed in quickly as we rattled along the trail, the flashbulb lightning not doing much to supplement the juddering glow of the headlights. We were, by all appearances, a happy and relaxed little group, pleased with the day’s sightings, mellowed out by the evening’s drinks, looking forward to a nice dinner with wine and then a good night’s sleep. But I kept thinking about the elephant encounter from the night before—and so, apparently, did young Tas, who was bundled up next to his dad and eventually said quietly: “I don’t want to see another elephant.” We all comforted him with false bravado: no, don’t worry, there won’t be any elephants, we’re fine, it’s all fine, everything is totally fine. And all the while I was peering into the trees, and attempting to gauge the relative freshness of the huge piles of elephant dung on the road, and really, really not wanting to see an elephant either.

Swapping Images with the Sizes Attribute | Filament Group, Inc., Boston, MA

The hits just keep on coming from the Filament Group. Here Scott shares a really clever technique for creating an image magnifier using the sizes attribute of the img element.

The web is under threat. Join us and fight for it. – World Wide Web Foundation

What was once a rich selection of blogs and websites has been compressed under the powerful weight of a few dominant platforms. This concentration of power creates a new set of gatekeepers, allowing a handful of platforms to control which ideas and opinions are seen and shared.

Tim Berners-Lee on the 29th anniversary of Information Management: A Proposal.

Two myths currently limit our collective imagination: the myth that advertising is the only possible business model for online companies, and the myth that it’s too late to change the way platforms operate. On both points, we need to be a little more creative.

While the problems facing the web are complex and large, I think we should see them as bugs: problems with existing code and software systems that have been created by people — and can be fixed by people.

It’s Dangerous to Go Stallone. Take Glyphhanger | Filament Group, Inc., Boston, MA

You’ll need to be comfortable with using the command line, but this is a very useful font subsetting tool from those clever folks at Filament Group.

The Technium: Protopia

I think our destination is neither utopia nor dystopia nor status quo, but protopia. Protopia is a state that is better than today than yesterday, although it might be only a little better. Protopia is much much harder to visualize. Because a protopia contains as many new problems as new benefits, this complex interaction of working and broken is very hard to predict.

Kevin Kelly’s thoughts at the time of coining of this term seven years ago:

No one wants to move to the future today. We are avoiding it. We don’t have much desire for life one hundred years from now. Many dread it. That makes it hard to take the future seriously. So we don’t take a generational perspective. We’re stuck in the short now. We also adopt the Singularity perspective: that imagining the future in 100 years is technically impossible. So there is no protopia we are reaching for.

Boxy SVG

This is impressive—a fully featured graphics app for creating SVGS right in your browser.

Metaballs

Metaballs, not to be confused with meatballs, are organic looking squishy gooey blobs.

Here’s the maths behind the metaballs (implemented in SVG).

Parallax scrolling with CSS variables | basicScroll

Don’t let the title fool you—this isn’t just for parallax scrolling (thank goodness!)—it’s for triggering any CSS updates based on scroll position. Using CSS custom properties makes a lot of sense. The JavaScript/CSS bridge enabled by custom properties is kind of their superpower. (That’s one of the reasons why I don’t like calling them “CSS variables” which makes them sound like Sass variables—they’re so much more than that!)