Skip to content

Instantly share code, notes, and snippets.

Working from home

Eric Clemmons ericclemmons

Working from home
View GitHub Profile
ericclemmons /
Last active Nov 17, 2022
HTML5 <details> in GitHub

Using <details> in GitHub

Suppose you're opening an issue and there's a lot noisey logs that may be useful.

Rather than wrecking readability, wrap it in a <details> tag!

 Summary Goes Here
ericclemmons / functions.php
Last active Aug 2, 2022
Auto-activate WordPress Plugins
View functions.php
// Add to: path/to/wp-content/wp-themes/your-theme/functions.php
* Activate required plugins
include_once ( ABSPATH . 'wp-admin/includes/plugin.php' );
ericclemmons / bump_version
Created Nov 1, 2010
Bash script to merge, tag, & push the "develop" branch
View bump_version
#!/usr/bin/env bash
echo "Checking out master branch"
git checkout master
git pull origin master
git log master..develop
read -p "Review your changes..."
echo "Merging develop branch"
ericclemmons / [[...slugs]].tsx
Created Jul 12, 2021
Non-FB-scale MDX with shared layout/nav
View [[...slugs]].tsx
import Layout from "@/components/Layout";
import { getContentPaths } from "@/utils/getContentPaths";
import { getPageFromSlug } from "@/utils/getPageFromSlug";
import { GetStaticProps } from "next";
import dynamic from "next/dynamic";
import { renderToStaticMarkup } from "react-dom/server";
export default function ContentPage({ __html, frontmatter, pages, slug }) {
const Content = dynamic(() => import(`../content/${slug}/index.mdx`), {
loading() {
ericclemmons /
Created Aug 6, 2014 — forked from jookyboi/
CSS libraries and guides to bring some order to the chaos.


  • 960 Grid System - An effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
  • Compass - Open source CSS Authoring Framework.
  • Bootstrap - Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
  • Font Awesome - The iconic font designed for Bootstrap.
  • Zurb Foundation - Framework for writing responsive web sites.
  • SASS - CSS extension language which allows variables, mixins and rules nesting.
  • Skeleton - Boilerplate for responsive, mobile-friendly development.


View webpack.config.base.js
var _ = require("lodash");
var path = require("path");
var env = process.env.NODE_ENV || "development";
var debug = ["development", "test"].indexOf(env) !== -1;
var defaults = {
cache: debug,
debug: debug,
View machine.js
// This state machine is trying to figure out how to allow a user to call `await Auth.getUser()` multiple times throughout their app and get the current user once it resolves.
// Utility to resolve a Promise externally
const defer = () => {
let res,rej;
const promise = new Promise((resolve, reject) => {
res = resolve;
rej = reject;
ericclemmons / responsive-badge.html
Created May 28, 2019
Responsive indicators for TailwindCSS
View responsive-badge.html
<link rel="stylesheet" href="">
<!-- Responsive indicators! -->
<div class="fixed top-0 right-0 z-50 bg-pink-500 text-white shadow-md px-2 rounded-bl font-mono">
<span class="sm:hidden">default</span>
<span class="hidden sm:inline md:hidden">sm</span>
<span class="hidden md:inline lg:hidden">md</span>
<span class="hidden lg:inline xl:hidden">lg</span>
<span class="hidden xl:inline">xl</span>
ericclemmons /
Created Apr 15, 2018
Hot take on Zach Silveira's Gutenblock Demo!
ericclemmons / SortSelect.jquery.js
Created Feb 15, 2010
Sort a SELECT box's OPTIONs alphabetically
View SortSelect.jquery.js
var SortSelect = function(select) {
var options = jQuery.makeArray(select.find('option'));
var sorted = options.sort(function(a, b) {
return (jQuery(a).text() > jQuery(b).text()) ? 1 : -1;
.attr('selectedIndex', 0);