Skip to content

Instantly share code, notes, and snippets.

@kepano
kepano / obsidian-web-clipper.js
Last active April 18, 2024 20:47
Obsidian Web Clipper Bookmarklet to save articles and pages from the web (for Safari, Chrome, Firefox, and mobile browsers)
javascript: Promise.all([import('https://unpkg.com/turndown@6.0.0?module'), import('https://unpkg.com/@tehshrike/readability@0.2.0'), ]).then(async ([{
default: Turndown
}, {
default: Readability
}]) => {
/* Optional vault name */
const vault = "";
/* Optional folder name such as "Clippings/" */
@ceejbot
ceejbot / esm_in_node_proposal.md
Last active July 17, 2023 02:45
npm's proposal for supporting ES modules in node

ESM modules in node: npm edition

The proposal you’re about to read is not just a proposal. We have a working implementation of almost everything we discussed here. We encourage you to checkout and build our branch: our fork, with the relevant branch selected. Building and using the implementation will give you a better understanding of what using it as a developer is like.

Our implementation ended up differing from the proposal on some minor points. As our last action item before making a PR, we’re writing documentation on what we did. While I loathe pointing to tests in lieu of documentation, they will be helpful until we complete writing docs: the unit tests.

This repo also contains a bundled version of npm that has a new command, asset. You can read the documentation for and goals of that comma

@addyosmani
addyosmani / flexbox-layout.css
Created January 29, 2017 19:31
Flexbox layout helper classes
/*
Flexbox CSS helpers from the Polymer team. Extracted from https://github.com/PolymerElements/iron-flex-layout for use as just CSS.
Docs: https://elements.polymer-project.org/guides/flex-layout
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
@marcysutton
marcysutton / enzyme-test.js
Last active August 23, 2021 08:20
React A11y Testing
import {expect} from 'chai';
import App from '../app/components/App';
import a11yHelper from "./a11yHelper";
describe('Accessibility', function () {
this.timeout(10000);
it('Has no errors', function () {
let config = {};
@iammerrick
iammerrick / PinchZoomPan.js
Last active February 27, 2024 07:33
React Pinch + Zoom + Pan
import React from 'react';
const MIN_SCALE = 1;
const MAX_SCALE = 4;
const SETTLE_RANGE = 0.001;
const ADDITIONAL_LIMIT = 0.2;
const DOUBLE_TAP_THRESHOLD = 300;
const ANIMATION_SPEED = 0.04;
const RESET_ANIMATION_SPEED = 0.08;
const INITIAL_X = 0;
@emilong
emilong / component.jsx
Created May 27, 2016 20:35
Creating semantic links for react-router using HOCs
import React, { Component } from 'react'
import { SubWidgetLink } from './routes'
export default class MyComponentWithALink extends Component {
render() {
const { widget } = this.props
return (
<div>
...
/**
* Simple userland heapdump generator using v8-profiler
* Usage: require('[path_to]/HeapDump').init('datadir')
*
* @module HeapDump
* @type {exports}
*/
var fs = require('fs');
var profiler = require('v8-profiler');
@paulirish
paulirish / what-forces-layout.md
Last active April 19, 2024 14:42
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
export default class SayingHelloComponent {
static ngInject() {
return [] // register your dependencies here (Angular 1 style, with string names)
}
static ddo() {
return {
bind: {
person: '@'
},
name: 'sayingHello', // component's name