Flexbugs – Flexbox issues and cross-browser workarounds for them.

This repository is a community-curated list of flexbox issues and cross-browser workarounds for them. The goal is that if you’re building a website using flexbox and something isn’t working as you’d expect, you can find the solution here. Truth be told, most of the time “something is not as I’d expect” when using flexbox 😛 …

Redux DevTools Chrome Extension

A Chrome DevTools Extension, wrapping around Redux DevTools: The Redux DevTools themselves are a live-editing time travel environment for Redux: Lets you inspect every state and action payload Lets you go back in time by “cancelling” actions If you change the reducer code, each “staged” action will be re-evaluated If the reducers throw, you will …

Motion Design in React.js with “React Motion”

import {Motion, spring} from 'react-motion'; // In your render: <Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> {value => <div>{value.x}</div>} </Motion> This library provides an alternative, more powerful API for React’s TransitionGroup. For 95% of use-cases of animating components, we don’t have to resort to using hard-coded easing curves and duration. Set up a stiffness and damping for …

Motion Design in React.js: UI Animations with CSSTransitionGroup and TransitionGroup

React Interface without (left) and with (right) animations In this article, I am going to use the official components from React.js addons. There are other components/libraries that are better for the job but at the end of the article you will get a good amount of React.js animation practice to better understand these other components. …

 Designing Ryanair’s Boarding Pass

In the following article we’ll outline the beginnings of the project, some of the challenges we encountered and ultimately what we learned from the process of redesigning Ryanair’s boarding pass. Difference between this redesign and many of the Dribble shots that can be found online is that this one was actually tested early on, and …

Nodal – API Services Made Easy With Node.js

Nodal is a web server for Node.js, optimized for building API services quickly and efficiently. Boasting its own opinionated, explicit, idiomatic and highly-extensible framework, Nodal takes care of all of the hard decisions for you and your team. This allows you to focus on creating an effective product in a short timespan while minimizing technical …

Chrome DevTools Custom Object Formatters

Here’s a little Chrome DevTools gem: it supports the use of custom Object formatters. Object what? Object formatters allow you to control how the value of a JavaScript object appears in Chrome’s console and debugger. Say you’d like to visualize a 2D vector, instead of seeing “just” { x: 1, y: 2} appear when pushing …

pm2 – Advanced Production Process Manager for Node.js

PM2 is a production process manager for Node.js applications with a built-in load balancer. It allows you to keep applications alive forever, to reload them without downtime and to facilitate common system admin tasks. Instead of starting your apps using node app.js, start them using pm2 start app.js pm2 – Advanced Production Process Manager for …

OreillyCover Twitter Bot

In succession to those hilarious The Practical Developer Book Covers, the Twitter bot @OreillyCover has been created by @GNUmanth. It allows you to roll your own book covers by just tweeting at it. Feed the bot tweets using the following format: @OreillyCover /orly {title};{topText};{author} Tweeting @OreillyCover /orly Hanging out on Slack;Being unproductive without feeling guilty …