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
Bootstro.js demo Features Works cross-browser, cross-devices . C'mon, it is bootstrap Utilises Bootstrap Popovers Bootstro popovers can have variable width, even though Bootstrap 2.3 popovers does not (yet) (issue #1730 & solution) Small (3.0K minified JS & 0.5K minified CSS) No collision. More features Any element anywhere on the page can be intro'ed: popovers are automatically scrolled to so they always get focused Easily customizable: Bootstro provides various public methods so you can control as you like bootstro.start(), bootstro.next(), bootstro.prev()... Keyboard shortcuts: Works with Esc, → ↓, ← ↑ shortcuts too Quick Usage Bootstro requires bootstrap & bootstrap popover Add class .bootstro to any element that you'd like to be highlighted Include bootstro.js & bootstro.css bootstro.start() Why? As part of building a sortof open KhanAcademy clone using our home grown SandPHP framework , I developed a working but spaghetti version (gist)of Bootstro.js a few weeks ago (I called it live_onpage_help() then). Call
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
Crumble - jQuery Feature Tours Crumble allows you to quickly and easily build feature tours for your website or app using small bubbles! The bubbles are visually interesting, will draw attention and due to the small size make sure that you will write using concise language that visitors will read. The tour itself is defined as a standard ordered list in your html, making it accessible. Demo The demo is running on this page! Download Crumble can be downloaded from the public repository on github. Crumble depends on grumble.js to generate the bubbles, you can download it here Contact
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.
Tourist.js Tourist.js is a simple library for creating guided tours through your app. It's better suited to complex, single-page apps than websites. Our main requirement was the ability to control the interface for each step. Installation The code is available via bower install tourist or on github. Get started quickly Specify steps explaining elements to point at and what to say. Example Hey look at me! No look at me! Powerful Tourist was designed for complex apps rather than websites. control the interface for each step move to the next step only after the user completes a specific task Just use the setup() and teardown() functions in your step options. Dependencies Tourist depends on Backbone and jQuery. Tourist comes with the ability to use either Bootstrap popovers (default) or QTip2 tips, so you'll need either Bootstrap 3 CSS (only the CSS is necessary!)
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
usablica/intro.js 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.
linkedin.github Hopscotch is a framework to make it easy for developers to add product tours to their pages. Hopscotch accepts a tour JSON object as input and provides an API for the developer to control rendering the tour display and managing the tour progress. Event Callbacks Callbacks for tour events: onStart, onEnd, onShow, onNext, onPrev, onClose, onError Multi-page tours Take your tour across pages! i18n support Create tours in all the languages of the world. Lightweight Callouts Create single instance callouts for those times when one is enough. To get started using the Hopscotch framework, simply include hopscotch.css and hopscotch.js on your page. <html><head><title>My First Hopscotch Tour</title><link rel="stylesheet" href="css/hopscotch.css"></link></head><body><h1 id="header">My First Hopscotch Tour</h1><div id="content"><p>Content goes here... Then in your my_first_tour.js file, define and start your tour. That's all there is to it! Basic step options All step options Mandatory Optional
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
Building A Step-By-Step Guide Using Intro.js [Tutorial] There are numerous plugins for creating your own guided website tour. This animated page effect is very useful to new visitors who are just learning the ropes of your website layout. How do they know all the important interface features and menu links? By using a guided tour it is easy to explain all of these features to users who are interested. I want to focus this tutorial onto an open source jQuery plugin called Intro.js. I really like this choice because of the page dimming feature, also the easy customization of CSS to change how the tooltips look. My demo page will be using the Hongkiat’s CSS Equal Height demo as an example. Live Demo Getting Started I do not want want to focus much on the HTML or CSS because this is all relative to your own page. Here is an example from the main plugin’s demo page: <h1 data-step="1" data-intro="Hello all! <h1 data-step="1" data-intro="Hello all! But if you just want to test the waters you may use this easier technique with HTML5 data attributes. <!
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 <!