Permalink | Leave a comment  »

Thought of posting links to some of my previous work at the Center for Genomics and Bioinformatics(CGB), Indiana University. 

URL: BOV CGB

Description: BLAST Output Visualization Tool (BOV) allows users to interactively visualize the BLAST high-scoring segment pairs between query and hit sequences for dissecting complex matching patterns. This software is aimed at facilitating users interested in identifying regions of colinearity, duplication, translocation, and inversion using the BLAST program.

Publication: 
Rajesh Gollapudi, Kashi Vishwanath Revanna, Chris Hemmerich, Sarah Schaack, and Qunfeng Dong (2008) 
BOV - A Web-based BLAST Output Visualization Tool. BMC Genomics. 2008 Sep 15;9(1):414. [ PubMed ]

Permalink | Leave a comment  »

via tutorial9.net

If you are just looking for the essence of this article, here it is -
Overall the best out of the box cache plugin configuration in my opinion is: Hyper Cache + DB Cache Reloaded. Despite the allure of W3 Total Cache’s professionalism and only slightly less admired performance, I prefer to retain some manual control over my blog. For those on a medium priced shared server or if you like the idea of installing and forgetting, the W3 Total Cache plugin will be your ideal choice.

A lot of people still use WP-Cache and WP Super Cache. They are still respectable Wordpress caching plugins but consider trading up for Hyper Cache or W3 Total Cache. These newer caching plugins prove better performance and install/config much easier and cleaner. Also the development communities around these newer plugins are much more active and attentive to their users.

Permalink | Leave a comment  »

Permalink | Leave a comment  »

Permalink | Leave a comment  »

Designed by John Jacobsen, with help from Sarah Stup
url: http://www.nch.org/medical-services/gastroenterology-center/connie.php or http://nch.org/gi

Permalink | Leave a comment  »

Cascading style sheets(CSS), which is responsible for styling various web pages, is and has always been going through a lot of changes. This blog post, tries to summarize some of the new and exciting ways to write it.

1. Grids
   • Reset - reset the default font styling in all major browsers
   • Column grid
   A set of classes or styles, which you can use to generate a grid. This is extremely helpful if you want to layout a site quickly. Most often these grids provide a centered layout of some xxx px, which can be split into any number of columns that you wish.
   • Typography
   A set of classes which prescribe the default font sizes and the type of fonts to use. For example,<h1> bold 36px Verdana and <h2> bold 30px Verdana
   • Icons
   A set of icons that are widely used. Although the default icons may not be useful or ideal for everyone, they can act as a placeholder. Typically they include icons such as RSS feed, user add/delete, buttons etc
   • Styles for form elements
   This is very helpful, if the website that you are developing includes lot of forms. Frequently the grids provide ways to develop inline and block styles for form elements.
   • Scripts/Tools
   Scripts to minify/compress the css. These could help you save bandwidth. My personal preference is the Yahoo UI compressor, which can compress both your css and js.
CSS Grids are widely used to handle the differences between various browser implementations and to simplify common tasks. Of the various grids - 960.gs, YUI grid, Blueprint, Bluetrip seem to be ones that are widely used. CSS grids typically include the following - You can choose one or more of the available components from a CSS Framework depending on your situation. Be advised, there is no one framework that can be used for handling all the styles/issues that you have in mind. Each CSS framework is designed with a set of principles in mind, while being flexible enough to allow addition of other styles.
2. OO approaches to write/generate CSS

First of all, CSS is not object oriented and is not a programming language. The sole purpose of CSS is to let the browser know how to display or render a HTML element. Object oriented approaches to CSS, are targeted at redundancies in writing CSS. For example, consider the following CSS

#container #content #header .title {

    font-size: 16px;

}

#container #content #header .sub-title {

    font-size: 12px;

}

You see the problem? If you change the name of the '#content' to '#newcontent', within your html markup, then you end up changing all occurrences of #content in your CSS. SaSS and xCSS are attempts at applying the DRY (Do not Repeat Yourself) programming paradigm to CSS. They typically rely on a programming language such as PHP or ruby to generate CSS. For example, SaSS converts

#box
:border 0
:color black
.orange
:border 1px orange

to

#box {
border: 0;
color: black;
}
#box .orange {
border: 1px orange;
}

 Combine this with the abilities to use variables, mixins and templates. You can see how useful it could be in managing the css for a big corporate website.

I am eager to hear about any good frameworks or tools that I might have missed as part of this blog post.

Permalink | Leave a comment  »

We changed Finelight's web site last Friday, in our efforts to improve Finelight's search engine ranking, add more social media features and promote involvement of Finelighters among many others.

You can follow Finelight on Twitter @finelight and be a fan on Facebook.

Permalink | Leave a comment  »

Rajesh

Permalink | Leave a comment  »

When using css (opacity) to set the transparency of an element, the child elements inherit the transparency of the parent element.

For example, if you set 50% transparency to the body element, the whole pages becomes 50% transparent. Even if you explicitly set the opacity to 1 for the child elements, the transparency is still there.

This is particularly not desired if your child elements has text.  As you can see from the screenshots, the text looks clear in Screenshot 1.  In Screenshot 2, the text dissolves into the background when opacity is set to 0.5. I used opacity 0.5 just to demonstrate this. The text looks better with opacity 0.9, but this is not the ideal solution.

Solution
To prevent this, the only way is to use a  png with the desired alpha transparency.
Note:
Transparent pngs are not supported by IE 6. So make sure that you use the fix mentioned at TwinHelix

Permalink | Leave a comment  »

Screenshot taken on IE 6 using Adobe BrowserLab :)
Designed by John Jacobsen

Permalink | Leave a comment  »

Permalink | Leave a comment  »

Here is how you can position an element at the center of a web page (both horizontally and vertically).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<html>
<head>
<style type="text/css">
div#centered {
    position: absolute;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type='text/javascript'>
$(document).ready(function(){
var height = $('#centered').height();
var width = $('#centered').width();
var docheight = $(document).height();
var docwidth = $(document).width();
var top = (docheight - height)/2;
var left = (docwidth - width)/2;

$('#centered').css('top', top+'px');
$('#centered').css('left', left+'px');
});
</script>
</head>
<body>
akjdakfjdkf
<div id="centered">
       <p>Paragraph 1 text.</p>
       <p>Paragraph 2 text.</p>
</div>
kadjkfjadkf
kajfkadjf
<div>
akjfkdajfk
</div>
<p>ajdfkdjaf kajfkdajf .jkjakdjfakdjf. 
kadjfkadjfka.
kdjfkajdfkdajf kajdfkadjf kjfkajdfka. </p>
</body>
</html>

The content of the div with the id 'centered', will be positioned at the center of the web page. The 'absolute' positioning ensures that it is positioned at the center w.r.t the webpage or document.Instead if you want to position an element relative to an enclosing div, changing docheight and docwidth variables accordingly ensures that your element is centered.

This is often useful in situations where you want to display error messages like 404-page not found and for showing 'page redirect' messages.

Permalink | Leave a comment  »

Often you face a situation where you don't have enough content on the webpage to make use of the space available in the browser window. A good example, for this is the "404 - File not found" page on your site.

I use the following technique to get rid of the situation where the footer doesn't stick to the bottom of the page. The idea is simple - Measure the height of the content and compare it with your window height. If the content height is less than the window height, then fill the difference with an empty space or to say exactly, add a div with the height set to the difference.

The code below uses jquery javascript library and should work pretty much in every browser.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

/**
 * @author rajesh gollapudi
 */
$(document).ready(function(){
    placeFooter();
    $(function(){
        $(window).resize(function(){
        //    console.log('You resized the window!');
			if ($('#footer-spacer').length) {
				$('#footer-spacer').remove();
			}
            placeFooter();
        });
    });
});
function placeFooter(){
    // console.log("window height: " + $(window).height());
    var bottom = $('#footer').position().top + $('#footer').height();
    // console.log("footer position: " + bottom);
    if (bottom < $(window).height()) {

        var diff = $(window).height() - bottom;
        // We need to add bottom padding to this difference. This is to push the footer up a little bit, if the footer has any padding defined. 
        var padding = parseInt($('#footer').css('padding-bottom')) + parseInt($('#footer').css('padding-top'));
        diff = diff - padding;


			$('#footer').before("<div id='footer-spacer' style='height:" + diff + "px;'></div>");
	}
}

Enjoy !!

Update:

I have updated the code above, to make sure that the footer sticks to the bottom on window resize events. Now when you are using FireBug, to should notice the footer moving up and down and window resize events. This is especially useful if you have a large monitor.

Permalink | Leave a comment  »

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<script type='text/javascript'>
// For js file
loadjscssfile("http://example.com/js/rssfeedreader.js", "js");
// For css file
loadjscssfile("http://example.com/css/rsspage.css", "css");

function loadjscssfile(filename, filetype){
    if (filetype == "js") { //if filename is a external JavaScript file
        var fileref = document.createElement('script')
        fileref.setAttribute("type", "text/javascript")
        fileref.setAttribute("src", filename)
    }
    else
    if (filetype == "css") { //if filename is an external CSS file
        var fileref = document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    document.getElementsByTagName("head")[0].appendChild(fileref)
}
</script>

Permalink | Leave a comment  »