hoetmaaiers

React Native Live Templates for WebStorm

How to add Live Template in Webstorm

1. open preferences
2. editor> live templates
3. add template group for React Native
4. add templates below to the new group
5. define context > javascript
6. edit variables > add "fileNameWithoutExtension" to "$fnName$"

hoetmaaiers

The context is a long running server side calculation. Because of this long running necessity, we can not use the default request/response, but need to handle it asynchronously.

We have 3 api endpoints available to implement this asynchronous result calculation.

1. Uplaod the data to process
2. Track the caculation process
3. Return the calculation result

Upload

hoetmaaiers

iCapps - JSON request/response specification

Goals

The goal is to specify a consistent api request/repsonse cycle while keeping enough room for project specific implementation.

General rules

• Every property is always returned in the response, even when null.

hoetmaaiers

Pluralize or singular string based on a number

Handlebars.registerHelper('pluralize', function(number, singular, plural) {
    if (number === 1) {
        return singular;
    } else {
        return (typeof plural === 'string' ? plural : singular + 's');
    }
});

hoetmaaiers

function fib(end) {
    const range = [0, 1];

    while (range[range.length - 1] < end) {
        const prev = range[range.length - 1];
        const prevPrev = range[range.length - 2];
        range.push(prev + prevPrev);
    }

    return range;

hoetmaaiers

Run bash inside running container.

docker exec -it CONTAINER_ID /bin/bash

Buliding efficient Dockerfiles for node

hoetmaaiers

/*
 * Outputs a float representing the iOS version if user is using an iOS browser i.e. iPhone, iPad
 * Possible values include:
 *	3 - v3.0
 *	4.0 - v4.0
 *	4.14 - v4.1.4
 *	false - Not iOS
 */
 
var iOS = parseFloat(

hoetmaaiers

Design developer friendly

Zeplin FTW

Icons

• svg icons please
• ids / classes voor stijlbare groepen, dit maakt de svg stijlbaar en herbruikbaar
• wanneer oude browsers (<IE9) moet voor elk icoon ook een .png variant voorzien worden (Zeplin)

hoetmaaiers

app.js

// import styles
import '../styles/app.css';

// import dependencies
import { polyfill as promisePolyfill} from 'es6-promise';
import fetch from 'isomorphic-fetch';

hoetmaaiers

Promise solution

/**
 * HANDSON Promises: provide more levels to the game
 *
 * We have some cool levels waiting for you at the following urls:
 * - 'http://localhost:8080/levels/basic.json'
 * - 'http://localhost:8080/levels/easy-start.json'
 * - 'http://localhost:8080/levels/hard-to-get-drunk.json'