Tom Leo's Blog

Home    Ask me anything   

Hacker with a Computer Science Degree

March 24, 2014 at 6:19pm
0 notes

CSS Diner →

This is a really cool game that challenges your understanding of CSS3 selectors. Check it out!

March 13, 2014 at 11:14am
2 notes

The Truth About Multiple H1 Tags in the HTML5 Era →

Key Aspects of the HTML5 Document Outlining Algorithm

While the pre-HTML5 document outline was drawn purely from heading tags alone, the HTML5 document outline algorithm utilizes the following key aspects:

  • Sectioning root: A sectioning root is a container that provides a scope for the discrete content sections that will be defined within it. Each sectioning root gets its own individual outline.The top level sectioning root of any page is formed by its <body> tags, so there is always an outline generated for any webpage, starting from the <body> tags and working through the sections it is broken into.
    • Sectioning root tags: <body>, <blockquote>, <figure>, <td>, <details>, <dialog>, <fieldset>
  • Sectioning content: Each sectioning root is broken into a series of content sections. These sections are created by placing sectioning content element tags around discrete pieces of content. Sectioning content elements are nestable and semantic. The type that should be used depends on the nature of the content it will contain. (We’ll discuss how to use each sectioning content element further on.)
    • Sectioning content tags: <section>, <article>, <nav>, <aside>
  • Heading content: Text-only labels for sections of content. In the absence of sectioning content tags, the presence of a heading tag will still be interpreted as the beginning of a new content section..
    • Heading tags: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Understanding how these aspects of HTML5 are used is relatively straightforward, and the process typically goes much like this:

  1. The sectioning root of the document is formed by its <body> tags.
  2. Within that sectioning root, the document is broken into sectioning content, e.g. by wrapping articles with the <article> tags.
  3. Heading tags are placed into the content sections as required, with the first heading tag in any section acting as the label for that section.

There are many other aspects to the HTML5 document outline algorithm. Extensive information on these is available on W3C.

However, with just the aspects listed above, we are able to solve all the problems described in the previous section of this tutorial.

March 5, 2014 at 4:05pm
0 notes
Tom Leo&#8217;s Blog turned 3 today!

Tom Leo’s Blog turned 3 today!

(Source: assets)

January 19, 2014 at 2:28pm
2 notes

Publication Standards Part 1: The Fragmented Present →

  • latest version of ePub standard isn’t supported by any e-reader
  • iBook and mobi are wrapped in a DRM

1 note

The Vendor Prefix Predicament: ALA’s Eric Meyer Interviews Tantek Çelik →

  • All vendors should put the time into pushing their ideas through the W3C working groups. Circumventing standards like what webkit is doing is not a good thing.

2 notes

Every Time You Call a Proprietary Feature “CSS3,”  A Kitten Dies →

  • Vendor prefixed properties were never supposed to be something developers could depend on. They were, and are, for experimental implementations and technologies in progress from iterations of CSS working drafts in the process of standardization.

  • When discussing or demoing experimental features or standards-in-progress, whether in one browser or many, be up front with warnings, and make it clear what’s shiny today may break tomorrow.

1 note

What I Learned About the Web in 2011 →

  • iteration is king and that perfection should never be achieved… better to release wit ha solid core set of features and then iterate and add as time or users necessitate it.

4 notes

Pricing Strategy for Creatives →

  • Don’t charge by the hour
  • Avoid clients that want things done asap, design is a process that takes time

1 note

Responsive Images: How they Almost Worked and What We Need →

2 notes

A Pixel Identity Crisis →

  • hardware pixel = smallest point on screen that can be physically displayed
  • reference pixel = standard for pixel-based measurements, based on optical reference unit
  • takes proximity of screen into account (you hold a phone closer to your face than you do a computer screen, meaning you need a smaller reference pixel)
  • dip (density independent pixel) = distinguish number of optical pixels an item spans
  • pixel density along with screen dimentions can better target specific devices
@media screen and (device-pixel-ratio: 1)
    and (device-width: 1024px)
    and (max-device-height: 600px)
    and (orientation: landscape),
  screen and (device-pixel-ratio: 1)
    and (device-width: 600px)
    and (max-device-height: 1024px)
    and (orientation: portrait)