Skip to content

Instantly share code, notes, and snippets.

View tomhodgins's full-sized avatar
😍
Writing CSS

Tommy Hodgins tomhodgins

😍
Writing CSS
View GitHub Profile
@cuth
cuth / debug-scroll.md
Last active February 7, 2024 18:17
Find the elements that are causing a horizontal scroll. Based on http://css-tricks.com/findingfixing-unintended-body-overflow/

Debug Horizontal Scroll

(function (d) {
    var w = d.documentElement.offsetWidth,
        t = d.createTreeWalker(d.body, NodeFilter.SHOW_ELEMENT),
        b;
    while (t.nextNode()) {
        b = t.currentNode.getBoundingClientRect();
 if (b.right > w || b.left < 0) {
@addyosmani
addyosmani / README.md
Last active April 2, 2024 20:18 — forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

@tomhodgins
tomhodgins / myWidget.js
Last active August 29, 2015 14:15
Self Executing JavaScript Widget (HTML + CSS): just place a link to this script in your HTML where you want the content to appear, like <script src="myWidget.js"></script>
(function() {
var myWidget = document.createElement('section'),
widgetStyles = document.createElement('style'),
tag = document.querySelectorAll('[src*="myWidget"]')[0];
myWidget.innerHTML = '\
<!-- Add your HTML here, with line-breaks escaped by a "\" backslash character. -->\
<!-- (Don\'t forget: you can escape any character, like quotes, as well -->\
Hello\
';
widgetStyles.innerHTML = '\
@tomhodgins
tomhodgins / myWidget.js
Last active August 29, 2015 14:15
Self Executing JavaScript Widget (HTML + EQCSS): just place a link to this script in your HTML where you want the content to appear, like <script src="myWidget.js"></script>
(function() {
if (typeof EQCSS === 'undefined') {
var eq = document.createElement('script');
eq.src = 'http://elementqueries.com/EQCSS.js';
document.body.appendChild(eq);
};
var myWidget = document.createElement('section'),
widgetStyles = document.createElement('script'),
tag = document.querySelectorAll('[src*=\'myWidget\']')[0];
myWidget.innerHTML = '\
@tomhodgins
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
@tomhodgins
tomhodgins / data-personas.php
Last active August 29, 2015 14:17
Adding data-personas support to WordPres
data-personas
data-default="<?php $dd = get_field_escaped($field); echo $dd; ?>"
<?php
$field = 'YourTagGoesHere';
if(get_field($field . '_mm')) {
$mm = get_field_escaped($field . '_mm'); echo 'data-persona-marketing-maggie="' . $mm . '" ';
} else {
$mm = get_field_escaped($field); echo 'data-persona-marketing-maggie="' . $mm . '" ';
}
if(get_field($field . '_tt')) {
@lolzballs
lolzballs / HelloWorld.java
Created March 22, 2015 00:21
Hello World Enterprise Edition
import java.io.FileDescriptor;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.io.PrintStream;
public class HelloWorld{
private static HelloWorld instance;
public static void main(String[] args){
instantiateHelloWorldMainClassAndRun();
@paulirish
paulirish / bling.js
Last active May 1, 2024 19:56
bling dot js
/* bling.js */
window.$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function (name, fn) {
this.addEventListener(name, fn);
}
NodeList.prototype.__proto__ = Array.prototype;
@joepie91
joepie91 / .js
Last active September 30, 2016 15:23
Braces for conditionals
// The wrong way:
if (something === true)
doAThing();
// Requirements change, now you need to do two things:
if (something === true)
doAThing();
doASecondThing();
@tomhodgins
tomhodgins / hide-the-side.js
Created July 3, 2015 01:57
Browser Script: Adds an invisible checkbox to the top-right corner of Reddit.com that hides the sidebar when checked. You can add this code to extstyler.js in Extstyler to use this script in Chrome https://github.com/tomhodgins/extstyler
// Add this code to Reddit.com
/* Hide the Side */
if (document.getElementsByTagName('html')[0].classList.contains('reddit')) {
var input = document.createElement('input'),
inputCSS = document.createElement('style'),
inputJS = document.createElement('script');
input.id = 'hTS';
input.setAttribute('type','checkbox');
input.setAttribute('onclick','hideTheSide()');