PhantomJS: Headless WebKit with JavaScript API Underscore.js Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. It’s the answer to the question: “If I sit down in front of a blank HTML page, and want to start being productive immediately, what do I need?” … and the tie to go along with jQuery's tux and Backbone's suspenders. Underscore provides over 100 functions that support both your favorite workaday functional helpers: map, filter, invoke — as well as more specialized goodies: function binding, javascript templating, creating quick indexes, deep equality testing, and so on. The project is hosted on GitHub. Collection Functions (Arrays or Objects) _.each(list, iteratee, [context]) Alias: forEach Iterates over a list of elements, yielding each in turn to an iteratee function. Note: Collection functions work on arrays, objects, and array-like objects such as arguments, NodeList and similar. _.some([null, 0, 'yes', false]); => true Array Functions Chaining
Why AMD? Module Purposes§ 1 What are JavaScript modules? What is their purpose? Definition: how to encapsulate a piece of code into a useful unit, and how to register its capability/export a value for the module.Dependency References: how to refer to other units of code. The Web Today§ 2 (function () { var $ = this.jQuery; this.myExample = function () {}; }()); How are pieces of JavaScript code defined today? Defined via an immediately executed factory function. This can be difficult to manage on large projects, particularly as scripts start to have many dependencies in a way that may overlap and nest. CommonJS§ 3 var $ = require('jquery'); exports.myExample = function () {}; The original CommonJS (CJS) list participants decided to work out a module format that worked with today's JavaScript language, but was not necessarily bound to the limitations of the browser JS environment. network loadinginherent asynchronicity define(['jquery'] , function ($) { return function () {}; }); Module Definition§ 5
Continuos Integration (CI) for JavaScript – Jasmine and Teamcity | Dan Merino's Blog Web applications are using more JavaScript than ever before. The following image (thanks to Gineer) shows the shift in the architecture types of web applications from simple thin clients to thicker clients driven by rich presentations and client logic. Since most of the newer web applications include business logic embedded into the client using JavaScript, we must put assurances to make sure the quality of the application is not compromised over time. In most cases, the JavaScript side of the applications goes untested or is not automated which is a bad idea. I have selected the following tools to be able to provide Continuous Integration to Rich Internet Applications: Jasmine is a testing framework for JavaScript. Team City is a Continuos Integration server that is extremely popular due to its flexibility to work with a wide variety of projects, it is easy to configure and it works in most environments. Jasmine Team City Reporter is a reporter type for Jasmine. JavaScript tests
Backbone.js Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. The project is hosted on GitHub, and the annotated source code is available, as well as an online test suite, an example application, a list of tutorials and a long list of real-world projects that use Backbone. Backbone is available for use under the MIT software license. You can report bugs and discuss features on the GitHub issues page, on Freenode IRC in the #documentcloud channel, post questions to the Google Group, add pages to the wiki or send tweets to @documentcloud. Backbone is an open-source component of DocumentCloud. Downloads & Dependencies (Right-click, and use "Save As") Backbone's only hard dependency is Underscore.js ( >= 1.5.0). Introduction Many of the examples that follow are runnable. Upgrading to 1.1
AMD is Not the Answer : Tom Dale Every so often, we get requests to make Ember.js support AMD (asynchronous module definition). Until today, I had yet to hear anyone articulate why the advantages outweighed the (in my opinion) many disadvantages. Then, James Burke wrote an article called Simplicity and JavaScript modules that has so far done the best job outlining why AMD is good. However, I disagree with many of the assumptions and find many of the arguments outright contradictory. So, while James is both smart and I’m sure good-looking (and I agree with his comments on CommonJS), here are the reasons I think he is wrong about AMD. Build Tools Are Okay However, for those of us who came from Dojo, requiring a server tool or compile step to just develop in JS was a complication. I have a lot of respect for Alex but, if this is his current opinion, he’s wrong. Many HTTP Requests AMD expects every module to be contained in a separate file. But wait, I thought we were just arguing that build tools are bad? Too Much Ceremony
spin.js 20 Useful CSS Graph and Chart Tutorials and Techniques Usually, Graphs and Charts are mainly used for representing and organizing a set of numerical data with a graphical representation such as pie chart, line charts, bar graphs and many more. The static images would be reduced using these techniques and enables more access to the contents of the charts and the graphs. The Cascading Style Sheets (CSS) is a language that is used to describe the format of a document that is written in the markup language like HTML, XHTML, etc. The important feature of the CSS chart or graph is that it allows the users to easily download by reducing the bandwidth requirements of the HTML page. There are numerous techniques involved which would create a style in the CSS3 graphs and charts. Always remember, it is quite essential to establish a dynamic web chart so that the numerical data variables are quite easy to alter or could be updated at any time. How to Create an Interactive Graph using CSS3 & jQuery CSS3 Charts Pure Css Data Chart Wicked CSS3 3d bar chart
Simplicity and JavaScript modules All of us are looking for simplicity, but there are different levels to simplification. This is a story of what could be considered simple for modules in JavaScript. This post was prompted by the removal the optional AMD define() call in underscore. For a post on simplicity, it is a bit long, but I'm not a great writer, and I find I normally edit myself so much as to lose interest in posting, so then I end up not communicating. Better to start communicating even if imperfect. I want to lay out why AMD modules are the simplest overall module solution for JavaScript at the moment, and where other approaches are not as simple as they may appear. Script Tags JavaScript does not have syntax for modules, but most programming languages do. JavaScript on the web has meant using script tags and manually ordering those script tags so that dependencies on global objects are worked out correctly. That sucks for the following reasons: CommonJS require('some/id') to reference a bit of code. return value;
Continuous Integration for Javascript Jenkins is a CI tool that is often used for running tests and code analysis after every code push. There are a lot of benefits that we as a community are not taking advantage of for our web (CSS, JS, etc) code. In this article I’m going to walk you through setting up automated building and testing for a JavaScript project. NOTE: The steps outlined are generally Linux/Mac centric, I don’t go into depth on Windows setup, but it shouldn’t be much different using Cygwin. CI Your JS? Aside from the traditional benefits you see from your compiled code, there are some very compelling reasons: Automate versioning, combining, minifying, and gzipping filesRun automated tests and get reports, keeping the codebase maintainableRun static analysis tools like the closure compiler or jshintAuto-deploy files (to S3, say) if our build passesTag and other special stuff for release buildsAnd that’s not all! Jenkins setup Downloading and running Jenkins is incredibly easy. Nailed it! Prerequisites Setup a CI job
Useful HTML5 Frameworks, Template Generators and Tools Web designing needs consideration of a few facts before starting with a particular project. Clients will never allow you to take ample time to end up the project and you have to be efficient enough to run parallel with your clients. Uses of technical applications can ease the task which again takes in account the right choice of the designing medium. Let me discuss in brief why it is inevitable to use frameworks while working with HTML5. Few of the HTML5 frameworks, template generators and tools provide option to include the template in your preferable place including JavaScript, server configurations, Google analytics and also jQuery. The sites that incorporate HTML5 and CSS3 should be grateful to these magical framework. Initializr Modernizr 52framework HTML5 Boilerplate HTML5 Front End Development Framework reformed Form Builder Sencha LungoJS – Mobile Framework Popcorn.js – The HTML5 Media Framework The Joshfire Framework Jo HTML5 Mobile App Framework HTML5 Template Generator sprite.js LimeJS
Asynchronous module definition Instead of loading files one-after-the-other. AMD can load them all separately, even when they are dependent on each other. Asynchronous module definition (AMD) is a JavaScript API for defining modules such that the module and its dependencies can be asynchronously loaded.