Animating elements in React Native isn’t as straight forward as you may expect—you can’t animate with vanilla CSS in React Native. Let’s explore the Animated
library to achieve the results of CSS transitions and transforms, and use it to create an animated toggle component.
JavaScript Templating Without a Library
You may have heard of or even used JavaScript templating engines such as Handlebars.js, Mustache.js or Underscore.js. They can make rendering and updating dynamic content on your website a breeze, but if your needs are dead simple, you might not need a library.
Integrating React with gulp
Note: This post was updated to (1) accommodate the change in React 0.14 where they split up React into a core library and a DOM adapter (ReactDOM) and (2) remove Bower in favor of npm.
I’ve been learning React, a JavaScript library by Facebook for building user interfaces, for the past few days during my commute—it’s been challenging, but a lot of fun. After a couple of days of learning the basics (reading their Getting Started introduction to React and following their tutorial), I reconfigured my gulpfile.js
to include React in my local development environment.
Responsive Typography with Sass Maps
Managing consistent, typographic rhythm isn’t easy, but when the type is responsive, it makes things even more difficult. Fortunately Sass maps can help make responsive typography much more manageable.
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.
Need for Speed 2: Improving Front-End Performance
Last year I wrote a post, Need for Speed, where I shared my workflows and techniques along with the tools involved in the development of my site. Since then my site has gone through another redesign, and although I made various workflow and server-side improvements, I gave front-end performance extra attention. Here’s what I did, why I did it, and the tools I used to optimize front-end performance on my site.
Faster Font Loading with Font Events
Web fonts are great and make the web a more beautiful space; however, loading them can be slow, which results in an unwanted side effect: FOIT (Flash of Invisible Text). I’ve experienced FOIT on my website, particular on mobile connections, but with the help of some homework and fantastic resources, plus some JavaScript and CSS, I managed to fix it.
Enhance Google Search Results with Rich Snippets
Allow Google to create and provide rich snippets—detailed, relevant information for users based on their search queries, such as the average rating of a product or restaurant, or preparation time and rating of a recipe.
Git Command-Line Shortcuts
A lot of my time is spent in Terminal and a majority of it is spent typing Git commands. I created a set of keyboard shortcuts with Bash aliases and functions to speed up my workflow and save me hundreds of keystrokes every day.
Terminal/Bash Command-Line Shortcuts with Aliases
Keystrokes are valuable especially if you live in the command line, and thankfully Bash (Terminal’s default command-line interpreter) allows you to create shortcuts using aliases.