10 Useful JavaScript Solutions for Charts and Graphs The visual structures such as Graphs and Charts are a valuable presence in web development. The visual structures can easily simplify complex data and output that can be chosen to put a list of JavaScript graphs. Today we present 10 such JavaScript solutions for Charts and Graphs to make easy your website development much easier. JS Charts JS Charts is a JavaScript chart generator that requires little or no coding. jQuery Visualize The Visualize plugin parses key content elements in a well-structured HTML table, and leverages that native HTML5 canvas drawing ability to transform them into a chart or graph visualization. Highcharts Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. jqPlot Computation and drawing of lines, axes, shadows even the grid itself is handled by pluggable “renderers”. TufteGraph PlotKit PlotKit is a Chart and Graph Plotting Library for Javascript. jQuery Sparklines Raphaël
La Vague du Web #2 La Vague du Web est un condensé de ressources en tout genre vous permettant de suivre les dernières tendances web… Aujourd’hui dans cette chronique : beaucoup de plugins jQuery, une bibliothèque d’icônes CSS, ou encore une bibliothèque PHP de gestion d’erreurs. Bref, place à la Vague du Web numéro #2 ! Stickymojo.js Stickymojo est un plugin jQuery qui permet de mettre en place une sidebar flottante qui suit le scroll du navigateur. PHP Error PHP Error est une librairie PHP open-source permettant d’enrichir l’affichage des erreurs PHP avec un maximum d’informations sur l’erreur rencontrée : message clair et précis, extraits de code, contexte de l’erreur, ligne concernée, coloration syntaxique, etc. jQRangeSlider jQRangeSlider est un plugin jQuery qui permet d’utiliser des curseurs de sélection sur un intervalle donné, aussi bien pour des valeurs numériques que pour des dates. Adaptive Images Kort
Développeur Agile | Lunr.js le moteur de recherche côté client Lunr.js est un moteur de recherche « fulltext » simple pour vos applications côté client. Il est conçu pour être léger, mais très complet afin de fournir une expérience de recherche très riche. Tout cela sans dépendance et sans accès serveur. Lunr.js fonctionne avec tout navigateur moderne compatible ECMAScript 5 (ES5). Son utilisation est extrêmement simple, il vous suffit de rajouter des éléments à l’index comme ceci : La recherche s’effectue ensuite via la fonction search de l’objet : var results = index.search('foo'); Pour plus d’information, rendez-vous sur le site officiel.
validate.js Lightweight JavaScript form validation library inspired by CodeIgniter. No dependencies, just over 2kb gzipped, and customizable! validate.js (development - 16kb) validate.min.js (minified - 2.1kb) Example All of the fields were successfully validated! Features Validate form fields from over a dozen rules No dependencies Customizable messages Supply your own validation callbacks for custom rules Chainable customization methods for ease of declaration Conditionally validate certain form fields Works in all major browsers (even IE6!) Installation and Usage Include the JavaScript file in your source Create the validation object with your desired rules. FormValidator new FormValidator(formName, fields, callback) The FormValidator object is attached to the window upon loading validate.js. The formName passed in to validate must be the exact value of the name attribute of the form An array of fields will be used to perform validation on submission of the form. Custom Validation Rules #1. setMessage
Using Google's Closure to Compile and Verify your JavaScript 7, Mar 2013 A large application is nearly guaranteed to come with an equally large amount of JavaScript attached to it. During development it makes sense to divide the JavaScript of the application into multiple sensibly named files both to make finding specific functionality in the code base easier, and to keep the file length to a reasonable size for readability/comprehension purposes. However, when it comes time to move your site to the production environment, this development processes' inefficiencies become noticeable in slow loading pages. One way that these problems can be mitigated by combining all the multiple JavaScript files into a single compiled file. Introducing Google Closure The Google Closure Compiler is a tool designed to solve these problems. How to Get it Sounds great right? sudo mkdir /opt/closure cd /opt/closure sudo unzip path/to/compiler-latest.zip sudo chmod a+r * That's all there is to it! java -jar /opt/closure/compiler.jar --help How to Use it Finding Errors
Blog de CinéPhil | Ce qui se conçoit bien s'énonce clairement… On trouve les liens de type « Lire la suite » notamment sur les blogs, comme ici, ou sur les CMS. On peut se contenter d’importer dans la page la totalité des textes, n’en afficher que les premières lignes et ajouter un lien qui affiche la totalité du texte à l’aide d’un programme Javascript. L’inconvénient d’une telle méthode est qu’on alourdit le chargement de la page alors que l’utilisateur ne cliquera peut-être sur aucun lien. J’ai opté récemment pour une démarche différente : chargement uniquement des premières lignes des textes à afficher et lien qui active un programme Ajax pour récupérer depuis le serveur l’intégralité du texte demandé par l’utilisateur. Je décris le principe ci-après, en le simplifiant par rapport à ce que j’ai réellement mis en oeuvre… Lire la suite MISE À JOUR LE 29/08/2012 pour la version 3.2 « Open ModelSphere est un outil complet de modélisation de données qui prend en charge la modélisation conceptuelle, logique et physique.
Backbone contre Angular : comparaison Opposer des idées et des outils est une très bonne façon de mieux les comprendre. Dans cet article, je présenterai une liste de tâches auxquelles nous devons faire face chaque jour lorsque l'on travaille sur une application web et nous verrons comment Backbone et Angular permettent d'apporter des solutions. Ce que l'on veut résoudre La plupart des activités que nous entreprenons en tant que développeurs web peuvent se ranger dans une des catégories suivantes : Implémenter de la logique métier Construire le DOM Implémenter de la logique de vue (déclarative et impérative) Synchroniser le modèle et la vue Gérer des interactions d'UI complexes Gérer des états et des routes Créer et lier des composants Il n'est donc pas surprenant que la plupart des frameworks coté client proposent des solutions d'une manière ou d'une autre. Backbone Commençons par regarder ce que Backbone nous offre pour résoudre ces problèmes. Pour ceux qui sont plus visuels : Quand je dis Backbone... Logique Métier
Formly. The form glamorizer for jQuery ThrivingKings | web development, code snippets, and general nonsense The form glamorizer for jQuery May 11, 2011 An unbelievably easy way to add style and validation to your forms. Forms are everywhere and, usually, suck. Formly makes adding forms to your site a bit more exciting. Easily add style, validation, and a more impressive user interaction with a single function. Download Formly is a light little fella. 17kb in total for the full and 14kb for the minified version. Download fullDownload minifiedGitHub How-to use It's really easy to get Formly working for you. jQuery is the only prerequisite so make sure you include it, along with Formly's source files, in the head section of your file. Now, build your form using the same standard HTML markup you've always used. Okay, now that we've built the form and have added a few commands, it's time to let Formly work it's magic. <script> $(document).ready(function() { $('#MyForm').formly(); });</script> Now that we've got the hang of it, let's stretch Formly's muscles a bit. Alright, now we're having fun. Returned:
Documentation JSHint is a program that flags suspicious usage in programs written in JavaScript. The core project consists of a library itself as well as a CLI program distributed as a Node module. More docs: List of all JSHint options · CLI flags · Writing your own reporter · FAQ Basic usage The easiest way to use JSHint is to install it as a Node program. $ npm install jshint -g After you've done that you should be able to use the jshint program. $ jshint myfile.js myfile.js: line 10, col 39, Octal literals are not allowed in strict mode. 1 error If a file path is a dash (-) then JSHint will read from standard input. Configuration JSHint comes with a default set of warnings but it was designed to be very configurable. This setup allows you to have different configuration files per project. Configuration file is a simple JSON file that specifies which JSHint options to turn on or off. Inline configuration /* jshint undef: true, unused: true */ /* global MY_GLOBAL */ Directives jshint /* jshint strict: true */
Mes 13 prédictions pour 2013 C’est déjà la huitième année que je me prête au jeu des prédictions (cf. 2006, 2007, 2008, 2009, 2010, 2011 et 2012). Comme le temps passe vite, et comme certaines prédictions reviennent de façon chronique ! Comme à chaque fois, je précise que ceci est avant tout un exercice de style, prenez-le comme tel. Je me lance donc dans une nouvelle liste de tendances dont je pense qu’elles vont se concrétiser l’année prochaine. 1/ Des coups sous la ceinture pour dominer le web Après plusieurs rounds d’observation, l’heure n’est plus aux amabilités entre les géants du web (Google, Apple, Facebook, Microsoft…). Action à prévoir : Prévoyez un plan B pour tous les services que vous exploitez ou toutes les plateformes sociales sur lesquelles votre marque est présente. 2/ Un retour gagnant pour Microsoft Il y a eu le rachat de Skype et de Yammer, le succès d’Azure, le lancement de la Surface et de Windows 8. 3/ Un retour gagnant pour Yahoo 4/ Grosse pression asiatique 5/ Le PC devient un produit de niche
book-of-modern-frontend-tooling/README.md at master · tooling/book-of-modern-frontend-tooling Agile Uploader - Multiple File Upload Tool with Resize Before Upload » Shift8 Version 3 released! Fork Save bandwidth and take the hassle out of getting images down to size for web use. Agile Uploader will let you resize images before uploading to your server using Flash. This is 100% free to use as you see fit (commercially or non-commercially; BSD license), but donations are always appreciated of course. So is feedback. Demo All Version 3 Demos There are two basic looks that come with Agile Uploader. Download Click to download current version 3.0(changelog) Features Ability to attach and upload multiple files of any type. Documentation Coming soon... More About this Project Agile Uploader is a project that I started as a necessity for myself, I have a project where I am doing the hosting and I needed to save on bandwidth costs (potentially) and I also wanted the user experience to be easy. I wanted to design something that looked familiar and just worked for the user. Fun Fact: The single file version also works with Android (only tested with 2.2).
A Javascript When Function Mon Feb 20 2012 function when(conditionFunc, execFunc, interval){ if (conditionFunc()){ execFunc(); }else{ setTimeout(function(){ when(conditionFunc, execFunc, interval);}, interval); } } You have some code which should only execute when a condition is true. E.g. You have code which relies on a javascript library but can't be sure the library has loaded yet and don't want the code to execute until it has. This is common if you have a bookmarklet which injects more than one <script> tag or you have code which should only execute when an image or other asynchronously loaded element is present. Use when like this... function libIsReady(){ return typeof(LIBRARYNAME) ! Categories