Archive
A couple of plugins that make web developing life easier.
matchit
The plugin basically extends the functionality of % in vim, it cycles between opening and closing tags, very handy if you love coding htmls by hand.
Steps to make it work: { windows users pls unzip the files to the vim home directory }
1) download the zip file from the above link
2) unzip matchit.zip -d ~/.vim
3) add the following line to your .vimrc
filetype plugin on
if filetype plugin is set to off [ default setting ]
4) open an existing .html file or create a new one, under normal mode, pressing % will cycle between html tags, v% will select text between opening and closing tags (with the opening tag name selected)
jsbeatify
This is yet another handy and powerful vim plugin. As its name suggests it does one thing and it does really well – beatifies javascript files. Steps to make it work:
1) Download it and save it to ~/.vim/plugin
2) Open an existing .js file or create a new one, under normal mode, press \ff and the code is formatted
There’s one thing that this plug in is not able to do – format the selected js code – in other words you can’t beautify the embedded js code in html or php files.
[ Edit 9/18/2011: Actually I just found another better solution to format javascript code – what I like the best is that this indenter formats all javascript code either in stand-alone file or embedded code. Just put the file html.vim from http://www.vim.org/scripts/download_script.php?src_id=6885 to ~/.vim/indent and use gg=G to format the whole file or = to format selected code. ]
Passing array of checkbox values to php through jQuery (example)
input.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function doit() {
var p=[];
$('input.cb').each( function() {
if($(this).attr('checked')) {
p.push($(this).attr('rel'));
}
} );
$.ajax( {
url:'/process.php',
type:'POST',
data: {list:p},
success: function(res) {
alert(res);
}
});
}
</script>
</head>
<body>
<input type="checkbox" class="cb" rel="1"></input>This is 1<br />
<input type="checkbox" class="cb" rel="abc"></input>This is abc<br />
<input type="checkbox" class="cb" rel="999"></input>This is 999<br />
<a href="javascript:void(0)" onclick="doit()">Click</a>
</body>
</html>
process.php
<?php
print_r(@$_POST['list']);
Test-run screenshot:
Live demo (Using google app engine therefore output is slightly different to the screenshot above. The relevant code that deals with the post request is as follow:
class Chkbox(webapp.RequestHandler):
def get(self):
...
def post(self):
d=self.request.get_all( 'list[]' )
self.response.out.write(d)
)
Beautify your code with pygments
Ever wonder how I colour-coded my code blocks with colours? CSS? That’s almost right. WordPress does not support css customisation for standard accounts, but you can get around with this limitation by using inline css. Here’s a good post talking about this technique: http://www.scratch99.com/2007/06/wordpress-simple-css-text-boxes-in-posts/
Inspired by that post, here’s how I do to make my snippets colourful:
1. Download Pygments from http://pypi.python.org/pypi/Pygments [ the .tar.gz file. The pygments site seems to be down at this moment ]
2. Untar it and install it as root
tar xzf Pygments-1.0.tar.gz
cd Pygments-1.0
sudo python setup.py install
3. After the installation you are ready to style your code. Some examples:
pygmentize -f html -O noclasses myscript.sh
outputs css-lized html to the screen
pygmentize -f html -O noclasses -l bash myscript
outputs css-lized html to the screen, option -l bash is used to specify which lexer to use
pygmentize -f html -O noclasses -o myprog.html pyprog.py
outputs css-lized html to file myprog.html
4. Copy and paste the html code from above step into the code block in your post. Preview it if needed. Then publish.
Rico's Tech Memo 