Snippets

These snippets are my attempt to save and organize various bits of code, best practices, and resources relating to web development and design. They also function as a to do list of sorts, for things I want to implement in my own code, but haven't yet. The concept is inspired by Jeremy Keith's links and CSS-Tricks, among other things. Enjoy.

Micro.blog - a timeline and publishing platform for the open web

A screenshot of the Micro.blog home page, with a swirling jumble of icons

From the Micro.blog Kickstarter:

Do you remember how the web used to work? How the web was supposed to work?

In the earlier days of the web, we always published to our own web site. If you weren’t happy with your web host, or they went out of business, you could move your files and your domain name, and nothing would break.

Today, most writing instead goes into a small number of centralized social networking sites, where you can’t move your content, advertisements and fake news are everywhere, and if one of these sites fails, your content disappears from the internet. Too many sites have gone away and taken our posts and photos with them.

I want to encourage more independent writing. To do that, we need better tools that embrace microblogs and the advantages of the open web. We need to learn from the success and user experience of social networking, but applied to the full scope of the web.

Tags: 

The Reduced Motion Media Query

Sites all too often inundate their audiences with automatically playing, battery-draining, resource-hogging animations. The need for people being able to take back control of animations might be more prevalent than you may initially think.

[...]

Remember: we're all just temporarily-abled. Feeling a little dizzy might not seem like that big a deal, but that moment of nausea might be a critical one: losing balance and falling down, a migraine during an interview, nausea-triggered vomiting while working a food service job, passing out while operating a car UI, etc.

So what can we do about it?

Permalink to this heading.Enter a new Media Query

Safari 10.1 introduces the Reduced Motion Media Query. It is a non-vendor-prefixed declaration that allows developers to “create styles that avoid large areas of motion for users that specify a preference for reduced motion in System Preferences.”

The syntax is pretty straightforward:

CSS

@media (prefers-reduced-motion) {
  .background {
    animation: none;
  }
}

Safari will parse this code and apply it to your site, letting you provide an alternative experience for users who have the Reduced Motion option enabled. Think of this new Media Query like @supports: describe the initial appearance, then modify the styles based on capability.

Tags: 

Why we do what we do

I think this sums up why I'm so impassioned about web development:

I don’t get excited about frameworks or languages—I get excited about potential; about playing my part in building a more inclusive web.

I care about making something that works well for someone that has only ever known the web by way of a five-year-old Android device, because that’s what they have—someone who might feel like they’re being left behind by the web a little more every day. I want to build something better for them.

Tags: 

WebGL demos and apps by David Li

A screenshot of David Li's site, with a grid of thumbnails of their various WebGL demos.

These are awesome and mesmerizing, even more so that they demonstrate what can be done with native browser WebGL APIs. Give them a try. (Warning: some may be quite laggy if you have lower end hardware, and I haven't tested these on mobile.)

Tags: 

Pages