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 | |
| require dirname(__DIR__) . '/vendor/autoload.php'; | |
| use Phly\Conduit\Middleware; | |
| use Phly\Http\Server; | |
| $app = new Middleware(); | |
| $router = new \Aura\Router\Router( | |
| new \Aura\Router\RouteCollection(new \Aura\Router\RouteFactory), | |
| new \Aura\Router\Generator |
Why?
Adapted from
| /* -------------------------------------------- | |
| * Detect device orientation | |
| * and trigger changes based on it | |
| --------------------------------------------*/ | |
| function updateOrientation() { | |
| // Detect whether device supports orientationchange event, otherwise fall back to the resize event | |
| // Genius solution from http://stackoverflow.com/a/2307936 | |
| var supportsOrientationChange = "onorientationchange" in window, | |
| orientationEvent = supportsOrientationChange ? "orientationchange" : "resize", | |
| newAngle, newOrientation; |
| license: cc-by-4.0 |
| /*! | |
| Math.uuid.js (v1.4) | |
| http://www.broofa.com | |
| mailto:robert@broofa.com | |
| Copyright (c) 2010 Robert Kieffer | |
| Dual licensed under the MIT and GPL licenses. | |
| */ | |
| /* |
| OpenSimplexNoise noise; | |
| int[][] result; | |
| float t, c; | |
| float ease(float p) { | |
| return 3*p*p - 2*p*p*p; | |
| } | |
| float ease(float p, float g) { |