A refresher, now that season 6 has started:
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 …
Continue reading “Motion Design in React.js with “React Motion””
Front-End Performance: The Dark Side @ Fronteers Spring Conference 2016
Video of the talk “Front-End Performance: The Dark Side” by Mathias Bynens which he gave at Fronteers Spring Conference 2016 which I attended: In security-sensitive situations, performance can actually be a bug rather than a feature. This presentation covers timing attacks on the web, and demonstrates how modern performance-related web APIs can sometimes have a …
Continue reading “Front-End Performance: The Dark Side @ Fronteers Spring Conference 2016”
JavaScript Unary + Operator
Today I learned: In JavaScript it is possible to use the + operator alone before a single element. This indicates a math operation and tries to convert the element to a number. If the conversion fails, it will evaluate to NaN. This is especially useful when one wants to convert a string to a number …
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 …
Continue reading “Nodal – API Services Made Easy With Node.js”
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 …
Continue reading “pm2 – Advanced Production Process Manager for Node.js”