Lowter

Sponsor: The JavaScript Anthology

The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks (external link)

Browse Blog Archives

« August 2008 September 2008 October 2008 »

Blog Entries from September 2008

Multi-Column Lists with CSS

By Ethan Poole

When redesigning Lowter's homepage, one of the first decisions was to move the category list somewhere else because it took up a lot of valuable space. I decided to move the category list from the left-hand menu to the centre column towards the bottom of the page because, in the grand scheme of things, the category list is not very important. However, it would look horribly awful for the category list to remain vertical as it previously was in the left-hand menu. It made more sense to break the long category list into two columns to take advantage of and to compensate for the increased width. Whilst tables probably would have made the easiest solution, working well across browsers, it was decided to use CSS to create the multi-column list.

CSS multi-column lists are sadly not as easy to create as they should be. In the future, CSS3 will luckily have a multi-column module to make the process a snap. With the resources available to web developers now, however, multi-column lists are not very easy. I searched around on Google to find the best tutorial for creating multi-column lists, and I came across CSS Swag: Multi-Column Lists (external link) on A List Apart. The article details a few techniques for creating multi-column lists, although I selected the sixth method because the markup was more semantic. I was never able to get the method to work properly in IE7, but I was also using nested lists, which IE probably doesn't like.

Anyway, until CSS3 is fully implemented in every browser (which I wouldn't get your hopes up for), this article covers how to make multi-column lists using current CSS specifications.
Stack Overflow

By Ethan Poole

On the forums, Eugene (laserlight) pointed out a new website called Stack Overflow (external link) that is gaining some momentum in the development world. Stack Overflow is a "collaboratively edited question and answer site for programmers". Personally, it reminds me of Digg with wiki capabilities, but geared towards programming. The site works by someone asking a programming question, people answer that question, other people revise the posted answers, and then people vote on that question. It sounds kind of complex, but the system allows for "good" questions to make it to the front page and for people to collaboratively answer them.

I know that most people don't want to subscribe to yet another programming-related website, but this might be a good one to bookmark. I'm subscribed to the question feed, so that if I see an interesting question/topic in the feed I can head over to the website. Overall, Stack Overflow is an interesting concept for a website and I hope that it stays afloat in the vast sea of development websites.
Redesigning Lowter's Homepage

By Ethan Poole

As some of you have probably noticed, Lowter's homepage (external link) has been redesigned! The design was much needed and gave Lowter a nice facelift without redoing the entire design. An issue I personally have is not being able to do subtle design changes. Rather, every update to the design of Lowter is always radically different and retains very little from the previous design. However, Lowter's current layout works very well across browsers and in different screen resolutions, so there was no need for a major layout change.

The goals for the new homepage were:
- Feature the latest content
- Make the blogs more prominent
- Move the forum box into a more viewable position
- Remove excess content
- Maximise the area before the fold
All of this was accomplished to create a homepage that trims off unused content (such as the links and news that were never actually updated) and that makes useful content more easily accessible. The only issue with browser compatibility was getting the multi-column category list to work in IE7. In the end, I ended up hiding the list in its entirety out of frustration for it not working. It is not the best solution, but it is not super important as in the future we plan to replace the category list on the homepage with a tag cloud.

I think one mistake that was made with Lowter's old homepage was trying to do too much. We wanted to have links and the latest Internet news available right on our homepage, but this became too tedious to update and ended up never being updated. The only things updated were the blogs, the articles, and the forum discussions. For our redesigned homepage, this is all that we kept, making our homepage much simpler.

With a few simple changes you can give your website a nice, easy facelift, without the trouble of designing an entirely new layout. This relates to the blog entry I wrote a few months back about radical and subtle redesign. Lowter actually took the subtle redesign path and now our homepage looks much better, and only with a few hours work too!
Beanstalk SVN Hosting

By Ethan Poole

Version control is an important aspect of a good development environment. Even a single-developer project should have a version control system in place to manage their code changes. However, it is especially important to have version control for a project with multiple developers, to allow each developer to work on the project without screwing up everyone else's work. Unless you have your own server, you are going to have to find a company that offers hosted version control, probably for SVN or for CVS. Often these services are pricey (especially in comparison to a normal hosting account) and the interfaces are clunky.

Recently, I discovered Beanstalk (external link), a hosted SVN service that is actually worth the money. The interface is intuitive and elegant and the pricing is reasonable. They also integrate into other programs, like Basecamp and Twitter, plus they have an iPhone interface! To me, it just seems they are offering a service that is from today's web, not from the Internet five or six years ago like other hosted SVN providers. I just wanted to give them a shout-out for their great service. They also have a free account level if you want to give it a try!
Migrate Your RSS Feed to Feedburner

By Ethan Poole

Many of you have probably heard of Feedburner (external link), an online feed manager that tracks your feed statistics and provides other feed-related services (such as advertising in your feeds). Google recently purchased them as well, so if you are an AdSense user you may benefit from the AdSense-Feedburner integration that Google is currently working on. Lowter finally made the switch to Feedburner to manage our feeds, primarily to gather statistics on how many subscribers we have. Feedburner is certainly a very handy tool and it is easy to start using! You can read more about the benefits of Feedburner (external link) on their website to convince you to start using it. I am just going to be focusing here on how to migrate your old feeds to Feedburner.

So you may be asking yourself "What if I already have all of my subscribers pointed towards a certain URL and I don't want to point them towards that ugly Feedburner URL?" Well, it is luckily pretty easy to migrate your old RSS feeds into Feedburner without having to use that horrible, ugly Feedburner URL. In a nutshell, you move your current feed to a new URL, point Feedburner to that new URL, and finally have your feed's old URL point to Feedburner. Don't worry, it's pretty easy to do.

First, let's just explicitly state each URL used in the migration process to avoid confusion:

Desired URL

the URL you want your subscribers to see and to use

Feedburner URL

the URL Feedburner gives you

New feed URL

the URL for your actual RSS feed

I am going to assume that your RSS feed is currently located at your desired URL. Hence, in the migration process to Feedburner, the end URL for the user needs to remain the same.

Okay, let's say that your current RSS feed is found at http://www.lowter.com/rss/articles, which is your desired URL that you want to continue using. First, move that feed to http://www.lowter.com/feedburner_rss/articles and then point Feedburner to that new feed address. This new feed address is a "private" feed for Feedburner's eyes only, not for subscribers. This is your actual RSS feed that syndicates content from your website. Feedburner will read your RSS feed from the new feed URL and use it to create a feed through their system. Your desired URL, at the moment, points to nothing.

Now, Feedburner gives you a lovely new URL (http://feeds.feedburner.com/lowter/articles) at which to access your feed. In order to point the desired URL to Feedburner, add these lines to your .htaccess file:

.htaccess
Options +FollowSymLinks RewriteEngine on Redirect temp /rss/articles http://feeds.feedburner.com/lowter/articles
If you are not using Apache, I know that other web servers can easily setup a temporary redirection similar to this one. Essentially, your server is now telling the RSS clients to redirect to http://feeds.feedburner.com/lowter/articles when they want to access http://www.lowter.com/rss/articles, but only "temporarily", which causes the browser to continue using your desired feed URL.

Now your feed is migrated into Feedburner! In a day's time, you will have statistics about your subscribers, click through rate, etc. Feedburner also has some other cool features that you can now check out too, so make sure you explore a little!
Adobe Kuler Colour Scheme Generator

By Ethan Poole

I am a programmer that, like many others, lacks basically any form of creativity. Sadly, I am not one of those talented people who can both design and program well. Hence, when I start working on a new website, I always play around with colour scheme generators to get the swatch of colours to use. I know generally what I want the base colour to be, but I just need a little assistance finding colours that work well with that particular base colour. Before, my favourite colour scheme generator used to be the one at Wellstyled.com (external link), but recently I discovered Adobe Kuler (external link), which I am finding more useful.

Adobe Kuler is a tool that lets designers easily create and share colour schemes. Kuler has a much nicer interface than Wellstyled.com and offers a host of additional features. One of my favourite features is the ability to create a colour scheme based on an image. I find this particularly useful for branding your website. For example, if you want your website to feel nature-like, then using Kuler you can derive a good colour scheme from an image of a Norwegian fjord, a Canadian forest, the Amazon Rainforest, etc.

You can also find a lot of amazing existing colour schemes to use through Kuler. Also, you could create some good colour schemes yourself and share them via Kuler! It is a neat little tool I stumbled upon and you should check it out if you're struggling with creating a colour scheme for your own website.
Is Money Useful to Open Source Apps?

By Ethan Poole

Two months ago, Jeff Atwood posted on his blog, Coding Horror (external link), about his experience donating $5000 to the open source .Net project ScrewTurn Wiki (external link). In a nutshell, Atwood donated $5000 of his advertising revenue into the project and four months later none of the money had been spent. Most single-developer applications simply run on time and not on money. Developers tend to work on open source projects, at least at first, simply for the enjoyment, doing the development in their free time.

Personally, I imagine if Ottoman was still an active project, how $5000 could help. The only thing that comes to mind is to hire someone to design a better interface or possibly to advertise somewhere. I think part of the issue is that there are a number of rather expensive things that could be done to improve an open source project and it is difficult to decide exactly where to spend the money. For example, say I decided I wanted to spend the money to improve the documentation and to spruce up the interface. I could very easily spend all the money just on one of those things, simply because getting that work done professionally is not cheap. That is the main reason I can see why the money has not yet been spent by ScrewTurn Wiki.

On the other hand, $5000 would buy an amazing Mac Pro...
"Web of Pain" Comic

By Ethan Poole

Awhile back I came upon this entertaining web comic about web development in the office setting: Web of Pain (external link). It is not super funny, like xkcd (external link), but it is funny nonetheless. There are the stereotypical characters of a tech office: the manager who doesn't understand anything about technology, the editor who just wants everything to work, the snobby designer, and the underpaid tech guy. It makes a few minutes of good distraction, so check it out sometime.
Reviewing Google Chrome

By Matt Oakes

After all the fuss about Google Chrome (external link), you can't help but feel that it's just hype and that it won't end up being as good as originally promised. I must say, however, that after reading through the comic I was pretty excited. I don't want to get into the debate about whether Google should have their own browser, as well as give money to support Firefox. However, I do think that it's a great thing that a wider selection of browsers has opened up recently: first with the arrival of Mozilla Firefox and now with a high profile release from Google. Beyond the politics of the browser is the browser itself, which I've been playing a little with.

The thing that struck me first was the speed of Chrome. I've become used to having to wait a few seconds for the browser to load before I can start actually browsing the web, but, with Google Chrome, there is no wait. The browser loads almost instantly and is ready for you to start browsing right away.

After it has opened, you are presented by the new tab page. This page shows a three by three grid of your most visited websites, which automatically updates, along with the bookmarks you've recently added and your most used search engines. This page has clearly been inspired by the Opera Speed Dial, but it has evolved into something quite different. Instead of being a page that the user creates with their own shortcuts, the browser guesses what to show. This could be a good thing, as you don't have to remember to update the page; however, the page might not display all the links you want or some you'll never use.

One think I find really impressive about Chrome is its interface. It's extremely clean and simple, with no status bar and no menu bar, and with only eight buttons visible. The lack of a status bar is compensated for with a box that fades in/out in the bottom left corner of the window. In addition to being a progress bar, it also displays the URL of a link when you hover over it. I like the status bar in Chrome because it only appears when it is needed.

There are some downsides to the interface though. The tab bar is integrated into the title bar of the window, which looks nice, but it comes with a very unfortunate side effect. On tab bars, in most browsers, you can double click the empty space to the right of the tabs to open a new tab. However, as the area of the tab bar is actually part of the title bar as well, it will maximise the window (the default action for double clicking a title bar in Windows). It took me by surprise when it happened the first time and I can't really think of a way around it either; except to move the tabs down a bit, which would mess up Chrome's look.

I haven't really messed with the address bar much. Google calls it the "Omnibar", but I refuse to use that particular phrase to describe what is basically an address bar that can do search. However, it seems to work perfectly well at typing in addresses and even at suggesting addresses as you type. It will also allow you to search both the web and your history, which is a nice little feature, albeit one that most browsers have already.

There are also some other features that are nice in Chrome. The create application shortcut is nice and it works very well for making web apps feel a lot more like desktop apps. The built in Gears is useful, although I've yet to find a good use for it because whenever I have access to my laptop I also have access to the Internet. Last, some of the developer tools that come with Chrome are very well thought out and work well. I particularly like the resources page, which gives a nice timeline of how the page loaded: showing what parts took the most time to load, very useful for cutting down load times.

The only thing I haven't tested very much yet is V8, Chrome's new JavaScript engine. I've not done any tests, but I can say that it doesn't feel slow and that it is speedy with apps like Google Reader. However, I find most browsers to be fast enough, excluding Internet Explorer.

Given time this browser will become a serious contender in the browser market. However, at the minute, it feels a little short on the little comforts and features, even if all the basics are polished to a mirror shine.
POST vs. GET

By Ethan Poole

When I first started learning web development, I had a hard time understanding the differences between the two HTTP request methods POST and GET. Some of the early Lowter members will remember an issue with only being able to post forum posts under 2000 characters, which was a result of me accidently using GET to submit the user's posts. Matt actually spotted the issue and probably wanted to reach through the computer screen and slap me for such a naïve error. Alas, I've come quite a ways since then.

Now, there is a lot of technical stuff that differentiates POST and GET (like how they are sent and such), but here I am just going to focus on the practical differences in relation to submitting HTML forms. Both POST and GET are HTTP request methods that send information to the server and that are very common in web development. Let's look at some of the key differences between POST and GET:

POST
- Form data sent inside the message body
- Virtually no restriction on length
- Not usually cached by any server or by any web browser
GET
- Form data encoded into the URL
- Maximum URL length of around 2000 characters
- Usually cached by web browsers
With GET, the data is encoded into the URL, such as page.php?order=username. This can be useful or this can present some issues depending on the situation. For example, it would be a problem to have the user's login username and password in the URL (login.php?username=ethan&password=manitoba). His neighbour could just peep over his shoulder and see his login details, which, in the face of more serious security threats, would be a pretty funny security issue. However, it is useful to have the search term in the URL, so the user can bookmark the search results page to return to later (search?q=php). Submitting data via the GET request method is best for search forms, table ordering, or anything else that might need to be bookmarked.

POST data is invisible from the user and much more secure. Granted, it wouldn't be too hard to setup a computer in front of a server to capture POST data, but unless you're working with secure data (such as credit card numbers) I wouldn't worry about it. If you are, then you'll want to look into SSL (external link). Submitting data via the POST request method is best for long texts (such as forum posts), login details, contact information, etc.

Other than for search forms, I would say that POST is usually the best option for sending data via forms. Since most form data is lengthy and often times private, POST is usually the appropriate request method. Also keep in mind that in (X)HTML, if you forget to specify the method attribute on a <form> tag, then it defaults to GET. Hopefully this blog post clears up any confusion between GET and POST requests in relation to HTML forms. Now, POST and GET can go much further in terms of the technical nature of their differences, but I hope the practical differences here are helpful.
Google Announces New Web Browser

By Ethan Poole

Today Google, using a comic (external link), announced that they have been developing their own web browser called Chrome. Basically, Chrome is Google's answer to improving web browsers and they have some pretty good ideas. The comic explains everything pretty well, but to list a few key points:
- The browser is focused on each tab being "separate". Each tab runs in its own process so that if it crashes the entire application doesn't go down along with it. Plus the technical setup of the tabs (what they describe as a "sandbox") makes them more secure.
- They have a new JavaScript virtual machine that will increase JavaScript performance and reliability.
- Privacy mode, like Safari.
- Built-in phishing protection via a central list constantly updated by Google.
- Gears (external link) is built into the web browser.
Overall, Chrome sounds like it'll be really nice and, knowing Google, I am anxious to see the actual product hands-on. It will be a nice improvement in the web-standards arena, but I'm afraid that it will only take market share from Firefox and not from IE, which won't help too much. I would also like to point out that the "innovative" start tab is very similar to Opera's Speed Dial. If you want more information, I highly recommend just reading the comic (external link) because it explains things very well. We'll try to have a blog entry about Google Chrome when we get our hands on it!
Magazine-style CSS Drop Caps

By Daniel Malmqvist

Today I'm going to share a quick technique to spice up your paragraphs. If you have an extreme amount of text on a webpage, you know it can be awfully boring to look at. With some simple CSS you can really spice up your paragraph, from styling the first letter to floating an image within your paragraph. The possibilities are endless. However, today I am going to focus on showing you how to style the first letter of a paragraph, using CSS's :first-letter pseudo-element, to make it drop down, like in a magazine article:

CSS
p { font: 11pt/150% Georgia; } p:first-letter { color: #999; font-size: 3.5em; float: left; line-height: 0.8em; margin-right: 10px; }
XHTML
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras eget sapien. Etiam risus quam, ultricies at, porttitor vel, luctus at, odio. Sed pharetra magna eget ligula. Duis luctus gravida sapien. Curabitur sodales hendrerit felis. Nunc a nibh. Consectetuer adipiscing elit. Cras eget sapien. Etiam risus quam, ultricies at, porttitor vel, luctus at, odio. Sed pharetra magna eget ligula. Duis luctus gravida sapien. Curabitur sodales hendrerit felis. Nunc a nibh.</p>
And the result is:

This technique can be used to spice up a paragraph of text and to give it some character. Be experimental and try out other ways to make your paragraphs more stylised.