From Float to Flexbox

It only took me until 2018 to finally apply flexbox to a project. Long after I've played with the new grid syntax, and continued to fall back on floats, I am finally coming around and learning flexbox. Each display value has its own strengths and quirks, but I'll leave that for another blog post. Challenge …

Advertisements

Text, SVG, or JPEG?

Web developers have a ton of design and implementation choices these days. And, as the old saying goes, there's more than one way to skin a cat. Recently, I was on a mission to create a custom heading for one of our division pages at work. Goal Replace the default LibGuides h1 for the page …

Video Player, Konami Code, and Local Storage

Custom HTML5 Video http://codepen.io/digilou/pen/jBgvZq double underscore in CSS and HTML is a sub-element that is modified video properties (currentTime, paused, textContent, offsetX) more addEventListener use! Key Sequence Detection http://www.cornify.com/js/cornify.js const pressed = []; const secretCode = 'wesbos'; window.addEventListener('keyup', (e) => {   console.log(e.key);   pressed.push(e.key);   pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);   if (pressed.join('').includes(secretCode)) …