“Time Ago” React Component to display Timestamp as formatted String

Hey fellows,

There are many ways to display a Date or a timestamp, but the often appropriate is to show the elapsed time in a readable format.

So I drafted a little React component that takes a number of milliseconds for props and turns into a string of relative seconds, minutes, hours, days, months or years.

import TimeAgo from '../components/TimeAgo';

const date = Date.now(),
    tests = [date - 6789, date - 456789, date - 23456789, date - 123456789, date - 9123456789, date - 89123456789];

return <ul>{tests.map((timestamp, key) => <li key={key}>
    <TimeAgo timestamp={timestamp}/>.
</li>)}</ul>;
  • .
  • .
  • .
  • .
  • .
  • .

The component gives a time element with a datetime property.

<time datetime="2018-02-22T00:21:08.005Z">1 day ago</time>

The code is fairly short and simple, and is available on GitHub as susual.

šŸ˜‰

Reddit API Front-End on React

Good morning everyone,

Reddit is an American social news aggregation, web content rating, and discussion website.

And it opens a cool API to engineer your own front-end.

So here comes my take on it :Ā http://reddit.webmaestro.fr.

It basically fetches JSON data, parses image and video sources, embedded players or templated content and turns it into optimized React components. The design is minimalistic and based entirely on Semantic UI.

With iframes, video players and heavy GIFs mixing over infinite scrolling, the main idea was to mount and unmount components depending on their visibility. And it was just too easy with react-lazyload.

I had some fun setting the volume of videos in relation to their position on the viewport. It works pretty well, try it out !

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.

The code is available 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.

Sass Compiler for WordPress

It uses the scssphp Compiler.

Compiler Page

Installation

  1. Download the latest release
  2. Unzip it into your wp-content/plugins directory
  3. Activate the pluginĀ in WordPress

Compiler

This first page allows you to write and compile Sass. The resulting stylesheet is automatically enqueued.

Variables

This second page lists all registered variables, and allows you to edit their values upon compiling.

Variables Page after configuration

PHP Configuration

add_filter( 'sass_configuration', 'my_sass_config' );
function my_sass_config( $defaults ) {
  return array(
    'variables' => array( 'sass/_variables.scss' ),
    'imports'   => array( 'sass/bootstrap.scss', 'sass/_theme.scss' )
  );
}

Configuration of the plugin is optional, but you should at least register your variables if you are using a CSS framework.

Paths to Sass files are relative to the theme directory.

Use the filter 'sass_configuration' to return your configurations array.

  • variables(array)
    In order to list and edit your Sass variables on the plugin dedicated page, it is necessary to register their “definition” file(s). It is assumed that those files’ only role is to declare variables and their values.
  • imports(array)
    It will prepend the code to compile with an @import directive for each listed file. Useful to compile dependencies, and to “hide” them from the Compiler page. It is necessary to hit the “Compile” button once for these imports to be compiled.
  • cache(string)
    Allows you to define the path to your cache directory. This directory has to be writable (0755). The default cache directory path is wp-content/cache.
  • search(boolean)
    Wether or not to display the “Search Variables” filter box. It can come handy if you have a lot of variables. Default is true.

Once registered, you can access any variables with the function sass_get( 'my-variable' );, or override its value (upon what has been set on the Variables page) with sass_set( 'my-variable', 'my-value' ).
It is also possible to use @import directives, as well as any Sass language features, straight from the Compiler page.

Enqueuing external Sass

Out of the main stylesheet, simply use the WordPress wp_enqueue_style function to enqueue separated Sass files.

add_action( 'wp_enqueue_scripts', 'my_other_sass_enqueue' );
function my_other_sass_enqueue() {
  wp_enqueue_style( 'my-other-handle', get_template_directory_uri() . '/my-other-file.scss', array( 'wm-sass' ) );
}

It will be compared to the cached version, compiled if changes occurred, and the resulting stylesheet will be enqueued.
Don’t forget to set the main Sass stylesheet handle 'wm-sass' as a dependency (… if it is one).