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
| //Object Literal | |
| var app = app || {}; | |
| //object literal | |
| app = { | |
| init: function(){ | |
| this.cache(); | |
| this.bind(); | |
| }, |
| /*jslint nomen: true */ | |
| window.App = window.App || {}; | |
| window.App.ModuleName = (function (document, $) { | |
| 'use strict'; //OPTIONAL if you don't want your code to be strict | |
| var _vars, _els, _privateMethod, init; | |
| { | |
| "name": "project", | |
| "version": "0.0.0", | |
| "authors": [ | |
| "Eric Barnes <[email protected]>" | |
| ], | |
| "license": "MIT", | |
| "private": true, | |
| "ignore": [ | |
| "**/.*", |
Include Weather Icons in your app: https://github.com/erikflowers/weather-icons
Include the below JSON in your application, for example purposes, lets assume it's a global named weatherIcons.
Make a request to OpenWeatherMap:
req = $.getJSON('http://api.openweathermap.org/data/2.5/weather?q=London,uk&callback=?');| var RecursiveChildComponent = React.createClass({ | |
| render() { | |
| return <div> | |
| {this.recursiveCloneChildren(this.props.children)} | |
| </div> | |
| }, | |
| recursiveCloneChildren(children) { | |
| return React.Children.map(children, child => { | |
| if(!_.isObject(child)) return child; | |
| var childProps = {someNew: "propToAdd"}; |
| var uniqueArray = function(arrArg) { | |
| return arrArg.filter(function(elem, pos,arr) { | |
| return arr.indexOf(elem) == pos; | |
| }); | |
| }; | |
| var uniqEs6 = (arrArg) => { | |
| return arrArg.filter((elem, pos, arr) => { | |
| return arr.indexOf(elem) == pos; | |
| }); |
| /** | |
| * http://applemusic.tumblr.com/ | |
| */ | |
| /** Ultra Light */ | |
| @font-face { | |
| font-family: "San Francisco"; | |
| font-weight: 100; | |
| src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff2"); | |
| } |
autocomplete="off" onto <form> element;<input> with autocomplete="false" as a first children element of the form.<form autocomplete="off" method="post" action="">
<input autocomplete="false" name="hidden" type="text" style="display:none;">
...| <html> | |
| <head> | |
| <style> | |
| .item {width:300px; display: inline-block; } | |
| .item .itemtitle {font-weight:bold; font-size:2em;} | |
| .hidden {display:none;} | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Amalgam Comics Characters</h1> |