Skip to content

Instantly share code, notes, and snippets.

View tomhodgins's full-sized avatar
😍
Writing CSS

Tommy Hodgins tomhodgins

😍
Writing CSS
347 followers · 294 following
View GitHub Profile
@tomhodgins
tomhodgins / browser-console-one-liners.js
Last active May 6, 2024 05:08
/* JSON XPath search */ (await import('https://unpkg.com/espath')).default(window.dataLayer, '//string')
/* cookie to object */ Object.fromEntries(document.cookie.split('; ').map(entry => entry.split('=')))
/* cookie to object */ (await import('https://v2.crocdn.com/_plugins/cookie-to-object.js')).default()
/* css elements search */ document.querySelectorAll ('*')
/* xpath element search */ (await import('https://unpkg.com/queryxpath/queryxpath.es.js')).queryXPathAll ('//*')
@tomhodgins
tomhodgins / camel-to-kebab.js
Last active May 6, 2024 05:08
function camelToKebab(string) {
const tag = document.createElement('span')
tag.dataset[string] = true
return tag.attributes[0].name.split(/^data-/)[1]
}
@tomhodgins
tomhodgins / resume.html
Last active May 2, 2024 21:13
HTML Résumé, so I can maintain it better. View online at http://tomhodgins.com/resume.html
<!doctype html>
<html lang=en>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Tommy Hodgins | UX Developer Canada-Based UI Designer | Tommy Hodgins</title>
<meta name=description content="Tommy Hodgins is a Canadian front-end web developer who researches and explores advanced responsive layout techniques in CSS.">
<meta name=keywords content="front-end web developer, front-end web designer, front-end developer, front-end designer, toronto, CSS expert, HTML expert, responsive expert, front-end expert, ui designer, ux designer, user experience designer, user interface designer, responsive web design, web developer, remote web developer, freelance designer, contract designer, Toronto freelance, web design Toronto, web development Toronto, element queries, EQCSS, element queries, container queries">
<meta property=og:title content="Tommy Hodgins | Toronto Based Front-end Web Developer">
@tomhodgins
tomhodgins / abusing-processing-instructions-for-self-closing-elements-in-html.js
Created April 3, 2024 23:54
function processSelfClosingTags(string = '') {
const dom = document.implementation.createHTMLDocument().createRange().createContextualFragment(string)
function consumeNode(node = document.createElement('span')) {
if (
node.nodeType === 8
&& node.textContent.match(/^\?.+\?$/)
) {
node.replaceWith(
document.createElement(
@tomhodgins
tomhodgins / sketch.html
Last active January 9, 2024 15:16
Draw <svg> inside the browser! On mousedown and touchstart it begins drawing a line, drops nodes as you mousemove or touchmove, and then finishes the line where you mouseup or touchend. It also has support for line width and color, exporting the current drawing by email as well as downloading the drawing as an svg file.You can also import SVGs. h…
<!DOCTYPE html>
<html manifest=sketch.manifest>
<head>
<meta charset=utf-8>
<title>Sketch</title>
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black>
<meta name=viewport content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, minimal-ui">
<link href="http://staticresource.com/formal.css" rel=stylesheet type=text/css>
<script>eval(unescape(escape('♶♡♲☠♩☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♣♡♮♶♡♳☧☩☬♣☽♩☮♧♥♴♃♯♮♴♥♸♴☨☧☲♤☧☩☬♦☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♬♩♮♫☧☩☬♭☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♬♩♮♫☧☩☻♩☮♷♩♤♴♨☽☲☰☰☻♩☮♨♥♩♧♨♴☽☲☰☰☻♣☮♦♩♬♬♓♴♹♬♥☽☧♬♩♧♨♴♧♯♬♤♥♮♲♯♤♹♥♬♬♯♷☧☻♣☮♢♥♧♩♮♐♡♴♨☨☩☻♣☮♭♯♶♥♔♯☨☱☰☬☰☩☻♣☮♬♩♮♥♔♯☨☱☹☰☬☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☲☰☰☬☰☬☲☰☰☬☱☰☩☻♣☮♬♩♮♥♔♯☨☲☰☰☬☱☹☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☲☰☰☬☲☰☰☬☱☹☰☬☲☰☰☩☻♣☮♬♩♮♥♔♯☨☱☰☬☲☰☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☰☬☲☰☰☬☰☬☱☹☰☩☻♣☮♬♩♮♥♔♯☨☰☬☱☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☰☬☰☬☱☰☬☰☩☻♣☮♣♬♯♳♥♐♡♴♨☨☩☻♣☮♦♩♬♬☨☩☻♣☮♳♴♲♯♫♥♓♴♹♬♥☽☧♲♥♤☧☻♣☮♬♩♮♥♗♩♤♴♨☽☳☰☻♣☮♬♩♮♥♃♡♰☽☧♲♯♵♮♤☧☻♣☮♢♥♧♩♮♐♡♴♨☨☩☻♣☮♭♯♶♥♔♯☨☴☵☬☱☳☰☩☻♣☮♢♥♺♩♥♲♃♵♲♶♥♔♯☨☴☵☬☱☳☰☬☷☰☬☲☰☰☬☱☰☵☬☱☳☰☩☻♣☮♢♥♺♩♥♲♃♵♲♶♥♔♯☨☱☰☵☬☱☳☰☬☱☴☰☬☵☰☬
@tomhodgins
tomhodgins / import-es-module-from-data-uri.js
Created October 27, 2020 20:29
(async () => console.log(
(await import(`data:text/javascript,export default "Is this a safe way to eval?"`)).default
))()
@tomhodgins
tomhodgins / config.fish
Last active February 11, 2023 14:13
This is a proof of concept, eventually I want a CLI I can use like `tasq add Buy groceries` or `tasq tag 15 work`, or `tasq check 24`; GIF: https://imgur.com/a/lkh5c9w
# tasq
function tasq
cd ~/Code/tasq/
node index.js (echo $argv)
end
@tomhodgins
tomhodgins / demo.html
Last active January 16, 2023 20:35
Live demo ➽ https://staticresource.com/merry-cssmas-bundle/demo.html
<!DOCTYPE html>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<title>#merryCSSmas bundle</title>
<style>
* {
box-sizing: border-box;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
@tomhodgins
tomhodgins / css-overlay.js
Created October 13, 2020 13:03
// ==UserScript==
// @name CSS Overlay 2 | Ace Edition
// @namespace overlay
// @version 1.0
// @description For writing CSS stylesheets
// @author Tommy Hodgins
// @match *://*/*
// ==/UserScript==
if (document.querySelector('link[href^="https://fonts.googleapis.com/css?family="][href*="IBM+Plex+Mono"]') === null) {
@tomhodgins
tomhodgins / vertically-responsive.html
Last active September 19, 2022 01:49
Vertically Responsive sidebar playlist widget using jQuery and CSS to check the browser height and automatically shorten the list according to how much screen space is available
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Bootstrap: with responsive, no icons -->
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<!-- FontAwesome -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">