Daily Javascript

09. December 2015

bigfloat

bigfloat (GitHub: charto/bigfloat, License: MIT, npm: bigfloat)

bigfloat is an arbitrary precision math library optimized for computation on geometry and geoinformatics. It provides a base 2 floating point. It can covert Javascript float’s, add, subtract, multiply and convert it back to a Javascript String. It can do all this whiteout losing any significant bits. Numbers are treaded as immutable and will return a new BigFloat.

So how does it do this? Numbers are represented in 32-bit limbs (digits in base 2^32). The least significant limb is stored first. This because basic algorithms for arithmetic operations progress from the least to most significant digit while propagating carry. If carry causes the output to grow, adding a new limb at the end of the Array is faster than adding it in the beginning. The library was optimized for exponents relatively close to zero, so the location of the decimal point is always present in the limb array, even if that introduces otherwise insignificant leading or trailing zero digits.

Let’s look at a quick example if I would run this:

const x = Math.pow(2, 53),
    result = x + 1 - x;

console.log( result );

It will give me back 0. But we would expect to get 1. If we would do the same using bigfloat:

const BigFloat = require('bigfloat').BigFloat,
       x = Math.pow(2, 53),
      result = new BigFloat(x).add(1).sub(x).toString();

console.log(result);

It would log 1, as we would suspect.

08. December 2015

embed.js

embed.js (GitHub: ritz078/embed.js, License: MIT, npm: embed-js)

embed.js is plugin which analyses a string and automatically transform is to embeds emojis, media, maps, tweets, code and services. No more hassle on finding out how different services work, no more putting off features, because the intergration would be complicated. Just transform it using embed.js.

So how do we use it? Imagine having a blog and the content of a post would look like this:

This is the blog we al know and :heart:. Url will become clickable like this http://daily-javascript.com.
youtube videos. https://www.youtube.com/watch?v=bQRLVxZHKPs
and embed codepen's like so: http://codepen.io/ThePizzaMan/pen/YwPOVd

This would get transformed into a pretty post with all the services embedded. The only thing needed is a Google Auth key which you can get here

Then if we want to transform a specific element we would do something like this:

function embed() {
    var x = new EmbedJS({
        element: document.getElementById('rawText'),
        googleAuthKey: '<googleAuthKey>',
        videoWidth: 800,
        tweetOptions: {
            hideMedia: true
        },
        codeEmbedHeight:600
    });
    x.render();
};

It supports emoji’s, Twitter, Gists, Codepen’s, photo’s, Spotify, Google Maps, Markdown and many more. For more options and list of supported services check the project page.

Here is a small CodePen demo of what it can do with the example code for you to try out.

07. December 2015

iFrame Resizer

iFrame Resizer (GitHub: davidjbradshaw/iFrame-resizer, License: MIT, npm: iframe-resizer)

David Bradshaw sent in iFrame-resizer. Which is a library to make working with the <iframe> tag a lot easier. It hides a lot of the stuff you need to change sizes, authorize domains or messaging. I suspect that this project started out as a simple library to help with resizing of an iframe which grew to a full fletched iframe utility belt.

So let’s take a look how it works. The package consists of two files. The first one needs to be included on the parent page and the second one need to be within all the child frames. The child-script does not do anything unless when called by the parent. So a typical setup would look something like this:

<!DOCTYPE html>
<html>
<head>
    <title>Parent page</title>
</head>
<body>
    <h1>This is the parent page</h1>
    <iframe src="http://example.com/child-page" id="my-frame" scrolling="no"></iframe>
</body>

<script scr="/path/to/iframeResizer.min.js"></script>

<script src="/path/to/your/script.js"></script>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Child page</title>
</head>
<body>
    <h1>This is the child page</h1>
</body>

<script scr="/path/to/iframeResizer.contentWindow.min.js"></script>
</html>

Then to active auto-resize for instance, we can work with it from our script like so:

var options = {
    log: true,
    autoResize: true
}
iFrameResize( options, '#my-frame' );

As said before this is only the basic usage for more extensive usage you should check the project page.

03. December 2015

Matreshka

Matreshka (GitHub: matreshkajs/matreshka, License: MIT, npm: matreshka, bower: matreshka)

Matreshka is small but powerful client-side framework that allows you to build single page applications. It describes it self as a event driven framework, which means that you put listeners on objects and elements to which you can react with configured handler functions. Besides it’s event system it comes with features such as: two-way data-binding, custom objects and custom arrays.

Let’s say we would be making a simple SPA then this would be our markup would look something like this

<!DOCTYPE html>
<html>
    <head>
        <title>My first Matreshka application</title>
    </head>
    <body>
        <input type="text" class="my-input">
        <div class="my-output"></div>
        <script src="http://cdn.jsdelivr.net/matreshka/latest/matreshka.min.js"></script>
        <script>

        </script>
    </body>
</html>

As you can see we import the Matreshka via a script tag but it’s also possible to install via npm. Nothing new here right? So let’s put some code in our script tag. Let’s make an “class” called Application:

var Application = Class({
    'extends': Matreshka,
    constructor: function() {

        // bind the property x and the text field
        this.bindNode('x', '.my-input');

        // bind the property x and the ".my-output" block
        this.bindNode('x', '.my-output', {
            setValue: function(v) {
                this.innerHTML = v;
            }
        });
        this.on('change:x', function() {
            console.log('x changed to ' + this.x);
        });
    }
});

var app = new Application();

Or the same code in ES2015:

class Application extends Matreshka {
    constructor() {
        this.bindNode('x', '.my-input');
        this.bindNode('x', '.my-output', {
            setValue(v) {
                this.innerHTML = v;
            }
        });
        this.on('change:x', () =>
            console.log('x changed to ' + this.x));
    }
}

Now when something happens we can change the value x like this:

app.x = 'Hello Daily Javascript';

This will fill the input and the #output elements with the string 'Hello Daily Javascript'.

Nowadays we are not impressed by data-binding any more. It comes with a lot more, but for that I would refer you to the full documentation. The API is very small and easy to reason about, so if you have a new POC project coming up I would suggest you give it a try.

02. December 2015

ally.js

ally.js (GitHub: medialize/ally.js, License: MIT, npm: ally.js)

Ever had the problem of having to accommodate for instance blind people on your website? With the web app’s of nowadays accessibility sometimes goes to waste by not having the need for “semantic” HTML and just putting everything inside div‘s. Don’t get me wrong, I ofter find myself using a div to make buttons for instance. But for the blind users of the web this can be a serious problem, because their assistance software and the browser do not have the correct content they use all accessibility to your website.

ally.js is a library simplifying certain accessibility features, functions and behaviors. Its goal is to help web applications with accessibility concerns provide every user with a good experience.

It has an amazingly extensive API to solve most accessibility problems, way to much to even begin to describe so I will direct you to their website where everything is explained into more detail than I could do in a day.