Skip to content

Instantly share code, notes, and snippets.

@nblackburn
nblackburn / camelToKebab.js
Last active December 15, 2023 03:19
Convert a string from camel case to kebab case.
module.exports = (string) => {
return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
};
@kevinweber
kevinweber / encodeSvg.js
Created October 31, 2016 05:36
Helper: Convert React component (SVG element) to base64 encoded URL. Useful for adding a background image.
import ReactDOMServer from 'react-dom/server';
export function encodeSvg(reactElement) {
return 'data:image/svg+xml,' + escape(ReactDOMServer.renderToStaticMarkup((reactElement)));
}
@electerious
electerious / scrollroot.js
Last active September 17, 2019 13:45
Cross-browser scroll element fetching
const scrollroot = (() => {
if ('scrollingElement' in document) return document.scrollingElement
const initial = document.documentElement.scrollTop
document.documentElement.scrollTop = initial + 1
const updated = document.documentElement.scrollTop
document.documentElement.scrollTop = initial
@paulirish
paulirish / what-forces-layout.md
Last active June 26, 2024 20:47
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
@DanHerbert
DanHerbert / fix-homebrew-npm.md
Last active June 4, 2024 04:16
Instructions on how to fix npm if you've installed Node through Homebrew on Mac OS X or Linuxbrew

OBSOLETE

This entire guide is based on an old version of Homebrew/Node and no longer applies. It was only ever intended to fix a specific error message which has since been fixed. I've kept it here for historical purposes, but it should no longer be used. Homebrew maintainers have fixed things and the options mentioned don't exist and won't work.

I still believe it is better to manually install npm separately since having a generic package manager maintain another package manager is a bad idea, but the instructions below don't explain how to do that.

Fixing npm On Mac OS X for Homebrew Users

Installing node through Homebrew can cause problems with npm for globally installed packages. To fix it quickly, use the solution below. An explanation is also included at the end of this document.

@nateswart
nateswart / com.nateofnine.FlaggedEmailToReminder.plist
Created January 9, 2014 03:54
plist to run this AppleScript every minute via launchd
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>Disabled</key>
<false/>
<key>Label</key>
<string>com.nateofnine.FlaggedMailToReminders</string>
<key>Program</key>
<string>/usr/bin/osascript</string>