Skip to content

Instantly share code, notes, and snippets.

Avatar

Thierry Charbonnel thierryc

View GitHub Profile
@thierryc
thierryc / one-at-a-time.js
Last active May 29, 2021
Javascript Jenkins's one-at-a-time hash function
View one-at-a-time.js
// An implementation of Jenkins's one-at-a-time hash
// <http://en.wikipedia.org/wiki/Jenkins_hash_function>
// key: string
// return hex
function oneAtATimeHash(key) {
var hash = 0, i = key.length;
while (i--) {
hash += key.charCodeAt(i);
hash += (hash << 10);
hash ^= (hash >> 6);
@thierryc
thierryc / CSS Mobile First CSS Media Queries in em
Created Jul 2, 2018
CSS Mobile First CSS Media Queries in em
View CSS Mobile First CSS Media Queries in em
/* smartphones, iPhone, portrait 480x320 phones(min-width:320px) */
@media screen and (min-width: 20em) {}
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. (min-width:481px) */
@media screen and (min-width: 30.06em) {}
/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones (min-width:641px) */
@media screen and (min-width: 40.06em) {}
/* tablet, landscape iPad, lo-res laptops ands desktops (min-width:961px) */
@thierryc
thierryc / Axis.js
Created Dec 30, 2017 — forked from MrToph/Axis.js
Charts in React Native with React-Native-SVG and D3.js
View Axis.js
import React, { Component, PropTypes } from 'react'
import { G, Line, Path, Rect, Text } from 'react-native-svg'
import * as d3scale from 'd3-scale'
import { dateToShortString } from '../utils'
export default class Axis extends Component {
static propTypes = {
width: PropTypes.number.isRequired,
ticks: PropTypes.number.isRequired,
x: PropTypes.number,
View React-Native-SVG Axis
import React, { Component, PropTypes } from 'react'
import { G, Line, Text } from 'react-native-svg'
import * as d3scale from 'd3-scale'
export default class Axis extends Component {
static propTypes = {
width: PropTypes.number.isRequired,
ticks: PropTypes.number.isRequired,
x: PropTypes.number,
y: PropTypes.number,
View keybase.md

Keybase proof

I hereby claim:

  • I am thierryc on github.
  • I am thierryc (https://keybase.io/thierryc) on keybase.
  • I have a public key ASBT28oQoktqbZn2HNSLBjQ7UWv1lngTkyYYrgvsOrArjAo

To claim this, I am signing this object:

@thierryc
thierryc / gh-pages-deploy.md
Created Sep 10, 2017 — forked from cobyism/gh-pages-deploy.md
Deploy to `gh-pages` from a `dist` folder on the master branch. Useful for use with [yeoman](http://yeoman.io).
View gh-pages-deploy.md

Deploying a subfolder to GitHub Pages

Sometimes you want to have a subdirectory on the master branch be the root directory of a repository’s gh-pages branch. This is useful for things like sites developed with Yeoman, or if you have a Jekyll site contained in the master branch alongside the rest of your code.

For the sake of this example, let’s pretend the subfolder containing your site is named dist.

Step 1

Remove the dist directory from the project’s .gitignore file (it’s ignored by default by Yeoman).

@thierryc
thierryc / .block
Last active Jul 21, 2017
fresh block
View .block
license: mit
@thierryc
thierryc / gist:5dc31333e2224729f94200e2b33199e0
Created Mar 30, 2017 — forked from fwextensions/gist:2052247
Decomposing a 2D transformation matrix to find the skew
View gist:5dc31333e2224729f94200e2b33199e0
/*
This code takes a 2D transformation matrix described as a one-dimensional array
(in column order, top to bottom and left to right) and decomposes it using the dojo
matrix library. This input matrix should produce a 45-deg X skew:
1 1 0
0 1 0
0 0 1
The output of decompose() looks like this:
@thierryc
thierryc / getStyle.js
Created Oct 27, 2016 — forked from cms/getStyle.js
Get computed styles
View getStyle.js
function getStyle(el, styleProp) {
var value, defaultView = el.ownerDocument.defaultView;
// W3C standard way:
if (defaultView && defaultView.getComputedStyle) {
// sanitize property name to css notation (hypen separated words eg. font-Size)
styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
} else if (el.currentStyle) { // IE
// sanitize property name to camelCase
styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
@thierryc
thierryc / SASS_Color_Contrast.md
Created Jul 9, 2016 — forked from voxpelli/SASS_Color_Contrast.md
Pure SASS script for calculating contrast ratios of colors. An adaption of Lea Verou's contrast-ratio javascript.
View SASS_Color_Contrast.md

Pure SASS-adaption of Lea Verou's contrast-ratio javascript. Can be useful when eg. generating colored buttons from a single supplied color as you can then check which out of a couple of text colors would give the best contrast.

This script currently lacks the support for alpha-transparency that Lea supports in her script though.

In addition to the color-contrast adaption there's also some math methods that were needed to be able to calculate the exponent of a number and especially so when the exponent is a decimal number. A 2.4 exponent is used to calculate the luminance of a color and calculating such a thing is not something that SASS supports out of the box and not something I found a good pure-SASS script for calculating and I much prefer pure-SASS over ruby extensions. The math methods might perhaps be unecessary though if you're running Compass or similar as they may provide compatible math methods themselves.

Normal usage: `color: pick_best_color(#f00