Skip to content

Instantly share code, notes, and snippets.

Seven different types of CSS attribute selectors
// This attribute exists on the element
[value]
// This attribute has a specific value of cool
[value='cool']
// This attribute value contains the word cool somewhere in it
[value*='cool']
@elijahmanor
elijahmanor / README.md
Last active May 11, 2022 09:52
Export @code Extensions to a Markdown List

You can run either of the following snippets in your terminal to generate a markdown list of your VS Code extensions.

code --list-extensions | awk '{ print "* [" $1 "](https://marketplace.visualstudio.com/items\?itemName\=" $1 ")" }'

npx https://gist.github.com/elijahmanor/7f9762a4c2296839ad33e33513e88043

NOTE: You can append | pbcopy to either of the above commands to pipe the output to your Mac's copy/paste buffer.

@jasesmith
jasesmith / atom-vertical-file-tabs.less
Last active December 10, 2020 01:18
For vertically stacked open file tabs, put this in your `./atom/styles.less`
atom-workspace-axis.vertical atom-pane {
flex-direction: row;
.tab-bar:not(:empty) {
box-shadow: inset -1px 0 0 #181a1f;
resize: horizontal;
height: auto;
display: block;
padding-right: 1px;
padding-bottom: 3em;
min-width: 14em;
@bendc
bendc / simulate-typing.js
Created September 1, 2017 08:57
Fake typing animation
const trackTime = timing => {
const now = performance.now();
if (!timing.startTime) timing.startTime = now;
const elapsed = now - timing.startTime;
const {duration} = timing;
if (duration != null && duration <= elapsed) timing.startTime = null;
return elapsed;
};
const delay = (callback, duration) => {
@ljharb
ljharb / array_iteration_thoughts.md
Last active April 29, 2024 17:13
Array iteration methods summarized

Array Iteration

https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff

While attempting to explain JavaScript's reduce method on arrays, conceptually, I came up with the following - hopefully it's helpful; happy to tweak it if anyone has suggestions.

Intro

JavaScript Arrays have lots of built in methods on their prototype. Some of them mutate - ie, they change the underlying array in-place. Luckily, most of them do not - they instead return an entirely distinct array. Since arrays are conceptually a contiguous list of items, it helps code clarity and maintainability a lot to be able to operate on them in a "functional" way. (I'll also insist on referring to an array as a "list" - although in some languages, List is a native data type, in JS and this post, I'm referring to the concept. Everywhere I use the word "list" you can assume I'm talking about a JS Array) This means, to perform a single operation on the list as a whole ("atomically"), and to return a new list - thus making it mu

@bendc
bendc / easing.css
Created September 23, 2016 04:12
Easing CSS variables
:root {
--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
--ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
--ease-in-circ: cubic-bezier(.6, .04, .98, .335);
--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
@Rich-Harris
Rich-Harris / service-workers.md
Last active April 21, 2024 16:24
Stuff I wish I'd known sooner about service workers

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.

@bendc
bendc / merge.js
Created July 21, 2016 14:15
Deep merge of JSON-like objects
const merge = (() => {
const duplicate = object => JSON.parse(JSON.stringify(object));
return (...objects) => Object.assign(...objects.map(duplicate));
})();
@juanbrujo
juanbrujo / UntilYouPayMe.js
Last active December 15, 2016 14:15
Use this JavaScript function to annoy your clients that insist in not paying you.
(function(){
function randomErrors(){
var errorMessages = ['Unexpected Error!','Something happended, please try again'];
var randomMessage = errorMessages[Math.floor(Math.random() * errorMessages.length)];
var currentURL = (window.location != window.parent.location) ? document.referrer : document.location;
if (confirm( randomMessage )) {
window.location.reload(true);
} else {
window.location.reload(true);
}