Web Animations now in Chrome

snowFlake.animate([ {transform: ‘translate(‘ + snowLeft + ‘px, -100%)’}, {transform: ‘translate(‘ + snowLeft + ‘px, ‘ + window.innerHeight + ‘px)’} ], { duration: 1500, iterations: 10, delay: 300 }); Glad to see this one land 🙂 Web Animations – element.animate() is now in Chrome 36 → Related: Web Animations Preview Web Animations Polyfill

ngCordova – Cordova with the power of AngularJS

module.controller(‘PictureCtrl’, function($scope, $cordovaCamera) { $scope.takePicture = function() { $cordovaCamera.getPicture({ // See all the possible Camera options from the Camera docs [1]: /// https://github.com/apache/cordova-plugin-camera/blob/master/doc/index.md#cameraoptions }).then(function(imageData) { // Success! Image data is here }, function(err) { // An error occured. Show a message to the user }); } }); ngCordova is a set of AngularJS extensions on …

Angular Classy – Cleaner class-based controllers for AngularJS

Without Classy: app.controller(‘AppCtrl’, [‘$scope’, ‘$location’, ‘$http’, function($scope, $location, $http) { // … }]); With Classy: app.classy.controller({ name: ‘AppCtrl’, inject: [‘$scope’, ‘$location’, ‘$http’], //… }); Angular Classy →

Using Encapsulation for Semantic Markup

UPDATE: This demo no longer works as createShadowRoot got replaced with attachShadow + shadow roots can only be created on a limited set of elements nowadays. See the Pen A Pen by chrismichaelscott on CodePen. As designers, we may want to style something in a certain way, but sometimes end up having to go to …

Client feedback on the creation of earth

Hi God, Thanks so much for the latest round of work. Really coming together. Few points of feedback: 1 – Really liking the whole light thing but not totally sure about the naming system. “Day” and “night” are OK but we feel like there’s more we can do here. Thoughts? Definitely need to nail this …

PlayCanvas – WebGL 3D game engine with online toolset.

The PlayCanvas Engine is a JavaScript library engineered specifically for building video games. It implements all of the major components that you need to write high quality games: Graphics: model loading, per-pixel lighting, shadow mapping, post effects Physics: rigid body simulation, ray casting, joints, trigger volumes, vehicles Animation: keyframing, skeletal blending, skinning Audio engine: 2D …

randomColor – A color generator for JavaScript

There are lots of clever one-liners for generating random colors: ‘#’+Math.floor(Math.random()*16777215).toString(16); Unfortunately, this code naturally produces lots of greys and browns and murky greens. randomColor generates attractive colors by default. More specifically, randomColor produces bright colors with a reasonably high saturation. This makes randomColor particularly useful for data visualizations and generative art. The result pictured …

Inverse trigonometric functions with Sass

See the Pen Pure CSS 3D animated icosidodecahedron (pentagonal gyrobirotunda) by Ana Tudor (@thebabydino) on CodePen. You might think that math doesn’t have a lot to do with writing stylesheets, but you can actually do some amazing things with a little math in CSS. Math (particularly trigonometry) can help you model the real world. You’ll …