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

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('', {
    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.


But we could also cancel this request.

Third-Person Planet Exploration with Three.js

I should share my experiments more often on this blog, and maybe not only the 3D javascript game development that I’m just having fun with. But anyway, here is the last one in date : a third person planet exloration thing.

It’s not exactly “work in progress” since I don’t really plan on improving any of it from here, so just consider this work bare and unfinished. You can try it out here :

3D models of trees

The 3D models used, such as the trees and stones, are from Poly by Google.

The planet is generated when page loads. Noise is applied to the shere vertices length to create the terrain, and “biomes” (materials and 3D models) are set according to the elevation and latitude.

3D Planet from a Noise Sphere

Controls are the classic W, A, S, D and mouse. I had to adapt the “third-person” logic to rotate rather than translate over space.

There is a day and night cycle that depends on where the player is positionned on the globe. The sun and the moon are casting light on opposite sides while turning around.

Day and Night Cycle

The water is… just ugly. There is no collision detection. And the character is a simple cone.

Oh, and there is no server to make it a multi-player shooter, even though that was the ispiration. The idea came when a friend showed me the very entertaining Fortnite. We thought it would be fun to turn this “Battle Royale” island into a planet. Instead of a “storm” shrinking toward the gathered players, we could simply reduce the radius of the spherical terrain… That was the concept.

Maybe I could post details about the code if whoever is interested. In the meantime I have other things to focus on !

3D Noise Sphere Geometry with Three.js

This extended Three.js geometry applies noise elevation over a sphere.

class NoiseSphereGeometry extends THREE.SphereGeometry {
    constructor(radius, widthSegments, heightSegments, {seed, noiseWidth, noiseHeight}) {
        super(radius, widthSegments, heightSegments);
        const getNoise = (vertice) => ImprovedNoise.noise(
                seed + vertice.x / noiseWidth,
                seed + vertice.y / noiseWidth,
                seed + vertice.z / noiseWidth
            noiseMap = this
            noiseMax = Math.max(...noiseMap),
            noiseMin = -Math.min(...noiseMap);
        for (const v in this.vertices) {
            if (noiseMap[v] > 0) {
                    .elevation = noiseMap[v] / noiseMax;
            } else {
                    .elevation = noiseMap[v] / noiseMin;
                .multiplyScalar(1 + this.vertices[v].elevation * noiseHeight / radius);

Make sure to import the ImprovedNoise function from the Three.js examples.

<script src="three/examples/js/ImprovedNoise.js"></script>

Sass Compiler for WordPress

It uses the scssphp Compiler.

Compiler Page


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


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


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).