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

Make your web services secure by default with BunkerWeb, the open source and next generation WAF.

In this blog post, we will show you 16 IP command Examples in Linux. IP command is used to configure networking and routing on linux.

Home · minios-linuxminios-live Wiki · GitHub

GitHub - minios-linux/minios-live - These scripts build a bootable MiniOS ISO image.

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.

LireCouleur dans le navigateur.

appsmithorg/appsmith Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.

Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.

GRR est un système de gestion de réservation de ressources telles que des salles, des équipements, des véhicules et du personnel.
Développé en PHP et en responsive design, il est accessible depuis n'importe quel équipement (PC, Mac, tablette, téléphone, TV, etc.).

GRR est entièrement configurable (gestion des horaires, des accès, des e-mails, etc.) et reste simple d'utilisation

A visualization of zonal temperature anomalies. The latitude zones are 90N-64N, 64N-44N, 44N-24N, 24N-EQU, EQU-24S, 24S-44S, 44S-64S, 64S-90S. The anomalies are calculated relative to a baseline period of 1951-1980. This version is in Celsius, an alternate version in Fahrenheit is also available.

https://svs.gsfc.nasa.gov/5209/#media_group_373180

You can now create next generation interaction, motion and 3D online or offline!

Whether you're a seasoned developer or a creative with little to no coding experience.
Create interaction, motion and 3D content with our new open-source, offline version that puts the full power of cables in your hands.

cables-gl/cables cables is a tool for creating beautiful interactive content

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

• Seven habits of effective text editing
• r/vim
• Vim Awesome
• Big Pile of Vim-like
• Complete list of Vi(m)-like browsers

C'est en allant doucement qu'on attrape le singe dans la brousse.

Ce n'est pas parce que je veux de la sauce que je vais me retourner la marmite chaude sur la tête.

Si tu pisses en étant couché sur le dos, avant que quelqu'un ne soit mouillé, toi, tu seras trempé.

L'aveugle a un autre travail que d'enfiler des aiguilles.

jfabreguettes Je note depuis quelque temps l… - mastodon.design

If you want to run or update a task when certain files are updated, the make utility can come in handy. The make utility requires a file, Makefile (or makefile), which defines set of tasks to be executed. You may have used make to compile a program from source code. Most open source projects use make to compile a final executable binary, which can then be installed using make install.

In this article, we'll explore make and Makefile using basic and advanced examples. Before you start, ensure that make 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 et help pour décrire le fonctionnement du programme. La fonction on_interrupt permet de gérer le signal SIGINT 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 vers stderr. Il est également possible d'ajouter la date.

Collection of publicly available IPTV channels from all over the world

Table of contents

• 🚀 How to use?
• 📺 Playlists
• 🗓 EPG
• 🗄 Database
• 👨‍💻 API
• 📚 Resources
• 💬 Discussions
• ❓ FAQ
• 🛠 Contribution
• ⚖ Legal
• © License

Self-hosted news, content, updates, launches, events, and more

selfh.st is an independent publication created and curated by Ethan Sholly. Focused on self-hosted news, updates, and content, the site is committed to giving back to the community in a number of ways:

💌 This Week in Self-Hosted, a weekly e-mail newsletter recap of the latest in self-hosted content and news

📱 selfh.st/apps, a directory of self-hosted applications and software for easy browsing and discovery

🎧 The Self-Host Cast, a podcast featuring interviews with self-hosted developers and content creators

🗨️ Occasional blog posts, surveys, and other self-host-adjacent projects

Linux Troubleshooting Interview DevOps SRE

CSP or Content Security Policy Header Reference Guide and Examples

DummyJSON provides a fake REST API of JSON data for development, testing, and prototyping. Quickly get realistic data for your front-end projects.