PUBLIC MARKS from decembre with tags dev & tutoriel

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.

Recherche: À partir de Firefox 45, la boite de recherche de l'Inspecteur trouve les correspondances dans tout le markup du document ouvert, ainsi que dans toutes les frames. Pour commencer une recherche, il suffit de cliquer sur la boîte de recherche pour l'agrandir ou bien d'utiliser les raccourcis clavier Ctrl + F , ou Cmd + F sous Mac. Lors de la saisie, une pop-up d'autocomplétion affiche toutes les classes ou ID qui correspondent à la recherche en cours :

Première question : qu’est-ce qu’un préprocesseur ? Un préprocesseur est un programme qui procède à des transformations sur un code source, avant l’étape de traduction proprement dite (compilation ou interprétation). source Wikipedia. Dans le cas d’un préprocesseur CSS la syntaxe simplifiée ou enrichie en entrée est analysée et compilée en un langage que nous connaissons tous et que nous utilisons au quotidien : CSS.

Un préprocesseur CSS est un outil (ou programme) permettant de générer dynamiquement des fichiers CSS. L’objectif est d’améliorer l’écriture de ces fichiers, en apportant plus de flexibilité au développeur web (source : Wikipedia). Les préprocesseurs CSS les plus couramment employés sont aujourd’hui Sass, LESS (dont nous avons déjà parlé), PostCSS et Stylus.

How to Write Regular Expressions ? The best way to learn regular expressions is by using an example. Let's say you're building a web page with a phone number input.

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.

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.

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.

Ce tutoriel fait suite au précédent tutoriel sur l'intérêt de l'utilisation d'un système de version. Vous apprendrez donc comment utiliser Github pour héberger vos projets fonctionnant avec Git. Vous apprendrez donc comment "forker" un projet existant et comment publier votre propre projet.

Dans ce tutoriel vidéo vous apprendrez les rudiments des expressions régulières. Vous verrez donc, à travers quelques exemples concret comment construire une expression régulière afin de vérifier ou de transformer une chaine de caractère... Pour tester et travailler sur les expressions régulières vous pourrez utiliser l'outil : HiFi Regex Tester

Voici un tutoriel vidéo plus théorique que d'habitude qui vous permettra donc d'en apprendre un peu plus sur le positionnement CSS avec les attributs : Position, qui permet de définir le type de positionnement (absolute,relative...) Float/Clear, la propriété qui permet de modifier l'enchainement logique des éléments pour un enchainement horizontal (c'est plus clair en vidéo :) ) Display, la différence entre les élements inline et block Vous verrez aussi analyser la structure d'un site internet pour apprendre à développer vos propres structures...

Firebug est une extension firefox incontournable pour tous les intégrateurs et développeurs web. Elle permet entre autre de voir comment le navigateur interprète les différents languages et permet aussi d’interagir en temps réel avec le code source. Plutôt que des longues explication une petite vidéo vous aidera à mieux comprendre comment firebug peux changer votre façon de débugger vos pages web

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

Avec notepad++ il est possible d'utiliser des expressions régulières

Note: Dans le cas ou vous avez installé les plugins, essayez CONTROL+R ou dans le Menu Plugins – TextFX Quick - Find/Replace pour faire apparaître une boite de dialogue avancée incluant une liste déroulante d'expressions régulières ainsi qu'un Recherche/Remplace multi-ligne.

REGEX qui est une contraction de l'anglais Regular expression traduit en français par Expressions régulières, mais aussi Expressions rationnelles Qu'est ce qu'une expression régulière ? TROUVER (retrouver ==> coupler ==> assortir) des MOTIFS (pattern ==> profils ==> masques ==> structures) et de TRAITER (récupérer ==> extraire ==> remplacer) des éléments à l'intérieur d'un chaîne de caractères. On commence par déterminer le motif de ce que l'on cherche avant d'en appliquer le traitement souhaité grâce aux fonctions fournies par PHP. # Pour vous aider dans la compréhension de ce formidable outil, le cours sera agrémenté, Qu'est ce que je peux faire avec une expression régulière ? On peut tout faire avec une expression régulière... rien ne semble impossible en effet !.

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).

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

Le Bibliobsédé a proposé une ouverture à la collaboration pour les ingrédients de son Bouillon. Le Bouillon est cuisiné pour contribuer à l’information et la formation de tous ceux qui s’intéressent aux métiers de l’information-documentation, souhaitent en suivre les évolutions et mieux comprendre les mutations engendrées par le numérique. Il me revient naturellement la joie de vous expliquer, aussi pédagogiquement que possible, le casse-tête qu’à signifié cette collaboration sous l’angle “Tutoriel Yahoo Pipes”. Parce que, grâce à Silvère (que mille tweets chantent sa gloire !), j’ai dû me tordre les méninges et les boyaux et les tuyaux (de Yahoo) pour structurer un résultat correct, manipulable et intéressant. Donc, présentation du pipe (et merci de le prononcer “païpe”, même intérieurement) en plusieurs étapes. Comme le résultat est relativement complexe, cela fera l’objet de plusieurs billets (au moins 3)

XPath est décrit sur : XPath 1.0 standard . Dans ce tutoriel une sélection des caractéristiques de XPath sont démontrées dans de nombreux exemples. Vous pouvez commencer par : * Exemple 1 ou par le menu de gauche. Origine de ce document : Ce document est issu du site ZVON et est disponible à l'adresse suivante * Tutorial XPath en français

Parcours de fichiers XML avec XPath (Date de mise à jour : 29/06/2007) II-A. Qu'est ce que XPath ? II-B. Solutions Java pour XPath II-C. Environnement requis III. Principe de fonctionnement III-A. Vue d'ensemble III-B. La syntaxe XPath III-C. XPath appliqué au Java IV. Exemple de mise en oeuvre IV-A. Le fichier XML considéré IV-B. La classe principale