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.offsetParentpackage.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 package| function serializeForm(form, urlEncode = false) { | |
| const formData = new FormData(form); | |
| if (urlEncode) { | |
| const searchParams = new URLSearchParams(formData) | |
| return searchParams.toString(); | |
| } | |
| const serializedFormData = {}; |