Sizing type for the web

As I begin working on layouts one of the things that started to beg for attention is how to size the text properly for it to be legible online as well as being pleasant to the eye when looking at the page. The 62.5% system When I first started working on the web it was common to see the following css at the very beginning of a stylesheet: body { font-size: 62.5%; /* Other rules that apply globally */ } This would set the default font size to the document to 10px. Designers would then have to adjust the sizes

Balancing content with Flexbox

One of the cool things we can do with Flexbox is to balance the text and images as if they were in a two-cell table. It should be possible to do so with images but instead we’ll simulate two cells with the code below. I normally don’t do this but in this case I will use CSS to populate the first div element with the appropriate image. <div class=”column”> <figure class=”flex”> <div></div> <div> <h3>Chrome Canary</h3> <p>I install both Canary and Release versions to make sure that the code I’m working on works in my target browsers</p> <p>I install both Canary

Asm.js and Web Assembly

I’ve been hearing about Web Assembly and its predecessor, ASM.js for a while. The idea is that we can bring C and C++ code into the web and use it directly on the browser without having plugins get in the way. This would also make it easier to port high end games and other C/C++ code to Javascript and leverage existing APIs and features Asm.js Asm.js is a subset of JavaScript that is heavily restricted in what it can do and how it can operate. This is done so that the compiled Asm.js code can run as fast as possible

Intersection Observers: Making it easier to lazy load content

What I love about Paul Lewis’ Developer Diaries is that he points me to new technologies and better ways to work with web content. In this case (video below) he clued me into a new API: Intersection Observers. The idea behind Intersection Observers is that we don’t really need to load content until it comes into the viewport (it’s visible in the browser’s window). We can configure the action that happens when the selected object comes into view. The best example of Intersection Observers I can think of is to lazy load images only when the image in question appears

Speech Synthesis API: you talk to the computer

Speech Recognition only works in Chrome and Opera. Firefox says it supports it but it doesn’t work and returns a very cryptic error message. The second part of the Speech Synthesis API is recognition. Where in the prior post we used the Speech Synthesis API to have the browser talk to use when there was a problem on the form; in this post we’ll use a [demo from Mozilla](demo from Mozilla) to illustrate a potential use of speech recognition to make the browser change the background color of the page based on what the user speaks in to a microphone.