Skip to content

Instantly share code, notes, and snippets.

View nathansmith's full-sized avatar
😎
Ask me about free high fives!

Nathan Smith nathansmith

😎
Ask me about free high fives!
1.1k followers · 2 following
View GitHub Profile
@nathansmith
nathansmith / sleep.js
Last active July 20, 2023 15:58
Sleep function in JavaScript
// ===============
// Sleep function.
// ===============
const sleep = async (seconds = 0) => {
// Expose promise.
return new Promise((resolve) => {
// Set timer.
setTimeout(() => {
// Resolve promise.
@nathansmith
nathansmith / flex-layout-example.html
Last active February 24, 2022 17:48
Vertically centered layout example, using flexbox
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"
name="viewport"
/>
<title>Flex layout example</title>
<style>
@nathansmith
nathansmith / requestAnimationFrame.test.js
Created August 12, 2021 23:03
Example of how to test `requestAnimationFrame` with Jest.
import React from 'react';
import { render } from 'react-dom';
// Test subject.
import MyComponent from './MyComponent';
// ====================
// Describe `fileName`.
// ====================
@nathansmith
nathansmith / [1] json.d.ts
Last active April 12, 2024 18:24
Example of JSON in TypeScript.
export type IJson = IJsonArray | IJsonObject | boolean | number | null | string;
export type IJsonArray = IJson[];
/*
=====
NOTE:
=====
This is an `interface` because the reference
@nathansmith
nathansmith / _zip-code-regex.md
Last active April 29, 2021 21:20
Regex for valid zip codes.
@nathansmith
nathansmith / [1] _rkv-map-merge.scss
Last active August 14, 2020 15:40
How to create Sass feature flags
@function rkv-map-merge($maps...) {
$collection: ();
@each $map in $maps {
$collection: map-merge($collection, $map);
}
@return $collection;
}
@nathansmith
nathansmith / postinstall.config.js
Last active August 9, 2020 10:51
Script to move NPM files from "dist" to package root
const { existsSync } = require('fs');
const { execSync } = require('child_process');
// ================
// Check existence.
// ================
const distFolderExists = existsSync('dist');
const srcFolderExists = existsSync('src');
@nathansmith
nathansmith / jest.config.js
Last active July 22, 2020 03:05
Jest config for testing with Gatsby & SVG files.
module.exports = {
collectCoverageFrom: ['./src/**/*.js', '!./src/fixtures/**', '!./src/svg-icons/'],
moduleNameMapper: {
'\\.(css|scss)$': '<rootDir>/jest.css.js',
'\\.svg$': '<rootDir>/jest.svg.js',
},
testPathIgnorePatterns: ['/.cache/', '/public/'],
transform: {
'\\.jsx?$': '<rootDir>/jest.jsx.js',
},
@nathansmith
nathansmith / wordpress-rest-fetch.js
Last active July 21, 2020 19:41
Paste this into the console of any WordPress site, to see posts via Ajax.
// START: closure.
(async () => {
// Test URL.
const url = '/?rest_route=/wp/v2/posts&per_page=100';
// Example options.
const options = {
credentials: 'include',
headers: {
'content-type': 'application/json',
@nathansmith
nathansmith / getDomFallback.js
Last active June 9, 2020 21:38
Helper to mock DOM methods, for when an element might not exist.
/*
Helper to mock DOM methods, for
when an element might not exist.
*/
const getDomFallback = () => {
return {
// Props.
children: [],
className: '',
classList: {