Slide Up and Down with React Transition Group

Some UI effects are very simple, yet difficult to achieve. I already solved the vertical slide dilemma with jQuery, but I needed to implement it for React Transition Group.

When items are entering a list, we want them to fade in and smoothly slide the surrounding elements away, instead of brutally shifting our interface.

Transitions work by easing from one initial value to an other defined one. The problem with vertical sliding is that most HTML element containers do not have a predefined height, but rather auto adapt this value to fit the content. Therefor, it is quite tricky to animate the entrance of randomly sized blocks without jumping stroboscopically into the margin, padding and box-sizing soup.

My approach is to use the CSSTransition component callbacks to animate a negative margin and slide our items from the top. This offset is equal to the calculated height difference of the container between before and after appearance.

The code is available on GitHub.

Terminal Window React Component with Keystroke Sounds

Yup, you read that right.

Here is a React component that will mock an OSX Terminal window, and play keystroke sounds to simulate typing.

See the demo at http://keystrokes.webmaestro.fr.

If you listen carefuly, you will notice that “space” and “enter” keys even have their specific sounds ! The audio samples were created by my homonymous friend Etienne. Together we have some more JavaScript sound design exercises in mind so stay tuned.

OSX Terminal window

The window is pure CSS and SVG. The console uses my favorite Fira Code monospace font.

It is also based on my actual ~/.bash_profile :
export PS1="\n[\e[0;31m\w\e[m]\n| > ".

It was made in the building process of a portfolio that should be available to you soon.

You can find the component code and CSS on GitHub.

JavaScript API Client Class: Queue, Fetch and Cache

An ES6 class to queue API requests, fetch results and cache for performances. See the script on gist.github.com.

How to Use

I’m glad you’re asking. Let’s take the Movie Database for instance.

import API from './api';

const theMovieDB = new API('https://api.themoviedb.org/3', {
    api_key: 'YOUR-API-KEY'
}, 1000 / 4);

We instanciate the API to request with an api_key parameter, and set the rate limit to 4 requests per second.

const topRatedRequest = theMovieDB
    .get(`movie/top_rated`, {}, 12 * 60 * 60);

Then we queue a GET request and set it to cache for twelve hours.

topRatedRequest.done(data => console.log('Top Rated Movies', data.results));

When response is available, we log the results.

topRatedRequest.cancel();

But we could also cancel this request.