You Are Here Home > Web Design

Web Design

PML – A Python template engine

I finally decided to release PML as an open source software. I developed this template engine for a project that unfortunately never happened using Python.

Here is a sample application using PML and Yahoo! Search API:
http://web-search.code-head.com/

You can download it here:

[D O W N L O A D]

The web search example is also included in the download.

PML was written to be fast, simple and compact. Here are some of it’s features:
1 – Template filters
2 – Output filters
3 – Template variable filters
4 – Template cache – default
5 – Bytecode cache – default
6 – Complete output buffer cache
7 – Garbage collection
8 – Output compression – GZIP
9 – A powerful, quick compiler
10 – Ability to add helpers easily
11 – Ability to add custom compiler tags
12 – Auto escaping your variables, even lists, dicts, and tuples
13 – Compile templates once until you edit them

And more.

The web search application above is included in your download and it demonstrates almost all the aspects of this powerful template engine.

PML – A Python template engine
Comments (0)   Filed under: Programming, Python, Web Design, Web Development   Posted by: Codehead

CSS Tabs

I was looking for a nice and simple CSS tabs implementation and came across:
http://htmldog.com/articles/tabs/

While this was a nice solution, it didn’t support padding the tabs and when you did it didn’t look right in all the browsers so I had to modify it to this:

HTML side:

<div id="tab-nav">
   <ul>
      <li id="selected"><a href="#">1st tab</a></li>
      <li><a href="#">2nd tab</a></li>
      <li><a href="#">3rd tab</a></li>
   </ul>
</div>
<div id="page-content">
   Some content
</div>

CSS side:

#tab-nav {
	border:1px solid #FFFFFF; /* Stupid IE7 */
}
#tab-nav ul {
	list-style-type:none;
	padding:0px;
	margin:0px;
}
#tab-nav li {
	float:left;
	border: solid;
	border-width:1px 1px 0px 1px;
	border-color:#666666;
	margin:0px 0px 0px 10px;
	background-color:#c9cde2;
}
#tab-nav a {
	text-decoration:none;
	padding:7px 10px 7px 10px;
	color:#333333;
	display:block;
}
#page-content {
	border:1px solid;
	border-color:#666666 #CCCCCC #CCCCCC #CCCCCC;
	border-width:1px 2px 2px 1px;
	clear:both;
	padding:10px;
}
#tab-nav #selected {
	position:relative;
	top:1px;
	background-color:#FFFFFF;
}

And here is how this looks like:

Some content
CSS Tabs
Comments (2)   Filed under: CSS, HTML, Web Design, Web Development   Posted by: Codehead

How to fix transparent PNGs in Internet Explorer

You might know already that there are some issues with transparent GIFs but PNGs don’t have those issues.
The problem with transparent PNGs is that Internet Explorer doesn’t like them so much and gives them a funny background.

So here is the solution that works great:
http://homepage.ntlworld.com/bobosola/index.htm

How to fix transparent PNGs in Internet Explorer
Comments (0)   Filed under: Annoying Stuff, JavaScript, Web Browsers, Web Design, Web Development   Posted by: Codehead

Acid Test and different web browsers

Acid test is a test to identify problems web browsers have when rendering web pages.
There are 3 versions Acid Test 1, 2 and 3.

Acid2 should look like this:

But here is how Acid Test 2 works on my different browsers:

Google Chrome:

Firefox:

Opera:

Safari:

Retarded Internet Explorer 7:

!!!

Now, none of my browsers passed Acid Test 3!!!
It should look like this:

Google Chrome:

Firefox:

Opera:

Safari:

Retarded Internet Explorer 7:

Of all the browsers, all perform almost the same but only Internet Explorer is way off, I don’t know what the developer team who is in charge of Internet Explorer does at Microsoft every day. I’d say all of them deserve to be fired!!!

Of all the other browsers, I think Apple Webkit rendering engine is the best (Google Chrome and Apple Safari) which I think is another reason for Google to use it in their browser Chrome.

Apple Webkit is a state of the art and open source HTML rendering engine developed and released by Apple.

Here are the links to these tests:
Acid2
Acid3

Acid Test and different web browsers
Comments (1)   Filed under: CSS, HTML, Web Browsers, Web Design, Web Development   Posted by: Codehead

My first impressions of Google Chrome

1 – It was extremely easy to install.
2 – It looks like a solid product.
3 – It doesn’t crash like IE 8.
4 – It’s fast.
5 – It’s very smooth.
6 – Has spell checking built in. (Just right click on the words that are underlined…)
7 – It’s very simple and elegant looking.
8 – Has nice new JavaScript engine V8.
9 – Has a nice JavaScript console and debugger.
10 – It doesn’t take 3 seconds (15 million instruction) to open a new tab.
11 – When you right click on a link it says “Copy link address” not “Copy shortcut” ;)

I’m using Google Chrome to write this and it might be the end of IE horror for me :) (and yes I don’t like Firefox…)

I also noticed that Cnet news wrote this funny article:
http://news.cnet.com/8301-17939_109-10030522-2.html

In case the author doesn’t know (which I think they should, before they write for Cnet) that is Google’s general terms of services and applies to all of their products including Gmail:
https://www.google.com/accounts/TOS?loc=US&hl=en

My first impressions of Google Chrome
Comments (0)   Filed under: Web Browsers, Web Design, Web Development   Posted by: Codehead

Google Chrome; another browser for your browser arsenal!

Now you can download a beta version here:

http://www.google.com/chrome/

I make web pages so I have to have all the possible browsers installed so I can check the pages I code in all of them and make sure they look the same.
So far I have Internet Explorer 7, Internet Explorer 6, Firefox, Opera, Safari and now Google Chrome!

It was a really easy and smooth installation and it even automatically imported my favourites from Internet Explorer.

Google Chrome; another browser for your browser arsenal!
Comments (0)   Filed under: Web Browsers, Web Design, Web Development   Posted by: Codehead

Fading images with Fireworks

Here is how to do it:

1 – Open your image
2 – On the top menu, go to Commands > Creative -> Fade Image
3 – A dialog box will open, choose the kind of fading effect that you want
4 – Click OK
5 – If you select your image, you will see a line with a dot and a rectangle on each side, hold the dot and move it around and experiment. Use the rectangle to move the whole effect around and the dot to resize it and change it’s direction.

Enjoy :)

Fading images with Fireworks
Comments (0)   Filed under: Web Design, Web Graphics   Posted by: Codehead

Fixed font sizes on Firefox 3

In Firefox 2, you couldn’t have a fixed font size, as soon as a user zoomed on your page, where ever you had a fixed font, it would get bigger and ugly.
So I used to use images for menus in form of CSS sprites.

But in Firefox 3, they fixed this issue.

Now, I find those arguments about how it was OK to blow the web pages and how it made sense, blah blah, pathetic!

Fixed font sizes on Firefox 3
Comments (0)   Filed under: CSS, HTML, Web Design   Posted by: Codehead

You Suck At Photoshop!

Take a look at this funny series of Photoshop tutorials called “You Suck At Photoshop“.

Like he says in one of the videos, he made me realize that I only use like $5o worth of Photoshop :) what a waste!

You Suck At Photoshop!
Comments (0)   Filed under: Web Design   Posted by: Codehead
« Newer Posts