Skip to content

Instantly share code, notes, and snippets.

View keithjgrant's full-sized avatar
👽
undefined is not a function

Keith Grant keithjgrant

👽
undefined is not a function
View GitHub Profile
@keithjgrant
keithjgrant / SlottedElement.js
Last active July 5, 2024 04:59
SlottedElement - mimic <slots> in light DOM LitElements
import { LitElement, html } from 'lit';
/*
This mimics the behavior of <slot>s in a light DOM LitElement. It supports both
named slots (`<slot name="foo">`) and anonymous slots (`<slot>`). This has not
been heavily tested yet, but seems to work for most simple use cases using
Lit 3.1.4.
There are a few minor differences between Shadow DOM and this, particularly if:
- you attempt to add content to a named slot but that slot isn't defined in the
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
@keithjgrant
keithjgrant / abp-twitter.txt
Last active August 31, 2023 20:48
Adblock plus filters to remove the crap from twitter
twitter.com##.module.trends
twitter.com##.wtf-module
twitter.com##[data-component-context="suggest_activity_tweet"]
twitter.com##.nav>.moments
twitter.com##.LiveVideoHomePageModuleContainer
@keithjgrant
keithjgrant / example.css
Created May 23, 2017 14:41
interesting test-case for auto-formatting
atom-text-editor.editor .linter-highlight.linter-error .region,
.linter-highlight.linter-error .region {
background-image:
linear-gradient(45deg, transparent 65%, @red-5 80%, transparent 90%),
linear-gradient(135deg, transparent 5%, @red-5 15%, transparent 25%),
linear-gradient(135deg, transparent 45%, @red-5 55%, transparent 65%),
linear-gradient(45deg, transparent 25%, @red-5 35%, transparent 50%) !important;
}
@keithjgrant
keithjgrant / examples.css
Last active May 12, 2017 17:10
My CSS formatting preferences, for discussion on “Prettier for CSS”
/*
I agree w/ the philosophy of Prettier, that as few options as possible should be
provided. However issues that are hot-button (e.g. tabs vs spaces) and would actively
prevent a large number of devs from using the tool should be configurable. The the ones
that jump immediately to mind for me are
1) tabs vs spaces (& number of spaces)
2) line length
3) reordering properties (more on that below)
These are my preferences, but I’m putting everything on the table in the spirit of
@keithjgrant
keithjgrant / _source.css
Last active August 8, 2016 20:35
Native Custom Properties + transpiled color()
:root {
--main-color: red;
--secondary-color: color(var(--main-color) hue(20%));
}
.module-one {
color: var(--main-color);
}
.module-two {
@keithjgrant
keithjgrant / .gitconfig
Created March 9, 2016 14:36
Git "log-pretty" alias
[alias]
log-pretty = log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(black)%cn%Creset' --abbrev-commit --date=relative