1/27/2018 - Learning New Tricks

I've reserved myself that these posts are going to be an every once in a while thing.
In the end they are easier to create than youtube videos, and I feel they serve the topics I want to discuss well enough.

Anyways ... Web Workers

These are game changing for me.
Multithreaded javascript is something I've been longing for, and I finally took the dive and learned how to use web workers.
Here is the rather dense MDN Article on web workers.
Long and short they are good for lengthy data processing requests. Think of them as their own json request servlet that run in the client.
All data sent to a web worker is serialized and de-serialized so pointer references are not maintained with the main thread. And web workers do not have access to the DOM.
This also means that the web worker does not tie up the dom while they are processing.
For example if you are running a request that takes multiple seconds to process it is not locking up the page while the code is executing in the web worker.
When the web worker is done it pushes out the response back to the main thread signalling that it's either done or has at least made progress on the task at hand.
Another boon is when all is said and done they are simple to setup and create in comparison to how other languages work multithreading.

Web Worker Demo

Example Code
*Click the "click here" link above to run the web worker demo. Also if you have an ad-blocker turned on the examples won't work because they are being pulled remotely from github.

Clip-Path And Animations

MDN Reference, Can I use Stats
Css clip-path is not for the faint of heart, and browser support isn't spectacular.
But it let me try out some cool tests without using css border shape hacks, svg's, or png images.
Clip path objects are also a neat means to mess around with css animations.

Clip Path Animation Demo

Example Code
*Note this example does not currently work in Microsoft Edge.

Putting it all together

Well in theory anyways. As of 1/27/2018 I'm still working on this next example.

Example Code
*Click on a token, and then click on another token that is orthogonal to it. Sets of 3 or more are removed from the board and scored. You can match tokens by shape or color.

This example makes full use of web workers.
First when checking for maching tokens sets of 3 or more tokens across the entire board state.
And second after combo's are made on the board by dropping the hanging tokens to their new positions.
In truth the way these operations are written is extremenely inefficient.
I can make the operations appear fast by only applying the update to the dom after the processing is done.

Animating board state change is hopefully next.

For other cool features it uses a seed to generate the psuedo random tokens to place on the board.
Meaning that although the tokens seem random the board state is reproducible.
But seeds and random number generators is a whole other topic worth discussing in another post.