public marks

PUBLIC MARKS from decembre with tag tutorial

This year

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.

DEV - Web developer guides | MDN

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

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.

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.

CSS - RESPONSIVE - CALC - Imitating calc() Fallback or Fixed-Width Sidebar In Responsive Layout — Osvaldas Valutis (2013)

If you were attentive you should see that the line width: calc( 12.5em ) is the trick here. Why? Let’s see all these widths like in pairs – exactly what we need browsers to do. The first pair is width: 80% (content) and width: 16.666% (sidebar) that does the job in calc() incompatible browsers, which will just ignore calc(). It is the callback (backup). It means that the minority of website visitors will see narrower sidebar on narrower viewports. And that should be perfectly fine for people using older browser versions. The second: width: calc( 100% - 15em ) and width: calc( 12.5em ). This is for newer browser versions which will override the previous width definitions

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 - TAB - Tab Panel, the right way...

The recipe for the best user experience: Start with POSH, a simple set of heading/div pairs Add ARIA (role, aria-selected, aria-hidden, aria-labelledby) and tabindex attributes using JavaScript as these would be confusing if there was no behavior attached to the widgets. Use JavaScript to also plug a class on the component according to its type (accordion or tabpanel). Style the widget using the selector inserted by the script, this way containers are not hidden if there is no script support. Use cursor to style the tabs because those behave like buttons (default), not links (pointer). In case the component is displayed as a Tab Panel, style it as an Accordion before its tabs start wrapping (to accomodate user’s font-size) or at narrow widths...... ../..

CSS - GRID - Building a CSS Grid Overlay | CSS-Tricks

Let's take a look at what it takes to build a grid overlay with CSS. It will be responsive, easily customizable and make heavy use of CSS variables (known more accurately as "CSS custom properties"). If you aren't familiar with custom properties, I'd highly recommend reading What is the difference between CSS variables and preprocessor variables? and watching Lea Verou's enlighting talk on using them. This grid overlay that we're building will consider a developer tool, as in, a tool just for us, not really our users. So, let's not worry too much about browser support (If you do care, check out caniuse… data on custom properties). While it's impossible to preprocess custom properties to behave exactly the same as native support, if you use them just like you would preprocessor variables, tools like the postCSS plugin cssnext can transform them into CSS compliant with older browsers.

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; }

BRICO - VIDEO - RECUP MOTEUR - 11. How To Wire Most Motors To Build Shop Tools, Blower motor, Washing machine, and DC to name a few - YouTube

1 janv. 2017 : I show how to wire several different types of motors and explain some of the important components. 1. AC single phase 1/4 Blower Motor (brush-less) induction motor 2. AC single phase Washing machine motor (1/2 hp and 3/4 hp) induction motor (brush-less) 3. AC single phase 3 hp (brush-less) induction motor 4. DC permanent Magnet Treadmill motor 5. AC Motor with brushes universal motors

DO IT YOURSELEF - Comment fabriquer une caméra thermique DIY - Korben

Si vous voulez vous la jouer Predator avec une caméra thermique, il va falloir casquer. Ou alors vous pouvez l'assembler vous-même en suivant le tuto de la DIY-Thermocam qui permet en utilisant le capteur infrarouge FLIR Lepton et quelques composants électroniques de filmer une image thermique de qualité pour environ 400 euros.

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

GIF - REFERENCES - Web / Authoring / Graphics / Animation | WebReference

Web / Authoring / Graphics / Animation 6 Animations can provide anything from a touch of creativity to a full-blown moving platform to your work. We also have listings of animation software. WebReference Articles

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

Update - Comment cracker un mot de passe windows - Korben

Screencast sur Youtube, où je présentais comment cracker un mot de passe windows avec Offline Empty Password Registry Editor. Valable pour la série, windows XP/Vista et 7. Romain m'a contacté pour me dire que le soft était maintenant compatible windows 10. Vous pouvez utiliser l'astuce que je présente pour réinitialiser un mot de passe windows, récupérer des droits administrateur et bien plus. J'avais réalisé l'opération sous windows 7 mais son utilisation ne change pas pour les versions windows 8 et windows 10.

Upload 360 degree videos - YouTube Help

(via)
YouTube supports uploading and playback of 360 degree spherical videos on desktop Chrome. In order to upload a 360 degree video file, you'll need to modify the file with an app or script before uploading. __Create a 360-enabled file with an app__ __Download the 360 Video Metadata app for Mac or Windows __Un-zip the file, then open the 360 Video Metadata app. If you're on a Mac, you may need to right-click the app and then click "Open" __Select the video file __Click "Inject and save" __Enter a name for the file that will be created __Save the file. A new file will be created automatically in the same location as the original file __Upload the new file to YouTube __Wait for the 360 degree effect to process. This may take up to an hour.

Clonezilla - Cloner son système configuré(2015)

Sauvegarder son système entièrement configuré___ Clonezilla est un utilitaire gratuit qui vous permet de cloner une ou plusieurs partitions ou même le disque dur entier de votre pc à l'état identique dans lequel il se trouve. L'avantage de cette méthode est de permettre, lors d'un plantage total de votre machine ou de panne de votre disque dur, de les remettre sur pieds très rapidement. Votre système sera alors à nouveau entièrement paramétré et vos programmes déjà installés.