background preloader

Adequately Good - JavaScript Module Pattern: In-Depth - by Ben Cherry

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. If you're already familiar with the module pattern, feel free to skip ahead to "Advanced Patterns". 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. Module Export Advanced Patterns Augmentation Sub-modules

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.

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

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. Let's start with this common understanding, and dive into some of the more important things that should be considered when building SPAs. There are numerous points to consider before building a new app; to make matters worse, the expansive web development landscape can be intimidating at the outset. I will expand on each of the points above in the following sections.

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

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

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

Related: