Adactio: Links

The Complete CSS Demo for OpenType Features - OpenType Features in CSS

Every single font-feature-settings value demonstrated in one single page.

Home Refreshment

A nifty little responsive demo from Nick, recreating a 1948 Coca-Cola ad that was designed to be responsive to different wall spaces.

Web Push Notifications Demo | Microsoft Edge Demos

Push notifications explained using astrology. But don’t worry, there’s also some code, just in case you prefer your explanations to also include models that actually work.

Segmented type appreciation corner

Marcin built this lovely little in-browser tool to demonstrate how segmented type displays work at different sizes.

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.

Starability - Accessible rating system demo

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

In Defense of Design Thinking, Which Is Terrible + Subtraction.com

Our insular discourse, the way we’ve jealously protected the language and tools of design, the way we’ve focused so much on the “genius designer”… these behaviors have all worked against our own interests.

Khoi on design thinking and the democratisation of design.

Any embrace of design by non-designers is a good thing, and design thinking qualifies here. The reason for this is that when that happens, it means our language, the vocabulary of design, is broadening to the rest of the world.

Infinitown | A WebGL Experiment by Little Workshop

I reckon this could be the canonical WebGL demo.

And if I’m reading dev tools right, this is all done in 86K.

100 Demon Dialogues – Lucy Bellwood

This is easily the most relatable 100 Days project I’ve seen:

I began posting a daily dialogue with the little voice in my head who tells me I’m no good.

Now you can back already-funded the Kickstarter project to get the book …and a plush demon.

HN PWA - Hacker News readers as Progressive Web Apps

Of all the sites to pick to demo progressive web apps, we get the cesspit that is Hacker News …I guess it is possible to polish a turd.

Anyway, here are some examples of using frameworks to create alternative Hacker News readers. So the challenge here is to display some text to read..

Four of them render absolutely no content without JavaScript.

In the Hall of Shame we have React, Preact, Angular, and Polymer.

In the Hall of Fame, we have the ones doing it right: React, Vue, and Viper.

That’s right: React appears in both. See, it’s not about the tools; it’s about how you use ‘em.

1968 Demo Interactive - Doug Engelbart Institute

A new way to enjoy the mother of all demos, organised into sections that you can jump between. This was put together by Douglas Engelbart’s daughter Christina, and Bret Victor.

cursory hack

Sorcery!

(well technically, JavaScript + canvas, but y’know, to-may-to, to-mah-to)

React Isomorphic Demo

It is possible to use React without relying completely on client-side JavaScript to render all your content—though it’s certainly not the default way most tutorials teach React. This ongoing tutorial aims to redress that imbalance.

Besides the main benefit of server rendering giving faster page loads, it also enables large amounts of the site to run without JavaScript. There are many reasons why you would want this, but my personal reasons are that it allows you to completely drop support JavaScript in older browsers, but still have the site function.

Democratize the Internet Now! | New Republic

It is a sad and beautiful world wide web:

The technology that let people make web sites never went away. You can still set up a site as if it were 1995. But culture changes, as do expectations. It takes a certain set of skills to create your own web site, populate it with cool stuff, set up a web server, and publish your own cool-stuff web pages. I would argue that those skills should be a basic part of living in a transparent and open culture where individuals are able to communicate on an equal field of play. Some fellow nerds would argue the same. But most everyone else, statistically, just uses Facebook and plays along.

Paul Ford shines a light on the solution:

Standing against this tide of centralization is the indie web movement. Perhaps “movement” is too strong—it’s more an aesthetic of independence and decentralization. The IndieWebCamp web page states: “When you post something on the web, it should belong to you, not a corporation.” You should own your information and profit from it. You should have your own servers. Your destiny, which you signed over to Facebook in order to avoid learning a few lines of code, would once again be your own.

Beautiful, beautiful writing:

We could still live in that decentralized world, if we wanted to. Despite the rise of the all-seeing database, the core of the internet remains profoundly open. I can host it from my apartment, on a machine that costs $35. You can link to me from your site. Just the two of us. This is an age of great enterprise, no time to think small. Yet whatever enormous explosion tears through our digital world next will come from exactly that: an individual recognizing the potential of the small, where others see only scale.

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.

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.

Tags: demo

46