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