Remastered Animation in AngularJS 1.2. Learn how to use the bigger and better animation features in AngularJS 1.2 AngularJS 1.2rc1 1.2 is out and this brings in a brand-new API for animations using ngAnimate.
A lot has changed, but animations are better than ever. With 1.2, animations come full circle with new features such as support for ngClass, class expressions, and callbacks. Animation in AngularJS 1.2 by Gias Kay Lee. Pure. CSS 3D Editor. Functional testing with CasperJS. The HootSuite web dashboard is quite front-end heavy.
We have a large JavaScript codebase and a lot of it was written using jQuery, with most of the code touching the DOM in some way. Due to the coupling of the code with the DOM, unit testing gets a bit complicated as HTML fixtures will have to be supplied for tests. It’s not impossible, but it’s a bit more work, and experience shows that developers are more likely to write tests when they’re convienent. We’ve adopted to use CasperJS to fill the gaps in our unit test coverage. Web Performance Metrics and Best Practices. In this series on Web Performance Holiday Readiness, our experts will provide tips & tricks, advice and best practices to help you gear up for online success.
This article written by Justin Howe, provides insight into understanding your performance metrics and the vital role they play in the success of your Website and, ultimately, your business. Performance Metrics 101 Missing out on personal time. Neglecting to take vacation. Free Alternative to Splunk Using Fluentd. Available languages | en | ja | Splunk is a great tool for searching logs, but its high cost makes it prohibitive for many teams.
In this article, we present a free and open source alternative to Splunk by combining three open source projects: Elasticsearch, Kibana, and Fluentd. Click to See the Demo Elasticsearch is an open source search engine known for its ease of use. How to Choose Colours Procedurally (Algorithms) Changing the colours of art can be a great way to increase the amount of content in your game, and add variety and richness.
It is relatively easy to implement. What is not always as easy is to get a set of colours that looks nice. This article gives some ideas for choosing colour palettes that look nice. A few things about colour Colour is surprisingly complex. Although you don’t need to know all about the physics, biology, and psychology of colour vision, it is useful to have some background information (which you can find references to at the end of this article). For palette choosing, there are a few important points. Digital colour theory differs considerably from theories based on pigments (or chemicals, or metals in crystals). The Web Developer's SEO Cheat Sheet 2.0. NProgress: slim progress bars in JavaScript. Web Performance Crash Course - Fluent 2013.
VonWolfehaus/von-physics. AngularJS Highlights: Week Ending 11 August 2013. Bootstrap Magic : Generate your own bootstrap theme quickly and easily. JavaScript Best Practices Part 1. Javascript Best Practices, Part 1 Make it Understandable Choose easy to understand and short names for variables and functions.
Bad variable names: Also bad variable names: incrementerForMainLoopWhichSpansFromTenToTwenty } createNewMemberIfAgeOverTwentyOneAndMoonIsFull Avoid describing a value with your variable or function name. Annyang! Easily add speech recognition to your site. Go ahead, try it… Say "Hello!
" Annyang! Let's try something more interesting… Say "Show me cute kittens! " Say "Show me Arches National Park! " Favico.js - Make a use of your favicon. Badges Animate your favicon with animated badges.
You can customize type of animation, position, background color and text color. Slide animation Fade animation Pop animation. Blacktail/real-edit. Sunglass by devatrox. Hij1nx/EventEmitter2. How to keep up to date on Front-End Technologies - The Recipe. TestCafé: Web Testing Framework. DevDocs. Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit! JSDB.io - The Database of JavaScript Libraries. Stream-m - A HTML5 compatible WebM live streaming server. Stream.m is created to be an open source solution for streaming live video right into the web browser using the HTML5 video tag and Google's WebM video format.
The current version is a working prototype, which showcases the main ideas. The main design goal is low resource usage. QuoJS - Micro JavaScript Library. jQuery Nested. Nested is a jQuery plugin which allows you to create multi-column, dynamic grid layouts.
Unlike other libraries and jQuery plugins similar to Nested, this is (as far I as I’ve know) the first script out there that allows you a complete gap-free layout. How is this done? Nested does three things. It creates a matrix of all elements and creates a multi column grid, similar to other libraries and scripts out there. Then it scans the maxtric for gaps and tries to fill them by reordering the elements. Use a container element with a group of child items that use the chosen option selector setting (default: .box). <div id="container"><div class="box size11"></div><div class="box size12"></div><div class="box size21"></div><div class="box size22"></div> ...
Sizing of items are handled by adding sizeWH where W is the number of columns the box shall use and H is the number of rows the box shall use. Selector Default .box. List of languages that compile to JS · jashkenas/coffee-script Wiki. Browserstate/history.js. Front-end Code Standards & Best Practices. Introduction◊ This document contains the guidelines and best practices for the front-end web development team at Isobar. Each item here represents either: A reminder to follow existing standards or industry conventions,guidance on what constitutes professional patterns and organization, or a decision we've made favoring one method over its alternatives.
Communist! Unheap - A tidy repository of jQuery plugins. Scalable JavaScript Design Patterns. Introduction Welcome to the resource page for my talk on Scalable JavaScript Design Patterns last presented at Web Directions (South). It's an extended version of the talk I gave at Fronteers and includes more information about a highly-decoupled architecture for building large applications I've been discussing recently.
This version of the talk also covered live code demos of 'Aura', a framework based on some of the ideas in the presentation (see lower down for some code examples). Many of the concepts presented build upon previous work by Nicholas Zakas. I'm a firm believer in lowering the barrier of entry to (sometimes) complex concepts in JavaScript; this is one reason why the theme of my slides is 'Star Wars' and some of the initial concepts behind the design patterns used are explained through Star Wars metaphors. Notes. Qiao/PathFinding.js.