901 private links
Most software developers use Git on a daily basis. But how many truly understand Git? Do you feel like you know what's going on under the hood as you use Git to perform various tasks?
For example, what happens when you use
git commit
? What is stored between commits? Is it just a diff between the current and previous commit? If so, how is the diff encoded? Or is an entire snapshot of the repository stored each time?Most people who use Git don't know the answers to the questions posed above. But does it really matter? Do you really have to know all of those things?
I'd argue that it does matter. As professionals, we should strive to understand the tools we use, especially if we use them all the time, like Git.
TL;DR
@property --_w {
syntax: '<length>';
inherits: true;
initial-value: 100vw;
}
@property --_h {
syntax: '<length>';
inherits: true;
initial-value: 100vh;
}
:root {
--w: tan(atan2(var(--_w),1px)); /* screen width */
--h: tan(atan2(var(--_h),1px)); /* screen height*/
/* The result is an integer without unit */
}
Quelques ressources utiles pour le développement web, concernant la partie front-end (HTML/CSS notamment) à destination des novices et personnes expérimentés.
Colors
COLOURlovers: User created & shared color palette inspiration
ColorPicker: Online Color Picker Tool
Color Hex: A free color tool providing information about any color
Flat UI Colors: Web app helps you to copy the colors from Flat UI
Contrast Ratio: Easily calculate color contrast ratios
Color Safe: Color palettes based on WCAG Guidelines
Color Contrast Checker: Check color contrast by analyzing difference between foreground and a background color.
Colllor: Color palette generator
Paletton: Tool for creating color combinations
Colorpeek: Quickly preview, share and convert one or more CSS colors, including hex, RGB, HSL, RGBA and color keywords.
Colourcode: Online designer tool, which allows you to easily and intuitively combine colours.
Chrome Daltonize!: Daltonization is a technique of exposing details to color-blind users, allowing them to see what they otherwise would have missed.
Flat UI Color Picker: Flat Color Picker which gives you the perfect colors for flat designs.
SassMe: A Tool for Visualizing SASS Color Functions
HEX To RGB: Convert Hex color to RGB.
HSL to RGB: HSL to RGB / RGB to HSL converter.
Colour Scheme Calculator: Choose a starter color to calculate its color wheel including triad, complementary, analogous, and split complementary colours, plus saturation and lightness variations.
CSS Generators
Ultimate CSS Gradient Generator: CSS gradient generator
EnjoyCSS: All in one CSS generator
CSS MenuMaker: Create responsive website navigation
On/Off Flip switch: Generate CSS3 On/Off flip switches
CSSmatic:Gradient, border radius, box shadow & noise texture generator
CSS Triangle: CSS triangle generator
CSS Arrow Please: CSS arrow generator
Patternify: A CSS Pattern Generator
CSS3 Patterns Gallery: CSS3 patterns gallery
Critical Path CSS Generator: Speed up your page render time
Button Generator: CSS button generator
Layout Generator: Create CSS layout
Tridiv: Web-based editor for creating 3D shapes in CSS
Trianglify: Generate colorful triangle meshes that can be used as SVG images and CSS backgrounds
Delaunay Triangle: Triangle pattern maker that can be used as background
Bear CSS: Generates a CSS template containing all the HTML elements, classes & IDs defined in your markup
Stylie: A fun CSS animation tool
Calculator & Converter
PXtoEM: Convert pixels to EM
DPI Love: Find DPI/PPI of any screen
CSS Inliner:Automatically inline your email’s CSS
Code Beautify: Beautify, Validate, Minify, Analyze and Convert your JSON, XML, JavaScript, CSS, HTML, Excel
Pixel Density Converter: Tells you how to scale graphics between four density groups.
Is This Retina?: DPI/PPI Display calculator
Specificity Calculator:A visual way to understand CSS specificity
NTH-Test: nth-child and nth-of-type Tester
Typography & Font
Google Fonts: Open source web fonts
Font Squirrel: Hand picked free web fonts
Dafont: Archive of freely downloadable fonts
Font Space: Download free fonts
Type Genius: Find the perfect font combo
Golden Ratio Typography Calculator: Discover the perfect typography for your website
What Font Is: Identify font from a image
Typetester: Compare Web fonts from Adobe Edge, Google and Typekit
Tiff: Find out difference between Google fonts
Wordmark.it: Preview the output of fonts for a selected word
TypeWonder: Test web fonts on any live website
Fit Text: A jQuery plugin for inflating web type
Icons
Font Awesome: Scalable vector icons that can instantly be customized
Material Design Icons: 750 glyphs Material Design system icons pack by Google Design
Iconogen: Generate favicons, Windows 8 Tiles, Apple Touch icons, Android and iOS icons
Marka: Beautiful transformable icons
Maki: Icon set for web cartography
Fontello: Icon font generator
Fontastic: Create your own icon font
Entypo: A suite of 411 carefully crafted premium pictograms by Daniel Bruce
Typicons: Free-to-use vector icons embedded in a webfont for easy use in your user interfaces
Iconmonstr: A large collection of glyph icons from a German artist
Octicons: Icon font launched by GitHub
GlyphSearch: Search for icons from Font Awesome, Glyphicons, IcoMoon, Ionicons, and Octicons
Analyze Website Style
Stylify Me: Overview of the style guide of a site, including colors, fonts, sizing and spacing
Type-o-matic: A browser extension that finds all the fonts on a page
Editor
CodePen: Show case of advanced techniques with editable source code
JSFiddle: Test and share JavaScript, CSS, HTML or CoffeeScript online
JS Bin: A live pastebin for HTML, CSS & JavaScript and a range of processors
CSSDeck: Collection of Awesome CSS and JS Creations to help out frontend developers and designers
Dabblet: An interactive CSS playground and code sharing tool
Liveweave: Liveweave is a HTML5, CSS3 & JavaScript playground for web designers and developers
Adobe Edge Reflow: Design tool that supplements your design workflow to help you create beautiful responsive designs for all screen sizes
webflow: Drag-and-drop website builder for creating professional responsive websites
Macaw: Provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS
Developer Tools
Chrome DevTools: Set of web authoring and debugging tools built into Google Chrome
Grunt: The JavaScript Task Runner for automating tasks
Bower: Solution to the problem of front-end package management
Yeoman: A generator ecosystem, basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts
Can I Use: Up-to-date browser support tables for support of front-end web technologies
HTML5 Please: Look up HTML5, CSS3 & find out if they are ready for use
CSS Values: CSS Reference, Properties and Values
CSS Triggers: An invaluable reference on how CSS affects performance
Testing
W3C Markup Validation: Checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML
HTML_CodeSniffer: Checks HTML source code and detects violations of a defined coding standard
W3C CSS Validation: Check (CSS) and (X)HTML documents with style sheets
CSS Lint: Points out problems with your CSS code
JS Lint: JavaScript program that looks for problems in JavaScript programs
PhantomCSS: Visual/CSS regression testing with PhantomJS
CSS Critic: Regression testing of CSS
DiagnostiCSS: Visually detect any potentially invalid or inaccessible HTML markup
QUnit: A JavaScript Unit Testing framework
Dromaeo: JavaScript Performance Testing
Opera Mobile Classic Emulator: Use the profile selector to spawn multiple Opera Mobile Classic instances with a defined resolution, pixel density, user interface
Performance
Pingdom Website Speed Test: Test & analyze the load time of a live page
WebPagetest: Website speed test from multiple locations around the globe
PageSpeed Insights: Analyzes website and suggest ways to make it load faster
GTmetrix: Grade site’s performance and provides recommendations to fix these issues
YSlow: Analyzes & offers suggestions for improving the page’s performance
Perfmap: A performance heatmap of resources loaded in the browser
Optimization
CSSCSS: Let you know which rulesets have duplicated declarations
Helium: javascript tool to scan your site and show unused CSS
CSS Tidy: Opensource CSS parser and optimiser
CSS Compressor: Compress your CSS to increase loading speed
CSS Dig: Take a look at all your CSS properties, their frequency and variations
JavaScript Minifier: Minify your JavaScript
FF Subsetter: Reduce the font file size to optimize bandwidth usage
Compressor.io: Reduce the size of your images while maintaining a high quality
Prefix free: add the current browser’s prefix to any CSS code only when it’s needed
Sprite Cow: Generate CSS for sprite sheets
TinyPNG: Advanced lossy compression for PNG images
Adaptive Images: Detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of images
Bibliothèque d’animation CSS
animatie.css : https://animate.style/
Animista: https://animista.net/
Vivify : https://github.com/Martz90/vivify
Magic animation CSS3 : https://www.minimamente.com/project/magic/
Cssanimation: http://cssanimation.io/
Hover.css: https://ianlunn.github.io/Hover/
Wickedcss: https://kristofferandreasen.github.io/wickedCSS/
Three Dots : https://nzbin.github.io/three-dots/
Csshake: http://elrumordelaluz.github.io/csshake/
Angrytools: https://angrytools.com/
Outils (French)
Générateur de font
Google font generator : https://fonts.google.com/#ChoosePlace:select
Dafont : https://www.dafont.com/fr/
Outils HTML
Schnaps.it : https://schnaps.it/
Scriptol : https://www.scriptol.fr/html5/
Initializr : http://www.initializr.com/
Textfixer: https://www.textfixerfr.com/html/
Générateur HTML : https://www.mesoutils.com/generateur.php
Validateur de code HTML
Validateur (X)HTML du W3C : https://validator.w3.org/
Editeur de code
Sublimtext : https://www.sublimetext.com/
Brackets: https://brackets.io/
Visual studio code: https://code.visualstudio.com/
Atom: https://atom.io/
Live editor: http://liveditor.com/index.php
Light Table : http://lighttable.com/
Editeur de code en temps réel
Codepen.io : https://codepen.io/pen/
Squarefree: https://htmledit.squarefree.com/
HTML editor: https://html-online.com/editor/
HTML code editor: https://htmlcodeeditor.com/
Livewave : https://liveweave.com/
HTML instant: https://www.htmlinstant.com/
JS bin: http://jsbin.com/welcome/130/edit?html%2Coutput=
Dabblet : https://dabblet.com/
Sites pour apprendre Ă coder
Openclassrooms : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
Grafikart.fr: https://grafikart.fr/tutoriels/html et https://grafikart.fr/tutoriels/css
Pierre-Giraud: https://www.pierre-giraud.com/html-css-apprendre-coder-cours/
Codecademy : https://www.codecademy.com/catalog/language/html-css
Wiki de GRAP : GRAP – Groupement Régional Alimentaire de Proximité, est une coopérative réunissant des activités de transformation et de distribution dans l’alimentation bio-locale.
L'usage des codes QR (traduction de QR Codes) s'étant démocratisé, j'ai eu besoin d'outils pour encoder et décoder des codes QR. Je vous présente les outils que j'utilise pour manipuler les code QR ainsi que les quelques cas d'utilisation courante de code QR.
Les TupperVim sont des évènements où l’on partage des connaissances et des astuces à propos de Vim.
Les TupperVim s’inspirent autant des agapes maçonniques du troisième millénaire que des soirées tupperware™ des années 60. Tout un concept.
Tutoriels
- Vim pour les canetons
- Vimbook, vim pour les humains
- Introduction book: A Byte of Vim [en]
- A guide for patient Vimmers
- Blog posts about Neo(vim) on dmerej.info
- Learn Vimscript the Hard Way
- Learn Vim Progressively
Présentations avec slides
- Registre vim par yamo
- Vim en 10 minutes par delapouite
- Plugins neovim par delapouite
Fichiers de configuration
- @fabi1cazenave
- @nojhan
- @maggick
- @dmerejkowsky
- @darnuria
- @guyzmo
- @Delapouite
- @GuillaumeSeren
- @HS-157
- @pbondoer
- @mawww
- @alexherbo2
Projets de tuppervimiste
- Theme apprentice par romainl
- Kinou’s Vim cube : PDF — SVG
- Qwerty-Lafayette
- Kakoune
- Krabby
Divers
If you want to run or update a task when certain files are updated, the
make
utility can come in handy. Themake
utility requires a file,Makefile
(ormakefile
), which defines set of tasks to be executed. You may have usedmake
to compile a program from source code. Most open source projects usemake
to compile a final executable binary, which can then be installed usingmake install
.In this article, we'll explore
make
andMakefile
using basic and advanced examples. Before you start, ensure thatmake
is installed in your system.
J'ai régulièrement le besoin d'écrire des scripts shell un peu évolués. Il y a quelques mois, j'ai commencé à travailler sur un modèle que je met régulièrement à jour. Aujourd'hui, j'ai travaillé sur la couche pour gérer les logs et c'est pourquoi j'écris cet article.
Ce modèle contient les fonctions
usage
ethelp
pour décrire le fonctionnement du programme. La fonctionon_interrupt
permet de gérer le signalSIGINT
quand le programme est interrompu.La fonction
main
est la fonction qui contient le code principal du script. Elle contient la gestion des paramètres passés au script. Par défaut, plusieurs y sont déjà intégrés :-l
pour définir le niveau de log désiré et-h
pour afficher l'aide.Enfin, il y a la fonction
log
pour afficher des messages de debug avec différents niveaux de criticité. Cela permet de générer des messages qui seront affichés ou pas selon les besoins. Les messages sont colorés selon le niveau de criticité et ils sont redirigés versstderr
. Il est Ă©galement possible d'ajouter la date.
I use FastMail for my email and as I control my own domain, I needed to set up SFP, DKIM and DMARC on it. These are DNS records that help the email servers put the emails that I send into my recipient’s inbox and to mark any forged emails as spam. These are my tidied up notes so that I can find them again when I next need them.
Wiki de la société kor51 sur GNU/Linux
Documents : https://mega.nz/folder/MkJAHBQS#ZUtfIhQr3dyv1QeCCdBiyQ
Parlons un peu de ma tâche et mon job sur le blog via mon entreprise https://kor51.org. Moi mon boulot c'est de sécuriser les ordinateurs, avec les meilleurs techniques, à la pointe de la sécurité informatique. D’où que j'apprends dans ma formation à la cybersécurité à utiliser Arch Linux pour mes clients qui est l'outil de travail pour déployer la sécurité informatique. Allons y. N'hésitez pas à parler de moi, le bouche à oreille sur mes compétences.
On va faire un tour des bonnes pratiques "blue team" de la sécurité informatique sur son réseau et son ordinateur sous Arch Linux. Je conseil pour tous hacktivistes qui à besoin de sécuriser des données. Sécuriser et auditer un ordinateur sous Arch Linux implique plusieurs étapes couvrant la configuration du système, l'installation de logiciels de sécurité, la mise en place de pratiques sécurisées et l'utilisation d'outils d'audit.
Après les messages et les signaux, voici enfin un nouvel article dans la série Bash avancé. Avec presque deux ans de retard, il serait temps me direz-vous! Mais mieux vaut tard que jamais non?
Cette article me servira de prétexte pour utiliser massivement la commande interne
printf
et vous montrer quelques cas d’usages. Nous verrons aussi la substitution de processus, la substitution de paramètre et d’autres mécanismes offerts par Bash.
L’idée ici est de proposer trois types de messages dans un fichier que nous pourrons ensuite inclure dans nos scripts à l’aide de la commande
source
.Ces messages seront de 3 types différents:
- messages standards envoyés sur la sortie standard
- messages de débogage affichés si une variable
DEBUG
est positionnée et envoyés vers la sortie d’erreur- message d’erreur envoyés sur la sortie d’erreur.
Nous utiliserons quelques spécificité de bash nous permettant d’agrémenter nos sorties.
CSS Grid is one of the most amazing parts of the CSS language. It gives us a ton of new tools we can use to create sophisticated and fluid layouts.
It's also surprisingly complex. It took me quite a while to truly become comfortable with CSS Grid!
In this tutorial, I'm going to share the biggest 💡 lightbulb moments I've had in my own journey with CSS Grid. You'll learn the fundamentals of this layout mode, and see how to do some pretty cool stuff with it. ✨
Physically sharing computers with other people can be a challenge. While they only need temporary access to access the web, work on some files or even play a game, this may impose a security risk. For example, your personal files may be accessible because your account is already logged in. While on one hand you want to share your device, on another hand you may also want to some privacy.
If this is a concern for you, keep reading. We will see how to use guest accounts on Linux Mint and how to customize them for your needs.
If you’ve dual-booted Linux with another operating system like Windows and are stuck with the traditional GRUB boot manager, it’s time to switch to rEFInd, IMMEDIATELY!
This tutorial shows how to automatically create, delete files/folders, and/or write parameters into config files at startup in Ubuntu and other Linux using systemd.
This can be useful if some configuration do not persistent and reset to default on every boot, or you want to clean up something either on every boot or after every time period.
In the fast-paced world of software development, time is of the essence, and having quick access to vital information can mean the difference between coding bliss and coding chaos. Enter cheat sheets – these invaluable resources have become a developer's best friend, serving as concise reference guides that can save countless hours of frustration and endless googling. In this article, we will explore a collection of cheat sheets tailored specifically for developers.
In this post, I will share some new and helpful html tags which are added in HTML5 to write easy and fast code to create complex, dynamic, engaging, and effective websites.
- dialog
- template
- picture
- meter
- output
- progress
- mark
- abbr
- time
- bdi
- wbr
- main
- figcaption
Voici comment je fais pour rajouter automatiquement une balise autour des emojis présents dans mes articles :
function niceEmoji(text) {
const emojiRegex = /(\p{ExtPict}(\u200d\p{ExtPict}|\p{EMod})*)/gu;
return text.replace(emojiRegex, '<span class="u-emoji">$1</span>');
}