A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.
One-line version to paste in your DevTools
Use $$
if your browser aliases it:
~ 108 byte version
#!/usr/bin/env bash | |
# MIT © Sindre Sorhus - sindresorhus.com | |
# git hook to run a command after `git pull` if a specified file was changed | |
# Run `chmod +x post-merge` to make it executable then put it into `.git/hooks/`. | |
changed_files="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)" | |
check_run() { | |
echo "$changed_files" | grep --quiet "$1" && eval "$2" |
/** | |
* | |
* Add to bookmark | |
* Several tests are necessary in order for this "simple" action to work in most of the browsers | |
* | |
*/ | |
// First, we define the element where the "Add to bookmark" action will trigger | |
var triggerBookmark = $(".js-bookmark"); // It must be an `a` tag |
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.
elem.offsetLeft
, elem.offsetTop
, elem.offsetWidth
, elem.offsetHeight
, elem.offsetParent
package.json
, set version
to a prerelease version, e.g. 2.0.0-rc1
, 3.1.5-rc4
, ...npm pack
to create packagenpm publish <package>.tgz --tag next
to publish the package under the next
tagnpm install --save package@next
to install prerelease packagefunction serializeForm(form, urlEncode = false) { | |
const formData = new FormData(form); | |
if (urlEncode) { | |
const searchParams = new URLSearchParams(formData) | |
return searchParams.toString(); | |
} | |
const serializedFormData = {}; |