brlodi

About

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.

Usage

$greens: make-shades(#cc99cc);
// (
//   100: #eeddee,
// 200: #ddbbdd,

JoeyBurzynski

58 bytes of CSS to look great nearly everywhere

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;
}

hopsoft

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 = () => {

moo-im-a-cow

<?php
$this->respond(
         '/?', function ($req, $res, $service, $app) {
		return "home page for SUBDOMAIN";
		}
    );

notjuliee

// ==UserScript==
// @name        RedaddCSS
// @namespace   com.digitalfishfun.nosteponcss
// @version     1
// @grant       none
// @include     https://reddit.com/r/*
// ==/UserScript==

const nosteponcss_instructions = `
USAGE: 

rambabusaravanan

// 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');

DaBs

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!')
}

munchicken

# 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

jondaiello

// 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;

allenmoore

CSS Modules lets you write and use simple class names rather than remembering and maintaining long unique class names for every component. CSS Modules mutates all of your classnames from each partials into new, completely unique classnames that will not conflict when they are bundled together into your main CSS file. Then, a JSON file is generated that maps the happy classnames from each file to the unique classname in the combined file. You load this map in PHP, and begin using the easy-to-remember classnames as you wish.