background preloader

jQuery Joyride Plugin

jQuery Joyride Plugin
Create jQuery Feature Tours in a Breeze Setting up Joyride is simple, just attach the needed files, drop in your markup and choose your settings. Joyride is extremely flexible and lets you take control of how people interact with your tour. We programmed it to be cross-browser compatible with modern browsers and even used some fancy CSS to avoid images. Now let’s see just how easy it is to take your first ride without getting the fuzz involved. New in Version 2 There have been many significant performance improvements in Joyride 2, along with a myriad of new features. It works on every screen size! Step 1 Pack Your Bags You’ll definitely need the Joyride kit in order to do this, so make sure you download it. /* Attach the Joyride CSS file */ <link rel=" stylesheet" type="text/css" href="jquery.joyride-2.0.css"> /* jQuery needs to be attached */ <script src="jquery-1.8.2.min.js"></script> /* Then attach the Joyride plugin */ <script src="jquery.joyride-2.0.js"></script> Step 2 Step 3 Step 4 Step 5

Getting started - Polymer Basics The basics of using Polymer are simple: Load platform.js to polyfill missing platform features, such as Shadow DOM and HTML Imports . Load components with <link rel="import" href="/path/to/component-file.html"> Use the custom element in your page. Here’s a bare bones example: <! Note : You must always run your app from a web server. Components Custom Elements are the core building blocks of Polymer-based applications. Creating a basic component The platform polyfills provided by Polymer let you load and display custom elements. Creating a Polymer element Polymer provides extra goodies for creating custom elements. Load the Polymer kernel ( polymer/polymer.js or polymer/polymer.min.js ). Note : polymer.js loads platform.js under the hood. In your custom element, add a <script> element that calls the Polymer.register() initializer. In the following sample we convert our basic custom element into a Polymer element named tk-element . Declarative data binding Binding to markup

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

jQuery : l’événement ! Enfin « les », événements. Je voulais un titre sensationnel. Vous connaissez certainement jQuery, l’excellente bibliothèque Javascript. Non ? Le développement DOM/Javascript repose en grande partie sur les événements. jQuery propose deux manières de définir les événements : nous allons les analyser. Les « Event Helpers » Joli nom. Il s’agit d’une série de méthodes, reprenant le nom des événements DOM. Si aucun paramètre n’est passé, cette méthode déclenche l’événement. Si une fonction est passée en paramètre, elle s’exécutera lorsque l’événement sera déclenché (depuis le code comme vu juste au-dessus, ou « naturellement »). Vous trouverez la liste complète de ces méthodes sur la page de documentation des événements : Définir un événement Commençons par un exemple. L’événement onclick peut être défini sur un objet jQuery à l’aide de la méthode click() à laquelle est passée une fonction : $("a#test1").click(function(){ window.alert("Clic sur a#test1.");}); Exemple.

Paper.js - Paper.js Standing on the shoulders of Scriptographer and making use of HTML5 standards, Paper.js is a comprehensive open source vector graphics scripting framework. Document Object Model Paper.js provides a Document Object Model (also called a Scene Graph) that is very easy to work with. Create a project and populate it with layers, groups, paths, rasters etc. Groups and layers can contain other items and even other groups. If you've never heard of a Document Object Model before, you can think of it as the layers palette of applications such as Adobe Illustrator & Adobe Photoshop. The image on the left is an illustration of the structure of the project after executing the code below, if you would be looking at it in an application like Adobe Illustrator. Learn more about the Document Object Model in the Document Hierarchy tutorial. Paths & Segments Paper.js makes is very easy to create paths and add segments to them. Learn more about paths and segments in the Working with Path Items tutorial. Symbols

Surprise! Mozilla can produce near-native performance on the Web In a bid to make JavaScript run ever faster, Mozilla has developed asm.js. It's a limited, stripped down subset of JavaScript that the company claims will offer performance that's within a factor of two of native—good enough to use the browser for almost any application. Can JavaScript really start to rival native code performance? We've been taking a closer look. The quest for faster JavaScript JavaScript performance became a big deal in 2008. In 2008, however, Google released Chrome with its V8 JavaScript engine. Mozilla and Microsoft followed suit. JIT compilation provided great scope for accelerating the performance of JavaScript programs, but it has its limits. This isn't true of JavaScript. Browser developers are, therefore, in a frustrating position. Breaking the speed limit by changing the rules This has all led to a number of efforts to change JavaScript itself. asm.js Mozilla proposed an alternative. asm.js also contains special hints to indicate which data types are being used.

Comment débuter avec RequireJS | Hugeen L’AMD (Asynchronous Module Definition) permet d’organiser votre code en modules afin de pouvoir les charger à la demande. Cela évite d’avoir un seul gros fichier ou plusieurs fichiers à inclure dans le HTML dans un ordre précis. RequireJS permet également, grâce à NodeJS, de faire de l’optimisation (minification), j’en parlerai à la fin. Vous pouvez retrouver les fragments de code contenus dans ce guide sur GitHub. N’hésitez pas à télécharger la source et la bidouiller. C’est un bon moyen de tester. Utilisation basique (Chargement de fichiers) Télécharger la dernière version stable de RequireJS sur le site ou sur GitHub.Inclure RequireJS dans la page HTML en renseignant l’attribut data-main avec le chemin de votre fichier principal, pour l’exemple j’ai choisi app/main.js. index.html RequireJS considère que la racine de votre application est le répertoire contenant le fichier main, donc app/ dans notre cas. main.js Définir des modules app.js RequireJS + jQuery Exemple d’utilisation Base URL

Tutoriel Backbone.js : environnement de développement Dans les prochains tutoriels, je vais couvrir les sujets suivants : créer un nouveau projet Node pour la construction de l'application monopage ; utilisation de RequireJS avec Backbone.js ; l'API de Google ; écrire et exécuter des tests ; créer l'application Backbone.js elle-même ; techniques pour personnaliser les données Bootstrap ; déploiement vers Dropbox, Amazon S3 et éventuellement d'autres services. Si vous mettez l'accent sur l'écriture de scripts côté client, je pense que ce sera utile pour vous. Notre objectif est de créer un environnement de développement qui peut effectuer les opérations suivantes : permettre au code côté client d'être écrit sous forme de fichiers distincts ; combiner des fichiers séparés en quelque chose de convenable pour le déploiement ; exécuter l'application localement à l'aide de fichiers distincts (pour rendre le développement et le débogage plus facile) ; gérer les modules complémentaires de Node ; exécuter des tests ; support de Windows et de Unix.

AngularJS Modules for Great Justice | Coding Smackdown TV - Putting a headlock on the coding lifestyle! First off I want to thank Joel Hooks of the DFW Area AngularJS Meetup Group for suggesting this topic and providing the title. “Modules provide an excellent mechanism for cleanly dividing up our code into functional areas. Angular allows us to use modules in many ways. Let’s take a look at modules and some of the approaches we can leverage to produce cleaner more manageable code.” – Joel Hooks So with that, let’s get started. As long as I have been developing with AngularJS there has always been the great best practices debate over how to structure your application. Both have their advantages and disadvantages so let’s take a quick look at each before we get into how to implement each using AngularJS. Package by Feature Package by Feature became popular in the Java development camp a few years back. Package-by-feature uses packages to reflect the feature set. A good example of Package by Feature, is the angular-sprout seed project. Package by Layer Tiny Projects <! Small Projects <!

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:

jGestures: a jQuery plugin for gesture events - Home 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. 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 var $touchArea = $('#touchArea'), touchStarted = false, // detect if a touch event is sarted currX = 0, currY = 0, cachedX = 0, cachedY = 0; Demo Link [Pure Javascript] Download Tocca.js

WebRTC status Current as of December 22nd, 2013 Spot an inaccuracy? Please email WebRTC and PeerJS are still works in (rapid) progress. Video, audio, and DataChannel are all available in stable mobile and web versions of Chrome and Firefox. PeerJS will not attempt to support very old versions of browsers (Chrome < 26 or Firefox < 23) because the WebRTC spec has changed dramatically since. PeerJS compatibility Because no browser has fully implemented the current draft WebRTC spec, these issues currently exist beyond our control, but they are likely to be fixed in future releases: Browser support Chrome 26+, Firefox 23+ Reliable data Firefox supports SCTP based reliable data. Binary data Firefox supports binary data transfer. Data transfer limitations Firefox supports high bandwidth transfers. Detecting closed connections Chrome will fire .on('close', ...). Interoperability Chrome 31+ and Firefox 27+ DataChannels are able to connect with each other (see #2279). Media connections Google Chrome

Yeoman - Modern workflows for modern webapps 11 Multi-touch and Touch events Javascript libraries Touch screen devices are ruling the mobile platform nowadays. Most of the smart phones have it, tablet and based on the trend, it's slowly come to our desktop as well. To develop a touch screen compatible web applications or website, you can use the existing touch events of the browsers or the platforms. There are two ways to create a touch support app - native or using the web development technologies (HTML, CSS, Javascript). QUO JS Events: Touch, Tap, Double tap, Hold, Fingers, Swipe, Swipe Up, Swipe Right, Swipe Down, Swipe Left, DragOther features: Built-in jQuery-like methods.