Skip to content

Instantly share code, notes, and snippets.

View Sarmaged's full-sized avatar

Dmitrii Sagalov Sarmaged

View GitHub Profile
// There seems to be a few algorithms floating around for brightness/luminance detection.
// One uses NTSC `(299*R + 587*G + 114*B)` which is incorrect for web colors (sRGB) see
// `rgbLuminance` for "better" coefficients (seems subjective but agreed apon). To be more
// accurate you need to also convert RGB from sRGB color space (which gives more spectrum to lighter colors)
// to linear rgb which normalizes colors across the spectrum - better for processing.
// see https://stackoverflow.com/questions/596216/formula-to-determine-perceived-brightness-of-rgb-color
// convert sRGB to linear RGB values
// - channel ** 2.218 same as Math.pow((channel + 0.055) / 1.055, 2.4)
// - i've seen this simplified to be just `(channel / 255) ** 2.21`
@seeliang
seeliang / lint-only-changed-files.MD
Last active June 10, 2024 05:37
How to lint only changed files?

find out the differences

use git diff to generate file list

git diff --name-only master

limited to certain file types

add ext filter

@jsit
jsit / .stylelintrc
Created August 7, 2017 15:19
.stylelintrc / stylelint-order rules for SMACSS property sort order
"order/properties-order": [
{ "properties": [ "content", "quotes" ] },
{ "properties": [ "display", "visibility" ] },
{ "properties": [ "position", "z-index", "top", "right", "bottom", "left" ] },
{ "properties": [ "box-sizing" ] },
{ "properties": [ "flex", "flex-basis", "flex-direction", "flex-flow", "flex-grow", "flex-shrink", "flex-wrap", "align-content", "align-items", "align-self", "justify-content", "order" ] },
{ "properties": [ "width", "min-width", "max-width", "height", "min-height", "max-height" ] },
{ "properties": [ "margin", "margin-top", "margin-right", "margin-bottom", "margin-left" ] },
{ "properties": [ "padding", "padding-top", "padding-right", "padding-bottom", "padding-left" ] },
@glueckpress
glueckpress / px-rem-cheat-sheet.css
Created May 26, 2013 16:17
Cheat sheet for rem-calculations based upon 14px and 16px.
/*! = $rembase: 14px
--------------------------------------------------------------
* hmtl { font-size: 87.5%; }
* body { font-size: 14px; font-size: 1rem; line-height: 1; }
* 4px 0.28571429rem
* 8px 0.571428571rem
* 12px 0.857142857rem
* 13px 0.928571429rem
* 14px 1rem
* 16px 1.142857143rem
@gre
gre / easing.js
Last active June 27, 2024 15:37
Simple Easing Functions in Javascript - see https://github.com/gre/bezier-easing
/*
* This work is free. You can redistribute it and/or modify it under the
* terms of the Do What The Fuck You Want To Public License, Version 2,
* as published by Sam Hocevar. See the COPYING file for more details.
*/
/*
* Easing Functions - inspired from http://gizma.com/easing/
* only considering the t value for the range [0, 1] => [0, 1]
*/
EasingFunctions = {