PUBLIC MARKS from decembre with tags tutoriel & javascript

One popular method to deal with this is to “Lazy Load” the images; that is, to only load the images just before the user will need to see them. If this technique is applied to the “above the fold” content – i.e., the first average viewport-sized section of the page – then the user can get a significantly faster first view experience. So everyone should always do this, right? Given the potential limitations, let’s work on a solution that can handle all my concerns: a. works without JavaScript (i.e., lazy loading is an enhancement) b. vanilla js – no dependencies on jquery or angularjs c. works with broken JavaScript (i.e., the browser supports JavaScript, but there’s a js error somewhere which causes your script to break; might not even be your fault!)

Dans ce deuxième chapitre consacré aux regex, nous allons voir leur utilisation au sein du JavaScript. En effet, le premier chapitre n'était là que pour enseigner la base de la syntaxe alors que, une fois couplées à un langage de programmation, les regex deviennent très utiles. En JavaScript, elles utilisent l'objet RegExp et permettent de faire tout ce que l'on attend d'une regex : rechercher un terme, le capturer, le remplacer, etc.

If you just get started your a front-end developer career, it might be overwhelming to learn something every day. To optimize your time, it might be useful to know solid resources, to keep up with a demanding programmers’ environment. In this brief article, you will find 6 useful resources that in my opinion I think every beginning a front-end developer career should bookmark.

Votre page va devoir faire appel à Javascript. Vous devrez donc prévoir une alternative. __ Le seul moyen de garantir que le contenu de l'iframe occupera toute la place qui lui est nécessaire sur la page-hôtesse est de forcer le redimensionnement de l'espace qui lui est accordé, une fois que l'on connaît l'espace nécessaire, donc après chargement du contenu de l'iframe.__Ce “redimentionnement” a posteriori ne peut être effectué que par un code javascript. Si le principe est simple, il faut envisager le cas où la source chargée dans l'iframe n'est pas dans le domaine de la page-hôtesse. En effet, afin d'éviter qu'un iframe que l'on ne contrôle pas vienne interagir avec le code javascript de la page-hôtesse, les navigateurs bloquent ce genre d'interacton (Same origin policy) ! Nous verrons qu'il existe des moyens de contourner cette limitation de sécurité.__Enfin, la simplicité du principe se heurte aux facéties d'implémentation des différents navigateurs Web, en particulier d'IE. Toute solution devra donc être testée sur les navigateurs pour lesquels on souhaite qualifier la page-hôtesse.

AJAX (littéralement : Javascript et XML Asynchrones). AJAX c'est le pont entre les langages serveur (PHP, .NET...) et JavaScript, cette technologie permet de faire communiquer les deux de manière asynchrone, c'est-à-dire qu'on a plus besoin de recharger toute la page mais seulement une partie de la page, en y insérant des informations qui viennent directement du serveur.

$ : le sélecteur raccourci __ Encore une petite précision : dans mon extrait de code ci-dessus, vous voyez que j'ai ajouté un paramètre $ pour ma fonction anonyme, et que j'ai ensuite utilisé $() à la place de jQuery().__En fait, $() est un alias de la fonction jQuery() (un autre nom pour la même fonction), on l'utilise plus souvent que jQuery(), tout simplement parce que c'est plus court à écrire ! __ Le seul problème est que d'autres framework javascript (Mootools nottament) utilisent également $ comme raccourci, du coup si vous utilisez plusieurs frameworks sur la même page, il y aura des conflits. ___ Heureusement, jQuery propose un mode noConflict(). Dans ce mode, le raccourci $ n'est pas créé pour éviter les problèmes. Le mode noConflict est par exemple activé par défaut dans Wordpress, donc $ ne marche pas et il faut donc se rabattre sur jQuery() à la place, la loose -_-'. __ L'astuce que j'ai utilisée me permet d'utiliser $ comme raccourci SEULEMENT à l'intérieur de ma fonction anonyme. Comme ça, même sous Wordpress où le mode noConflict est activé, je pourrais utiliser $ à l'intérieur de mon jQuery(document).ready.

Le sélecteur jQuery est la plupart du temps utilisé pour sélectionner des éléments existant dans le DOM, via une règle CSS. Mais le sélecteur peut aussi créer de nouveaux éléments HTML de manière extrêmement simple ! Voici un petit exemple très simple qui créé un élément div , écrit "Salut !" à l'intérieur, puis enfin ajoute cet élément à la fin de la page web (en l'ajoutant à la fin body) :

Enforcing a maximum character length for text and textarea form fields is fairly easy to do.

I think there are many developers who don’t realize that most of the jQuery methods they use have native equivalents that require the same or only a slighter larger amount of code to use. Below are a series of code samples showing some popular jQuery functions along with their native counterparts.

Les avantages d'un blog statique Voici ce que j'apprécie particulièrement dans un blog statique : Ultra light : Juste des fichiers .html et .js à déposer sur le serveur. La sécurité : On élimine les failles applicatives (sqli, exec(), file upload et cie...) même si la configuration du serveur n'est pas à négliger (bruteforce, SSI, webdav, etc.) Zero maintenance : Adieu MySQL, configuration PHP et surtout, plus besoin de penser aux mises à jour... La performance : Quoi de plus rapide à délivrer qu'un simple fichier statique qui va être mis en cache ? Hosting : Comme on a plus besoin de PHP+MySQL, on trouve plus facilement de l'hosting gratuit, notamment github. Le coté leet : Allo, t'es leet t'as pas de blog statique ? Allo ? Bien entendu un site statique a ses limites, mais javascript et les plugins/services third party sont là pour ça. Jekyll serphacker.com est généré par Jekyll et hosté sur github. C'est sûr, niveau design on peut mieux faire (normal je l'ai fait avec twitter bootstrap et le web design c'est pas ma tasse de thé), mais je vous rassure y a un max de site qui rendent bien avec Jekyll et Octopress a un bon thème par défaut. Clairement Octopress est beaucoup plus simple à utiliser que Jekyll : site créé en 2/3 lignes commandes avec un super design, avec Jekyll on part presque de zero. D'ailleurs si vous n'êtes pas très technique, je vous conseille de skipper les 3/4 de cet article que je me suis fait chier à rédiger, et voir directement comment Octopress est juste awesome et super fast à mettre en place : go TL;DR. Mais comme Octopress utilise Jekyll, mieux vaut comprendre comment Jekyll fonctionne sinon vous louperez pas mal de trucs pratiques. Je trouve la doc de Jekyll plutôt mal faite et mal organisée, d'où cet article (qui lui aussi sera mal fait et mal organisé).

In a nutshell, named function expressions are useful for one thing only — descriptive function names in debuggers and profilers. Well, there is also a possibility of using function names for recursion, but you will soon see that this is often impractical nowadays. If you don’t care about debugging experience, you have nothing to worry about. Otherwise, read on to see some of the cross-browser glitches you would have to deal with and tips on how work around them.

What is this all about? The goal of this technique is to deliver optimized, contextual image sizes for responsive layouts that utilize dramatically different image sizes at different resolutions. Ideally, this approach will allow developers to start with mobile-optimized images in their HTML and specify a larger size to be used for users with larger screen resolutions — without requesting both image sizes, and without UA sniffing.

nous allons vous montrer comment créer les légendes des images avec diverses transitions simplement en utilisant CSS3. Simple transition effect with only CSS3.How to create image captions with various transitions simply using CSS3, dependent on transform and transition properties.

Javascript non-intrusif, chapitre 1 : le grand nettoyage ! Par Christian Heilmann. Cet article est le premier d'une série qui en compte 5.

La fonction .load() est disponible depuis la version 1.0 de jQuery. Sa fonction première, que vous avez peut être déjà utilisée, est de charger du contenu HTML ou autres, sur une page de votre site. Dans ce tutoriel, nous allons voir les autres capacités de cette fonction.

The focus of this article will be to show you ways of doing things commonly reserved for innerHTML with only DOM methods. In each example, the innerHTML method will be shown, followed by its DOM based alternative

I have a Greasemonkey script that works just fine in Firefox and Opera. I struggle with getting it to work in Chrome, however. The problem is injecting a function into the page that can be invoked by code from the page. Here's what I'm doing so far: First, I get a helper reference to the unsafeWindow for Firefox. This allows me to have the same code for FF and Opera (and Chrome, I thought).

First, you'll need to track down your installed scripts. They're in your Firefox profile, under the "gm_scripts" sub-folder. Or, if you'd prefer, you can skip the search and download any script from the online script repository. Next, you need to change the file extension from .js (Javascript) to .txt (plain text). After you've changed the extension, double-click the file to view the code. Copy and paste the code into the User Script Compiler and hit "Generate." Voila! Your new Firefox extension (.xpi) is complete. To install in Firefox, simply drag the new extension onto the Firefox interface and follow the prompts.

Jouant occasionnellement avec Greasemonkey, j’ai fait face a des problèmes récurrent liés à l’architecture de l’extention elle-même. * Comment réutiliser une bibliothèque déjà présente dans la page, * comment traiter un résultat XML * ou qu’est-ce qui fait que je n’arrive pas à mettre une Yahoo!/Google maps dynamiquement. Réutiliser une librairie(, fonction, variable) existante

Google Maps Api - Carte Aide didacticiel documentation exemple tutoriel

Qu'est-ce que c'est encore que cette bête ?... En fait, un moyen simple, même si parfois obscur au premier abord, pour faire des recherches d'occurences dans une chaîne... Exemple : Pour vérifier la validité de structure d'une adresse email saisie dans un formulaire :

Despite the many JavaScript libraries that are available today, I cannot find one that makes it easy to add keyboard shortcuts(or accelerators) to your javascript app. This is because keyboard shortcuts where only used in JavaScript games - no serious web application used keyboard shortcuts to navigate around its interface. But Google apps like Google Reader and Gmail changed that. So, I have created a function to make adding shortcuts to your application much easier.

Guide pour créer des application avec Mozilla : très fournit

This short tutorial assumes that you have already downloaded and installed the Greasemonkey Firefox add-on. Below follows a very simple JavaScript program, which highlights links to your site, to get you started. I use this script a lot for SEO (Search Engine Optimization) purposes to find my site on a result page in Google, or to find a link to my site, which according to the access_log of my web site should be there.