1.3.16 demo - jQuery Window 1 I am plumbed with a Bezier connector to Window 2 and a label, with Blank endpoints. Window 2 I am plumbed with a Bezier connector to Window 1, and a Bezier connector with Rectangle endpoints to Window 3 Window 3 I am plumbed with a Bezier connector and Rectangle endpoints to Window 2, and a Bezier connector with Dot endpoints and a label to Window 4. Window 4 I am plumbed with a Bezier connector with Dot endpoints to Window 3, and with a Straight connector with Image endpoints to Window 5. Window 5 I am plumbed with a Flowchart connector to Window 6, between our two centerpoints, which are drawn below, and larger than, the window element; I am also plumbed to Window 4. Window 6 I am plumbed with a Flowchart connector to Window 5, between our two centerpoints, which are drawn below, and larger than, the window element. Window 7 I am plumbed with State Machine connectors to Window 3. Connection One
Single page apps in depth (a.k.a. Mixu' single page app book) This free book is what I wanted when I started working with single page apps. It's not an API reference on a particular framework, rather, the focus is on discussing patterns, implementation choices and decent practices. I'm taking a "code and concepts" approach to the topic - the best way to learn how to use something is to understand how it is implemented. My ambition here is to decompose the problem of writing a web app, take a fresh look at it and hopefully make better decisions the next time you make one. Update: the book is now also on Github. Introduction Modern single page apps - an overview Writing maintainable code Implementation alternatives: a look at the options Meditations on Models & Collections Views - templating, behavior and event consumption Why do we want to write single page apps? This is hard to do with other approaches. Single page apps are distinguished by their ability to redraw any part of the UI without requiring a server roundtrip to retrieve HTML. More specifically:
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. 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. Some of the concepts covered (closures, prototypal inheritance) will assume a level of basic prior knowledge and understanding. Acknowledgments Credits Reading Patterns are not an exact solution. Creational Design Patterns
DurandalJS template The DurandalJS MVC Template is written by Rob Eisenberg Download the Durandal MVC Template Durandal is small JavaScript framework designed to make building Single Page Applications (SPAs) simple and elegant. We didn't try to re-invent the wheel. Durandal is built on libs you know and love like jQuery, Knockout and RequireJS. There's little to learn and building apps feels comfortable and familiar. Architecture Durandal has strong support for MVC, MVP and MVVM. Features Clean MV* ArchitectureJS & HTML ModularitySimple App LifecycleEventing, Modals, Message Boxes, etc.Navigation & Screen State ManagementConsistent Async Programming w/ PromisesApp Bundling and OptimizationUse any Backend TechnologyBuilt on top of jQuery, Knockout & RequireJSIntegrates with other libraries such as SammyJS & BootstrapMake jQuery & Bootstrap widgets templatable and bindable (or build your own widgets) Platform Support Building an Android phone app? Want to use a .NET backend? Understanding the Template Organization
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 would not be surprised if someone spawns an "OpenLeaf" initiative soon marrying the best of both worlds! 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. 5) While its a bit more work to create transitions and visual-effects, it can be done in OpenLayers. Cheers, Ramesh
Mobile Performance Manifesto | David Calhoun's Blog Earlier this year I gave a talk (slides) outlining the latest and greatest in mobile performance, including a bit of my own unscientific research into carrier latency and bandwidth thanks to boomerang.js. I realized that interest in mobile performance has exploded recently, especially with Steve Souders announcing his focus on mobile, and I thought it was time for an update, this time in blog form. Also, my old slides have been somewhat embarrassing. For some strange reason, at the time I wanted to give S5 a try – that outdated, ancient, not-performant slideshow framework. In any case, it was time for a roundup of mobile performance best practices, in blog form. For fun: Latency and bandwidth tests Before we start.. just a little fun data! When I got back, I ran the same tests from downtown San Francisco, which was closer to my California-based test server, and should’ve been faster, right? Boomerang Tests (running on a California-hosted server) Ok, onto the tips! Page Organization Chrome
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
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.
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