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
| { | |
| "name": "my-app", | |
| "version": "1.0.0", | |
| "description": "My test app", | |
| "main": "src/js/index.js", | |
| "scripts": { | |
| "jshint:dist": "jshint src/js/*.js", | |
| "jshint": "npm run jshint:dist", | |
| "jscs": "jscs src/*.js", | |
| "browserify": "browserify -s Validating -o ./dist/js/build.js ./lib/index.js", |
The final result: require() any module on npm in your browser console with browserify
This article is written to explain how the above gif works in the chrome (and other) browser consoles. A quick disclaimer: this whole thing is a huge hack, it shouldn't be used for anything seriously, and there are probably much better ways of accomplishing the same.
Update: There are much better ways of accomplishing the same, and the script has been updated to use a much simpler method pulling directly from browserify-cdn. See this thread for details: mathisonian/requirify#5
| Solarized | |
| #FDF6E3,#EEE8D5,#93A1A1,#FDF6E3,#EEE8D5,#657B83,#2AA198,#DC322F | |
| Solarized Dark | |
| #073642,#002B36,#B58900,#FDF6E3,#CB4B16,#FDF6E3,#2AA198,#DC322F | |
| "use strict"; | |
| /** | |
| Barebones custom events implementation. Extend or mix in this class to add event | |
| support to your own classes. | |
| Example: | |
| function MyClass() { | |
| // Example of attaching a listener (this isn't required). |
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
| <script type="text/javascript"> | |
| (function () { | |
| "use strict"; | |
| // once cached, the css file is stored on the client forever unless | |
| // the URL below is changed. Any change will invalidate the cache | |
| var css_href = './index_files/web-fonts.css'; | |
| // a simple event handler wrapper | |
| function on(el, ev, callback) { | |
| if (el.addEventListener) { | |
| el.addEventListener(ev, callback, false); |
These are all the JSConf 2014 slides, codes, and notes I was able to cull together from twitter. Thanks to the speakers who posted them and thanks to @chantastic for posting his wonderful notes.
| var $ = require('NodObjC'); | |
| $.import('Cocoa'); | |
| var installNSBundleHook = function() { | |
| var cls = $.NSBundle; | |
| if (cls) { | |
| var bundleIdentifier = cls.getInstanceMethod('bundleIdentifier'); | |
| bundleIdentifier.setImplementation(function(val) { |
| <!-- https://coderwall.com/p/mycbiq --> | |
| <configuration> | |
| <system.webServer> | |
| <rewrite> | |
| <rules> | |
| <rule name="Main Rule" stopProcessing="true"> | |
| <match url=".*" /> | |
| <conditions logicalGrouping="MatchAll"> | |
| <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> | |
| <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> |