Since starting 100 Days of Scriptures, several people have asked me about it. Now that it’s come to an end, I’d like to share its story, the process, lessons learned, and the effect its had on me.
Managing Responsive Breakpoints with Sass Maps
Sass maps are handy for organizing values used repeatedly throughout a project (e.g. colors, z-index values). They can also help manage responsive breakpoints, and, with the help of a custom mixin, even make generating media queries a breeze.
2014 Year in Review
From our new daughter, one year at my new job, and my spiritual growth to learning and giving back as a developer, 2014 has been a full, enlightening year. As the year closes, I want to take time to pause, reflect upon, and be thankful for some of its moments.
Detect the End of CSS Animations and Transitions with JavaScript
CSS allows you to create animations with transitions and keyframes that once were only possible with JavaScript or Flash. Unfortunately, with CSS there’s no way to perform a callback when an animation is complete. With JavaScript, it’s possible to detect the end of a CSS transition or animation and then trigger a function.
Animate SVG with CSS
Animating SVG with CSS is like animating any other element with CSS—it can be done with transitions, transforms, and keyframe animations. Once you’re familiar with the markup of an SVG, the rest is fairly straight forward.
Retina Image Replacement
To ensure your images are sharp and crisp on retina-enabled devices, you want to serve images that are twice as large and scale them down appropriately; however, keeping mobile users and their limited speeds and data plans in mind, it’s important to only serve retina images on retina-enabled devices or when necessary.
Here’s a quick-and-easy way to do it with just a few lines of vanilla JavaScript or jQuery.
Sass BEM-Selector Support and Trailing Ampersand
Sass 3.3 has introduced some neat features with the ampersand—it now has BEM-selector support and allows you to prepend a class to the parent element.
Organizing z-index with Sass
Keeping track of all your z-index values can be quite a task, especially on large projects or projects that involve more than 1 developer. Sass and its recent introduction of the maps
data-type can help you keep track of your z-index by having them all in one place.
Sass Maps
Sass 3.3 introduced a new maps
data type—you can create a variable that holds comma-separated, key-value pairs, and allows you to do some neat things like call a value by the key or loop through the key-value pairs.
New Digital Home
Welcome to my newly built, digital home. It’s taken me several months to get to this point, and although it’s far from complete, I’m ready to take the covers off and unveil it to you. So without further ado, TA-DA!