When making this website, i wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:
main {
max-width: 38rem;
padding: 2rem;
margin: auto;
}
// Paste these lines into website's console (Win/Linux: Ctrl + Shift + I / Mac: Cmd + Alt + I) | |
if(!!window.React || | |
!!document.querySelector('[data-reactroot], [data-reactid]') || | |
Array.from(document.querySelectorAll('*')).some(e => e._reactRootContainer !== undefined || Object.keys(e).some(k => k.startsWith('__reactContainer'))) | |
) | |
console.log('React.js'); | |
if(!!document.querySelector('script[id=__NEXT_DATA__]')) | |
console.log('Next.js'); |
// Demo at http://codepen.io/jondaiello/full/YWRbOx/ | |
/* This mixin is for generating CSS arrows on a box */ | |
@mixin box-arrow($arrowDirection, $arrowColor, $arrowSize: 10px) { | |
position: relative; | |
z-index: 10; | |
&::after { | |
content: ''; | |
width: 0; | |
height: 0; |
These functions use one or two 'base' colors to automatically generate a color range similar to Material Design's color ranges. Useful to quickly get different shades of your primary brand color or accent color, or to generate a set of neutrals between hand-selected light and dark colors.
$greens: make-shades(#cc99cc);
// (
// 100: #eeddee,
// 200: #ddbbdd,
const hoverTime = 400 | |
const fetchers = {} | |
const doc = document.implementation.createHTMLDocument('prefetch') | |
function fetchPage (url, success) { | |
const xhr = new XMLHttpRequest() | |
xhr.open('GET', url) | |
xhr.setRequestHeader('VND.PREFETCH', 'true') | |
xhr.setRequestHeader('Accept', 'text/html') | |
xhr.onreadystatechange = () => { |
var str = 'class ಠ_ಠ extends Array {constructor(j = "a", ...c) {const q = (({u: e}) => {return { [`s${c}`]: Symbol(j) };})({});super(j, q, ...c);}}' + | |
'new Promise((f) => {const a = function* (){return "\u{20BB7}".match(/./u)[0].length === 2 || true;};for (let vre of a()) {' + | |
'const [uw, as, he, re] = [new Set(), new WeakSet(), new Map(), new WeakMap()];break;}f(new Proxy({}, {get: (han, h) => h in han ? han[h] ' + | |
': "42".repeat(0o10)}));}).then(bi => new ಠ_ಠ(bi.rd));'; | |
try { | |
eval(str); | |
} catch(e) { | |
alert('Your browser does not support ES6!') | |
} |
<?php | |
/** | |
* Form Class | |
* | |
* Responsible for building forms | |
* | |
* @param array $elements renderable array containing form elements | |
* | |
* @return void |
# HTTP Status Cats | |
# Apache (htaccess) config originally created by @dave1010, | |
# rebuilt by Sarah Pierce (see modifications section) | |
# Licensed CC BY 2.0 | |
# Images CC BY 2.0, from GirlieMac's photostream: | |
# http://www.flickr.com/photos/girliemac/sets/72157628409467125/with/6508023065/ | |
# Usage: copy save this file as .htaccess or add it to your httpd.conf |
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
<?php | |
function route($pattern, $controller) | |
{ | |
return function($query) use($pattern, $controller) { | |
return (($matches = route_match($pattern, $query)) === false) ? | |
false : | |
function($registry) use($matches, $controller) { | |
return $controller($matches, $registry); | |
} | |
; |