Snugug

// Create an element with attributes, and optionally append children to it
// Public Domain licensed, if you're interested.
function e(
  elm: string,
  attrs: Record<string, string> = {},
  ...children: (string | Node)[]
): Node {
  // Create element and add relevant attributes
  const elem = document.createElement(elm);
  for (const [k, v] of Object.entries(attrs)) {

Snugug

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.7)
// ----

$zoo: ("puma": black, "sea-slug": green, "egret": brown, "salamander": red);

@each $animal, $color in $zoo {
    .#{$animal}-icon {
        background-color: $color;

Snugug

Flexbox 1 column to 2 columns, no media queries

A Pen by Snugug on CodePen.

License.

Snugug

What if controlling your media queries was as easy as adding on to a Sass list? What if I told you it now is?

This snippet comes from a modified version of mixins in the Aura Responsive Framework and came from me hijacking the respond-to mixin namespace but still wanting to use it for custom media queries. It's a little ugly and requires Sass 3.2+ (for now, (sudo) gem install sass --pre), but it works a charm.

There are two fairly mundane caveats to this method. First, every media query needs to be named. Second, every media query needs a size and assumes min-width and screen. If you want to change min-width, simply add your operator as another option, but if you want to change screen, you need to also include your operator even if you want it to be min-width.

Also, I haven't built in warnings yet for when you do bad things, so bear that in mind.

Without further adue, tada.

Snugug

var marked = require('marked'),
    fs = require('fs'),
    path = require('path'),
    URI = require('URIjs'),
    renderer = new marked.Renderer(),
    file = fs.readFileSync('./foo.md', 'utf8');
   
// Set Marked's rendereer to the custom renderer
// optional `localVideoPath` option will be used to to find fallback videos for `.webm`. Defaults to ''
marked.setOptions({

Snugug

/**
  * Bullshit
**/
[id*="social"],
[class*="social"],
[id*="addthis"],
[class*="addthis"],
[id*="share"],
[class*="share"],
[id*="yodr_net"] {

Snugug

server() {
  php -S localhost:"$*";
}

Snugug

//////////////////////////////
// Generalized Media Query Mixin
//
// Requires Sass 3.2+
// Until released:
// (sudo) gem install sass --pre
//////////////////////////////
@mixin media-query($value, $operator: 'min-width', $query: 'screen') {
  @media #{$query} and (#{$operator}: #{$value}) {
    @content;

Snugug

////////////////////////
// SCSS
////////////////////////
// Define color variables
$red: #e10000;
$orange: #e18700;
$yellow: #e1e100;
$green: #00b400;
$blue: #1e00b4;
$purple: #7800b4;

Snugug

function getExt(filename, opts) {
  if (!opts) opts = {};
  if (!filename) return "";
  var ext = (/[^./\\]*$/.exec(filename) || [""])[0];
  return opts.preserveCase ? ext : ext.toLowerCase();
};

async function typeMap () {
  const db = await fetch('https://unpkg.com/mime-db/db.json').then(t => t.json());