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
| version: '2' | |
| services: | |
| api: | |
| volumes: | |
| - "nfsmount:${CONTAINER_DIR}" | |
| volumes: | |
| nfsmount: | |
| driver: local | |
| driver_opts: |
| $ cd /usr/local/lib | |
| $ sudo ln -s ../../lib/libSystem.B.dylib libgcc_s.10.5.dylib | |
| $ sudo ln -s ../../lib/libSystem.B.dylib libgcc_s.10.4.dylib |
| // Conditional Rendering with enums | |
| function Notification({ text, state }) { | |
| return ( | |
| <div> | |
| {{ | |
| info: <Info text={text} />, | |
| warning: <Warning text={text} />, | |
| error: <Error text={text} />, | |
| }[state]} | |
| </div> |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> | |
| <defs> | |
| <filter id="blur"> | |
| <feGaussianBlur in="SourceGraphic" stdDeviation="14"></feGaussianBlur> | |
| </filter> | |
| </defs> | |
| </svg> | |
| .svgblur{ | |
| filter: url(#blur); |
| #!/usr/bin/env bash | |
| # Copy the url of the active ngrok connection to the clipboard. | |
| # Usage: | |
| # ngrok-copy # copies e.g. https://3cd67858.ngrok.io to clipboard. | |
| # ngrok-copy -u # copies e.g. http://3cd67858.ngrok.io to clipboard. | |
| if [[ "$1" == "-u" ]]; then | |
| NGROK_URL=`curl -s http://127.0.0.1:4040/status | grep -P "http://.*?ngrok.io" -oh` | |
| else | |
| NGROK_URL=`curl -s http://127.0.0.1:4040/status | grep -P "https://.*?ngrok.io" -oh` |
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);
xhr.withCredentials = true;
xhr.send();
fetch('https://example.com', {
| /** | |
| * BrowserSync config: serve static assets, and proxy the HTML | |
| * | |
| * Let's say we have the codebase for the front-end of a website, | |
| * and we want to develop CSS/JS or debug against the HTML of | |
| * a remote development, staging or production server. | |
| * | |
| * Using BrowserSync (2.4 needed), we want to serve to our browser(s): | |
| * - the distant HTML pages and content images from the server | |
| * - local static assets (including or changes) |