Skip to main content

Musings

Zach Saucier's thoughts

  • Why not use HTML tables for layout?

    Why should I not use a table for my layout?

    This question has been discussed on Stack Overflow as well as many other sites. I’ll summarize the main points here.

    We should use tables, but only for tabular data because it is incorrect, and more difficult to use tables for layout.

  • Why JavaScript instead of Flash?

    Nowadays I see that the majority of websites are using JavaScript for their animations. I remember the days when Flash was usually used to fulfill those tasks.

    Questions:

    1. What are the advantages of using JavaScript instead of Flash? Yes I know about the performance, but are the other advantages?
    2. Web developers could use JavaScripts at that point in time, why did they choose Flash anyway?

  • What is the most efficient way to modify DOM elements and limit reflow?

    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.

  • Why do we use responsive units like em instead of px when designing responsive sites?

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

  • Proper usage of the picture element

    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?