Skip to content

Instantly share code, notes, and snippets.

@addyosmani
addyosmani / README.md
Last active April 2, 2024 20:18 — forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger

CSS Layout Debugger

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

@olslash
olslash / console
Created June 16, 2014 21:11
Testing the console's representation of data
var externalObj = {key: 'value'};
var items = {
obj: {
'string prop': 'string val',
5: 10,
nested: [[3, [5, 2]]],
'function': function(){return true;},
reference: externalObj
},
@LeaVerou
LeaVerou / RAINBOWlog.js
Created March 12, 2014 23:30
AWESOMEify your console.log()ing! Because life is too short to be black & white!!!!!!1111one
(function(){
var log = console.log;
console.log = function(str) {
var css = 'background: linear-gradient(to right, red, yellow, lime, aqua, blue, fuchsia, red); color: white; font-weight: bold;';
var args = Array.prototype.slice.call(arguments);
args[0] = '%c' + args[0];
args.splice(1,0,css);
return log.apply(console, args);
}
var attempts = 1;
function createWebSocket () {
var connection = new WebSocket();
connection.onopen = function () {
// reset the tries back to 1 since we have a new connection opened.
attempts = 1;
// ...Your app's logic...
@jozsefDevs
jozsefDevs / validation_curry.js
Created October 22, 2013 20:17
A simple way to implement a validation by JavaScript currying
var above = function(limit){
return function(value){
return value > limit;
};
};
var isAbove10 = above(10);
console.log(isAbove10(5)); // false
console.log(isAbove10(8)); // false
@WebReflection
WebReflection / typeOf.js
Last active February 15, 2016 16:12
An incrementally improved approach to a common JavaScript function/utility widely adopted all over. Returns the lowercase type or [[Class]] of a generic variable.
var typeOf = (function(Object, RegExp){
// WTFPL License - http://en.wikipedia.org/wiki/WTFPL
// thanks to @jdalton and @ljharb
var toString = Object.prototype.toString,
cache = (Object.create || Object)(null);
return function typeOf(Unknown) {
var asString = typeof Unknown;
return asString == 'object' ? (
Unknown === null ? 'null' : (
cache[asString = toString.call(Unknown)] || (
@nornagon
nornagon / css_to_rgb.js
Created December 3, 2012 02:53
Parse CSS colors like 'hsla(32,50%,20%,0.4)' into RGB components
// Tested in Chrome 23, Firefox 16, and IE9 in standards mode (i.e. with <!DOCTYPE html>).
// Converts '#f00', 'red', 'hsl(0, 100%, 50%)' and 'rgb(255,0,0)' to {r:255,g:0,b:0}.
function cssColorToRGB(cssColor) {
var s = document.createElement('span')
document.body.appendChild(s)
s.style.backgroundColor = cssColor
var rgb = getComputedStyle(s).backgroundColor
document.body.removeChild(s)
var m = /^rgb\((\d+), (\d+), (\d+)\)$/.exec(rgb)
@remy
remy / hang.js
Created November 30, 2012 13:23
How to hang JavaScript (useful - to me - for slowing down code and testing)
function hang(n) {
var x = new XMLHttpRequest();
x.open('GET', 'http://hang.nodester.com/script.js?' + n, false);
x.send();
}
// usage: hang(2 * 1000);
@aarongustafson
aarongustafson / watchResize.js
Last active September 16, 2019 14:37
Efficient callback management for window.onresize
(function( window ){
window.watchResize = function( callback ){
var resizing;
callback.size = 0;
function done()
{
var curr_size = window.innerWidth;
clearTimeout( resizing );
resizing = null;
// only run on a true resize
@max-mapper
max-mapper / index.js
Created November 27, 2012 01:28
link to lat/lon in native maps app on ios and android from webview (phonegap)
var mapLink = "http://maps.google.com/maps?z=12&t=m&q=loc:" + lat + "+" + lon
if ($.os.ios && navigator.userAgent.match(/iPhone OS 6_/)) mapLink = "Maps://?q=" + lat + "," + lon
if ($.os.android) mapLink = "geo:" + lat + "," + lon + "?z=12&q=" + lat + "," + lon
// assumes you have zepto and zepto.detect loaded
// also you should use target=_blank on your <a> tags