The Python editor PyPe is intended to be a simple editor that includes what you need and not much more. It does however include a nice little feature that I haven’t seen anywhere else. It’s called todo comments. A comment in Python looks like this
#A comment
A # sign followed by your comment. A PyPe todo comment is a perfectly valid Python comment and looks like this
#Todo: a todo comment
That’s a # sign followed by the word todo, a colon and the todo comment. Remember that you can’t have anything in front of it, so this line
a = 5 #Todo: a todo comment
includes a valid Python comment but it is not a valid todo comment because of the python code in front of it.

So what’s special about that? Let’s first take a look at a PyPe screenshot :

The PyPe view consists of a text area where you write your Python code, a browsable code tree to the upper right and a box with shortcuts to your todo comments to the lower right.

Whenever you think about something that needs to be done or find a problem with your Python code that you can’t fix instantly, add a todo comment and PyPe adds it to your todo list. The todo list is built when you open your file and refreshed everytime you press F5 (note: you might have to enable todo comments in the document menu).

Example todo comments:

This results in the following todo list :

You can add todo comments anywhere in your code and when you doubleclick an entry in the todo list you are taken to the line that contains the todo comment. Simple, effective and brilliant!

A menu is a list of the main pages on a website so why shouldn’t you use html lists for building them? Two common reasons for not doing so are

1. I don’t want those dots in front of the links
2. There is so much whitespace that they are useless for menus

But those problems disappear as soon as you apply a little CSS to them.

Let’s just mention some reasons to use lists

1. Html list tags are short
2. A menu is a list
3. Other types of user agents (text browsers, cellphones etc.) will better understand how to represent your menu because list tags carry meaning, divs and tables does not.

Ok, now it’s time to start with the html for a simple menu. We will use an unordered list (specified with <ul>) because you don’t have to read the pages in the specified order.

<ul id="menu">
<li>Widgets</li>
<li>Gadgets</li>
<li>Subjects</li>
</ul>

To avoid the problems mentioned above we have to apply a little css to our menu. To remove the list markers (dots) we will apply list-style-type: none; to the ul. To avoid excessive whitespace we must specify margin and padding on both the list and all the list items within it. A border is not really necessary but I want one to make the menu more visible on this page.

#menu{
list-style-type: none;
padding: 0px;
margin: 10px;
width: 120px;
border: 1px solid #FF5C00;
}
#menu li{
padding: 0px;
margin: 3px 5px;
}

That is a margin of 3px above and below each list item and 5px to the left and right:

• Widgets
• Gadgets
• Subjects

Now, that looks more like a menu! (If it had links)
But if I want a horizontal menu? Just one and a half change. List items are normally rendered as block level elements which implies that each list item should be placed below the previous but this can be changed with display:inline; in the CSS code for the list items. If you are unfamiliar with the different display types available you should read about the CSS display property at W3schools

The width of the whole list must also be changed to make room for the horizontal orientation.

#menu{
list-style-type: none;
padding: 0px;
margin: 10px;
width: 300px;
border: 1px solid #FF5C00;
}
#menu li{
display: inline;
padding: 0px;
margin: 3px 5px;
}

And the result :

• Widgets
• Gadgets
• Subjects

Just one note for those who need fine control over the spacing of the menu items; Some browsers apply extra whitespace between these list items if there is whitespace between the </li> and <li> tags

That’s the basics of using lists for menus. As you see, the html code is very, very short and you are encouraged to use CSS for creating the visual appearance. The menu might look boring now, so head over to the Listamatic and fix that.

One more flaw in IE is that it does not render 1px dotted borders. What you get from IE are 1px dashed borders. 2px dotted borders are fine, however. One solution is presented by Adam Kalsey but that does not work if you want a dotted border on all 4 sides. A little modification is all that is needed, and no css parsing bug hacks are necessary. First you need is a 2×2 px image where the top left and bottom right pixel is one color and the top right and bottom left pixel is a different color. Then wrap the element inside a div with the following class :
.wrap{
background-image: url(2x2pxl.gif);
background-repeat: repeat;
padding: 1px;
width: 250px;
}

set the width to whatever value is appropriate.
Then assign a background color to the element you want the dotted border on so the 2 by 2 pixel image doesn’t show through
#elementWithDottedBorder{
background-color: #FFFFFF;
}

Put it together like this …
<div class="wrap">
<div id="elementWithDottedBorder">
Bla bla bla
</div>
</div>

And you’re done!

You can now register up to 25 .info domains totally free! The domain registrars offering this deal are
Domaindiscount24, Domainsite and NameSecure. Other registrars are also offering .info domain registrations at lower-than-normal prices. The free domain offer is time limited (to 30 sept at Domaindiscount24) and might be limited to a total of 25 free domains across the registrars.

Since this is the first post, I might as well explain what this blog is all about.

This is a blog where I will write down my thoughts on various subjects related to (open source) web development, like Python programming, PHP, templates, editors, databases etc. This includes comments on current news, tips&tricks and I will present of some code of my own.

I am doing this mostly because I think it will be fun. Besides that, I hope that I can present some smart tips and useful pieces of code for other developers. Always nice to help. Maybe I can use this blog to market myself too.

Since this is a somewhat personal website, I decided to have my initials in the domain name (hb). Something like hbwire, hbedge or something. And I wanted a .com domain. But all the domains I checked were already taken. Hbpython.com was an option, but it would indicate that this blog is only about Python, which it is not. Then I thought about html/hbml. That would be cool! But also taken. So I ended up with xhbml.com, which I think is a pretty cool domain name and it suggests that the content is related to web development without locking it to a narrow subject. My own eXtensible Markup Language or something. Maybe I’ll figure out a different meaning for it later.

I chose WordPress as the publishing tool for this blog because it has a good reputation, has the desired functionality and was easy to set up. It also helped that I already have a multi domain hosting account with PHP/MySQL support so I could just upload the files and start blogging without any expenses.