Flexible type with :root

Comment icon Small gray icon for comments Comments

One element of responsive web design that can be tricky to solve for is typography. Ideally you want to have type that’s as fluid as possible across different viewports. A conventional way of doing this might be to start with a base font size and then change it when you...


Use attribute selectors with empty links

Comment icon Small gray icon for comments Comments

Here’s a quick CSS tip: if a hyperlink doesn’t have a text value, i.e., it rendered empty, insert the href value in its place: a[href]:empty::before { content: attr(href); } Why do this? Link text can be overlooked in content generated by a CMS. Rendering the text with the href value...


Math.floor, Math.random, and Jurassic Park

Comment icon Small gray icon for comments Comments

In JavaScript, the Math object is something developers work with a lot. And two methods in particular, Math.floor() and Math.random(), are often utilized together. Let’s take a quick look at both to see how we might use them to create a random text engine. The Math.random() method generates a number...