sindresorhus

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

1. Use ESM yourself. (preferred)
   Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
3. Stay on the existing version of the package until you can move to ESM.

addyosmani

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

MichaelCurrin

Jekyll - how to build a REST API

Serve your data as static JSON

How to make a read-only JSON REST API using Jekyll.

This doesn't need any Ruby plugins - you just use some built-in templating features in Jekyll 3 or 4.

You will end up with a single JSON file contains data for all pages on the site, and another JSON file of just posts. Alternatively, you can replace every HTML page and post with a JSON version.

ttscoff

#!/usr/bin/ruby
# encoding: utf-8
# Grab google web fonts and embed them as base64 data URIs
# <http://brettterpstra.com/2015/03/14/embedding-google-web-fonts/>
require 'base64'

if ARGV.length > 0
  input = ARGV
elsif STDIN.stat.size > 0
  input = STDIN.read.strip.split(/\n+/)

jonathantneal

Local SSL websites on macOS Sierra

These instructions will guide you through the process of setting up local, trusted websites on your own computer.

These instructions are intended to be used on macOS Sierra, but they have been known to work in El Capitan, Yosemite, Mavericks, and Mountain Lion.

NOTE: You may substitute the edit command for nano, vim, or whatever the editor of your choice is. Personally, I forward the edit command to Sublime Text:

alias edit="/Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl"

drewm

const puppeteer = require('puppeteer');
const imagemin = require('imagemin');
const imageminPngquant = require('imagemin-pngquant');

// Get the URL and the slug segment from it
const url = process.argv[2];
const segments = url.split('/');
const slug = segments[segments.length-2];

(async () => {

thbar

Using minitest to regression-test your Jekyll static site

I recently had to upgrade my blog, which involved changes such as:

• Replacing a sitemap plugin
• Upgrading from jekyll 2.5.3 to 3.8.4
• Upgrading from jekyll-assets 0.7.8 to 3.0.11
• (etc)

The upgrading process was not trivial, and some parts (e.g. RSS, sitemap, or twitter cards tags) are not immediately visible, so I decided to add unit tests on the generated content.

jacrook

//////////////////////////////////////////////////////////////
//  Font Variables (http://cssfontstack.com/)
//////////////////////////////////////////////////////////////

//
// Serif font-stacks
//

$baskerville-font-stack: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif !default;

hsablonniere

Conference bingo

Background

In many tech conferences, attendees are invited to rate the talk and/or the speaker from 1 to 5 stars. This type of ratings is interesting but has a few drawbacks.

The discussion started as a twitter thread with this french proposition.

kmelve

/* eslint-disable */
const fs = require('fs')
const sanityClient = require('@sanity/client')
const groq = require('groq')
const BlocksToMarkdown = require('@sanity/block-content-to-markdown')
const config = { projectId: '<YourID>', dataset: '<DatasetName>', useCdn: true }
const client = sanityClient(config)


const serializers = {