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
lakenen
/ index.html
Last active
April 6, 2024 01:28
— forked from abeppu/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # use ImageMagick convert | |
| # the order is important. the density argument applies to input.pdf and resize and rotate to output.pdf | |
| convert -density 90 input.pdf -rotate 0.5 -attenuate 0.2 +noise Multiplicative -colorspace Gray output.pdf |
addyosmani
/ README.md
Last active
April 2, 2024 20:18
— forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger
paulirish
/ data-markdown.user.js
Last active
February 6, 2024 10:41
*[data-markdown] - use markdown, sometimes, in your HTML
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name Use Markdown, sometimes, in your HTML. | |
| // @author Paul Irish <http://paulirish.com/> | |
| // @link http://git.io/data-markdown | |
| // @match * | |
| // ==/UserScript== | |
| // If you're not using this as a userscript just delete from this line up. It's cool, homey. |
joewiz
/ chmod-recursive.xq
Created
June 3, 2021 20:54
Batch change permissions on resources and collections in eXist-db
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| xquery version "3.1"; | |
| import module namespace dbutil="http://exist-db.org/xquery/dbutil"; | |
| dbutil:scan( | |
| xs:anyURI("/db/apps/airlock-data"), | |
| function($col, $res) { | |
| if ($res) then | |
| (: Set permissions on resources here :) | |
| ( |
WebReflection
/ uce-vs-lit-element.md
Last active
January 8, 2024 07:16
A very simple comparison table between uce and lit-element.
uce vs lit-element
A very simple comparison table between these two libraries.
| uce | lit-element | |
|---|---|---|
| version | 1.11.9 | 2.4.0 |
| license | ISC (simplified MIT) | BSD-3-Clause License |
| language | JS w/ TS definition | TS w/ JS transpilation |
| size ( brotli ) | 9437b ES5 / 6811b ES2015+ | 8634b ES5 / 6708b ES2015+ |
gasman
/ pnginator.rb
Created
April 30, 2012 18:08
pnginator: pack Javascript into a self-extracting PNG
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/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 |
- Avoid too many reflows (the browser to recalculate everything)
- Use advanced CSS3 for graphic card rendering
- Precalculate sizes and positions
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Annoying.js - How to be an asshole to your users | |
| * | |
| * DO NOT EVER, EVER USE THIS. | |
| * | |
| * Copyright (c) 2011 Kilian Valkhof (kilianvalkhof.com) | |
| * Visit https://gist.github.com/767982 for more information and changelogs. | |
| * Visit http://kilianvalkhof.com/2011/javascript/annoying-js-how-to-be-an-asshole/ for the introduction and weblog | |
| * Check out https://gist.github.com/942745 if you want to annoy developer instead of visitors | |
| * |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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"> |
NewerOlder