tomhodgins / step-1.js

Created August 6, 2020 14:50

Going from a basic HTML function to a tagged template string, to a custom templating solution in three easy steps!

	function html(string = '') {
	return document.implementation
	.createHTMLDocument()
	.createRange()
	.createContextualFragment(string)
	}

	/*

	A JavaScript function that takes a string of HTML syntax, parses it as HTML and returns a Document Fragment containing all parsed nodes.

tomhodgins / csson.md

Last active January 21, 2020 20:15

CSSON

CSS Object Notation

CSSON is a superset of JSON that is parsed according to CSS syntax.

Any JSON can be parsed as CSSON, though not every CSS Style Sheet can be parsed as CSSON.

Pros:

tomhodgins / filtering-articles-by-content.js

Created September 16, 2018 17:34

	const articles = [
	{
	title: 'How to make an example',
	body: 'This tutorials shows you how to make a nice example. First Write some text!'
	},
	{
	title: 'My super frustrating personal blog entry',
	body: 'Im feeling so happy and angry and sad and glad and hungry and tired.'
	}
	]

tomhodgins / match-height.js

Last active December 11, 2018 11:49

Match Height is a jQuery-free pure JavaScript plugin that will measure the height of a group of elements and assign each of them the highest value.

	/*

	# The Mad CSScientist's Matching Height Plugin
	written by Tommy Hodgins: http://codepen.io/tomhodgins/pen/pjmKNj

	## Usage
	This plugin will measure the height of a group of elements and assign each of them the highest value.

	To group elements together, assign each element a `data-col` attribute with the same value. This way, the plugin can calculate the heights of different groups of elements on the same page.

paulirish / bling.js

Last active September 13, 2025 12:13

bling dot js

	/* bling.js */
	window.$ = document.querySelector.bind(document);
	window.$$ = document.querySelectorAll.bind(document);
	Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
	NodeList.prototype.__proto__ = Array.prototype;
	NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

tomhodgins / micro-speedtest.php

Last active August 29, 2015 14:16

Responsive Speed Testing (optimized, with cross-origin header set via PHP)

	<?php header('X-Frame-Options: GOFORIT'); ?>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>SpeedTester</title>
	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, minimal-ui">
	<style type="text/css">
	* { box-sizing: border-box; -moz-box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; font-family: 'Source Sans Pro', 'Open Sans', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; cursor: default; }
	html { font-size: 10pt; background: #ccc; -webkit-text-size-adjust: 100%; }

tomhodgins / snippets.md

Last active August 8, 2022 14:27

Snippets.md is my most often used HTML, CSS and JavaScript snippets for front-end web development

This is a collection of my most often used lines of code, as well as a few other examples I want to have ready at a moment's notice. These snippets focus on building HTML from scratch, linking in good web fonts, and setting up responsive styles for your pages.

	<?php
	/**
	* Custom Loop Add to Cart.
	*
	* Template with quantity and ajax.
	*/

	if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly.

	global $product;

avantegarde

CSSON

Table of Contents