kostil.js

@Maxim Shastsel

@Uladzimir Halushka

What is kostil.js?

It's like lodash but for the next level of JS.

1

Our motivation

To simplify the solution of typical problems

License

Licensed under WTFPL license

How to install

npm i --save kostil.js

via NPM

Then add a <script> to your index.html:

<script src="/node_modules/kostil.js/dist/kostil.js"></script>

Or import 'kostil.js' from your code.

Case #1

<!doctype html>
<html lang="en">
<head>
    <title>Case #1</title>
    <script src="app.bundle.js"></script>
</head>
<body>
    <button>Click</button>
</body>
</html>
const button = document.querySelector('button');

button.addEventListener('click', () => console.log('clicked'));

Solution

import fix from 'kostil.js';

fix(() => {
    const button = document.querySelector('button');

    button.addEventListener('click', () => console.log('clicked'));
});

Implementation

export default function fix (f) {
    return setTimeout(f, 0);
}

Case #2

import { myNewAwesomePromiseBasedService } from './services';


function oldStyleCallback (err, res) {
    //...
}


myNewAwesomePromiseBasedService()
    .then()
    .catch()

Solution

import { callbackotify } from 'kostil.js';
import { myNewAwesomePromiseBasedService } from './service';


function oldStyleCallback (err, res) {
    //...
}

const awesome = callbackotify(myNewAwesomePromiseBasedService);

awesome(oldStyleCallback);

OVER backward compatibility

Case #3

const code = 'var x = 5;';

eval(code);

Solution

import { safeEval } from 'kostil.js'

const code = 'var x = 5;';

safeEval(code);

Implementation

export function safeEval (code) {
    'use strict';
    try {
        'use strict';
        eval('\'use strict;\'' + code);
    } catch (e) {
        console.error('Script evaluation error! \n', e);
    }
}

Safety

Case #4

GET api/method?deviceCode=1&isWifiSecure=yes

Solution

import { makeUnderstandableBoolean } from 'kostil.js';

console.log(makeUnderstandableBoolean(true)); // logs "yes"
console.log(makeUnderstandableBoolean(false)); // logs "no"

Bad API architecture

Case #5

function uid (l) {
    const id = Math.random().toString(35).substr(2, l);

    let result = '';
    
    for (let i = 0; i < l; i++) {
        result += Math.random() > 0.5 ? id[i].toUpperCase() : id[i];
    }

    return result;
}

// sometimes throws exception :(
const id = uid(5);

Solution 

import { tryHard } from 'kostil.js';

function uid () {
    const length = 5;
    const id = Math.random().toString(35).substr(2, length);

    let result = '';
    
    for (let i = 0; i < length; i++) {
        result += Math.random() > 0.5 ? id[i].toUpperCase() : id[i];
    }

    return result;
}

// works OK
const id = tryHard(uid);

Implementation

export function tryHard (f) {
    while (true) {
        try {
            return f();
        } catch (e) {
            console.log('Try harder!');
        }
    }
}

Masking the problem isn't a solution

Case #6

form
  input
  button

How do i submit the form?

Solution 

import { submitForm } from 'kostil.js';

const form = document.querySelector('form');
const button = document.querySelector('button');

submitForm(form, button);

Implementation

/**
 * Submits your form if you don't know about type="submit"
 * @param form
 * @param button
 */
export function submitForm (form, button) {
    return button.addEventListener('click', (e) => {
        e.preventDefault();
        form.submit()
    });
}

Case #7

I can't inject NODE_ENV into the app, how can i check if app running is production?

Solution 

import { isProduction } from 'kostil.js';

console.log(isProduction());

Implementation

/**
 * Checks self length to understand is app in prod mode or not
 * @returns {boolean}
 */
export function isProduction () {
    return isProduction.toString().length < 75;
}

Case #8

const ws = new WebSocket('wss://your.awersome.backend.ws');

ws.addEventListener('message', ({ data }) => {
   document.body.innerHTML = JSON.parse(data);// throws an exception
});

Solution

import { parseJSONorNot } from 'kostil.js';


const ws = new WebSocket('wss://your.awersome.backend.ws');

ws.addEventListener('message', ({ data }) => {
    const jsonOrNot = parseJSONorNot(data);// throws an exception

    document.body.innerHTML = jsonOrNot;
});

Bad API architecture

BONUS

/**
 * Helps to debug your code.
 * Works only in dev mode.
 */
export function deb () {
    if (!isProduction()) {
        debugger;
    }
}

How to uninstall

npm uninstall kostil.js

via NPM

Delete the <script> from your index.html:

<script src="/node_modules/kostil.js/dist/kostil.js"></script>

Or delete import 'kostil.js' from your code.

epa.ms/kostil-js

kostil.js

By Uladzimir Halushka

Made with Slides.com

kostil.js

  • 651

More from Uladzimir Halushka