Skip to content

Instantly share code, notes, and snippets.

View jonathantneal's full-sized avatar

Jonathan Neal jonathantneal

1.4k followers · 3 following
View GitHub Profile
@jonathantneal
jonathantneal / README.md
Last active April 19, 2024 11:51
SASS @font-face mixin

Font Face

A mixin for writing @font-face rules in SASS.

Usage

Create a font face rule. Embedded OpenType, WOFF2, WOFF, TrueType, and SVG files are automatically sourced.

@include font-face(Samplino, fonts/Samplino);
@jonathantneal
jonathantneal / harlem-shake.js
Last active April 5, 2024 12:04 — forked from devn/harlem-shake.js
javascript: (function () {
function c() {
var e = document.createElement("link");
e.setAttribute("type", "text/css");
e.setAttribute("rel", "stylesheet");
e.setAttribute("href", f);
e.setAttribute("class", l);
document.body.appendChild(e)
}
function h() {
@jonathantneal
jonathantneal / String.prototype.encodeHTMLEntities.js
Last active March 27, 2024 00:30
String.prototype.encodeHTMLEntities, Encoding HTML Entities with JavaScript
// String.prototype.encodeHTMLEntities
(function () {
'use strict';
var
data = '34quot38amp39apos60lt62gt160nbsp161iexcl162cent163pound164curren165yen166brvbar167sect168uml169copy170ordf171laquo172not173shy174reg175macr176deg177plusmn178sup2179sup3180acute181micro182para183middot184cedil185sup1186ordm187raquo188frac14189frac12190frac34191iquest192Agrave193Aacute194Acirc195Atilde196Auml197Aring198AElig199Ccedil200Egrave201Eacute202Ecirc203Euml204Igrave205Iacute206Icirc207Iuml208ETH209Ntilde210Ograve211Oacute212Ocirc213Otilde214Ouml215times216Oslash217Ugrave218Uacute219Ucirc220Uuml221Yacute222THORN223szlig224agrave225aacute226acirc227atilde228auml229aring230aelig231ccedil232egrave233eacute234ecirc235euml236igrave237iacute238icirc239iuml240eth241ntilde242ograve243oacute244ocirc245otilde246ouml247divide248oslash249ugrave250uacute251ucirc252uuml253yacute254thorn255yuml402fnof913Alpha914Beta915Gamma916Delta917Epsilon918Zeta919Eta920Theta921Iota922Kappa923Lambda924Mu925Nu926Xi927Omicron928Pi929Rho931Sigma932Tau9
@jonathantneal
jonathantneal / README.md
Last active March 19, 2024 23:31
Local SSL websites on macOS Sierra

Local SSL websites on macOS Sierra

These instructions will guide you through the process of setting up local, trusted websites on your own computer.

These instructions are intended to be used on macOS Sierra, but they have been known to work in El Capitan, Yosemite, Mavericks, and Mountain Lion.

NOTE: You may substitute the edit command for nano, vim, or whatever the editor of your choice is. Personally, I forward the edit command to Sublime Text:

alias edit="/Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl"
@jonathantneal
jonathantneal / basic-html-outline.html
Created November 2, 2012 06:50
Basic HTML Outline
<!doctype html>
<html dir="[direction]" lang="[language]" class="[class names]">
<head>
[meta elements]
[link elements]
[style elements]
[script elements]
@jonathantneal
jonathantneal / README.md
Last active February 8, 2024 10:53
Nearest Normal Ratio Calculator

Nearest Normal Aspect Ratio

This function returns the nearest aspect ratio of a width and height within a limited range of possible aspect ratios.

In other words, while 649x360 technically has an aspect ratio of 649:360, it’s often useful to know that the nearest normal aspect ratio is actually 9:5 (648x360).

nearestNormalAspectRatio(width, height, [side], [maxWidth], [maxHeight])
@jonathantneal
jonathantneal / ui-monospace.css
Created July 31, 2022 23:16
CSS ui-monospace polyfill (448 bytes minified, 182 gzipped)
/* These rules are ignored when ui-monospace is supported. */
@font-face { font-family: ui-monospace; src:
/* MacOS (El Capitan +) */
local(Menlo-Regular),
/* Windows (11 +) */
local(CascadiaCode-Regular),
/* Windows (Vista +) */
local(Consolas),
/* Android */
local(RobotoMono-Regular),
@jonathantneal
jonathantneal / recovery.sh
Last active November 10, 2023 01:01
Create or update macOS Big Sur (or Catalina, or Mojave) Recovery Partition Without Reinstalling
#!/bin/sh
# Set the macOS installer path as a variable
MACOS_INSTALLER="/Applications/$(ls /Applications | grep "Install macOS")"
MOUNT_POINT="$MACOS_INSTALLER/Contents/SharedSupport"
echo "macOS installer is \"$MACOS_INSTALLER\""
# Set the target disk as a variable
TARGET=$(diskutil info "$(bless --info --getBoot)" | awk -F':' '/Volume Name/ { print $2 }' | sed -e 's/^[[:space:]]*//')
echo "Target disk is \"$TARGET\""
@jonathantneal
jonathantneal / README.md
Last active November 9, 2023 21:10
createElement.js // a 300 byte DOM Element creator

createElement.js

createElement.js lets document.createElement use CSS selectors.

This is a pretty useful library for building out DOM elements. The whole thing runs on one regex and a for loop, so it’s plenty fast. The script is 300 bytes when compressed and gzipped. For 524 bytes (advanced), it includes nesting support and can generate entire DOM hierarchies, including text nodes.

Usage

document.createElement(); // generates <div />
@jonathantneal
jonathantneal / README.md
Last active November 5, 2023 05:42
Practical ARIA Tabs: Creating fully accessible tabs

Practical ARIA Tabs

This is a small guide to marking up fully accessible tabs. Consider using PostHTML ARIA Tabs as a practical solution.

The Rules

  1. Add tablist role to the <ul> to indicate it contains tabs.
  2. Add presentation role to each <li> to bypass its list item state.
  3. Add tab role to each <a> to incidate it is an actual tab.
  4. Add href and aria-controls to each <a> to reference its tab panel.