Archive

Archive for the ‘html’ Category

A couple of plugins that make web developing life easier.

September 18, 2011 Leave a comment

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. ]

Advertisements
Categories: html, Tip, vim

Passing array of checkbox values to php through jQuery (example)

August 2, 2011 7 comments

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)

)

Categories: html, jQuery, php

Beautify your code with pygments

July 1, 2009 1 comment

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.

Categories: css, html, Tip