Never been to CodeSnippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world (or not, you can keep them private!)

Grundstruktur

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table border="0" cellspacing="0" cellpadding="0">
 <tr>
  <td valign="top"></td>
 </tr>
</table>
</body>
</html>

Metadaten

<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="copyright" content="">
<meta name="publisher" content="Alternative Aspect"> 
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="14 days">
<meta http-equiv="content-language" content="en">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="css/layout.css" type="text/css">

htmlベース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/common.js"></script>
<title></title>
</head>

<body class="">
</body>
</html>

Colorize Bash scripts with vim

vim 

:help -S
:help -X
:help -e
:help -f
:help -n
:help -u

:help syntax-highlighting

:help convert-to-HTML

:he syntax
:he 2html
:he sh.vim

:q


# Bash process substitution example
cat -n <(/usr/bin/jot -b 'This is a test sentence!' 10)
stat -x <(/usr/bin/jot -b 'This is a test sentence!' 10)


function colorize() {

declare colorize_folder path
declare -i force=0

colorize_folder="${HOME}/Desktop/Colorize"
/bin/mkdir -p "${colorize_folder}"

[[ "${1}" == '-f' ]] && force=1 && shift

if [[ "${1:0:1}" == '/' ]]; then
   path="${1}"
else
   path="$(pwd -P)/${1}"
fi

[[ ! -f  "${path}" ]] && echo "No such file: ${path}" && return 1
[[ ! -r  "${path}" ]] && echo "File not readable by you: ${path}" && /usr/bin/stat -x "${path}" && return 1

/bin/cp "${path}" "${colorize_folder}"
path="${colorize_folder}/${path##*/}"

[[ ! -r  "${path}" ]] && echo "File does not exist or is not readable by you: ${path}" && return 1

if [[ $force -eq 0 ]] && [[ -r  "${path}.html" ]]; then    # file already colorized
   echo "${path}.html"
   /usr/bin/open -a Safari "${path}.html"
   return 0
fi


/usr/bin/vim -X -e -f -s -n -u NONE \
-S <(
echo '
let html_use_encoding=utf-8
let use_xhtml=1
let html_number_lines=1
#let html_use_css=1
#let html_ignore_folding=1
#let html_no_pre=1
#set nocompatible
#set t_Co=256
set expandtabs
set tabstop=4
set background=dark
#set background=light
set filetype=sh
let g:is_bash=1
syntax on
run! syntax/2html.vim
wq
q
'
) "${path}"


[[ ! -f  "${path}.html" ]] && echo "No such file: ${path}.html" && return 1
[[ ! -r  "${path}.html" ]] && echo "File not readable by you: ${path}.html" && return 1

echo "${path}.html"

/usr/bin/open -a Safari "${path}.html"

return 0

}


colorize file.sh

colorize -f /path/to/file.sh



References:

- man vim
- Vim documentation: syntax
- vim2html
- generating html colourized sourcecode (tohtml)
- Advanced Bash-Scripting Guide: Process Substitution
- Greg's Wiki: Process Substitution (also see here and here)

Convert all erb's to haml's in rails

for f in *.erb; do mv $f `basename $f .erb`.haml;done;

Download & convert Apple HTML man pages to PDF

# download & install wkpdf, http://wkpdf.plesslweb.ch

cd ~/Desktop
curl -L -O http://wkpdf.plesslweb.ch/attachment/wiki/WikiStart/wkpdf.dmg?format=raw
mv ~/Desktop/wkpdf.dmg\?format\=raw ~/Desktop/wkpdf.dmg

hdiutil mount ~/Desktop/wkpdf.dmg
ls -l /Volumes/wkpdf/wkpdf
/usr/bin/sudo /bin/cp -i /Volumes/wkpdf/wkpdf /usr/local/bin
hdiutil unmount /Volumes/wkpdf

ls -l /usr/local/bin/wkpdf
echo $PATH | tr ':' '\n' | grep '^/usr/local/bin$'   # make sure /usr/local/bin is in $PATH


wkpdf --help


# create tar PDF documents

# wkpdf tar
wkpdf --source http://developer.apple.com/DOCUMENTATION/Darwin/Reference/ManPages/man1/tar.1.html --output ~/Desktop/tar.pdf
open ~/Desktop/tar.pdf

# info tar
#info -f tar | groff -Tps | pstopdf -i -o ~/Desktop/tar.info.pdf
info -f /usr/share/info/tar.info | groff -Tps | pstopdf -i -o ~/Desktop/tar.info.pdf
open ~/Desktop/tar.info.pdf

# man tar
man -t 1 tar 2>/dev/null | pstopdf -i -o ~/Desktop/tar.local.pdf 2>/dev/null
open ~/Desktop/tar.local.pdf

# tar --help
tar --help | groff -Tps | pstopdf -i -o ~/Desktop/tar.help.pdf
open ~/Desktop/tar.help.pdf



# create info PDF documents

#info info 2>/dev/null | less -p INFOPATH
#export INFOPATH="${INFOPATH}:/new/path/to/search/for/info/docs"

wkpdf --source http://developer.apple.com/DOCUMENTATION/Darwin/Reference/ManPages/man1/info.1.html --output ~/Desktop/info.pdf
man -t 1 info 2>/dev/null | pstopdf -i -o ~/Desktop/info.local.pdf 2>/dev/null
info -f info 2>/dev/null | groff -Tps | pstopdf -i -o ~/Desktop/info.info.pdf
info --help | groff -Tps | pstopdf -i -o ~/Desktop/info.help.pdf

open ~/Desktop/{info,info.local,info.info,info.help}.pdf



# download, save & open Apple HTML man pages as PDF documents

function appleman() {

   declare -i forcedownload=0
   declare DOWNLOADDIR DOWNLOADFILE WEBSITE

   if [[ $# -eq 2 ]]; then

      if [[ "${1}" == '-f' ]] || [[ "${2}" == '-f' ]]; then
         echo 'Wrong argument: -f'
         return 1
      fi

   elif [[ $# -eq 3 ]]; then

      if [[ "${1}" != '-f' ]]; then
         echo 'First argument has to be: -f (force download)'
         return 1
      fi

      forcedownload=1
      shift

   else
      echo 'Wrong number of arguments!'
      echo 'usage:'
      echo 'appleman 1 ls'
      echo 'appleman -f 1 ls'
      return 1
   fi


   DOWNLOADDIR="${HOME}/Desktop/Apple-ManPages"
   DOWNLOADFILE="${DOWNLOADDIR}/${2}(${1}).pdf"
   WEBSITE='http://developer.apple.com/DOCUMENTATION/Darwin/Reference/ManPages'

   /bin/mkdir -p "${DOWNLOADDIR}"

   if [[ $forcedownload -eq 0 ]]; then
      if [[ -f "${DOWNLOADFILE}" ]]; then
         /usr/bin/open -a Preview "${DOWNLOADFILE}"
         return 0
      fi
   fi

   /usr/bin/curl -I --max-time 5 "${WEBSITE}" &>/dev/null

   if [[ $? -ne 0 ]]; then 
      echo "Not reachable: ${WEBSITE}"
      return 1
   fi

   /usr/local/bin/wkpdf --format A4 --source "${WEBSITE}/man${1}/${2}.${1}.html" --output "${DOWNLOADFILE}" || return 1

   /usr/bin/open -a Preview "${DOWNLOADFILE}"

   return 0

}


appleman 1 chmod
appleman -f 1 chmod   # force download

appleman 2 chmod

appleman 1 intro
appleman 2 intro
appleman 5 intro
appleman 8 intro
appleman 9 intro

appleman 4 netintro

appleman 8 dsenableroot

appleman 8 launchd

appleman 1 createhomedir


ls -1 ~/Desktop/Apple-ManPages

standard html element style listing

Used for styling all html elements on a site.
<h1>The H1 tag looks like this</h1>
<p>The paragraph after an H1 looks like this</p>

<h2>The H2 tag looks like this</h2>
<p>The paragraph after an H2 looks like this</p>

<h3>The H3 tag looks like this</h3>
<p>The paragraph after an H3 looks like this</p>

<h4>The H4 tag looks like this</h4>
<p>The paragraph after an H4 looks like this</p>

<h5>The H5 tag looks like this</h5>
<p>The paragraph after an H5 looks like this</p>

<ol>
<li>This is a normal list element in an ordered list</li>
<li><strong>This is a strong element in an ordered list</strong></li>
<li><em>This is an italic element in an ordered list</em></li>
</ol>

<ul>
<li>This is a normal list element in an ordered list</li>
<li><strong>This is a strong element in an ordered list</strong></li>
<li><em>This is an italic element in an ordered list</em></li>
</ul>

<blockquote>A blockquote looks like this. Nullam nec dolor. Integer mauris metus, dictum ut, consequat vitae, bibendum vitae, arcu. Maecenas ut enim vel nunc laoreet tempus? Nulla porta ultrices nunc. Maecenas eleifend, diam eget interdum placerat, eros purus accumsan neque, a vestibulum leo enim sed quam. Maecenas mi libero, molestie in, sollicitudin sed, dapibus non, felis. Sed interdum blandit nulla. In nisi! Pellentesque lacus tortor, tempus vel; adipiscing et, egestas sed, enim. 
</blockquote>

<pre>
A pre looks like this. Nullam nec dolor. Integer mauris metus, dictum ut, consequat vitae, bibendum vitae, arcu. Maecenas ut enim vel nunc laoreet tempus? Nulla porta ultrices nunc. Maecenas eleifend, diam eget interdum placerat, eros purus accumsan neque, a vestibulum leo enim sed quam. Maecenas mi libero, molestie in, sollicitudin sed, dapibus non, felis. Sed interdum blandit nulla. In nisi! Pellentesque lacus tortor, tempus vel; adipiscing et, egestas sed, enim. Pellentesque aliquam, lectus id varius dictum, turpis dolor vehicula justo, ut faucibus dolor tortor non metus. Nam tincidunt magna non justo! Praesent nisl ipsum, vestibulum id, viverra cursus, viverra non, neque! Nullam nunc. Quisque vel nibh. Nullam vitae ante vitae diam aliquam volutpat. Nullam bibendum tellus vitae dui. Suspendisse vehicula vestibulum ligula. Nullam eget nisl.
</pre>

<code>
A code looks like this. Nullam nec dolor. Integer mauris metus, dictum ut, consequat vitae, bibendum vitae, arcu. Maecenas ut enim vel nunc laoreet tempus? Nulla porta ultrices nunc. Maecenas eleifend, diam eget interdum placerat, eros purus accumsan neque, a vestibulum leo enim sed quam. Maecenas mi libero, molestie in, sollicitudin sed, dapibus non, felis. Sed interdum blandit nulla. In nisi! Pellentesque lacus tortor, tempus vel; adipiscing et, egestas sed, enim. Pellentesque aliquam, lectus id varius dictum, turpis dolor vehicula justo, ut faucibus dolor tortor non metus. Nam tincidunt magna non justo! Praesent nisl ipsum, vestibulum id, viverra cursus, viverra non, neque! Nullam nunc. Quisque vel nibh. Nullam vitae ante vitae diam aliquam volutpat. Nullam bibendum tellus vitae dui. Suspendisse vehicula vestibulum ligula. Nullam eget nisl.


<span>The span element looks like this</span>
<a>The anchor element looks like this

A long paragraph. Nullam nec dolor. Integer mauris metus, dictum ut, consequat vitae, bibendum vitae, arcu. Maecenas ut enim vel nunc laoreet tempus? Nulla porta ultrices nunc. Maecenas eleifend, diam eget interdum placerat, eros purus accumsan neque, a vestibulum leo enim sed quam. Maecenas mi libero, molestie in, sollicitudin sed, dapibus non, felis. Sed interdum blandit nulla. In nisi! Pellentesque lacus tortor, tempus vel; adipiscing et, egestas sed, enim. Pellentesque aliquam, lectus id varius dictum, turpis dolor vehicula justo, ut faucibus dolor tortor non metus. Nam tincidunt magna non justo! Praesent nisl ipsum, vestibulum id, viverra cursus, viverra non, neque! Nullam nunc. Quisque vel nibh. Nullam vitae ante vitae diam aliquam volutpat. Nullam bibendum tellus vitae dui. Suspendisse vehicula vestibulum ligula. Nullam eget nisl.



Another long paragraph stacked below the one above. Nullam nec dolor. Integer mauris metus, dictum ut, consequat vitae, bibendum vitae, arcu. Maecenas ut enim vel nunc laoreet tempus? Nulla porta ultrices nunc. Maecenas eleifend, diam eget interdum placerat, eros purus accumsan neque, a vestibulum leo enim sed quam. Maecenas mi libero, molestie in, sollicitudin sed, dapibus non, felis. Sed interdum blandit nulla. In nisi! Pellentesque lacus tortor, tempus vel; adipiscing et, egestas sed, enim. Pellentesque aliquam, lectus id varius dictum, turpis dolor vehicula justo, ut faucibus dolor tortor non metus. Nam tincidunt magna non justo! Praesent nisl ipsum, vestibulum id, viverra cursus, viverra non, neque! Nullam nunc. Quisque vel nibh. Nullam vitae ante vitae diam aliquam volutpat. Nullam bibendum tellus vitae dui. Suspendisse vehicula vestibulum ligula. Nullam eget nisl.


target blank with jquery and prototype

To be xhtml strict compliant there can't be the target attribute in an anchor tag. Below is a way around it with prototype and jquery.

jQuery
$(function(){
  $("a[rel*='external']").click(function(){
   this.target = "_blank";
  });
});


Prototype
Event.observe(window, 'load', function() {
    $$('a[rel="external"]').each(function(link){
        if(link.readAttribute('href') != '' && link.readAttribute('href') != '#'){
            link.writeAttribute('target','_blank');
        }
    });
});



All links that you want to open in a blank window now need to have rel="external" set in the anchor link.
<a rel="external" href="http://google.com">Google Rocks.</a>

Simple javascript image slideshow

HTML
<div id="slide-show">
     <ul id="slide-images">
     	<li><img src="images/one.jpg" alt="One" title="One" /></li>
     	<li><img src="images/two.jpg" alt="Two" title="Two" /></li>
     	<li><img src="images/three.jpg" alt="Three" title="Three" /></li>
     </ul>
</div>


CSS
#slide-images{
	position:relative;
	display:block;
	margin:0px;
	padding:0px;
	width:290px; /* Adjust to width-height of your images */
	height:142px;
	overflow:hidden;
}

#slide-images li{
	position:absolute;
	display:block;
	list-style-type:none;
	margin:0px;
	padding:0px;
	background-color:#FFFFFF;
}

#slide-images li img{
	display:block;
	background-color:#FFFFFF;
}


JS
var delay = 1000;
var start_frame = 0;

function init() {
	var lis = $('slide-images').getElementsByTagName('li');
	
	for( i=0; i < lis.length; i++){
		if(i!=0){
			lis[i].style.display = 'none';
		}
	}
	end_frame = lis.length -1;
	
	start_slideshow(start_frame, end_frame, delay, lis);
	
	
}



function start_slideshow(start_frame, end_frame, delay, lis) {
	setTimeout(fadeInOut(start_frame,start_frame,end_frame, delay, lis), delay);
}


function fadeInOut(frame, start_frame, end_frame, delay, lis) {
	return (function() {
		lis = $('slide-images').getElementsByTagName('li');
		Effect.Fade(lis[frame]);
		if (frame == end_frame) { frame = start_frame; } else { frame++; }
		lisAppear = lis[frame];
		setTimeout("Effect.Appear(lisAppear);", 0);
		setTimeout(fadeInOut(frame, start_frame, end_frame, delay), delay + 1850);
	})
	
}


Event.observe(window, 'load', init, false);


You also need the following javascript files... prototype.js, scriptaculous.js, effects.js

Just load the js above in your head and it'll start slidin'

Credits: Andrew Sellick - http://www.andrewsellick.com/30/simple-javascript-slide-show-using-scriptaculous

Floating 2 column layout

Basic CSS with global clear
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, 
dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, 
sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    background: transparent;
}

:focus {
    outline: 0;
}

div#wrapper{
	width:800px;
	margin:0px auto;
}

div#header{

}

div#left{
	float:left;
	width:380px;
}

div#right{
	float:right;
	width:380px;
}

div#footer{

}

.clear{
	clear:both;
}	


HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<%= stylesheet_link_tag "application" %>
<link href="application.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
	<div id="header">
	
	</div>
	<div id="left">
	
	</div>
	<div id="right">
	
	</div>
	<div class="clear"></div>
	<div id="footer">
	
	</div>
</div>
</body>
</html>