HTML

If there's one thing that there've been an ample number of articles telling front end developers they must unequivocally adopt in the last five years, it's responsive images. We're all aware that more and more users are viewing our websites on mobile devices, and standard definition image assets simply won't do for today's retina displays. Thankfully, the W3C and WHATWG standards bodies have done a great job of taking feedback to give front-end developers simple but powerful tools to begin handling serving images at a wide range of resolutions for all the devices we now have to target.

Img srcset looks much more compact, as it only needs a single <img> tag to contain all your sources. It'll have a standard src and alt attribute, but it'll add the srcset and sizes attributes as well. srcset contains a comma separated list of your different resolution images and the actual image width. You must supply the width here because the browser won't know what the width of each image is until it first retrieves it, so to avoid downloading each one, we give the browser a hint.

So, with two very different approaches to responsive images, which one should you use and when? The answer to this question took me quite a long time to figure out, despite there being a lot of articles devoted to this topic. Most articles will say that <picture> should be used for "art direction", but as a non-designer, that meant nothing to me.

It's also important to note that the polyfill is Javascript, so a browser that has Javascript disabled will only display the fallback image. These are minor issues, but I found things get more complicated.

The web utilizes a rapidly increasing number of programming languages, but HTML, the first and most basic building block of the web, is not one of them. Most developers would say with some condemnation that HTML is not a programming language, and while they are correct that it is not programming, it is a language. A programming language can provide instructions using computer analogues of all the basic constructions of human language: nouns, verbs, descriptors, punctuation, and rules of grammar.

is HTML’s way of ascribing a purposeful intent in the text that goes on the webpage. The dictionary for HTML contains 109 adjectives in its most recent publication, and the job of every current browser is to read the meaning of them in as close to the same way as possible, though each browser infers the intent of those words slightly differently. However, unless your goal in life is to learn all the ins and outs of HTML, there is no reason to cover any more of these fundamentals.