☸ What are the qualities of a good web page?

Overview

Over time, your knowledge and taste will change with respect to technology. In general, young people tend to choose a techno-utopian aesthetic which tends toward maximalism in code - more modules, more functions, more objects, more files. More of everything! But as you age, you may find yourself preferring the more elegant code, which is shorter, sometimes even naive-looking.

My favorite HTML is a good single file HTML with all the responsible techniques applied, with the addition that I like to ditch IE entirely when thinking about webapps. In fact I like to focus on HTML5, ES6, CSS3, with best practice code for the charset, html element, stylesheet loading, and script loading, and of course a reasonable coding convention.

In his later books Beautiful Evidence , Tufte starts each section with a bit of vertical space, a non-indented paragraph, and the first few words of the sentence set in small caps. For this we use a span with the class newthought, as demonstrated at the beginning of this paragraph. Vertical spacing is accomplished separately through <section> tags. Be consistent: though we do so in this paragraph for the purpose of demonstration, do not alternate use of header elements and the newthought technique. Pick one approach and stick to it.

It's really nice to have good figures.

Lets see how we can do with codepen

Here is an SVG image that is defined inline, with a major and minor grid. The coordinate system is normalized such that the origin is in the center, y is up, and the unit circle covers the entire area. However, rather than use true normalization (where the extents would be -1.0 and +1.0) I've used (-100 and +100) as the extents, for the simple reason that it's more convenient to author, and it's rare to require more than 1/100 of any dimention of screen for this sort of work. Additionally there is a small bit of code that makes circles react when you click on them. Try it out!