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
| input[type="text"], | |
| textarea { | |
| -webkit-appearance: none; | |
| border: 0; | |
| border-radius: 0; | |
| font: inherit; | |
| line-height: inherit; | |
| resize: none; | |
| width: 100%; | |
| padding: 0; |
| // Client | |
| const query = (query, data, headers) => { | |
| return fetch('/api', { | |
| method: 'POST', | |
| headers: headers || {}, | |
| body: JSON.stringify({ | |
| query: query, | |
| variables: data | |
| }) | |
| }).then((response) => { |
| /** | |
| * Set of function that allow log messages to be retrieved from the view in order to be displayed | |
| * into the regular JS console | |
| */ | |
| /** | |
| * Push one or several objects into the log stack | |
| * @param obj1 ... objN A list of JavaScript objects to log. | |
| */ | |
| function log() { |
| /** | |
| * Fix for vw, vh, vmin, vmax on iOS 7. | |
| * http://caniuse.com/#feat=viewport-units | |
| * | |
| * This fix works by replacing viewport units with px values on known screen sizes. | |
| * | |
| * iPhone 6 and 6 Plus cannot run iOS 7, so are not targeted by this fix. | |
| * Target devices running iOS 8+ will incidentally execute the media query, | |
| * but this will still produce the expected result; so this is not a problem. |
| /** | |
| * VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units | |
| * | |
| * To overcome this, create media queries that target the width, height, and orientation of iOS devices. | |
| * It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing | |
| * the height of element `.foo` —which is a full width and height cover image. | |
| * | |
| * iOS Resolution Quick Reference: http://www.iosres.com/ | |
| */ | |
| /* | |
| * Auto-expanding textbox directive for single-line <input> controls. | |
| * | |
| * This is adapted from: https://gist.github.com/thomseddon/4703968 | |
| * | |
| * See the above link for auto-growing multiline <textarea> controls, a similar but slightly | |
| * different objective. | |
| * | |
| * The original, pure jQuery (and non-AngularJS) version of this can be found here: | |
| * http://jsbin.com/ahaxe |
| angular.module('setIf',[]).directive('setIf',function () { | |
| return { | |
| transclude: 'element', | |
| priority: 1000, | |
| terminal: true, | |
| restrict: 'A', | |
| compile: function (element, attr, linker) { | |
| return function (scope, iterStartElement, attr) { | |
| if(attr.waitFor) { | |
| var wait = scope.$watch(attr.waitFor,function(nv,ov){ |
| angular.module('setRepeat',[]).directive('setRepeat', function () { | |
| return { | |
| transclude: 'element', | |
| priority: 1000, | |
| compile: compileFun | |
| }; | |
| function compileFun(element, attrs, linker) { | |
| var expression = attrs.setRepeat.split(' in '); |
W3C Introduction to Web Components - explainer/overview of the technologies