Why? Less code is sent down the wire to the user ("the client," the browser). This means faster page load times since it's less code. As a principle, a smaller and flatter DOM structure is going to perform better in the browser. In general, the larger the DOM node tree, the slower, manipulations to the structure will be more expensive by the browser's layout system.
a clever workaround to debug secrets in gh actions https://stackoverflow.com/a/71165973
echo ${{secrets.mysecret}} | sed 's/./& /g'
when a package is changed in the package.json, the lockfile (package-lock.json, yarn.lock.json`, etc.)
will be out of sync without manual intervention.
running this command to get the lockfile up to sync is considered best practices according to the npm v6+ docs:
which CSS selectors to use? this shows all the (non-dynamic) options generated from your project's tailwind.config.js.
rogden/tailwind-config-viewer is the best. run from the command line:
npx tailwind-config-viewer -o
| #!/usr/bin/env node | |
| const fs = require("fs"); | |
| const path = require("path"); | |
| // Copy this file into a file into $HOME/.local/bin/ (or a similar directory in `$PATH`) | |
| // | |
| // 1. pbpaste > ~/.local/bin/git_pair.js | |
| // x-sel --clipboard --output > ~/.local/bin/git_pair.js | |
| // 2. Run commands above to generate an executable file called `git_pair` |
| * { | |
| outline: 2px dotted red; | |
| } | |
| * * { | |
| outline: 2px dotted green; | |
| } | |
| * * * { | |
| outline: 2px dotted orange; | |
| } | |
| * * * * { |
| /Applications/Firefox\ Developer\ Edition.app/Contents/MacOS/firefox -P | |
| alias fxdl="'/Applications/Firefox Developer Edition.app/Contents/MacOS/firefox' -P'" | |
| alias fxdo="'/Applications/Firefox Developer Edition.app/Contents/MacOS/firefox' -new-tab $@" |
| // ensure password syncing enabled on both Chrome devices | |
| // | |
| // from Chrome desktop, load chrome://history/syncedTabs | |
| // select "Tabs from other devices" link on sidebar | |
| // | |
| // once list loads, inspect the element of a link | |
| // paste into the Console: | |
| // | |
| containerEl = $0.closest('div#history-item-container'); |
| // Custom Cypress No-Motion helper | |
| // | |
| // To reduce flakiness in Cypress tests caused by motion, | |
| // force disable all CSS transitions and animations. | |
| // | |
| // revised: 2023-03-15 | |
| // credits: @ypresto | |
| function disableMotion(win) { | |
| const injectedStyleEl = win.document.getElementById('__cy_disable_motion__'); |