Important Considerations When Building Single Page Web Apps Single page web applications - or SPAs, as they are commonly referred to - are quickly becoming the de facto standard for web app development. The fact that a major part of the app runs inside a single web page makes it very interesting and appealing, and the accelerated growth of browser capabilities pushes us closer to the day, when all apps run entirely in the browser. Technically, most web pages already are SPAs; it's the complexity of a page that differentiates a web page from a web app. In my opinion, a page becomes an app when you incorporate workflows, CRUD operations, and state management around certain tasks. You're working with a SPA when each of these tasks take place on the same page (using AJAX for client/server communication, of course). Let's start with this common understanding, and dive into some of the more important things that should be considered when building SPAs. I will expand on each of the points above in the following sections. Picking an Application Framework
Raphaël—JavaScript Library Learning JavaScript Design Patterns Design patterns are reusable solutions to commonly occurring problems in software design. They are both exciting and a fascinating topic to explore in any programming language. One reason for this is that they help us build upon the combined experience of many developers that came before us and ensure we structure our code in an optimized way, meeting the needs of problems we're attempting to solve. Design patterns also provide us a common vocabulary to describe solutions. This can be significantly simpler than describing syntax and semantics when we're attempting to convey a way of structuring a solution in code form to others. In this book we will explore applying both classical and modern design patterns to the JavaScript programming language. Target Audience This book is targeted at professional developers wishing to improve their knowledge of design patterns and how they can be applied to the JavaScript programming language. Acknowledgments Credits Reading We already use patterns everyday
d3.js api - Should I use OpenLayers or Leaflet I have used both OpenLayers and Leaflet in my apps. There has been so much discussion on this topic in this forum and others on planet-internet. They usually fall into 2 camps - features and flexibility of OpenLayers versus simplicity of Leaflet. I found Leaflet very simple to use, a petite 64K size, compared to over 700K Openlayers, and in very few steps you can create apps that have the freshness and eye-candy of today's web and mobile GIS apps. Having said that, I would still go with OpenLayers for the following reasons 1) There is just a TON of material around OpenLayers. 2) Check out the comparison on commits and users 3) OpenLayers, GeoServer, PostGIS stack is so proven in the FOSS world that you are going on a path that is solid. 4) OpenLayers has tad bit more features on Map Controls 5) While its a bit more work to create transitions and visual-effects, it can be done in OpenLayers.
BigVideo.js - The jQuery Plugin for Big Background Video The jQuery Plugin for Big Background Video (and Images) This plugin makes it easy to add fit-to-fill background video to websites. It can play silent ambient background video (or series of videos). Or use it as a player to show video playlist. BigVideo.js is built on top of Video.js from zencoder. You can read about how to use BigVideo.js below. DOWNLOAD: zip tar examples bower install BigVideo.js Setup BigVideo.js uses the Video.js api. To simply play a video that takes up the entire browser window (like in this example), do this: For crossbrowser fallbacks, you can include a source order with different video formats. Ambient Video To play silent video in the background of a page (like in this example), use BigVideo’s ambient setting: Or play a series of ambient background videos (like in this example) Keep in mind that mobile devices do not allow video autoplay. Video.js Because BigVideo.js is built on top of Video.js, you can use the Video.js api. BV.getPlayer().pause(); Tips
An Introduction to Source Maps In today's modern workflow, the code that we author in our development environments is considerably different from the production code, after running it through compilation, minification, concatenation, or various other optimization processes. This is where source maps come into play, by pointing out the exact mapping in our production code to the original authored code. In this introductory tutorial, we'll take a simple project, and run it through various JavaScript compilers for the purposes of playing with source maps in the browser. What are Source Maps? Source maps offer a language-agnostic way of mapping production code to the original code that was authored. Source maps offer a language-agnostic way of mapping production code to the original code that was authored in your development environment. Browsers Please note that, while writing this article, Chrome (Version 23) supports JavaScript Source Maps, and even SASS Source Maps. Source Maps in Chrome Setup Option A: Closure Compiler
Cubism.js Time Series Visualization foo7.6 bar−6.2 foo + bar1.4 foo - bar14 Cubism.js is a D3 plugin for visualizing time series. Scalable Cubism fetches time series data incrementally: after the initial display, Cubism reduces server load by polling only the most recent values. Effective Cubism also scales in terms of perception: small multiples aligned by time facilitate rapid comparison. Area (120px)7.6 Area (30px)7.6 In contrast, horizon charts reduce vertical space without losing resolution. Horizon, 1-band (120px)7.6 Horizon, 2-band (60px)7.6 Horizon, 3-band (40px)7.6 Horizon, 4-band (30px)7.6 By combining position and color, horizon charts improve perception: position is highly effective at discriminating small changes, while color differentiates large changes. Flexible Cubism is data-source agnostic. Want to learn more?
Dopeless Rotate - Jquery Plugin for 360 degrees product view 24.07.2013 - Update to version 1.2.5 Hotspot links are added 28.05.2013 - Update to version 1.2.4 Autoscale for low display resolution is added minor bugfixes 23.05.2013 - Update to version 1.2.3 Option to rotate with mousewheel is added 23.05.2013 - Update to version 1.2.2 Play/Stop external control added One loop auto rotation added Rotation on mousehover added Issues with external controls on touchscreen devices fixed 24.03.2013 - Update to version 1.2.1 Autoplayback added Highlights options extended 19.03.2013 - Update to version 1.2 External controls added Script optimization Bugs fixed 12.03.2013 - Update to version 1.1.6 Some bugs fixes. 12.03.2013 - Update to version 1.1.5 12.03.2013 - Update to version 1.1.0 Touch device detection fixed. 29.01.2013 - Update to version 1.0.8 Minor fixes for Firefox 22.01.2013 - Update to version 1.0.7 An option to change rotation axis is added - now you can select if to initialize rotation on mouse movement on X or Y axis 21.01.2013 - Update to version 1.0.5 1. 2.
spin.js - Loader Adequately Good - JavaScript Module Pattern: In-Depth - by Ben Cherry The module pattern is a common JavaScript coding pattern. It's generally well understood, but there are a number of advanced uses that have not gotten a lot of attention. In this article, I'll review the basics and cover some truly remarkable advanced topics, including one which I think is original. The Basics We'll start out with a simple overview of the module pattern, which has been well-known since Eric Miraglia (of YUI) first blogged about it three years ago. Anonymous Closures This is the fundamental construct that makes it all possible, and really is the single . (function () { // ... all vars and functions are in this scope only // still maintains access to all globals }()); Notice the () around the anonymous function. Global Import JavaScript has a feature known as . Luckily, our anonymous function provides an easy alternative. (function ($, YAHOO) { // now have access to globals jQuery (as $) and YAHOO in this code }(jQuery, YAHOO)); Module Export Advanced Patterns Augmentation