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
// https://github.com/dominictarr/pull-stream-examples/blob/master/pull.js | |
import Foundation | |
import PlaygroundSupport | |
PlaygroundPage.current.needsIndefiniteExecution = true | |
/// Pull stream events | |
enum Event<T> { | |
case next(T) | |
case error(Error) |
log_format bunyan '{' | |
'"name": "nginx/$nginx_version",' | |
'"hostname": "$hostname",' | |
'"pid": "$pid",' | |
'"level": 30,' | |
'"time": "$time_iso8601",' | |
'"v": 0,' | |
'"msg": "access",' | |
'"remoteAddress": "$remote_addr",' |
// this is now a module: | |
// https://github.com/WebReflection/backtick-template#es2015-backticks-for-es3-engines-- | |
var template = require('backtick-template'); | |
// just string | |
const info = 'template'; | |
`some ${info}` === template('some ${info}', {info}); |
xquery version "3.0"; | |
module namespace my-app = "http://my/app"; | |
(: A starter template for a RestXQ module. | |
Save this file into eXist anywhere (e.g., /db/restxq-template.xqm or /db/apps/my-app/modules/restxq-template.xqm), | |
And access at http://localhost:8080/exist/restxq/index.html. | |
(Why? Because /restxq is the URL space for RestXQ, and the function's %rest:path annotation is for requests to "/index.html".) | |
Note that the collection configuration file where you store the module must invoke the RestXQ trigger: | |
<collection xmlns="http://exist-db.org/collection-config/1.0"> |
<!DOCTYPE html> | |
<html> | |
<head> | |
<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script> | |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
</head> | |
<body> | |
<div id="chart"></div> |
The reflow appens as many times as there are frames per seconds. It recalculate all positions that change in order to diplay them. Basically, when you scroll you execute a function where you move things between two reflows. But there are functions that triggers reflows such as jQuery offset, scroll... So there are two things to take care about when you dynamically change objects in javascript to avoid too many reflows:
#!/usr/bin/env ruby -w | |
# pnginator.rb: pack a .js file into a PNG image with an HTML payload; | |
# when saved with an .html extension and opened in a browser, the HTML extracts and executes | |
# the javascript. | |
# Usage: ruby pnginator.rb input.js output.png.html | |
# By Gasman <http://matt.west.co.tt/> | |
# from an original idea by Daeken: http://daeken.com/superpacking-js-demos |
// 1. No new syntax for non-TCP functions. | |
// | |
// This approach does do include a shorter syntax for regular functions, so if a classic JS function | |
// is what you want you use the classic long form function expression: | |
a.some(function (x){ | |
if (invalid(x)) | |
return true; | |
console.log(x); | |
}); |