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, among other things. Enjoy.

Understanding the Critical Rendering Path

A visual representation of the critical rendering path. See text following image.

When a browser receives the HTML response for a page from the server, there are a lot of steps to be taken before pixels are drawn on the screen. This sequence the browsers needs to run through for the initial paint of the page is called the "Critical Rendering Path".

Knowledge of the CRP is incredibly useful for understanding how a site's performance can be improved. There are 6 stages to the CRP -

  1. Constructing the DOM Tree
  2. Constructing the CSSOM Tree
  3. Running JavaScript
  4. Creating the Render Tree
  5. Generating the Layout
  6. Painting

Tags: 

Transparent JPG (With SVG)

This is really excellent: take a JPG, which has great compression for photos, but doesn't support transparency, and link it within an <svg> which can apply a clipping mask based on a path. The path can be traced manually over the photo in Photoshop or Illustrator, and can be exported as an SVG file from Illustrator. The following code (minus the path data), demonstrates how to do this:

HTML5

<svg viewBox="0 0 921.17 1409.71">
  <defs>
    <clipPath id="chris-clip">
      <path d=" ... " />
    </clipPath>
  </defs>
  <image xlink:href="/images/chris.jpg" clip-path="url(#chris-clip)" x="0" y="0" width="921" height="1409">
<svg>

Tags: 

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