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
@kettanaito
kettanaito / ElementQueryAPI.jsx
Last active October 19, 2019 00:27
Atomic Layout - Element Queries API
import React from 'react'
import { Box, useElementQuery } from 'atomic-layout'
// Initially, I thought of EQ as a standalone query-value binding
// with the React component being an application surface.
// The problem with this is that the props assignment becomes abstracted,
// and it's not easy to scan which props are assigned to a component,
// and which comes from the EQ declared eslewhere.
const InitialIdea = () => {
const styles = useElementQuery(
@amcgregor
amcgregor / 404.html
Last active September 14, 2023 06:55
My own HTML5 boilerplate sans most of the code. Because there's too much Romulus-be-damned boilerplate, and people fail to realize almost none of it is in any way needed. For more details than you probably wanted, ref: https://codepen.io/tomhodgins/post/code-that-you-just-never-ever-need-to-write formerly https://tomhodgins.hashnode.dev/code-tha…
<!DOCTYPE html><html lang=en>
<title>Page Not Found</title>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<h1>Page Not Found</h1>
<p>Sorry, but the page you were trying to view does not exist.</p>
@bkardell
bkardell / camel-to-kebab.js
Last active May 6, 2024 05:08 — forked from tomhodgins/camel-to-kebab.js
let _str = (function(){
const tag = document.createElement('span')
return {
propToAttr: (string) {
tag.dataset[string] = true
return tag.attributes[0].name.split(/^data-/)[1]
},
attrToProp(string) {
tag.setAttribute(`data-${string}`, true)
return Object.entries(tag.dataset)[0][0]
@thykka
thykka / jsfiddle-annoyances.user.js
Last active June 24, 2019 09:03
jsfiddle annoyaces userscript
// ==UserScript==
// @name jsfiddle annoyances
// @namespace https://gist.githubusercontent.com/thykka/d130a68229dc9bda81e6f11f7388d52d/
// @version 0.0.3
// @description Kill the anti-features!
// @author Thykka
// @match https://jsfiddle.net/*
// @updateURL https://gist.githubusercontent.com/thykka/d130a68229dc9bda81e6f11f7388d52d/raw
// @downloadURL https://gist.githubusercontent.com/thykka/d130a68229dc9bda81e6f11f7388d52d/raw
// @grant none
@AndresInSpace
AndresInSpace / insta-scrap-open-image.bookmarklet.js
Last active June 20, 2019 16:33
For Designers: Scrap IG Image using Bookmarklet JS+Alerts/Prompts
//add this as the URL of your bookmark, then just click the bookmark to trigger the script when you are on an IG page with an image selected.
javascript:(function(){var dialog = document.querySelector('.vCf6V'); var standAlone = document.querySelector('._97aPb'); if(!dialog && standAlone){ dialog = standAlone; } if(!dialog && !standAlone){ alert('Please open a IG image to scrape it.'); } else { dialog.querySelectorAll('.FFVAD').forEach(function(e){ var list = e.srcset.split(',').reverse(); list.forEach(function(source){ var sizeimg = source.split(' '); prompt('The image size is:'+sizeimg[1],sizeimg[0]) }) }) }})();
//alternative; opens largest image in new tab automatically
javascript:(function(){var dialog = document.querySelector('.vCf6V'); var standAlone = document.querySelector('._97aPb'); if(!dialog && standAlone){ dialog = standAlone; } if(!dialog && !standAlone){ alert('Please open a IG image to scrape it.'); } else { dialog.querySelectorAll('.FFVAD').forEach(function(e){ var list = e.srcset.split(','
@gmemstr
gmemstr / colours.go
Created March 23, 2019 20:49
Generates all possible CSS hex colours
package main
import (
"encoding/hex"
"os"
"strconv"
)
func main() {
f, err := os.OpenFile("colours.css", os.O_WRONLY, 0600)
@funkybob
funkybob / gist:5bceb85ddef4db3fe2bebbc69c69829a
Last active February 3, 2019 22:01
gilbert - an overview
A gilbert project is a directory with 5 sub directories:
- static/
- pages/
- content/
- templates/
- dest/
Upon calling render, the site will:
- create an index of files in static; only referenced files will be copied to the destination
@jahan-addison
jahan-addison / b.ebnf
Last active September 5, 2019 22:00
B Language LALR(1) EBNF-like grammar
/////////////////////////////////////////////////////////
// B Language Grammar
// Author: Jahan Addison
// LALR(1) EBNF-like Grammar
// Placed under CC0 1.0
/////////////////////////////////////////////////////////
program : ( definition ) *
definition : function_definition
@tomduncalf
tomduncalf / interactionObserver.ts
Last active January 17, 2019 17:01
React Interaction Observer scroll
interface IState {
sticky: boolean;
}
export class HeaderBar extends React.Component<{}, IState> {
sentinelRef: React.RefObject<HTMLDivElement>;
observer: IntersectionObserver;
state = { sticky: false };
@thiagorb
thiagorb / tagged_template_strings.js
Created December 19, 2018 16:14
Tagged template strings example
const wrapWithQuotes = (parts, ...values) => {
let result = parts[0];
values.forEach((value, i) => {
result += `"${value}"` + parts[i + 1];
});
return result;
};