Skip to content

Instantly share code, notes, and snippets.

😍
Writing CSS

Tommy Hodgins tomhodgins

😍
Writing CSS
Block or report user

Report or block tomhodgins

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@amcgregor
amcgregor / 404.html
Last active Sep 26, 2019
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://tomhodgins.hashnode.dev/code-that-you-just-never-ever-need-to-write-cjpblnfff00km0ys149kbttbg
View 404.html
<!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>
View 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 Jun 24, 2019
jsfiddle annoyaces userscript
View jsfiddle-annoyances.user.js
// ==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 Jun 20, 2019
For Designers: Scrap IG Image using Bookmarklet JS+Alerts/Prompts
View insta-scrap-open-image.bookmarklet.js
//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(','
View gist:5bceb85ddef4db3fe2bebbc69c69829a
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 Sep 5, 2019
B Language LALR(1) EBNF-like grammar
View b.ebnf
/////////////////////////////////////////////////////////
// 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 Jan 17, 2019
React Interaction Observer scroll
View interactionObserver.ts
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 Dec 19, 2018
Tagged template strings example
View tagged_template_strings.js
const wrapWithQuotes = (parts, ...values) => {
let result = parts[0];
values.forEach((value, i) => {
result += `"${value}"` + parts[i + 1];
});
return result;
};
View for-snook.md

https://twitter.com/snookca/status/1073299331262889984?s=21

‪“‬In what way is JS any more maintainable than CSS? How does writing CSS in JS make it any more maintainable?”

‪Happy to chat about this. There’s an obvious disclaimer that there’s a cost to css-in-js solutions, but that cost is paid specifically for the benefits it brings; as such it’s useful for some usecases, and not meant as a replacement for all workflows. ‬

‪(These conversations always get heated on twitter, so please believe that I’m here to converse, not to convince. In return, I promise to listen to you too and change my opinions; I’ve had mad respect for you for years and would consider your feedback a gift. Also, some of the stuff I’m writing might seem obvious to you; I’m not trying to tell you if all people of some of the details, but it might be useful to someone else who bumps into this who doesn’t have context)‬

So the big deal about css-in-js (cij) is selectors.

View faquery.html
<!DOCTYPE html>
<html>
<head>
<title>ConsolidateJS</title>
<style type="text/css">
.bg-purple {
background-color: rebeccapurple;
}
You can’t perform that action at this time.