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
Vagrant.configure("2") do |config| | |
config.vm.define "app" do |app| | |
app.vm.provider "docker" do |d| | |
d.build_dir = "." | |
d.cmd = ["echo", "hello"] | |
end | |
end | |
end |
all_user_agents = [ | |
'Mozilla/5.0 (compatible; U; ABrowse 0.6; Syllable) AppleWebKit/420+ (KHTML, like Gecko)', | |
'Mozilla/5.0 (compatible; ABrowse 0.4; Syllable)', | |
'Mozilla/5.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; Acoo Browser 1.98.744; .NET CLR 3.5.30729)', | |
'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Acoo Browser; GTB5; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; Maxthon; InfoPath.1; .NET CLR 3.5.30729; .NET CLR 3.0.30618)', | |
'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Acoo Browser; GTB5;', | |
'Mozilla/4.0 (compatible; Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6; Acoo Browser; .NET CLR 1.1.4322; .NET CLR 2.0.50727); Windows NT 5.1; Trident/4.0; Maxthon; .NET CLR 2.0.50727; .NET CLR 1.1.4322; InfoPath.2)', | |
'Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; Acoo Browser; GTB6; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; InfoPath.1; .NET CLR 3.5.30729; .NET CLR 3.0.30618)', | |
'Mozilla/4.0 (compatible; MSIE |
find . -name "*.extension" | xargs -I{} perl -pi -e 's/old-name/new-name/g' {} |
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
#!/bin/bash | |
PWD=$(pwd) | |
GIT_ROOT=~/workspace | |
CYAN='\033[36m' | |
GREEN='\033[32m' | |
NC='\033[0m' # No Color | |
cd $GIT_ROOT > /dev/null |
<div class="slider"> | |
<div class="slide-mask"> | |
<ul class="slide-images" style="<!-- imagesAmount * slideWidth -->"> | |
<a href="http://path/to/link"> | |
<li style="background-image: url(http://path/to/image);"></li> | |
</a> | |
<a href="http://path/to/link"> | |
<li style="background-image: url(http://path/to/image);"></li> | |
</a> | |
</ul> |
jQuery.expr[':'].appearing = function(elem) { | |
var $window = $(window), | |
windowViewTop = $window.scrollTop(), | |
windowViewBottom = windowViewTop + $window.height(), | |
elemTop = $(elem).offset().top, | |
elemBottom = elemTop + $(elem).height(), | |
isAppearingFully = ((elemTop >= windowViewTop) && (elemBottom <= windowViewBottom)), | |
isAppearingBottom = ((windowViewTop > elemTop) && (windowViewTop < elemBottom)), | |
isAppearingTop = ((windowViewBottom > elemTop) && (windowViewTop < elemBottom)); |
/* | |
* jQuery autoresize 0.1 | |
* http://jusbrasil.com | |
* Copyright 2013 | |
* Free to use under the MIT license. | |
* http://www.opensource.org/licenses/mit-license.php | |
* @author: webteam@jusbrasil.com.br | |
*/ | |
<div class="block" style="height: 300px;"> | |
<div class="centered"> | |
<h1>Some text</h1> | |
<p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"</p> | |
</div> | |
</div> | |
<div class="block" style="height: 200px;"> | |
<div class="centered"> | |
<h1>Some text</h1> |
# Note: You may need to use sudo (for OSX, *nix, BSD etc) or run your command shell as Administrator (for Windows) to run some shortcuts. | |
# ------------------------------------------------------------------------------ | |
# | |
# NPM | |
# | |
# ------------------------------------------------------------------------------ | |
# Install Bower | |
function nb() { | |
npm install -g bower |