Skip to content

Instantly share code, notes, and snippets.

Avatar
😎
Ask me about free high fives!

Nathan Smith nathansmith

😎
Ask me about free high fives!
View GitHub Profile
@nathansmith
nathansmith / [1] _rkv-map-merge.scss
Last active Aug 14, 2020
How to create Sass feature flags
View [1] _rkv-map-merge.scss
@function rkv-map-merge($maps...) {
$collection: ();
@each $map in $maps {
$collection: map-merge($collection, $map);
}
@return $collection;
}
@nathansmith
nathansmith / postinstall.config.js
Last active Aug 9, 2020
Script to move NPM files from "dist" to package root
View postinstall.config.js
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 Jul 22, 2020
Jest config for testing with Gatsby & SVG files.
View jest.config.js
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 Jul 21, 2020
Paste this into the console of any WordPress site, to see posts via Ajax.
View wordpress-rest-fetch.js
// 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 Jun 9, 2020
Helper to mock DOM methods, for when an element might not exist.
View getDomFallback.js
/*
Helper to mock DOM methods, for
when an element might not exist.
*/
const getDomFallback = () => {
return {
// Props.
children: [],
className: '',
classList: {
View plaintext_example.md
@nathansmith
nathansmith / _wp-block-columns.scss
Created May 28, 2020
Sass version of the WordPress column block.
View _wp-block-columns.scss
.wp-block-columns {
display: flex;
margin-bottom: $gutter;
flex-wrap: wrap;
}
@media (min-width: 782px) {
.wp-block-columns {
flex-wrap: nowrap;
}
@nathansmith
nathansmith / _wp-block-buttons.scss
Last active May 23, 2020
WordPress updates inject new/different markup and CSS. This attempts to "fix" it.
View _wp-block-buttons.scss
div.wp-block-buttons {
/*
=====
NOTE:
=====
I know this code looks a bit gross.
But that is more of a reflection upon
the WordPress block styles themselves.
@nathansmith
nathansmith / flex-row-reverse.css
Last active May 13, 2020
Example of auto layout flexbox, with reverse order
View flex-row-reverse.css
.flex-parent {
align-items: center;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
max-width: 1200px;
}
@nathansmith
nathansmith / AppLayout.js
Last active Apr 29, 2020
Spreading specific "other" props
View AppLayout.js
import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
// UI.
import SkipLink from '../components/SkipLink';
// Layout.
import AppLayoutFooter from './AppLayoutFooter';
import AppLayoutHeader from './AppLayoutHeader';
You can’t perform that action at this time.