Skip to content

Instantly share code, notes, and snippets.

@PhilippeVay
PhilippeVay / gulpfile.js
Last active May 31, 2018 10:41
cssbeautify bug with quotes and is it doing anything in at-media at-rules ?
/* jshint node: true */
'use strict';
var gulp = require('gulp'),
$ = require('gulp-load-plugins')(),
atImport = require("postcss-import"); // plugin PostCSS qui "inline" les CSS importées depuis la feuille de style principale (équivalent à une concaténation en plus souple)
var project = {
configuration: {
browsersList: [ '> 1%', 'last 2 versions', 'IE >= 11', 'Edge >= 12'],
@PhilippeVay
PhilippeVay / npm-snippets.sh
Last active March 6, 2018 11:14
Snippets pour NPM
# NPM – informations sur node, npm, les packages locaux et de la forge npmjs.org (distants)
# Versions de node et npm
node -v
npm -v
# (local) Les packages présents dans package.json (sans leurs propres dépendances)
npm ls --depth=0
# (local) Les packages présents dans package.json (avec toutes leurs dépendances… Long !)
npm ls | less
@PhilippeVay
PhilippeVay / github-config-snippets.sh
Last active January 16, 2018 14:28
GitHub configuration snippets
# add --global to configure all your repos (not wanted if you're using both GitHub and GitLab)
# Account
git config user.name
git config user.name "GitHubAccountName" # or GitLab
# Email
git config user.email
git config user.email "someEmail" # see https://github.com/settings/emails if you want to be recognized/attributed by GitHub (Settings / Emails)
@PhilippeVay
PhilippeVay / dos-taskkill.txt
Created January 6, 2018 17:56
Windows: kill all processes of chrome.exe
taskkill /F /IM chrome.exe /T
# With backstopJS using chromy thus Chrome Headless, dozens of processes
# may still run and fill memory because they didn't finish or weren't killed.
#
# This will kill all processes with this name (and their children, kind of irrelevant here)
# @source http://www.markandey.com/2010/06/windows-users-can-follow-this.html
# @source https://www.howtogeek.com/howto/windows-vista/how-do-i-kill-all-the-iexploreexe-processes-at-once/
@PhilippeVay
PhilippeVay / a11y-focus-log.js
Created December 20, 2017 15:49
Logs the currently focused element #a11y
// Source: https://css-tricks.com/debugging-tips-tricks/#article-header-id-10
// This logs the currently focused element, useful because opening the Devtools blurs the activeElement @marcysutton
$('body').on('focusin', function() {
console.log(document.activeElement);
});
@PhilippeVay
PhilippeVay / wcag20-techs.txt
Last active December 23, 2017 13:01
List of Techniques for WCAG 2.0 - old layout
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Techniques for WCAG 2.0 (and only them)</title>
<style>
body {
margin: 0;
padding-bottom: 2em;
font-family: sans-serif;
@PhilippeVay
PhilippeVay / closest-javascript.js
Created November 28, 2017 11:32
Equivalent in JavaScript to .closest() from jQuery (MS and modern browsers)
// Source: https://stackoverflow.com/q/18663941/137626 (answers #1 Ales and #2 Joon)
function sgClosest(el, selector) {
var matchesFn;
// find vendor prefix (@NOTE-phv Limited to MS here, other prefixes are ditched)
['matches', 'msMatchesSelector'].some( function (fn) {
if (typeof document.body[fn] == 'function') {
matchesFn = fn;
return true;
}
@PhilippeVay
PhilippeVay / browserslist-gulpfile.txt
Created November 24, 2017 15:37
Configuration browserslist pour Autoprefixer
// Browserslist : chaîne des navigateurs supportés, paramètrage pour Autoprefixer
// Annoncé : IE11+, last Chr/Fx/Edge/Opera et iOS 9+, Android 5+)
// Ici IE10+, Safari 8+, Android 4.4+
// => Couverture (mondiale, pas française) de 95,13% (mai 2017)
browsersList: [
'> 1%',
'last 2 versions',
'IE >= 10', 'Edge >= 12',
'Chrome >= 42',
'Firefox >= 42', 'Firefox ESR',
@PhilippeVay
PhilippeVay / css3-selection.txt
Last active November 24, 2017 15:16
::selection - custom colors for selection of text by the user
/*
* User selecting text: custom colors
* Beware of white text on dark background: you must redefine ::selection for these cases
*
* MDN: https://developer.mozilla.org/fr/docs/Web/CSS/::selection
* Autoprefixer does take care of adding needed -moz- prefix
*
*/
::selection {
color: white;
@PhilippeVay
PhilippeVay / grep-svg-viewbox.txt
Created November 17, 2017 11:14
SVG parsing: display viewBox dimensions
# In a directory full of SVG files, extract and display values of their viewBox
# 1/2 Rough display
grep -H -o -i --color -E 'viewbox="([0-9. ]+)?"' *.svg
# Output:
# uEA01-arrow-down.svg:viewBox="0 0 50 50"
# uEA02-arrow-left.svg:viewBox="0 0 50 50"
# 2/2 Better display (no more color highlighting with Git Bash on Win 10 though)