Issue 30

Must Read

Building Shaders with Babylon.js

Shaders are a key concept if you want to unleash the raw power of your GPU. I will help you understand how they work and even experiment with their inner power in an easy way, thanks to Babylon.js.

Learn

CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends

As luck would have it, there is already a technology, called CSS, which is designed specifically to solve this problem. Using CSS, I can propagate styles that cross the borders of my HTML components, ensuring a consistent design with minimal effort.

GPU Animation: Doing it Right

Most people now know that modern web browsers use the GPU to render parts of web pages, especially ones with animation. For example, a CSS animation using the transform property looks much smoother than one using the left and top properties. But if you ask, “How do I get smooth animation from the GPU?” in most cases, you’ll hear something like, “Use transform: translateZ(0) or will-change: transform.”

A Prettier JavaScript Formatter

Prettier is a JavaScript formatter inspired by refmt with advanced support for language features from ES2017, JSX, and Flow. It gets rid of all original styling and guarantees consistency by parsing JavaScript into an AST and pretty-printing the AST.

Tools & Code

Building a Custom Tag Input with Skate.js

Are you lost trying to build and use Web Components? Skate.js uses the platform and sheds some light on it.

Javascript Array Iteration

JavaScript Arrays have lots of built in methods on their prototype. Some of them mutate - ie, they change the underlying array in-place. Luckily, most of them do not - they instead return an entirely distinct array. Since arrays are conceptually a contiguous list of items, it helps code clarity and maintainability a lot to be able to operate on them in a "functional" way.

Drizzle

Drizzle is a streamlined tool for developing, documenting and presenting UI pattern libraries.

Interesting Links

Improving the State of your App with Redux

Redux is a lightweight, standalone library that can be used in any JavaScript application that provides a simple but powerful set of features. It can solve many application-specific problems and enable aspects such as consistency, testability, logging, hot reloading, undo capability and record/replay.