jeromecoupe

{
  "name": "sass-npm-scripts",
  "version": "1.0.0",
  "author": "Jérôme Coupé",
  "description": "Minimal Sass NPM scripts",
  "main": "index.js",
  "scripts": {
    "build:styles": "sass --style=compressed src/scss/:dist/css/",
    "watch:styles": "onchange src/scss/**/*.scss -- npm run build:styles",
    "watch": "npm-run-all --parallel watch:**",

mirisuzanne

/* 
  This is not meant to be a final CSSWG proposal, 
  but reflects my immediate thoughts after reading
  [David Baron's](https://github.com/dbaron/container-queries-implementability) promising draft.
  This gist was created to demonstrate my idea for removing selectors from his query syntax.

  More of my thoughts & notes are online at css.oddbird.net/rwd/
*/

main,

adactio

// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
// http://creativecommons.org/publicdomain/zero/1.0/

/*
This function takes two arguments:
element: a reference to a DOM node in the document e.g. a button.
feedbackContent: a string of text or HTML.

An example of usage would be:
document.querySelector('button').addEventListener('click', function() {

zachleat

---------------------------------------------------------
Eleventy Benchmark (Node v14.9.0, 1000 templates each)
---------------------------------------------------------
Eleventy 0.10.0
---------------------------------------------------------
liquid: ... 3 runs
* Median: 1.02 seconds
* Median per template: 1 ms

njk: ... 3 runs

RReverser

async function supportsImgType(type) {
  // Create
  //
  // <picture>
  //   <source srcset="data:,x" type="{type}" />
  //   <img />
  // </picture>
  //
  // (where "data:,x" is just a minimal URL that is valid but doesn't trigger network)
  let img = document.createElement('img');

e-desouza

--[[
	Copyright 2020 wizard
	This program is free software: you can redistribute it and/or modify
	it under the terms of the GNU General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.
	This program is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU General Public License for more details.

scottjehl

var list = [];
document.querySelectorAll("body *")
   .forEach(function(elem){ 
    if(elem.getBoundingClientRect().width > document.body.getBoundingClientRect().width){ 
      list.push(elem.outerHTML.split('>')[0] + '>'); 
    } 
}); 
confirm( "these elements are wider than the viewport:\n\n " + list.join("\n") )

zachleat

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

anniesullie

/**
 * A bookmarklet for viewing the largest contentful paint in a page.
 * Will show each LCP after the bookmarklet is clicked.
 *
 * To install:
 * 1. Copy the code starting from the line beginning `javascript:`
 * 2. Add a new bookmark in Chrome, and paste the code in as the URL.
 **/
javascript:(function(){
  try {

tigt

const { execSync } = require('child_process')
const { createHash } = require('crypto')
const invertColor = require('invert-color')

const branchName = execSync('git rev-parse --abbrev-ref HEAD')
const hash = createHash('sha256')
hash.update(branchName)
const color = '#' + hash.digest().toString('hex').substring(0, 6)
const invertedColor = invertColor(color, true)