Skip to content

Instantly share code, notes, and snippets.

View AlexandreBroudin's full-sized avatar

Alexandre Broudin AlexandreBroudin

26 followers · 32 following
View GitHub Profile
@AlexandreBroudin
AlexandreBroudin / design-tokens-compiled.json
Created April 6, 2018 07:44
{
"grid": {
"square": "4px"
},
"spacing": [
{
"factor": [
{
"no-space": 0
},
@AlexandreBroudin
AlexandreBroudin / design-tokens.json
Created April 6, 2018 07:29
{
"grid": {
"square": "4px"
},
"spacing": [
{
"factor": [
{
"no-space": 0
},
@AlexandreBroudin
AlexandreBroudin / keybase.md
Created February 15, 2017 13:01

Keybase proof

I hereby claim:

  • I am alexandrebroudin on github.
  • I am knuc (https://keybase.io/knuc) on keybase.
  • I have a public key ASB8xMCMN5t3vbfmWWFgJ4b1I2GcmgGXB_3a84JcTk9CHwo

To claim this, I am signing this object:

@AlexandreBroudin
AlexandreBroudin / gist:713797ca51641f64feef
Created February 17, 2015 14:26
CSS Stress test Bookmarklet
javascript:(function(){var d=document,s=d.createElement('script'),doit=function(){if(window.stressTest){stressTest.bookmarklet();}else{setTimeout(doit,100);}};s.src='//cdn.rawgit.com/zouhenry/stress-css/master/stressTest.js?_='+Math.random();(d.body||d.getElementsByTagName('head')[0]).appendChild(s);doit();})();
@AlexandreBroudin
AlexandreBroudin / gist:cdbfcba717a67efd0e39
Created December 4, 2014 12:54
gulpfile
// global
var browserSync = require('browser-sync');
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var ignore = require('gulp-ignore')
// css
var prefix = require('gulp-autoprefixer');
var urlAdjuster = require('gulp-css-url-adjuster');
var cssmin = require('gulp-cssmin');
@AlexandreBroudin
AlexandreBroudin / gist:20265edb48a3e17f5869
Created October 31, 2014 14:41
bs
// BrowserSync
gulp.task('bs-serve', function(){
return browserSync.init("web/build/frontend/css/**", {
host: "http://host.dev"
});
});
gulp.task('bs-reload', function(){
return browserSync.reload({
stream: true
@AlexandreBroudin
AlexandreBroudin / gist:b5cc7ebf270cc60b126b
Created October 23, 2014 22:35
Less cache busting
@cacheVersion: ~"`( new Date() ).getTime()`";
.foo {
background-image: url('/foo/de/fafa/baz.svg?v=@{cacheVersion}');
}
@AlexandreBroudin
AlexandreBroudin / Statuts
Last active August 29, 2015 14:04
Gestion des états par composant
Problematique: Application JS ayant beaucoup d'éléments chargés asynchroniquement, nécessitant l'apparition de différents indicateurs d'état (Defaut, Chargement, Succès, Echec, etc.) pour une meilleure expérience utilisateur.
But: Gérer ces différents états asynchrones sur différents composants: boutons, liste d'éléments et bloc.
Le but est sur chacun de ces composants de gérer un statut 'loading', 'success', 'error'.
Les états peuvent contenir du texte et/ou des icones.
Technos : HTML / CSS / JS
@AlexandreBroudin
AlexandreBroudin / loader
Last active August 29, 2015 13:56
<svg width="76px" height="16px" xmlns="http://www.w3.org/2000/svg">
<g id="loader" >
<circle cx="10" cy="10" r="5" stroke="#FFFFFF" stroke-width="2" fill="#1985D3" opacity="0">
<animate id="Circle1" attributeName="opacity" from="0" to="1" dur=".3s" begin=".3s; Circle4.end" fill="freeze"/>
<animate attributeName="opacity" from="1" to="0" dur=".3s" begin="Circle4.end" />
</circle>
<circle cx="30" cy="10" r="5" stroke="#FFFFFF" stroke-width="2" fill="#F75562" opacity="0">
<animate id="Circle2" attributeName="opacity" from="0" to="1" dur=".3s" begin="Circle1.end" fill="freeze" />
<animate attributeName="opacity" from="1" to="0" dur=".3s" begin="Circle4.end" />
</circle>
@AlexandreBroudin
AlexandreBroudin / Font awesome base64
Last active December 29, 2015 07:59
@font-face {
font-family: 'FontAwesome';
src: url('@{FontAwesomePath}/fontawesome-webfont.eot?v=@{FontAwesomeVersion}');
src: url('@{FontAwesomePath}/fontawesome-webfont.eot?#iefix&v=@{FontAwesomeVersion}') format('embedded-opentype');
src: local('☺'),
url(~"data:font/truetype;charset=utf-8;base64,AAEAAAARAQAABAAQRkZUTWZK+UEAAAEcAAAAHEdERUYBqAAEAAABOAAAACBPUy8yji95dQAAAVgAAABgY21hcBnM25EAAAG4AAACOmN2dCALFwevAAAD9AAAACJmcGdtU7QvpwAABBgAAAJlZ2FzcAAAABAAAAaAAAAACGdseWb2KrVOAAAGiAABj5RoZWFkBTfzuQABlhwAAAA2aGhlYQ9vCMAAAZZUAAAAJGhtdHjcAw/WAAGWeAAABexsb2NhRjKo1gABnGQAAAL4bWF4cAKnBEwAAZ9cAAAAIG5hbWU8FmWhAAGffAAAArhwb3N0jv+KDQABojQAAA7fcHJlcLDyKxQAAbEUAAAALndlYmYjwlKTAAGxRAAAAAYAAAABAAAAAMw9os8AAAAAy1SCMAAAAADOuNRBAAEAAAAOAAAAGAAAAAAAAgABAAEBegABAAQAAAACAAAAAwaqAZAABQAEBTIEzQAAAJkFMgTNAAACzQBnBM0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcHlycwBAAA3xiwbb/tsAAAbbAU0AAAABAAAAAAAAAAAAAAAgAAEAAAADAAAAAwAAABwAAQAAAAABNAADAAEAAAAcAAQBGAAAAEIAQAAFAAIAAAANACAAoCAKIC8gX+AA8A7wHvA+8E7wXvBu8H7wjvCe8K7wsvDO8N7w7vD+8Q7xHvEu8T