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

Flexbox 1 column to 2 columns, no media queries

A Pen by Snugug on CodePen.

License.

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());

Snugug

import { validate, IsInt, IsEmail, IsIn, IsNotEmpty } from 'class-validator';
import { Provider } from './provider';

export class InstanceConfig {
  [key:string]: number | string;

  @IsEmail()
  @IsNotEmpty()
  email: string;

Snugug

Lazy Load Images in 40 Lines of Code

Behold! Intersection Observers at work!

Usage

First, update your source code to move your image sources in to data attributes.

Snugug

(function () {
  'use strict';
  
  var detect = function detect(property, value) {
    if (window.CSS && window.CSS.supports) {
      return window.CSS.supports(property, value);
    }
    else {
      return false;
    }

Snugug

<div id="container">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
  <div class="fourth">Fourth</div>
</div>

Snugug

// ----
// libsass (v3.2.5)
// ----

@import "breakpoint";
@import "toolkit";
@import "singularitygs";

@include sgs-change('debug', true);
@include sgs-change('mobile first', true);

Snugug

<div class="grid-4">
  <h3>Item 1</h3>
</div>
<div class="grid-4">
  <h3>Item 2</h3>
</div>
<div class="grid-4">
  <h3>Item 3</h3>
</div>
<div class="grid-4">

Snugug

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

$a: 'test';
$b: test;
.foo {
  content: is-quoted($a); // true
  content: is-quoted($b); // false