Musings

When working with a very dynamic UI (think Single Page App) with potentially large JS libraries, view templates, validation, ajax, animations, etc… what are some strategies that will help minimize or reduce the time the browser spends on reflow?

For example, we know there are many ways to accomplish a DIV size change but are there techniques that should be avoided (from a reflow standpoint) and how do the results differ between browsers?

It’s best to try and avoid changing DOM elements whenever possible. At times you can prevent reflow at all by sticking to CSS properties or, if required, using CSS’ transforms so that the element itself is not affected at all but, instead the visual state is just changed.

I understand that the overall goal is to stay responsive, but what is the purpose of avoiding pixels?

I know how to use the <img> element, but I’ve been hearing things about the upcoming <picture> element to be used for responsive images. The articles I’ve read on the subject are kind of mixed up about the usage of the <picture> element and I’d like to get some clarification.

How is the <picture> element different from the <img> element? Should I always use it instead of the <img> element given that I want all of my sites to be responsive?

Countless articles, many quite useful, have been written on the subject of responsive design since Ethan Marcotte’s post that started it all, but finding one that directly helps people understand some specific techniques while also explaining the why behind each action and decision is exceedingly hard. I’ll try my best to do so concisely here.

Note: In this post I am primarily talking about creative personal projects, but also some about programming and creativity in general.

Some people ask me how I create the things that I do, what inspires me, and why I do what I do. This post is to give information as to some of that.

First I’ll start with the creative process.