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
| <?php | |
| /** | |
| * Instructions: | |
| * | |
| * 1. Put this into the document root of your Kirby site | |
| * 2. Make sure to setup the base url for your site correctly | |
| * 3. Run this script with `php statify.php` or open it in your browser | |
| * 4. Upload all files and folders from static to your server | |
| * 5. Test your site |
FWIW: I (@rondy) am not the creator of the content shared here, which is an excerpt from Edmond Lau's book. I simply copied and pasted it from another location and saved it as a personal note, before it gained popularity on news.ycombinator.com. Unfortunately, I cannot recall the exact origin of the original source, nor was I able to find the author's name, so I am can't provide the appropriate credits.
| // Inspired by https://twitter.com/coderitual/status/1112297299307384833 and https://tapajyoti-bose.medium.com/7-killer-one-liners-in-javascript-33db6798f5bf | |
| // Remove any duplicates from an array of primitives. | |
| const unique = [...new Set(arr)] | |
| // Sleep in async functions. Use: await sleep(2000). | |
| const sleep = (ms) => (new Promise(resolve => setTimeout(resolve, ms))); | |
| // or | |
| const sleep = util.promisify(setTimeout); |