public marks

PUBLIC MARKS from decembre with tags tutorial & dev

This year

DEV - TUTORIAL - Scrimba - Scrimba is a powerful new way of learning code. Play around with the instructors code any time, right in the player.

Scrimba is a new way of teaching and learning how to code. We call it interactive code screencasts. Here’s why it's a great way of learning.

JAVASCRIPT - IMAGE - LAZY LOAD - Lazy Loading Images? Don’t Rely On JavaScript! | Robin Osborne

(via)
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!)

JAVASCRIPT - REGEX - Les expressions régulières (partie 2/2) - Dynamisez vos sites web avec JavaScript ! - OpenClassrooms

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

DEV - Great Resources Every Beginning a Front-end Developer Should Bookmark by vydargis on CodePen

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.

2017

FIR 57 - ARIS - SCROLLBAR - GitHub - Aris-t2/Scrollbars: Custom Scrollbars

Custom Scrollbars for Firefox 57+ : Method 1 - files for Firefox profile folder only M1 is based on this project by nuchi: https://github.com/nuchi/firefox-quantum-userchromejs M1 will stop working when Mozilla drops XBL support. From this projects method 1 : folder copy userChrome folder and userChrome.css file to PROFILENAME chrome or add code from userChrome.css file to an existing userChrome.css file. Method 2 - files for Firefox folder and to Firefox profile folder M2 is based on this project by ardiman: https://github.com/ardiman/userChrome.js From this projects method 2profile folder copy userChrome folder and userChrome.js file to PROFILENAME chrome . From this projects method 2firefox folder copy defaults folder and config.js file to Firefox main directory (where the Firefox executable is). Script/startup cache must be deleted after every change! Where to fine startupCache folder? about:profiles > Local Directory > Open Folder, close Firefox and delete all files in startupCache folder. Location on WINDOWS: C:Users NAME AppDataLocalMozillaFirefoxProfiles PROFILE startupCache Location on LINUX location: home NAME .cachemozillafirefox PROFILE startupCache This is not the same profile folder custom scripts and styles are stored! More info about startup cache removal (in German): https://github.com/ardiman/userChrome.js/wiki/Skriptcache More info about startup cache removal (in English )

Laboratory, a Firefox extension to generate CSP headers - YouTube

Laboratory, a Firefox extension to generate CSP headersLaboratory is an experimental Firefox extension that helps you generate a proper Content Security Policy (CSP) header for your website. Simply start recording, browse your site, and enjoy the CSP header that it produces.

CSS + STYLUS - Stylus et les préprocesseurs CSS (en guise d’introduction) · Les intégristes

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

DEV - Web developer guides | MDN

Web developer guides. These articles provide how-to information to help you make use of specific technologies and APIs.

JSON - What is JSON? An Introduction and Guide for Beginners

in this JSON tutorial and guide, I’m attempting to provide a fairly comprehensive discussion of JSON, its history, and its usefulness. I’ll close with a list of some practical JSON tools that might come in handy in future projects. JSON Defined JSON stands for JavaScript Object Notation and it’s a data format. That is, it’s a way to hold bits of information, similar to a database. Although JSON originated outside the ECMAScript specification, it is now closely related to JavaScript with the spec now including a JSON object and many developers incorporating it as a quasi-subset of the language.

2016

CSS - TUTORIEL - SASS - Les préprocesseurs CSS, c’est senSass ! - Alsacreations

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.

2015

SVG - Using SVG (witth Online TOOLS) | CSS-Tricks

(via)
Why use SVG at all?: Small file sizes that compress well__ Scales to any size without losing clarity (except very tiny)__ Looks great on retina displays__ Design control like interactivity and filters__

JavaScript Arrays

Un tableau contient une collection de données en une seule variable. Tableaux JavaScript peuvent contenir des données de tout type : chaînes, des nombres , des booléens , des objets , fonctions et autres tableaux. Les éléments de données dans un tableau sont appelées éléments. Chaque élément a un indice qui commence à zéro . [ 1 ] Les indices de tableau sont utilisés pour accéder à des éléments et créer de nouveaux éléments comme le montre

GIT - Git, guide de prise en main | Édition Nº43 | le train de 13h37

by 1 other
Ce petit guide vous propose d’appréhender son principe de fonctionnement simplement et de faire vos premier pas facilement. Les différentes étapes sont détaillées pour vous permettre de maîtriser les concepts de base très rapidement.

JQuery - Native equivalents of jQuery functions

by 1 other (via)
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.

2013

alternatives to innerHTML - slayeroffice | articles(2006)

by 15 others
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

2010

Notepad++ Liste des Expressions Régulières– TextFX Quick -

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.

Les Expressions Régulières - Rationnelles - Regex - Regexp sur ExpRegpour chaque fonction, d'une multitude d'exemples simples, qui se compliqueront par la suite, pour en arriver à des structures assez élaborées.

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

unsafeWindow - Injecting JS functions into the page from a Greasemonkey script on Chrome - Stack Overflow

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

2009

Tuto Construction Yahoo-Pipes : Et le Bouillon fut ! Et maintenant il devient…Fil Info sur Veille Documentaire

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)

Tutoriel XPath - Developpez.com - Club des décideurs et professionnels en Informatique

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 - Club des décideurs et professionnels en Informatique

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

Tour de Flex, components, samples | Adobe Developer Connection

Tour de Flex component explorer Tour de Flex is a desktop application for exploring Flex capabilities and resources, including the core Flex components, Adobe AIR, data integration, and a variety of third-party components, effects, skins, and more. Tour de Flex has three primary goals: * Provide non-Flex developers with an overview of what is possible in Flex in a "look and see" environment * Provide Flex developers with an illustrated reference tool * Provide commercial and non-commercial Flex developers with a place to showcase their work

Apprendre les standards Web - Alsacréations

Voici les dernières ressources classées par catégories. * Tutoriel : Guide pas à pas - * Article : Document d'analyse ou de référence - * Astuce : Court stratagème toujours utile -

The Ultimate Joomla Toolbox: Themes, Extensions and Resources | Noupe

by 1 other
Joomla is one of the most popular CMSs out there, and it’s no surprise considering how extensible it is. The great thing about Joomla is the extensions (components, modules and plugins), that can be added to your Joomla website. This allows the average user to add more functionality and dynamic content to their website without being a developer or programmer. In this post you will find a thorough collection of all kinds of resources that will aid designers and developers working with Joomla-powered websites. This collection is intended to simplify your tasks and save you time when working with Joomla. This post covers essential resources related to Joomla— Themes, Extensions, Tutorials, Forums, Cheat Sheets and Useful Documents.