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 …

VLEX – Vector Layout Expressions

<html> <head> <script src="path/to/vlex.js"></script> </head> <body> <div id="vlexContainer" style="width:100%; height:100%;"> <svg id="vlex" width="100%" height="100%" onload="VLEX(vlex)"> <!– call VLEX inline –> <circle r="100" vlex="cx:{$cX};cy:{$cY}"></circle> <!– use vlex attribute –> </svg> </div> </body> </html> SVG is deemed to be the holy grail for graphics in resposive web design! But are they really?! In situations – where you …