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
| data:text/html, <style type="text/css">.e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div class="e" id="editor"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("editor");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script> | |
| <!-- | |
| For other language: Instead of `ace/mode/ruby`, Use | |
| Markdown -> `ace/mode/markdown` | |
| Python -> `ace/mode/python` | |
| C/C++ -> `ace/mode/c_cpp` | |
| Javscript -> `ace/mode/javascript` | |
| Java -> `ace/mode/java` | |
| Scala- -> `ace/mode/scala` |
| # The following recipe works with upstream rails proxy for custom 404s and 500s. | |
| # Errors are usually handled via rails except if proxy is really down, in which case | |
| # nginx needs a bit more configration. | |
| server { | |
| # ... | |
| location / { | |
| error_page 404 = @rails; # let rails show a page with suggestions | |
| try_files maintenance.html @rails; |
| alphabet = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("") | |
| base = alphabet.length | |
| exports.encode = (i) -> | |
| return alphabet[0] if i is 0 | |
| s = "" | |
| while i > 0 | |
| s += alphabet[i % base] | |
| i = parseInt(i / base, 10) |