Monthly Archives: January 2016

Why I Left Gulp and Grunt for npm Scripts

Gulp and Grunt leave you dependent on plugin authors, stick you with debugging, and provide disjointed documentation. Why not just use JavaScript?

Cory House writes:

I know what you’re thinking. WAT?! Didn’t Gulp just kill Grunt? Why can’t we just be content for a few minutes here in JavaScript land? I hear ya, but…

I’ve found Gulp and Grunt to be unnecessary abstractions. npm scripts are plenty powerful and often easier to live with.

Read more from the source: Medium

Tasks, microtasks, queues and schedules

JavaScript Promises and Mutation Observers schedule work as microtasks which fire after the script finishes but before the next event loop. Not all browsers get it right.

 

Jake Archibald writes:

When I told my colleague Matt Gaunt I was thinking of writing a piece on microtask queueing and execution within the browser’s event loop, he said “I’ll be honest with you Jake, I’m not going to read that”. Well, I’ve written it anyway, so we’re all going to sit here and enjoy it, ok?

Read the blog article at jakearchibald.com

ChakraCore GitHub repository is now open

Microsoft makes Chakra open source and pits it against V8, providing a drop-in alternative to V8 with Node.js. Only on Windows so far.

 

In a December 2015 talk at JSConf US, we announced that we would be open-sourcing the key components of the Chakra JavaScript engine that powers Microsoft Edge. Today, we are excited to share with you that we’ve just made the sources for ChakraCore available under the MIT License at the ChakraCore GitHub repository. Going forward, we’ll be developing the key components of Chakra in the open.

Read more from the source: Microsoft Edge Dev Blog

lodash v4.0.0 released

lodash 4 packs major changes, drops thisArg, folds _.pluck, _.where and more into other methods, adds support for extended Unicode symbols

 

For 2016 & lodash v4.0.0 we wanted to cut loose, push forward, & take things up a notch!

With v4 we’re breaking free from old projects, old environments, & dropping old IE < 9 support!

Read more from the source: GitHub

Moving along a curved path in CSS with layered animation

Using an inner and outer container you can animate content on a curved path

 

CSS animations and transitions are great for animating something from point A to B. That is, if you want to animate along a straight path. No matter how much you bend your bezier curves, you can’t make something move along a curved path by applying ananimation or a transition to an object. You can overshoot with custom timing functions, and produce spring-like effects, but the relative movement along the X and Y-axis will always be identical.

However, instead of turning to JavaScript for producing more natural looking motion, there’s an easy way to work around this limitation: layered animation. By using two or more objects to drive an animation, we get fine grained control over an object’s path, and can apply one timing function for the movement along the X-axis, and another one for the Y-axis.

Read more from the source: Tobias Ahlin

Angular 2 Beta is Out

Angular 2 reaches beta, packing a lot of changes from the preview

 

Angular 2 is truly a different framework from Angular 1. Although there is ngUpgrade and ngForward to help transition, the syntax and API are vastly different.

Angular 2 introduces a DOM parser that process html attributes before hitting the DOM. That means the new star, brackets and parentheses are easier to handle under the covers. And Angular 2 makes directives camelCase instead of kebab-case. You may also notice that directive attributes don’t show up on the DOM. All that is parsed out before rendering.

ng-if is now *ngIf and ng-repeat=”item in items” is now *ngFor=”#item of items”. ng-eventname directives are gone in favor of (eventname) syntax.

Property-based directives such as ng-class, ng-style, and ng-disabled are gone in favor of bracket-notated binding: [class.classname], [style.property], [disabled].

ng-model becomes [ngModel] for one-way binding and [(ngModel)] for two-way binding.

The digest cycle is gone, replaced by an immutabile object style checking.

Typescript (or the ES6 subset of Typescript) is recommended, but Angular 2 comes with a webpack-style server and live reloader for development.

Read the announcement on the blog: angularjs.blogspot.com or checkout the updated angular.io website.