The popular open-source contract for web professionals by Stuff & Nonsense
- Originally published: 23rd December 2008
- Revised date: March 15th 2016
- Original post
// 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) => { |
<!-- | |
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> |
# 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> |
<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> |
<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', { |
# 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) |
<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(); |