Daily Javascript

Javascript by Example (GitHub: bmkmanoj/js-by-examples, License: MIT)

Manoj Kumar sent in Javascript by Example which is a GitHub repo which explains “nitty gritties” of Javascript by showing code snippets with some description.

Currently there is no particular order in how you should read it. Some of the concepts already explained are: closures, operators, bind, call, apply, function scope, hoisting and many more.

One of the first things the authors want to make clear is that this is not a replacement for conventional learning by books, blogs and countless experimentations, but rather an additional resource to the existing set of learning paths.

This project started as a bit of in house documentation of curtain “lesser known” concepts in Javascript. After realizing the rest of the community could benefit from this as well, it was put on Github.

For more information and a short brief on how you can contribute to this project checkout the README.

Don’t forget to submit this weeks challenge: “Tetris Bag” where you need to implement the same randomization algorithm as used in the popular nineties game Tetris.

Since I did not get any submissions for the Workshopper Challenge I will make this challenge a lot more technical, so you guys will actually feel challenged. Since all of you are probably nineteens kids, you all know Tetris. It is a popular belief that the “tetromino” pieces you are given in a game of Tetris are not randomly selected. What really happens is that all seven pieces are placed into a “bag”. A piece is randomly removed from the bag and presented to the player. This process is repeated until the bag is empty.

Your challenge is to reproduce this. For the first part of this challenge you will only need to focus on the algorithm of randomly removing elements from the bag and filling it once it’s empty. There is one limitation: Repetition of pieces will not be more then twice the same. So you can get twice the same piece but never 3 times the same.

For now you can make the output just log the piece which needs to be dropped, next week we will explore the Tetris game some more. Output a string signifying 50 tetromino pieces given to the player using the random bag system. This will be printed on a single line. Some code to get you started can be found inside this codepen.

The pieces will be represented by letters for now:

• O
• I
• S
• Z
• L
• J
• T

See the Pen bEmqpK by DailyJavascript (@DailyJavascript) on CodePen.

Submissions can be sent to this Google Form..

Don’t forget to submit before next Friday.

Happy coding.

SamsaraJS (GitHub: dmvaldman/samsara, License: MIT, npm: samsarajs)

SamsaraJS is a functional reactive library for animating layout. It tries to provides a language for positioning, orienting and sizing DOM elements, and animating those properties over time. Everything within Samsara is based on streams. This means that can subscribe to for instance the user input and preform curtain actions when the input occurs. By example:

const Surface = Samsara.DOM.Surface;
const Context = Samsara.DOM.Context;
const Transform = Samsara.Core.Transform;
const MouseInput = Samsara.Inputs.MouseInput;

const surface = new Surface({
    content: 'drag me',
    size: [100,100],
    properties : {
        background : '#FF0000'
    }
});

const mouse = new MouseInput();

// The mouse now listens to the DOM events originating from the surface
mouse.subscribe(surface);

// Map the mouse data to a translation
const transform = mouse.map(data => Transform.translate(data.cumulate));

const context = new Context();
context.add({transform : transform}).add(surface);
context.mount(document.querySelector('#myAwesomeApp'));

A great thing about SamsaraJS is that it does not have any opinion about content. It’s only responsibility is presentation.

It moves rectangles around the screen — what you do inside those rectangles is up to you.

A sad thing about this library is that it does require a CSS sheet to be loaded, which can be found node_modules/samsarajs/dist/samsara.css.

The developer has posted some really amazing examples on samsarajs.org which you should definitely check out. Besides the amazing demo’s you can also find very expensive documentation about the API and some real helpful guides.

This is by far my favorite demo

Microwork.js (GitHub: yamalight/microwork, License: MIT, npm: microwork)

Microwork.js is a library for simple creation of distributed micro services using RabbitMQ. If you are not familiar with RabbitMQ, it is a messaging server. Messaging enables applications to connect and scale. Applications can connect to each other, as components of a larger application.

An example service that subscribe to messages from do.stuff topic and uses incoming data:

import Microwork from 'microwork';

// create task runner
const runner = new Microwork({host: 'my.rabbit.host', exchange: 'my.exchange'});

// add worker to specific topic
await runner.subscribe('do.stuff', (msg, reply) => {
    // Capitalize first letter of the message
    reply(msg.charAt(0).toUpperCase() + msg.slice(1));
});

// after work is done - cleanup
await runner.stop();

There are a few useful plugin already available such as: a hardware stats plugin which provides basic hardware stats about Node, a health plugin which provides basic keep-alive signal and a subscribers info plugin which provides basic information about subscribers.

For more examples and documentation check out the Github Page.

During my daily browse I came across “New ways to make your web app jank with Houdini – An introduction”. Which made me curious. After the first paragraph I was hooked. The author Surma make the point that as developers we can only observe what the magic CSS does. Even when we are animating using Javascript we are still animating the CSS properties of the animated element.

This way of thinking is actually backward. What if there was a way you could access the magic CSS does? Define your own properties for doing layout, scroll behavior or position. The possibilities are endless. No longer will we be limited to what is implemented in the spec. That is where Houdini comes in.

The Houdini task force is a collection of engineers from Mozilla, Apple, Microsoft, HP, Intel and Google working together to expose certain parts of the CSS engine. This task force is working on a collection of drafts with the goal to get them accepted by the W3C and become part of the actual web standards.

I would strongly recommend you take a look at Surma’s post and check out the drafts already created.

Surma also posted a small demo of what Compositor Worklet can do in a very early implementation he got to play with.