background preloader

Make the Web Faster

Make the Web Faster
The Google Hosted Libraries is a stable, reliable, high-speed, globally available content distribution network for the most popular, open-source JavaScript libraries. Google works directly with the key stakeholders for each library effort and accepts the latest versions as they are released. Libraries To load a hosted library, copy and paste the HTML snippet for that library (shown below) in your web page. We recommend that you load libraries from the CDN via HTTPS, even if your own website only uses HTTP. Dojo snippet: site: versions: Ext Core Hammer.JS Indefinite Observable jQuery 3.x snippet: 2.x snippet: 1.x snippet: note: 3.3.0, 2.1.2, 1.2.5 and 1.2.4 are not hosted due to their short and unstable lives in the wild. jQuery Mobile This library depends on jQuery. jQuery UI This library depends on jQuery. MooTools Myanmar Tools three.js Related:  Pour cahierlabo

UIZE JavaScript Framework | AJAX, RIA, widgets, JSON, OOP, Class Inheritance, XMLHttpRequest, DOM manipulation, and all that stuff jQuery: The Write Less, Do More, JavaScript Library, techniques de programmatio Colorbox - a jQuery lightbox A lightweight customizable lightbox plugin for jQuery View Demos Released under the MIT License, source on Github (changelog) Download Install via NPM npm install jquery-colorbox Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+ Supports photos, grouping, slideshow, ajax, inline, and iframed content.Lightweight: 10KB of JavaScript (less than 5KBs gzipped).Appearance is controlled through CSS so it can be restyled.Can be extended with callbacks & event-hooks without altering the source files.Completely unobtrusive, options are set in the JS and require no changes to existing HTML.Preloads upcoming images in a photo group.Currently in use on a million-plus websites. Instructions & Help The FAQ has instructions on asking for help, solutions to common problems, and how-to examples. Usage Colorbox accepts settings from an object of key/value pairs, and can be assigned to any HTML element. Settings Public Methods Event Hooks Hey,

Developer Network Optimiser un site sur les pages perso de Free Quelques trucs et astuces pour optimiser un site sur les pages perso de Free. Généralités Bien que les connexions Internet haut débit se généralisent rapidement, une grande partie des visiteurs des sites Web utilisent des connexions dont la bande passante est limitée (blocage FAI, terminaux mobiles et tablettes, zones rurales…). Il est essentiel de concevoir des sites Web légers, se chargeant rapidement sur tous les terminaux et ne surchargeant les pas les serveurs de Free. Ces modifications sont relativement simples à mettre en place pour la majorité d’entre-elles. Il est utile de : Respect des standards Il est essentiel de présenter aux visiteurs des pages respectueuses des standards du « Web » si l'on souhaite améliorer la rapidité d'affichage des pages du site. Il s'agit de l'une des optimisations les plus simples à réaliser. Liens utiles Bien utiliser les caches Mark Nottingham — Un tutoriel de la mise en cache pour les auteurs Web et les webmestres La compression des pages web

Getting Within the download you'll find the following file structure and contents, logically grouping common assets and providing both compiled and minified variations. Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this: bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css ├── js/ │ ├── bootstrap.js │ ├── bootstrap.min.js └── img/ ├── glyphicons-halflings.png └── glyphicons-halflings-white.png This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. Please note that all JavaScript plugins require jQuery to be included. Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the Bootstrap documentation. Docs sections Scaffolding Global styles for the body to reset type and background, link styles, grid system, and two simple layouts. Base CSS Components JavaScript plugins <! <!

Exceptional Performance Yahoo!'s Exceptional Performance team promotes best practices for improving web page performance. They conduct research, build tools, write articles and blogs, and speak at conferences. Best Practices The Yahoo! YSlow for Firebug Use the YSlow tool to analyze a web pages and get a report on why the web page is slow based on the best practices for high performance web sites. Research Research conducted by the Exceptional Performance team is documented in the following Yahoo! Developer Support & Community Web page performance and the YSlow tools are discussed in the Exceptional Performance Group. You can also use the feedback form to report feedback, bugs, and request features. Videos About High Performance Web Pages Both general web development and performance-related videos are available on the Yahoo! Books About High Performance Web Pages

3Dmol.js tutorialUsing 3Dmol within your code The most simple way to display and style a 3Dmol instance is by embedding 3Dmol parameters within a URL or within HTML tags. However, if you are interacting with this viewer from your own web pages then you may want to take advantage of the 3Dmol API. Here we will use the API to create, load and style the 3Dmol instance. Note, this tutorial assumes a basic knowledge of HTML, Javascript and jQuery. Creating the 3DMol instance First, make sure your HTML document links to the 3Dmol code. Now create a container tag in the HTML document that will hold the vizualisation. Note: 3Dmol will adopt the size of the container so we need to make sure this size has been explicitly set (i.e. use CSS or an inline style attribute). Once the web page has loaded, we can create a new instance of 3Dmol. To make sure everything works, we are going to add a sphere, set the camera, render the scene, then add a zoom. Documentation: $3Dmol.createViewer() viewer.setBackgroundColor('white'); Loading data dynamically

Home - Pencil Project JavaScript Tutorial