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. 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. Most projects start with high ambitions, and an imperfect understanding of the problem at hand. To write maintainable code, we need to keep things simple. Write-only DOM.
How to Learn JavaScript Properly – JavaScript Is Sexy Learn JavaScript Properly (For Beginners and Experienced Programmers) This study guide, which I also refer to as a course outline and a road map, gives you a structured and instructive outline for learning JavaScript properly. In fact, you will find two study guides below, one for absolute beginners and the other for experienced programmers and web developers. You do want to learn JavaScript. Table of Contents Study Groups People have started study groups for this study guide. What You will Learn You will learn the JavaScript language (up to advanced-intermediate, if you follow the “Beginners” study guide; or up to advanced, if you follow the “Experienced Programmers” study guide). How Will Your Life Change After You Learn JavaScript Properly? Maybe you will look more lovely and have a kinder, more pleasant personality after you learn JavaScript properly. This is the flourishing and glorious age of the JavaScript developer. Be Empowered Resources for the Two Study Guides Don’t use Safari.
JavaScript object creation: Learning to live without "new" In this article, I'm going to discuss object creation in JavaScript using prototypal inheritance as an alternative to the new operator. One significant aspect of JavaScript is that there is rarely a single right way to do any particular task. JavaScript is a loosely-typed, dynamic, and expressive language, which means that there are usually many different ways to accomplish the same task. I'm not saying that the methods described here to create objects are the only correct ways to do so or even the best ways, but I do feel that they are closer to the true nature of the language and will help you to understand what's going on under the covers if you choose to use other methods. To help you better understand these concepts, this article describes the creation of a basic particle system with multiple rendering targets. The crux of this article is the creation of JavaScript objects. Personally, I see this as a bit of a misguided effort. Embracing prototypal inheritance Adding extend and init
csscss by zmoazeni What is it? csscss will parse any CSS files you give it and let you know which rulesets have duplicated declarations. What is it for? One of the best strategies for me to maintain CSS is to reduce duplication as much as possible. It’s not a silver bullet, but it sure helps. To do that, you need to have all the rulesets in your head at all times. How do I use it? First you need to install it. $ gem install csscss Note: csscss only works on ruby 1.9.x and up. Then you can run it in at the command line against CSS files. Run it in a verbose mode to see all the duplicated styles. $ csscss -v path/to/styles.css Run it against remote files by passing a valid URL. $ csscss -v You can also choose a minimum number of matches, which will ignore any rulesets that have fewer matches. $ csscss -n 10 -v path/to/style.css # ignores rulesets with < 10 matches If you prefer writing in Sass, you can also parse your sass/scss files. $ gem install sass $ csscss path/to/style.scss
tcorral/Design-Patterns-in-Javascript jGestures: a jQuery plugin for gesture events - Home Shoot to kill; CSS selector intent – CSS Wizardry – Web Performance Optimisation 17 July, 2012 Written by Harry Roberts on CSS Wizardry. It’s worth noting that selector intent is something I completely made up at some point today; if you think there’s a better name then please let me know! Let’s take a closer look at the .header ul{} example. Let’s imagine that ul is indeed the main navigation for our website. Your selector’s intent must match that of your reason for styling something; ask yourself ‘am I selecting this because it’s a ul inside of .header or because it is my site’s main nav?’. It’s all about the key selector… What determines the impact of a selector is its key selector. As a general rule you should try and avoid any key selector that is a type selector (basically an element, like ul or span or whatever) or a base object (e.g. .nav or .media). Let’s keep looking at the .header ul{} example. <div class=header><ul class=nav> [links] </ul></div> We could select this in one of several ways: .header ul{ [main nav styles] } Secondly we could use: Real-life example
SeuratJS - A Raphaël plugin for creating beautiful pointillized animations. CSS selectors - mobile Page last changed today Here are almost all CSS2 and 3 selectors, and the CSS3 UI selectors (mostly structural pseudo-classes). This is the mobile table. Last major update on 1 October 2013. See also the CSS3 User Interface spec. iOS 6 WebKit 536 Default browser on iPhone 4S with iOS 6.1.3 iOS 7 WebKit 537 Default browser on iPad 2 with iOS 7.0 Android 2 WebKit 533 Default browser on HTC Legend, Android 2.2 Default browser on LG Optimus something, Android 2.2 Default browser on Samsung Galaxy Pocket, Android 2.3.6 Android 3 WebKit 534 Default browser on Packard Bell tablet, Android 3.2.1 Android 4 Default browser on Samsung Galaxy Note I, Android 4.0.3 Default browser on Sony Xperia S, Android 4.0.4 Default browser on Xiaomi M2, Android 4.1.1 Default browser on Huawei C8813, Android 4.1.1 Default browser on Samsung Galaxy S3, Android 4.1.2 Default browser on HTC One X, Android 4.2.2 Chrome 18 WebKit 535 Default browser on Samsung Galaxy S4, Android 4.2 On Sony Xperia S, Android 4.0.4. Chrome 29 Blink (Chromium 29)
So it isn't possible to create a clean Singleton in JavaScript due to constructor restriction? Really? As I am currently preparing a lecture on Design Patterns, I started to read the famous Design Patterns: Elements of Reusable Object-Oriented Software a.k.a the Gang of Four book as well as Les design patterns en Java and Mastering JavaScript Design Patterns. Whether or not Design Patterns in oriented programming language are a language smell is another story (even if I could not personally agree more). I wanted to write about the following affirmations in Mastering JavaScript Design Patterns: « [...] we don't have that ability in JavaScript: constructors cannot be private. Challenge Accepted. My first reaction reading this was: The second check inside the Wall constructor is hideous and we can definitely hide the constructor thanks to a closure, leveraging JavaScript functional nature. But we can go even further, why bother duplicating singleton logic when you can make a Singleton factory: PS: The __proto__ trick for hiding the constructor is now widely supported (IE11+).
Detecting the ‘Tap’ event on a Mobile touch device using javascript | Gianluca Guarini's Blog Currently we can use different types of events to control a touch gesture on a mobile device using javascript, but unfortunately they are not enough to detect all the huge amount of behaviours that an User could do with a touch gesture. Some of the events that you can catch having everything under control are touchstart, touchmove, touchend and touchcancel. In one of my projects I needed to detect the ‘Tap’ event that is a bit different from the ‘touchstart’ event *, so I found this solution that works pretty well, and here you can get the code. *The Tap event should not be confused with the click because they are two things completely different1 jQuery Solution Demo link [jQuery] Some folks complained about my non pure Javascript solution so I thought to show how to use the previous snippet without the help any other framework. 2 If for whatever reasons you can’t use jQuery here you have also the Pure Javascript solution Demo Link [Pure Javascript] 3 Rock solid solution Download Tocca.js