public marks

PUBLIC MARKS from decembre with tags tutoriel & tutorial

2018

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.

LINUX - TUTO - Finalement, openSUSE !

Choisissez openSUSE pour les ordinateurs portables. Cette distribution prend en charge un nombre de drivers insoupçonnés ! » J’ai donc téléchargé l’image ISO openSUSE Leap 42.3. Et banco , j’ai installé le bureau MATE, Vlc, Chromium

2017

FIR 57 (UserCSS + about:config) - Custom CSS tweaks for Firefox 57+ - GitHub - Aris-t2/CustomCSSforFx:

'about:config' tweaks (To revert changes right-click entry and select 'reset'): - Tab audio icon browser.tabs.showAudioPlayingIcon - Insert related tab after current tab (suggestion: enable / set to 'true') browser.tabs.insertRelatedAfterCurrent - Titlebar browser.tabs.drawInTitlebar - Searchbar: open search results in new tab browser.search.openintab - Reader mode reader.parse-on-load.enabled - Geolocation (suggestion: disable / set to 'false') geo.enabled - Pocket (suggestion: disable / set to 'false') extensions.pocket.enabled - Anti fingerprinting (Caution: browser might behave in unforseen ways!) privacy.resistFingerprinting read: Fingerprinting info at Mozilla Wiki tweaks ***** Suggested ui tweaks ***** - Toolbar modes (suggestion: compact mode) Customize mode > Density > Compact / Normal / Touch - Titlebar modes (suggestion: Firefox titlebar ['application/hamburger button in titlebar' only works in Firefox titlebar]) Customize mode > Title Bar > uncheck checkbox Drag space above tabs toolbar (suggestion: disable drag space ['application/hamburger button in titlebar' works best without drag space]) Customize mode > Drag Space > uncheck checkbox Bookmarks menu button on bookmarks toolbar Customize mode > Toolbars > Bookmarks Toolbar Customize mode > move 'bookmarks menu' button to bookmark toolbars end Downloads button always visible Customize mode > downloads button > click on button and uncheck 'Auto-hide' Searchbar (suggestion: placed after location bar) Customize mode > Search(bar) > move to navigation toolbar Flexible spaces (suggestion: remove spaces after and before location bar) Customize mode > grab and drag flexible space into palette

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.

WIN 10 - TIPS - Les nouvelles commandes (exécuter) de Windows 10

(via)
On peut trouver Exécuter dans le menu Démarrer traditionnel de Windows 10, par un clic sur "toutes les applications", puis choisir Windows système puis exécuter. Ou simplement par la touche Windows + R.

LOG - IMAGE - PLUGIN - Gmic line-art colorization - David Revoy

(via)
This is an article dedicated to the Gmic filter 'colorize', a new and next generation computer-assisted tool for colorization image filter. This filter was created by David Tschumperlé , project manager and main developer of Gmic. The filter improved a lot on this September 2014 ( and was started around spring 2013 ). I kept an eye on the filter development since the very beginning as a tester, but I got totally enthusiast about it recently ; especially when filter became interactive and more user friendly. I ) Overview 1) What kind of problems it solves : A bit of context here, the first steps of colorizing a line-art, usually with flat zone is a super long, annoying and robotic work.

CSS - TAB - Pure CSS Tab Panel

KIS (Keep It Simple) A simple succession of headings and divs should lead users to assume - rightly - that those headings are followed by their respective section (by the content they "introduce"). This alone is enough for screen-reader users to make sense of the markup—after all, when it comes to content, this is the most common markup pattern on the Web.

CSS - TRICK - FLOAT - html - Div collapse after float css - Stack Overflow

(via)
Add any overflow value other than visible to your container: div#nav { overflow:auto; } Then add width to restore the width : div#nav { width: 100%; overflow:auto; }

GITHUB - TUTORIEL FR - Tres clair et fourni - GitHub Pour les Nuls : Pas de Panique, Lancez-Vous ! (Première Partie) - Sur la route de l'IndieWeb

Nous sommes en 2013 et pas moyen d’y échapper : vous devrez apprendre comment utiliser GitHub. Pourquoi ? Parce que c’est un réseau social qui change drastiquement notre façon de travailler. Ayant démarré sous forme de plateforme collaborative pour développeurs, GitHub est désormais le plus grand espace de stockage de travaux collaboratifs dans le monde. Que vous soyez intéressé(e) pour participer à ce cerveau global ou tout simplement pour partir à la recherche de cet énorme réservoir de connaissances, vous vous devez d’y être.

2016

🛠 WIN10 - TWEAK - How To Enable Paths Longer Than 260 Characters In Windows 10

If you’re running Windows 10 Pro, you will be tweaking the group policy editor. If you’re running Windows 10 Home, you will be editing the Windows registry. First, check the build number to make sure you’re running build number 1607 or above.

DISQUE DUR - REPARATION / SAUVEGARDE - Réaliser l'image d'un disque dur avec Testdisk - Korben

Testdisk pour réaliser une copie bit par bit du disque dur, soit 1,5 To. Cette copie sera un clone identique du disque, cela veut dire que vous pourrez récupérer dessus tous les fichiers même ceux qui ont été effacés par inadvertance. Pour cela, il faut donc télécharger Testdisk ici qui a la particularité de fonctionner sur tous les OS (Linux, macOS et Windows).

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.

PODCAST - TUTO - RSS & Podcast - Korben

(via)
Sommaire: Lire des flux RSS et/ou des Podcasts, Créer son flux RSS et/ou des Podcasts pour soi, Créer son flux RSS et/ou des Podcasts pour son site web

2015

CSS - Le contexte de formatage block en CSS - Trés Clair - Alsacreations

Des sortes de “super éléments” ?__Les éléments générant un contexte de formatage block deviennent des sortes de “super éléments” ayant un certain nombre de super responsabilités : ils deviennent entre-autre garants de l’affichage de leurs enfants (qu’ils soient blocks ou inline). Ces super éléments acquièrent également des super pouvoirs très pratiques, et c'est là que ça devient intéressant : __Ils contiennent des flottants __Ils ne s’écoulent pas autour des flottants __Ils ne subissent pas la fusion de marges __Et plein d’autres petites fioritures

JAVASCRIPT - DEMO - Maximum Characters for Text and Textarea Form Fields

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

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.

2014

GM - MPIV (Mouseuver Popup Image Viewer) : Host Rules How-To

You can make MPIV work with more sites by adding your own host rules. You don't need to edit the source code for this. Instead, you paste the rule into MPIV's settings dialog which is accessible from your script manager's toolbar icon menu, e g. "User Script Commands" → "Set up Mouseover Popup Image Viewer" for Greasemonkey users.

GM - DEV - Greasemonkey Tutorial for Beginners

In Greasemonkey tutorial, I have covered how to write Greasemonkey user scripts. After this tutorial,you will be able to write user-scripts for Greasemonkey. Topics covered: GreaseMonkey Installation Hello World Example Adding a Button Reading/Modifying HTML content Loading External Scripts.

CSS - ARROW - Using borders to produce angled shapes

by 1 other
Bon tuto (In US) pour créer des flèches avec les borders

CSS - Centrer en CSS - OpenClassRoom

Tous les cas solvables en pur CSS, et tant qu'à faire montrer comment les résoudre. Accrochez-vous, c'est parti !

CSS - flexbox : flex: initial; flex: none; flex: 1; flex: 2;

Mise en page plus fantaisiste avec flexbox. flex: initial;flex: none;flex: 1; flex: 2;