Cause stock blogs are for...

CustomBits.net just went live!

This site has to live up to it’s slogan, so I chose to create my own website from scratch. Almost all products and technologies being used have some sort of custom flavor added to it.
In this article I will give a little introduction to this website - what it’s all about - and talk a bit about how I did certain things from a webdevelopment point of view.

I created CustomBits.net to share my love for customizing. This website focuses on personalization of technology in general.
The articles you can expect vary from tweaks for your favourite gadgets to hardcore programming a bit of software to help you out in your daily live. Some of these articles might be a little steep but I’ll try my best to keep things simple.
I've set the goal to try and write one of these articles every week(end, most likely). So if you never want to miss a single article I'd suggest you signup to my RSS feed, you'll find a link at the bottom of each page.
Finally I would like to point you to the disclaimer of this website, some of the topics discussed here could do harm to your beloved gadget, so beware.
Now let’s talk a bit about why this website is not for suckers!

This website is not for suckers

I used to be a webdeveloper myself so the love for everything related to the web, and ofcourse customizing the heck out of it, comes natural to me. Being a programmer, I like to keep things as efficient as possible.CustomBits.net is another example of how I believe certain things should be done on the web.

Keeping it all as lightweight as possible but still having all the eyecandy is one of the goals I aim for. After all if your website loads slowly a user might already be off to some other site. If your site looks horrible it might scare them away as well.

One of the ways I try to accomplish being as lightweight as possible is keeping the graphics used to a minimal. Most colors you see on the main page layout of this website are defined in CSS. The gradient background of the sidebar (the tags, for example) is a nice example I will discuss in a bit more detail.

Browserwars

So the browserwars are being waged again and us webdevs love it. Finally some(what) decent CSS3 support is becoming available to us, the joy! But oh no! Stupid Internet Explorer 9 still does not support gradient backgrounds, what to do… CustomBits.net to the rescue.

What we could do is just have IE9 fallback to loading a background image (say a jpeg). But being the programmer means I found that solution not too satisfying. When looking a bit on the web for a solution I found that IE9 does support rendering of SVG (Scalable Vector Graphics).
Now you might think that’s not much better then just using a simple jpeg, I would have to disagree. Using an SVG means it’s scalable, so when looking at the sidebar it means it can grow in height as far as you'd like without ever loosing the gradient effect. This also makes things resolution independent.
So now I was satisfied! Below I posted a small example of the styles I use to accomplish it all (note that IE8 and below use CSS3Pie for the gradient effect. CSS3Pie is disabled for IE9)

div#rightsidebar
{
  float:right;
  width:270px;
  margin:20px 0 0 50px
}

div.sidebar
{
  padding:15px;
  float:left;
  width:90%;
  min-width:240px;
  background:url("/img/sidebarbg.svg");
  background:-moz-linear-gradient(#ECF5E8, #FFF);
  background:-webkit-gradient(linear, left top, left bottom, from(#ECF5E8), to(#FFF));
  -pie-background:linear-gradient(#ECF5E8, #FFF);
  behavior:url("/styles/pie.php")
}

  <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.0" width="100%"
     height="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
   
    <defs>

      <linearGradient id="myLinearGradient1"
                      x1="0%" y1="0%"
                      x2="0%" y2="100%"
                      spreadMethod="pad">
        <stop offset="0%"   stop-color="#ECF5E8" stop-opacity="1"/>
        <stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"/>
      </linearGradient>
    </defs>
   
    <rect width="100%" height="100%"
       style="fill:url(#myLinearGradient1);" />
  </svg>

Note that Internet Explorer may cause a render bug in the above SVG example (which is actually a bug of syntaxhighlighter). If your still hooked on that piece of you know where to put it, just remove the line with the XML:NAMESPACE in it but be sure to leave the SVG declaration.

In a follow up post I will talk about why stock Fancybox is for suckers and how you could tweak it to give it that custom edge.

Continue reading on page 2