Skip to content

Instantly share code, notes, and snippets.

View alexmacarthur's full-sized avatar

Alex MacArthur alexmacarthur

285 followers · 89 following
View GitHub Profile
@alexmacarthur
alexmacarthur / expandTextNodes.js
Last active July 6, 2021 02:29
Expand Text Nodes - Split HTML Text Content into Individual Text Nodes for Each Character
// Unless the characters are individually inserted, the text content of HTML is grouped together in
// only as many text nodes are necessary to contain it. For example, the following markup will have only two text nodes:
//
// <span>first text node!<strong>second text node!</strong></span>
//
// Sometimes, however, you might want each character of text to exist as SEPARATE text nodes. This will do that. As a
// result, the afforementioned markup will contain 33 text nodes, rather than only two.
const expandTextNodes = (element) => {
[...element.childNodes].forEach((child) => {
@alexmacarthur
alexmacarthur / index.html
Last active November 23, 2020 13:56
Rudimentary slideToggle() in Vanilla JS
<!--
Rather than using the "max-height hack" to animate the opening of a box,
you can achieve virtually the same effect using an approach like below. It
doens't require writing any CSS itself, and handles dynamic contents well.
-->
<div class="box" id="box" style="height: 0;">
<div class="box-container">
<span>It's a box!</span>
</div>
@alexmacarthur
alexmacarthur / playground.zsh
Last active November 21, 2020 02:31
A ZSH function for generating a super-basic HTML playground with a running development server and JS file.
# Usage:
# `playground project-name`
#
# This command will create a directory containing an HTML file, a hooked-up JS file, and turn on a development server.
function playground {
mkdir $1 && cd $1
npm init --yes
echo "<!DOCTYPE html>
<html>
<head>
@alexmacarthur
alexmacarthur / index.html
Created September 9, 2020 00:03
Basic TypeIt Setup
<script src="https://cdn.jsdelivr.net/npm/typeit@7.0.4/dist/typeit.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
new TypeIt('#element', {
strings: ['This is my string!']
}).go();
});
</script>
@alexmacarthur
alexmacarthur / index.html
Last active March 3, 2020 20:33
Basic TypeIt
<html>
<head></head>
<body>
<span id="myElement"></span>
<!-- Insert this! -->
<script src="https://cdn.jsdelivr.net/npm/typeit@6.5.1/dist/typeit.min.js"></script>
<script>
window.addEventListener('load', function () {
new TypeIt('#myElement', {
@alexmacarthur
alexmacarthur / copy-last-commit.zsh
Last active October 17, 2020 07:11
Copies the last commit SHA to your clipboard.
# Copy the last commit in the current branch, or if passed as a parameter, a different branch.
#
# See the blog post documenting the surprisingly lengthly process of building this here:
# https://macarthur.me/posts/building-a-shell-function-to-copy-latest-commit-sha
function clc {
COLOR_GREEN="\033[0;32m"
COLOR_RESET="\033[0m"
[[ -z $1 ]] && BRANCH=$(git rev-parse --abbrev-ref HEAD) || BRANCH=$1
LAST_COMMIT_SHA=$(git rev-parse $BRANCH | tail -n 1)
@alexmacarthur
alexmacarthur / index.html
Last active January 31, 2020 03:01
Basic TypeIt Setup
<html>
<head></head>
<body>
<span id="element"></span>
<script src="https://cdn.jsdelivr.net/npm/typeit@6.1.1/dist/typeit.min.js"></script>
<script>
var instance = new TypeIt('#element', {
strings: ['This is my string!']
}).go();
@alexmacarthur
alexmacarthur / Contract Killer 3.md
Created January 10, 2018 00:24 — forked from malarkey/Contract Killer 3.md
The latest version of my ‘killer contract’ for web designers and developers

Contract Killer

The popular open-source contract for web professionals by Stuff & Nonsense

  • Originally published: 23rd December 2008
  • Revised date: March 15th 2016
  • Original post