If you paid attention to their logos, you can see what they have in common: glossy, reflected (often) and light-colored text. Actually it doesn’t take a real gifted artist to create such a logo, so in this tutorial, I’m going to show you how to create a nice-looking, simple, eye-candy logo for your blog in Photoshop.

Thus, before dropping me an email ordering a logo for your blog, try it yourself (hell, am I losing my money here?) just to find out that you can’t make it better than me.

• Open Adobe Photoshop and create a new document (Ctrl+N or File->New). Set width and height to 400 and 100 pixels respectively. Make resolution 72 pixels/inch, leave the background as white. Note: these size and resolution settings are only web-friendly. For printing, use a higher resolution (like 300 pixels/inch).
• Using the Type tool, choose a clear, rounded font like Arial, set the size to 60 and type some text (i.e. your blog’s title). Set the color to sky-blue (hex code: #0099cc):

• Right-click on your text layer, select Blending options and set as shown on screenshots below:

(Drop Shadow: Structure: Blend Mode - Multiply, Opacity- 61%, Angle – 120, Distance – 5, Spread – 0, Size – 5;
Stroke: Structure: Size – 3, Position – Outside, Blend Mode – Normal.)

• Click OK. Here’s what you must have came up with:

Almost done. In the next step, we will add a glossy effect to the text.

• Ctrl+click on your text layer to choose the text only:

• Create a new layer (Ctrl+Shift+N or Layer->New Layer->OK).

• Using Paint Bucket tool , fill the selection with white color:

• Deselect (Ctrl+D) and with the Elliptical Marquee tool make a selection as below:

• Now we need to invert the selection. For that, press Ctrl+Shift+I or right-click over the selection and choose Select Inverse. Press Delete and deselect:

• Set the opacity of this layer to 32:

• Take a look at your now-glossy blog title:

• Let’s add some keywords under the title. Using the same font, size 12 and light-grey color (hex code: #b0b0b0), type something like I did “Internet. Life. Future.” (I don’t know why, just from the top of my head, you use yours of course) just under the main text:

Done!

One tip on saving your logo with a transparent background:

Hide the Background layer by clicking the eye icon on it’s left. Go to File->Save for Web & Devices (it may be “Save for Web“, depending on your Photoshop version, I use CS4) or press Ctrl+Alt+Shift+S. In the upper right corner of the pop-up window you will see presets as shown on the screenshot:

Choose PNG-24, check the Transparency checkbox and click Save. Now you can use it on any background in your web design.

As you can see, with a little knowledge, you can create a simple logo for your blog in Photoshop, while waiting for the designer to finish his job on your unique logotype.

I hope you find this a simple and easy tutorial. Any suggestions, ideas and questions are welcome – please feel free to leave them here in the comments.

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• 10 Essential Software Apps For Web Development on a Mac (39)
• Write & Develop HTML Offline with First Page (12)
• Top 10 Sites To Download Free Photoshop Textures (11)
• Top 10 Professional Sample Code Websites For Programmers (28)
• The 5 Free Wordpress Templates To Dress Up Your Blog (15)

Amazing Textures

Amazing Textures list various free Photoshop textures nicely sorted into different categories. You can find textures representing wood, bricks, glass, metal, fabric and many more. You can browse the site as it is, however if you want to download higher resolution images you would have to register with the site. The registration is free.

DeviantArt

DeviantArt is renowned for this kind of creative work. You can find some amazing textures to work with. Many of them created by users themselves rather than from photographs as on other sites, you can thus find some really unique textures here.

Lost and Taken

Lost and Taken works like a blog. There are regular posts listing free Photoshop textures that pertain to a particular theme. You might want to point your RSS reader there if you like collecting resources for design work and inspiration.

Grunge Textures

Grunge Textures specializes (hold your breath…) in grunge textures! There are all kinds of textures with a one common aspect – all have a grungy feel to them. According to the site, there are 1355 high resolution images in 18 categories that you can browse through to find what you are looking for.

Shizoo

Shizoo lists various resources like brushes, icons, patterns and much more that you can make use of. The textures section lists some nice colorful textures which you won’t find on every site.

Texture Gallery

Nicely designed site listing textures organized into various categories. One thing (besides the textures) I like about Texture Gallery is that most of the site is in a neutral gray, this helps in any avoiding any influence that the site’s color may have on texture choice.

Toybirds

Toybirds not only lists textures but also lists other resources you may find handy in your design work. There are occasional posts featuring brushes, patterns etc. Although the latest post dates back to 2008, it is nevertheless a worthy resource to browse when looking for design resources.

Texture King

Texture King offers stock texture images for free. While the textures may be low on count, you can find large high resolution textures for your work.

Urban Dirty

Urban Dirty also lists stock texture images, most of them have a grungy feel to them. In addition, the site also lists a few examples in which the texture images have been used, just in case you are looking for some inspiration! You can also check out the Urban Dirty photos in action on Flickr

Texture Library and Texture Archive

Just because we love to throw an extra one to make that 10 an 11 here are two more resources you can check out when looking for textures. Both of them list textures in various categories which often overlap. However, these are indispensable resources listing lots of textures to have in your bookmark directory.

Which site has the most variety of textures and appealed to you the most? Do you use any other site when looking for textures? Shoot a comment, we would love to know about them.

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• PHOTOSHOP DISASTERS: 2 Blogs with Bad Photoshop Images (5)
• How To Make Photoshop Faster On Slower Computers (26)
• How To Create a Simple Blog Logo In Photoshop (19)
• How to Color Correct RGB Images Easily in Photoshop (14)
• How to Automate What You Do in Photoshop with Actions (12)

However, I’d say somewhere in the region of 90% of the Blogger blogs are underperforming or have simply been abandoned. The free blogging platform, while good, doesn’t have much in the way of taking your blog to the next level. In this article, I’m going to discuss a few Blogger tips and tricks you can use to spruce up your blog in a single afternoon.

I don’t want to start changing all the work I’ve done to my blogs and website in the past few weeks so for the purpose of this article I’ve created a test blog on Blogger seen here in the screenshot below; pretty bland right?

Themes

It’s painfully obvious to any visitor that your blog is just another lame project that barely gets worked on if you’re still using minimia black with hopes of getting high readership. You have to make it look attractive and inviting. Not like it was made in Soviet Russia.

There are tonnes of Blogger templates available but I’d suggest this site. It has 120 really beautiful templates on offer that will rock your personal blog. Once you have found the theme you like, download it using the download link. There will be an .XML document in that file which you’ll upload later.

Go to your blogs editor at Blogger and select ‘Layout’. Then, select ‘Edit HTML’ from the tabs along the top. You see the window in the screenshot above. Click the button that says ‘Download’. This will download a copy of your existing theme to back it up in case something goes wrong later.

Then, upload the .XML document that you downloaded earlier and click ‘Save’.

Your new theme will then be displayed on your blog. There may be some missing gadgets which you can replace later. These would have had to be moved because of the new template design.

Getting Rid of the Blogger Toolbar

Across the top of all Blogger blogs there is that annoying toolbar (pictured above). Not only is it obviously there to get others to create their own blog but it also links to other blogs and is downright unattractive and unprofessional. By uploading a new theme, you’re getting rid of your blogger toolbar for good as the HTML which displays the blogger toolbar will be erased.

However, if you haven’t uploaded a new theme, a quick change to the HTML will get rid of it.

Paste the following under the blog credits in the HTML near the top as seen in the screenshot.

#navbar-iframe { display: none !important; }

Adding Promotion Buttons

Adding promotion buttons to your site (such as ‘Tweet’, ‘Digg’ and ‘Stumble’ can really increase your traffic, not to mention make your blog look better. For this example we’ll focus on Twitter, but by adding the HTML code for any other buttons below them will work just fine if you want Stumble, Delicious, Digg etc.

Click the ‘Expand HTML’ box above the HTML editor and use ‘CTRL + F’ to find this line in your HTML:

<p><data:post.body/></p>

When you have found it, paste this code below it:

<div style=’float:right; margin-right:10px;’><script type=’text/javascript’> tweetmeme_url = ‘<data:post.url/>’; </script> <script src=’http://tweetmeme.com/i/scripts/button.js’ type=’text/javascript’> </script> <script type=’text/javascript’> digg_url=&quot;<data:post.url/>&quot;; </script>

Click ‘Save Template’ and your button should appear on each post like mine here in the screenshot. You can add any valid promotion site’s HTML under this. Most are available on their website or can be found by running a Google search.

You can see that with a new theme and promotion buttons our blog is starting to look much better with less than twenty minutes work.

Affiliate Widget

Now that your blog is look in sharp and is being promoted, it’s time to gain a little revenue and make it look even more professional. Affiliate sites are a much better way to earn money than AdSense for most blogs and they look way better than the bland Google ads.

Go to the Amazon Affiliate Site and sign up for the service. They’ll have to check out your blog first, but once they’ve done that you can start adding widgets like the one in the screenshot below that will earn you money.

On the affiliate homepage you can see the option to add a widget or a banner as pictured in the screenshot below. Select what type you would like and customize it by selecting products from Amazon. While you get a percentage (around 5-6%) of the sale from your widget, don’t be tempted to put expensive items on your widget. People don’t just see a laptop for sale and decide to buy it.

Think in the context of your blog and the people who will find it. If it’s a blog about tennis, look for tennis accessories or DVDs; something cheap that they don’t have and can’t just walk to a shop and get. Odd gadgets or helpful books also bring in high revenue.

Once you have finished customizing your widget, copy the HTML given in the screenshot above (yours will be different – you can also see red rectangles where I blocked out my personal affiliate code).

Then, go to the ‘Layout’ section in Blogger and select where you want to add the widget. The top of posts and the sidebar are good areas. Select ‘Add a Gadget’ in the appropriate slot and paste the HTML into the HTML gadget as shown. Your widget will now appear.

So in just an afternoon you can transform your mediocre blog into a great looking site that will have subscriber counts soaring. I’m a firm believer of ‘the proof is in the pudding’ so to have a look at the final MUO test blog I used for this article – click here.

What tactics and tips do you use to make your blog look better?   For some more ideas, check out Mark’s articles on livening up your blog comments with MyBlogLog and 6 essential websites to get your blog noticed.  Aibek also discusses 12 no-crap tools to make your blog better.

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• The 5 Free Wordpress Templates To Dress Up Your Blog (15)
• Set Up A Voicemail For Your Blog with VoiceMeMe (4)
• How To Setup A Self-hosted Wordpress Blog for Free (60)
• How To SEO Optimize Your Blogger Blog Titles For Higher Search Results (55)
• How To Install A Wordpress Blog Locally On Your Computer (23)

This free Mac website building tool comes with iLife suite – free with every new Mac purchase. It promises its users quick and easy ways to build beautiful websites. To be able to achieve that, iWeb comes with various ‘plug and play’ ready-made templates for users to use and modify.

Experience is the best teacher. So there’s no better way to explore what iWeb can do than by using it to make use of our domain name and web host.

Settling on the Settings

The first thing that you’ll see when you first open iWeb is the choices of templates. Don’t worry too much at this stage. Just pick the one that you like, and you can change your mind later.

Then we can continue with the settings. Click the “Site” item on the left pane, and you’ll see the “Site Publishing Setting” opened in the middle pane. This is the place to change the name of your site from “Site” into something more appealing.

If you want to publish your site on your chosen hosting service, choose “FTP Server” from the “Publish to” options. (Note: This option is not available on the older version of iWeb). Then fill in all the fields with the required information; from the site name, to the FTP settings, to the website URL.

For you Facebookers, there’s a bonus that you’ll love: the ability to update your Facebook profile when you publish your site. Tick the checkbox and provide the user information if you want to activate this option.

Shaping the Site

The web building process itself is as simple as adding pages (Command + N), editing the text, and replacing the pictures.

If you want to, you can edit every element of the page by clicking on that specific element and opening the “Page Inspector” from the “View –> Show Inspector” menu or by pressing “Command + Option + I”

There are several types of pages that you can add, such as a blank page; ready to edit pages (Welcome Page, About Me page); blog page – where you can write and update your posts; and also the rich-media pages (Photo Album page, Movies page and Podcast page).

The pages will be placed in the left pane and you can re-arrange the order as you like. You can also add another website(s) (Command + Shift + N) to the project, each with its own pages and themes.

Enhancing with Elements

To enhance your site, you can add as many kinds of elements you want to each page. There are four tabs on the right pane:

• Audios –> You can add music to your pages from Garageband and iTunes



• Photos –> You can add pictures from iPhoto and Photobooth



• Movies –> You can add movies from iMovie and iTunes



• Widgets –> You can add several ready made widgets, including the one to include HTML code called HTML snippet widget

There are more advanced settings that you can do by going deeper into the Page Inspector, but the scope is too big to be discussed here. You can find many nice effects while you experiment with iWeb.

After the building process is done, you can do the final step by clicking the “Publish Site” button below. If you put the FTP settings right, everything should be uploaded to your server, and your site will be alive.

iWeb might not be the ultimate tool for those professional-level web designers. But for everyday folks who just want to build a beautiful site quickly and easily, this app is more than capable to fulfill their needs.

Have you tried iWeb? Got any tricks to optimize iWeb? Share using the comments below.

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• Top 10 Professional Sample Code Websites For Programmers (28)
• The Best Freeware To Do An Easy Wordpress Auto Install (20)
• How To Install Firebug on IE, Safari, Chrome & Opera (22)
• 11 Useful Tools To Check, Clean & Optimize Your CSS File (47)
• 10 Essential Software Apps For Web Development on a Mac (39)

Many are. But then, downloading blog templates and installing them can be time consuming, not to mention expensive right? I recall laughing my head off when I seen the prices that some developers are charging for mediocre themes!

Below are five of my favourite free Wordpress blog templates that won’t cost you a single cent.

Creative Art

This theme is really attractive mostly because of that giant notebook-style posting area. The scrappy style is continued on to the left with a ‘Post It’ lookalike categories list. The background and the oddly placed RSS feed button just make it even better. Greys, reds and little features such as the tape that appears to hold up the posting area are nice touches.

This theme would suite your blog if you have a good following and blog about informal yet popular topics such as art, music, technology and the woes of life!

Modicus Remix

The Modicus theme is a little more plain than the last but it is by no means basic. It keeps the same artsy feel as the theme above but leaves more to the imagination. There is no colour at all with this theme, just a stark contrast between black and white. The amount of plug-ins and features that look good to the right-hand side of this theme is amazing – such as that ‘sign in‘ facility for your readers.

I recommend this blog for the more formal of bloggers out there such as those who see their blog as more of a regular column.

Aspire

An individual looking theme that looks like old parchment and worn manuscripts. It’s basically comprised of many different diluted shades of brown that make for a very attractive blog. Again, the posts go to the left with tags with the calendar and recent comments going to the right along with the categories. This theme is also available to download as a ‘Blogger’ version on the download page for those of you who use BlogSpot.

I think this theme would suit the more factual blogs that tend to discuss subjects within a niche. It wouldn’t do so well for a personal blog as the ‘manuscript style’ points to something entirely different.

Reviews Theme

This theme has curved corners with straight edges – one of my favourite styles for business/professional blogs. It looks good but doesn’t over-sell itself with artwork or over design. It has some good features such as a search bar and good navigation buttons along the top to direct the user to various contact and ‘About’ pages which are essential for a business blog.

The deep blue with the white, as I said, doesn’t jump out at you and do a song and dance like the other themes because they’re separated by different tones and shades of blue. The content sells itself. A professional and practical theme for a company’s site.

Light Weight

To end out list we have an elegant theme that has minimalistic design in mind. The baby blue background and the blue text work well together in this theme. The menu bar across the top is good for simple navigation and it separates the headers from the main attraction: your personal posts.

Given its simplicity yet attractiveness, I would recommend this theme for a personal blog. It has the necessary few buttons such as ‘Contact’ and ‘Subscribe’ with the posts being the centre of attention. It’s wide and as such it’s good for big photographs and screenshots that we all post on our personal blogs.

So, what do the MUO readers think of these free Wordpress blog templates and what themes do you recommend for small-medium blogs?

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• Wordpress.tv – The Best Wordpress Tutorials Ever! (9)
• Wordpress Exploit Scanner Helps Administrators Scan Their Database For Malicious Files (10)
• How To Setup A Self-hosted Wordpress Blog for Free (60)
• How To Install Wordpress Blog Locally On Your PC (23)
• How To Install A Wordpress Blog Locally On Your Computer (23)

To grasp the attention of people, you need a good, noticeable banner. One that makes people interested and which makes them want to check out what you’re trying to sell.

Before we go on, I want to point something out. If you really want a banner of outstanding quality, you should consider contracting a professional designer. Such a banner will nearly always be of superior quality than one that has been generated automatically. Nevertheless, for practicality, you can make your own banner with banner generators that will surely serve its purpose.

MyBannerMaker

MyBannerMaker is probably the simplest banner generator we’re going to see today. Divided by tabs, you can tweak various characteristics, including size, background, text, border and effects. The generator allows you to use up to four different lines of text, all of which have adjustable formatting and positioning.

The real ’styling’ of your banner happens in the background, border and effects department. You can use a gradient, or (advised, if you want better results) upload a picture. You can make one if you’re very creative, or search a free stock photo site like sxc.hu, which can turn up plenty of alternatives as well.

Most of the time, a border is not advised, but there are two exceptions. Either use it to create a slight contrast with your website, or – in this case – use it to separate the watermark from the rest of the banner. Use a very light color to drown it out, or make it stand out by creating a heavy contrast.

There are several interesting effects that you can apply. You’ll want to ignore any dynamic effects – people don’t want a banner to be screaming at them – but others, like Edge Detect can create a nice text accentuation.

After you’re done, you’ve got a few alternatives to downloading your banner. Already uploaded on ImageShack, you can request the BBCode or HTML, respectively to embed your banner in a forum or on a website.

PureSilva BannerMaker

My personal favorite to make your own banner is PureSilva’s BannerMaker. Although there are a ton of available options, the interface remains relatively simple.

The BannerMaker website hosts a ton of available background images, of both pictures and abstract colour-themes. Besides backgrounds, you can also use one of the multitude of overlay images. There are dark overlays to flourish up your background, or practical icons like the RSS icon I used.

All the other functionality is there as well. You can change font formatting, even including shadow and glow, create a border, and upload images of your own.

If you’re still a bit lost here, read my tips for using borders and backgrounds above, in the BannerMaker explanation.

Unlike on these other websites, your image isn’t already uploaded to a hosting site. If you’re to use the banner on your website, you’ll first have to upload it yourself. For this purpose, PureSilva recommends Imgur, a free image host that doesn’t even require a sign-up.

Extra: BannerSketch

BannerSketch is pretty similar to MyBannerMaker. It uses the same tabbed interface and offers much of the same functionality. However, on these grounds, it does not beat MyBannerMaker. The strength of BannerSketch lies somewhere else.

As an alternative, if you don’t want to completely make your own banner from scratch, BannerSketch offers prebuilt templates. Not just one or two, but over 1,300 of them. All of these ‘backgrounds’ are specifically designed to create great banners. You can browse through them using a categoric interface, and quickly spot the one you need. Afterwards, you can succeed in altering the banner’s characteristics, tweaking text and border formatting.

BannerSketch allows you to send the banner to your email address, but also uploads it to ImageShack and supplies you with all the necessary embed links. As an extra, BannerSketch removes its watermark after creation!

If you know of any other alternatives, be sure to drop a comment below!

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• Write & Develop HTML Offline with First Page (12)
• WEB DESIGN: 5 Sites To Get Inspiration and Ideas (9)
• Top 10 Professional Sample Code Websites For Programmers (28)
• The 5 Free Wordpress Templates To Dress Up Your Blog (15)
• Selected 25 CSS Applications and Tools (19)

Time and time again I have to create custom icons and buttons for clients. Now with IconFinder that is a thing of the past. IconFinder is a search engine that will return icons or png files with free website icons. They allow you to change the background of each from either black, white or transparent as well as filter results for a commercial website or just for personal use.

Let’s take a look at Icon Finder:

Just like any other search engine the search bar and options are at the top. Type in a search term and hit that search button. It will then search through their 109,067 free website icons and 206 icon sets. Not too shabby for a new site.

After hitting that search button you will be shown your results. They will look like this:

Now you can click on one to download or view it but check out these features. Click on the transparent or black button under background color and watch the free website icons change to meet your requirements:

You can also narrow down your results to only show commercial images or ones you can use personally by hitting this:

Once you see the image you want to download click on it and it will bring up another screen that looks like this:

You see from this screen that you can grab the PNG file or the ICO file. It also has the dimensions – in this case it is 128×128 – a nice size for an icon. There is a link to show all icons in this set and tags/ratings.

When we click on the show all icons in this icon set button we get this:

These images are free for commercial use! WOOT! That means I do not need to pay any royalties or fees to use these in a website that makes someone money. I can’t express how awesome this is. Consider this the equivalent of Creative Commons for icons!

I ran a few other searches before I bounced, including this left arrow search:

These icons are great for small buttons designating back or forward.

The site is pretty new and I can only assume that as time goes on the site will get bigger and be filled with more and more icons. If you create icons I am sure you can get some recognition by uploading them to their site. You can browse all those sets by hitting the browse sets button.

That will take you to a page that looks like this:

You can then click on the entire set and view all of the icons in it. This is great for sticking with a static theme throughout the website.

Where do you grab your icon files from? We would love to hear about more icon download sites in the comments! Don’t be shy guys!

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• Write & Develop HTML Offline with First Page (12)
• Top 10 Professional Sample Code Websites For Programmers (28)
• The 5 Free Wordpress Templates To Dress Up Your Blog (15)
• The 5 Best Free RSS Icon Sets For Your Website (6)
• Selected 25 CSS Applications and Tools (19)

Here’s a list of 10 essential software apps for web development on a Mac.

10. TextWrangler is a multipurpose text editor that works for editing code and plain text documents. It can even open files from (and save them to) remote FTP and SFTP servers.

9. Inkscape is an open source vector graphics editor similar to Adobe Illustrator. It is the first open source program to adopt Spiro curves. You can also go through their clip art collection and find dozens of images made with Inkscape that are free to use or modify.

8. Cyberduck is the all-in-one FTP, SFTP, Amazon S3, WebDav and Mosso Cloud Files browser application. Web developers often need to switch between different file systems, and Cyberduck does this without a hiccup. It works with Textmate (which has a free 30 day trial), so you can open files from Cyberduck in Textmate, edit, save and upload. Read more about FTP clients for Mac here.

7. Gimp is the second-most popular photo editing software program on the market, second only to Adobe Photoshop. The difference? Gimp is absolutely free! You can do just about everything in Gimp that you can do in Adobe Photoshop, so web developers will find this a welcome and wallet friendly addition to their software arsenal.

6. Aptana takes up where Textmate leaves off in some aspects. It is a full featured code editor, but adds the FTP support of Cyberduck, as well as important web technologies like Ajax, Adobe AIR and PHP. Read more about Aptana here on MUO.

5. Firefox is a must have for web development because of three great add-ons – Firebug, the Web Developer toolbar and ColorZilla. Firebug lets you edit, debug, and monitor CSS, HTML, and JavaScript live in any web page; while the Web Developer toolbar adds additional tools like clearing cookies, disable CSS, display ruler and display source. ColorZilla lets you pick colors from websites or images online, so you can match them to your web designs, plus measure the distance between two points on a website.

4. JAlbum helps you make attractive photo galleries for websites. JAlbum comes with various templates built-in, but you can also customize your own template to better match a web project you’re working on. Read about 5 more Excellent Mac Apps for Graphic & Web Design

3. Colloquy is a basic IRC client that every web developer will use at one point or another. Many web platforms use IRC for support, including WordPress.

2. MAMP is what you need to manage websites locally when you are without an internet connection or want to test changes without making them live on a website. It is easy to install MAMP and have access to Apache, PHP and MySQL for Mac OS X. It is also a stand-alone program, so if you need to install it, it won’t interfere with your OSX installation. Plus, you can use it to install WordPress on your Mac.

1. iTerm is a feature-filled Terminal emulator for OSX. You can bookmark your frequently used sessions, have tabbed windows with multiple sessions and more.

Do you have any suggestions for better similar apps? Let’s hear them in the comments!

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• Top 10 Professional Sample Code Websites For Programmers (28)
• iWeb – Build A Quick, Easy & Beautiful Website [Mac only] (31)
• How To Setup a Fake IRC Server with phpFreeChat (24)
• How To Install Firebug on IE, Safari, Chrome & Opera (22)
• How To Create a Simple Blog Logo In Photoshop (19)

Finally, I gave up web design and development when quality of content started to get pushed to the side by quantity of content. Flash sites, lots of images, pop-ups, pop-unders, sliders, etc. Trust your quality content and you don’t need this fluff. Trust your content and you can make your website blazingly fast.

With a website that is hosted on a free service, faster is definitely better. Why? Because ‘free’ tends to attract a lot of people and the server has to dish out your page plus thousands of other peoples’ pages that aren’t optimized. It’s like trying to pass a convoy of Kenworths pullin’ logs with your Jimmy haulin’ hogs. But if you have a small Porsche, that gets a lot easier to do.

Here are some tips to trim the fat, in no particular order.

1. Use Tables Sparingly

Tables are a catch-22. In the beginning, they were used to lay out design as well as put content into table format. As the design layouts got more complex, the tables got bigger and nested deeper, and that always means a slow down on load time.

Cascading Style Sheets (CSS) came along and really helped the problem of using tables for layout. Unfortunately, the browser makers couldn’t seem to wrap their heads around the idea of standards – and still can’t. What looked great in CSS in Firefox looked like a dog’s breakfast in IE and possibly didn’t even render in Safari. Don’t get me started on IE5 on a Mac. I’m still in therapy over that.

Please only use tables to layout content that must be in a tabular format – like a price list or hockey stats. That reduces the number of tables, and depth of nesting, which means speedier load times. Learning CSS will make a big difference, if you must have a fancy layout.

2. Use HTML to Create Colour

Yep, I’m Canadian, so it is colour with a ‘u’ to me. I know HTML is America-centric so the attribute is ‘color’. Learn your hexidecimal color codes and use them to to liven up content instead of images.

Try adding the color attribute to your HTML elements to spice it up. This works especially well in tables, or the body tag, like such:

<body bgcolor=”#FF00FF”>

If you were a browser, would you be faster at loading a simple 7 characters of #FF00FF or a 10×10 pixel image of the colour fuschia a few thousand times? That’s a rhetorical question, you in the back row. Put your hand down.

3. Link To Scripts/Style Sheets

If you use a certain JavaScript (JS) or CSS repeatedly throughout your website, think about creating their own file and calling it, instead of putting it on every page. Since a browser tends to cache a file and call that file first before checking with the server, your browser will already have that script or CSS ready to use. That means less HyperText Transfer Protocol (HTTP) calls which means a faster loading page.

How to Call an External JavaScript:

<!–
<SCRIPT SRC=”my_script.js”>
</SCRIPT>
–>

Why did I put those comment tags around the call for the JavaScript? Because not every browser is set to read scripts. Adding the comment tags makes the browsers with scripting disabled just skip over it, instead of giving annoying error messages.

How to Call an External Cascading Style Sheet:

<link href=”my_style_sheet.css” rel=”stylesheet” type=”text/css”>

It’s that simple. The attribute href is where you set the location of your style sheet. The rest of the attributes tell the browser what that file is, so it knows what to do with it.

Some developers may use the @import method to call a stylesheet. In Internet Explorer, this is like having your <link> tag at the bottom of your file, causing it to load the whole page and THEN render the styles on it. Not good.

4. Combine Your Commonly Used Scripts in One File

Many web developers will use the same scripts over and over again. Perhaps there’s a clock script and a calendar script and maybe some sort of special effect script that they’ll use on every page. Instead of having 3 separate files, with 3 separate HTTP calls, put the scripts in one file and call it once. That cuts your HTTP calls by 66% and it gets cached as well. You speed demon, you! Before you raise your hand again, yes, you can do the same thing with CSS files.

5. Do Not Use HTML to Change the Size of Your Images

If you want to use an image that is 1000×1000 pixels on your web page, but you want it to be only 250×250 pixels, change it in an image editor. Some people will ’shrink’ the image using HTML like such:

<img src=”BigPicture.jpg” height=”250″ width=”250″>

If that 1000×1000 pixel image is 2 MB in file size, resizing it with HTML doesn’t make the file size any smaller! In fact it may take longer to load, because now the browser has to put 10 pounds of poop in a 2 pound bag, so to speak. Not an easy task.

Hopefully these tips will help you. Give me a shoutback in the comments if you use them or have some other HTML optimizing ideas to share.

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• Top 10 Professional Sample Code Websites For Programmers (28)
• Selected 25 CSS Applications and Tools (19)
• How To Install Firebug on IE, Safari, Chrome & Opera (22)
• “TEST EVERYTHING”… 100+ ‘Website Check’ Tools in-one! (3)
• Write & Develop HTML Offline with First Page (12)

No matter the job scape or your skill level, you will surely be able to find the following free applications useful and effective for the development and creation of websites with your Mac computer. Without further ado, here are 6 Excellent Mac Apps for Web and Graphic Design.

Linotype Explorer

Linotype Explorer is an incredible font management app created for Mac users. You can use this app to install and “test” out new fonts on your PC. The selection of appealing fonts for your site is vital; this art of text is called Typography.

FotoFlexer

FotoFlexer claims to be “The world’s most advanced online image editor”. It offers completely free access to numerous features such as photo effects, graphics, shapes, morphing, and the creation of collages. You can also integrate and share your art with social sites like MySpace, Flickr, Facebook, and more. This can be an important app if the site you are creating is going to use apps.

Colorate

With Colorate you can create harmonized color palettes along with color schemes. Generate these palettes for images, photographs and more.

Simple CSS

With Simple CSS you can create Cascading Style Sheets from scratch or edit them right from the comfort of your desktop. Update styles on multiple pages all at once and reduce the data transfer usage on your page for faster loads.

Blender

Blender, open source software that allows you to create 3D animation with interactive playback leaves you with the option to optimize the style of your site with a few graphics. You can create animations with shades of colors, glossy features, soft shadows, and advanced rendering features.

JAlbum

JAlbum is a very useful app that allows you to create stylish photo galleries to publish on the web. All you have to do is simply drag selected folders into a pane where any images contained within the folder will automatically be arranged into a photo gallery. You can add several different themes and templates to enhance the appearance of your gallery, later then gain the HTML code and publish the complete gallery onto the web.

Conclusion

When designing why not take comfort with the facilitation of apps for your Mac that will allow you to boost your productivity and create better looking graphics or sites? The above 6 applications empower you with features that can meet your designing needs and make designing fun.

Which of the above apps have you used or plan to? Please MakeUseOf the comment box below and share your thoughts with us!

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• Instant Eyedropper Drops The Pain From Color Matching (12)
• 10 Essential Software Apps For Web Development on a Mac (39)
• [Google Picasa 101] – View, Folders, Toolbars (18)
• Web Developer Toolbar for Firefox (4)
• WEB DESIGN: 5 Sites To Get Inspiration and Ideas (9)

In it’s basic form, SourceEdit is a glorified text editor. However, what makes SourceEdit so useful for application developers is it’s ability to instantly switch into a coding environment, complete with automatic formatting and color coding that can help you maintain correct structure and syntax when you write applications in C++, Java, Visual Basic and about ten other common programming languages.

A Review of SourceEdit

Used as a standard text editor, the look and feel of this application is a lot like WordPad, but the additional formatting features are created with programmers in mind. It is an all-in-one editor that accomodates (as best it can) the formatting and syntax from thirteen of the most popular desktop and internet programming languages. The coding environment is fairly clean and easy enough to learn quickly.

The buttons on the main menu bar include standard file and copy commands, and also includes Insert Time Stamp, Display File in Default Browser (for HTML programming), managing bookmarks, and options. The left pane provides an easy browse feature to open and save files. Switching between the various programming languages is as easy as right clicking in the text area, selecting “options,” and then choosing the “Langauge/Tabs” setting.

In this screen, you can choose the default language that you want to use when the application first opens. The default language determines how the application will format and color code your text as you write your software.  In my particular case, I usually use Visual Basic as my default, but I often switch to HTML when I’m doing web design work.

Programming Features of SourceEdit

Once you start using the application as an editor, and not just as a text editor, its value really shines through.  In my case, I use it to throw together simple Visual Basic scripts that perform basic file manipulation or database query tasks. This application automatically formats each line correctly indented, depending on the programming structure you use. For example, For loops, If-Then statements, and other routines are automatically formatted for you – so the software looks clean and professional.

As you can see, the example above shows how SourceEdit formats Visual Basic code, with subroutines in blue, numbers in red, and regular text in black. However, just setting the current language setting to HTML, you can also use the same software to edit HTML code with the appropriate syntax color coding.

As you can see here, HTML tags are all clearly identified in maroon, tag elements are highlighted in blue, comments are green, anything in quotations is dark grey, and actual page text is black. For web programmers who enjoy the control that text editing offers, this application allows you to keep that control, but you also receive the benefit of formatting and syntax, so that you’re less likely to forget a tag or otherwise completely mess up your web page. I’ve used SourceEdit for my HTML coding needs ever since the software was first released, and it’s saved me immeasurably in reduced troubleshooting time.

Another nice feature of the software is that if you don’t like the default color schemes as shown above, you can customize the software so that the various elements of your code are colors that you prefer.  To do this you right click in the text area, click options, and click “Color/Font.”

Here you can change keywords, operators, variable types and a whole list of other programming elements to display in whatever color and font style that you prefer. Another nice customization feature of this software is the ability to specify specific keywords for the software languages. You do this by going to Tools, and then “Language Editor.” For example, in the shot below, I’m adding a custom “starting,” and “ending,” keyword for ASP code. This feature is nice for when there are certain functions that exist in the language you use that SourceEdit doesn’t originally recognize. This is where you can add those new functions or commands.

Finally, another programming feature that I like about this software is that there’s an “autocomplete” tool. Pressing Cntrl-Space enables a drop-down box that provides you with the autocomplete options based on what you’ve already typed.

Other Cool Features

The programming functionality of this software alone sets it at the very top of my list for favorite text editors. However, there are even more features that I feel deserve honorary mention because of how useful they’ve been during the time I’ve used this software. The first one of those is the “file mapping” feature.

File mapping (in the options dialog) allows you to tell the software which syntax/color scheme to use depending what the extension is of the file that you’re opening. For example, if you open a .cpp file, the software will automatically enable C++ color codes, using .php will use PHP syntax, and so on. This saves you time because you don’t have to constantly reset the current language setting.

Another cool feature of this software is the HTML toolbar feature, which automatically inserts HTML tags for you, using the correct formatting.

In the shot above, I’m about to select one of the “form” options. When you click on any of the buttons in the HTML toolbar, it will insert the correct HTML code wherever you currently have the cursor placed. For people who can never remember how certain tags are used (like me), this feature is a life-saver.

And finally, saving the best for last, there’s the ability to view four documents at once using four frames.

The ability to split the text editor display into four screens is just icing on the cake for any programmer who, like me, loves to copy and paste code snippets that I’ve already written elsewhere. This feature lets you easily scroll through all of your code on the same screen instead of flipping through several windows hidden throughout your desktop.

Do you like to program using a text editor rather than through programming software, and if so, do you have favorite editors that you like to use when programming text-based languages? Share your opinions in the comments section below.

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• 3 Windows Text Editors For Programmers (13)
• Top 10 Professional Sample Code Websites For Programmers (28)
• How To Install Firebug on IE, Safari, Chrome & Opera (22)
• Web Developer Toolbar for Firefox (4)
• Top 5 Sites To Learn CSS Online (32)

According to the Microsoft Expression Web blog, the versions of Internet Explorer made available within SuperPreview will depend on which version of IE you have installed on your system:

If you’re a web developer that’s been holding off on installing IE 7 because you won’t be able to preview your sites in IE 6, you’ll no longer have to worry about making the upgrade.  You can upgrade to IE 7 and still view pages in IE 6 with SuperPreview.

When you load a page into SuperPreview, you’ll see a side-by-side comparison.  You can zoom in as far as 500% and do a near pixel-by-pixel comparison, or zoom out as far as 21%.  When you scroll, the scrolling is synchronized across browsers, so you see exactly what appears within the same coordinates at the same time.

You can also click on and drag on the rulers to place markers across the page to get an easy view on how page elements are aligned within the different browsers.  Although the free version only allows you to compare IE browsers, it does have an image comparison you can use to compare a browser screenshot.  If you have a nice image capture that allows you to take screenshots of frames within applications (such as Jing), screenshots can provide a good comparison.

According to the Webdesigner Depot story about SuperPreview, the full version will include support for other non-IE browsers (Firefox, Safari, etc.).  Webdesigner Depot also reports the application will eventually support multiple browser sizes.  The beta preview only allows you to see what sites will look like in a browser at a 1024×768 resolution.

What free tools do you use to perform cross-browser comparisons? Are you familiare with any other tools to preview sites in different versions of IE?

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• Test Your Site In Multiple Versions of Internet Explorer (6)
• Web Developer Toolbar for Firefox (4)
• Top 5 Sites To Learn CSS Online (32)
• Top 10 Professional Sample Code Websites For Programmers (28)
• Notepad Programming on Steroids for Application Developers (19)

Well actually, it gets harder but it’s worth taking a look, since you can customize everything from your blog to your Google Docs documents with a tiny bit of CSS knowledge.  Let’s take a look at where you learn css online free and get CSS tutorials for beginners.

W3Schools

W3Schools is a great site. They have lots of tutorials from HTML to PHP and you can be sure that everything you read is up to standards since the site is maintained by the W3C, responsible for the web standards of today.

The CSS lessons are pretty detailed and will take you through most of what you need to know, but since this is more of a technical page you will see less examples than elsewhere and the examples they do have are a bit constrained.

If you already know some CSS though this is a great reference source.

Tizag

I come across this website a lot when looking up things and I had a look at their CSS tutorials, which I found slightly better structured than W3School’s. The basic information is the same, but if you are an absolute beginner you might want to start here.

Tizag in my eyes is a bit less formal. It seems to me that their examples are closer to real life and the tone is friendlier. There are also helpful tutorials on many other languages like HTML and MySQL, so if you liked the CSS bit you can stay on for the same quality in other languages.

CSS Zen Garden

This site is very different from the tutorial sites I mentioned before. On CSS Zen Garden you can put your knowledge to the test or learn from the code written by others. The whole idea is that there is one static and unchangeable HTML file and you have to create a separate look for it using only CSS.

You can upload your work and it will be showcased, and you can download others’ files to take a look at how they did this and that. This is really useful because I myself learned way more by example than by actually learning. The same goes for Wordpress templates – if you like one, download it and take a peek in style.css to see how things are done.

CSS Play

CSS Play is a website in between Zen Garden and the tutorial sites because it shows off specific functionalities in CSS and allows you to view the source code.

Instead of having a whole page or a whole site, you can take a look at examples of flyout menus, opacity examples, IE specific workarounds and so on.

If you need a specific functionality and want to get in the know, this website might be the best place to start. It has a fair share of ads which can be a bit distracting, but the info there is solid, and a lot of times the code, or at least the method is very thoroughly explained.

Google

That’s right, plain old Google Search can be a great companion to learning CSS online and finding CSS tutorials for beginners. Aside from obviously being able to research things you need, you can also look at how specific CSS properties work. Don’t know what values “overflow” can have? Just type “css overflow” or “css overflow property” and the first result will tell you what you need to know.

The same goes for actually all programming languages, I use this for PHP and MySQL as well, and I don’t think the first result has ever failed me yet.

So there you are, no more excuses, it’s time to learn some CSS! You can add your own Google Docs templates, modify your Wordpress templates, and do such a lot more, happy CSS-ing!

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• Top 10 Professional Sample Code Websites For Programmers (28)
• Notepad Programming on Steroids for Application Developers (19)
• How To Install Firebug on IE, Safari, Chrome & Opera (22)
• 11 Useful Tools To Check, Clean & Optimize Your CSS File (47)
• Web Developer Toolbar for Firefox (4)

Installing Firebug on IE, Safari, Chrome or Opera

Firebug Lite makes it possible to install Firebug into any web browser! You should be able to use Firebug with Internet Explorer, Opera, Safari, Chrome, and any other browser that supports JavaScript. Firebug Lite is written in JavaScript, so you can include it on a webpage with the following code:

<script type='text/javascript'

     src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

Or even better you can use this bookmarklet:

Firebug Lite

Firebug Lite provides you with the same inspections capability that regular Firebug does. You can click the Inspect button and hover over sections of the page to view the computed style and DOM properties for the tag selected.

The Inspect button functionality does seem to have some issues, so another way to inspect elements is to navigate the HTML tree. To do that, click the + signs on the tree view to expand the HTML, and when you see the element you want to inspect, click on the line of code for it in the HTML. On the right side, you can view the computed style and the DOM (Document Object Model) properties for the element.

Firebug Lite also has the JavaScript console, which allows you to execute JavaScript. You can write one line at a time, or in the expanded view you can write many lines at once and then run the code.

Although you cannot edit the CSS for the highlighted element, Firebug Lite does provide a mechanism for editing CSS. It is somewhat of a “CSS console” for lack of a better term, where you can write your own CSS code and see what the results will look like.

Of course, with a name like Firebug Lite you can’t expect it to have all of the features of Firebug. Unfortunately, it does not include any JavaScript debugging (I can’t even imagine how difficult it would be to write a JavaScript debugger in Javascript). Unfortunately, you’re still stuck with whatever JavaScript debugging tools you can find for your browser. It does at least provide you with the convenience of being able to easily view the code for script files that were loaded in the page.

Firebug Lite also lacks the layout features in regular Firebug, where it shows you the coordinates for the element being inspected, as well as the padding, border size, and margins.

All in all it is better to have Firebug Lite for other browsers than no Firebug at all. If you are trying to debug layout and viewing issues in other browsers, it is definitely a nice tool to try out.

Have you ever used Firebug Lite? Did you use Firebug on IE, Safari, Chrome or Opera before? If so, what are your favorite features?

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• Top 10 Professional Sample Code Websites For Programmers (28)
• Notepad Programming on Steroids for Application Developers (19)
• Web Developer Toolbar for Firefox (4)
• Top 5 Sites To Learn CSS Online (32)
• Selected 25 CSS Applications and Tools (19)

So what to do? I can’t afford the time to learn web design and turn into a professional web developer. Besides, I can’t do everything by myself. Luckily, I’ve recently come across a cool web development tool that allows me to tweak CSS on-the-fly and come up with the ultimate version I feel comfortable with.

The tool is a FireFox addon called FireBug and it is so cool that many web developers use FireFox for the only reason that it can be extended with FireBug. It’s an ultimate Firefox addon for web developers. So in this post I am sharing my amateur’s tricks of creating a web site design with FireBug.

Introduction:

Navigate to the site template you want to edit and activate Firebug: use F12 key for quick access.

You will see the tool open in the lower half of your browser window with 6 tabs: “Console”, “HTML”, “CSS”, “Script”, “Dom”, and “Net”. I’ll be talking about two tabs here: “HTML” and “CSS”.

CSS Tab:

Edit attributes and attribute values

To change an attribute or the value of an attribute, just click on it, and edit it right in the code. The effect of the change will be immediately visible in the browser window above.

Preview colors and images in CSS

Firebug allows amateurs like myself to better understand the CSS by showing me the preview of each visual property:

Easily figure out exact positioning, padding and margins

The tool provides wonderful support for changing numeric values. Simply click on the numeric value you want to change and change it with the numbers on your keyboard – see the effect immediately on the page above and modify the edit if needed.

Let the tool prompt you what property can be used

Highlight the property and use up/down arrow keys on your keyboard to list all allowed CSS properties in alphabetical order.

HTML Tab:

Learn each box properties on-the-fly (margin, border, padding, and content): open HTML tab + Layout to the right and click “Inspect” in the top bar of the tool window. Now you can navigate throughout the page and observe the following:

• each page element in the blue frame;
• the corresponding area in the source code highlighted in blue (HTML tab);
• the box properties visualized (Layout tab).

Firebug’s Layout tab gives you a visual breakdown of each box in the box model and the width of each edge. Additionally, it shows you the width and height of the innermost box, and the x and y offset of the element relative to its parent.

Edit any property right in the layout tab and see the changes live on a page:

A few helpful tips:

• Use Control+F12 (or Command+F12 on Mac) to open Firebug in a separate window.
• Maintain blacklists and whitelists: Firebug lets you keep a list of websites that it should or should not be enabled for. You can browse in two modes – either enable Firebug for all websites except those on the “blacklist”, or disable Firebug for all websites except those on the “whitelist”.
• Get some more help here: FireFox tutorial in simple words.

So as you have seen with FireBug Firefox addon you can create and customize website designs even if you are absolutely unknowledgeable in web design like myself. Of course, FireBug has much broader possibilities than described above, so I’d love you to share more tips and tricks of this awesome tool.

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• Web Developer Toolbar for Firefox (4)
• Top 10 Professional Sample Code Websites For Programmers (28)
• Notepad Programming on Steroids for Application Developers (19)
• How To Install Firebug on IE, Safari, Chrome & Opera (22)
• Top 5 Sites To Learn CSS Online (32)

Now, thanks to the power of the Internet, there is a proliferation of websites where professional programmers offer these modules to the general public for absolutely free. For other application developers, these libraries are a goldmine.  Whether you write in VB, C, C++, C#, Perl, PHP, Ruby, or any other programming language, there’s a website out there where you can find such reusable sample code.

Choosing the Top Websites for Sample Code

Every developer has a list of their favorite websites where they not only search for free sample code, but they also take part in the developer community that exists at these sites.  Programmers often develop a very passionate attachment to some of these websites.

The following is, by no means, an exhaustive list of the best developer websites online.  Such a list would be difficult, since there are thousands of excellent resources throughout the net. The following is simply a list of ten of the best places to start if you’re looking for high quality sample code.  So please, folks, no food fights if your favorite isn’t mentioned. The following websites are listed in no particular order.

#1 – Programmer’s Heaven

Programmer’s Heaven is a huge online resource that is very much a community of many different programmers.  The site includes information, tips, and forums on languages like Basic, C++, Delphi, Java, Perl, PHP, Python, Ruby, Visual Basic and more. You can also search the site by application or platform.

Programmer’s Heaven has forums, blogs, articles, files, links and news for every single programming language listed on the site.  The size of this website is impressive, and the community is growing quickly into one of the largest developer communities on the net.

If you need sample code that’s not already on the site, just ask for help in the forums.

#2 – SourceForge.net

It goes without saying that SourceForge is one of the most significant open source communities on the Internet.  When you need to review sample code to learn how to do something, this is a great place to search.

From the main page, just click “Find Software,” and then “Development.”  The next page will astound you. You’ll discover an entire world of open source projects.

You read that right, that’s over 54,000 listings under “Software Development.”  If you find a software project that sparks your interest, and you can see how the software could be greatly improved, you might consider joining up with one of the many open source projects.

See the SourceForge overview for how this works. Open source is a way of life, and these coders take it very seriously.

#3 – CodeGuru

CodeGuru is also a cool site for developers. It mostly covers just Visual C++/C++, .Net/C# and Visual Basic. While this isn’t a huge selection of programming languages, the site is filled with articles that are far more comprehensive than your standard short forum posts that you find at other websites. CodeGuru offers useful explanations of how to accomplish specific tasks.

The example above is an article on how to load images from or save images to a database using Visual Basic. The article has quality screenshots and well written sample code.

#4 – The Code Project

CodeProject is a booming developer community that’s organized very much like a free article directory website, except in this case the content producers are actually programmers who are trying to provide the best programming articles available.  Most of these come complete with well written explanations along with the sample code.

The Code Project isn’t your run-of-the-mill resource where you’ll sift through the site for the code you need and then run. You’re likely to get sucked into the many prize competitions, surveys, articles, message boards, or even the job board. This community is a lot of fun and a good way to connect with other programmers with common coding interests. Before you know it, you may be tempted to write an article yourself!

#5 – DevX

No list of developer resources would be complete without a mention of DevX. This site is a massive programmer’s paradise – a huge portal to other huge sites covering the most popular programming topics such as Java, C++, Database programming, Visual Basic, Mobile programming and much more.

Running your mouse over the left menu bar, as shown above, will display the sub-communities that exist under the DevX umbrella portal. When I had a significant Visual Basic project to complete in 2001, this website quickly became my home away from home.

#6 – Planet Source Code

Planet-Source-Code is one of those websites that you hate to like, but you need it anyway. It’s horribly designed, with a weird tiny-font menu listing at the top and ads splattered throughout the page, but if you know where to click, you’ll find a huge library of very useful sample code. At the top right where it reads “To start, just choose:” select the programming language of your choice. The site covers most of the major languages. On the next page you’ll see many categories of sample code to choose from.

Most of the languages have search filter options, and as you can see here, each category has tens, and even hundreds of thousands of lines of sample code available.

#7 – GNU and The Free Software Directory

If your thing is Open Source, then you can’t miss out on the Free Software Directory that’s linked directly from the GNU home page. This directory is just an impressive list of free software within categories like audio and video, database, email, games, graphics, Internet apps, communications and much more.

#8 – Google Code

Google has also joined the open source crowd with Google Code, a site that offers mostly web based sample code within categories like browser apps, website ads, product APIs, and social networking apps.

Google Code received a honorary mention in the MakeUseOf article “10 Google Services that Get No Love,” by Mark.

As always, Google uses its standard format – a very clean and easy to use website where you’ll have no problem quickly finding exactly the open source code that you need.

#9 – DevelopersDex

DevelopersDex is another developers community that has rewarded some of the highest quality contributors with “guru” status.  The site is essentially a giant developer’s forum, currently approaching just under 50 thousand members. The site covers ASP, C#, SQL, VB, and XML.

Each programming category features complete subcategories such as FAQs, job directories, news, and of course forums and newsgroups.

If you’re a developer using one of these languages and you’re looking for a massive web portal to browse through, this is a good one.

#10 – DevArticles

Saving one of my favorites for last, DevArticles offers one of the most comprehensive directories of articles offering sample codes on the Internet.  The list of available software categories is astonishing, including like Flash, embedded tools, and even mobile Linux.

Clicking on any one of those categories turns up a list of useful articles complete with sample code and full descriptions.

Is There More?

This list of developer resources that offer quality sample code snippets is nowhere near complete.  The internet is chock full of resources, and everyone has a list of personal favorites, which often depends heavily upon which software languages you prefer, and what type of programming you’re doing.

Are you a regular visitor to any of the websites listed above when you’re looking for sample code?  Do you have any personal favorites that aren’t listed here?  Share your own favorite sample code resources in the comments section below.

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• How To Install Firebug on IE, Safari, Chrome & Opera (22)
• Web Developer Toolbar for Firefox (4)
• Selected 25 CSS Applications and Tools (19)
• Notepad Programming on Steroids for Application Developers (19)
• 3 Windows Text Editors For Programmers (13)

In the event that your articles hit the Digg frontpage, this could also be one of the few deciding factors (there are many more) whether your server will crash or not.

Some of the most common methods used to minimize/ optimize a CSS stylesheet involves eliminating unused selectors, unwanted whitespace, tabs, comments and change the longhand declaration to shorthand notations.

I know that some of you here are not tech-savvy enough to edit your own CSS code, so here I will provide you with some of the useful tools that you can use to optimize your CSS code, even if you have completely no knowledge of CSS coding.

Check your CSS code

W3C CSS Validator

The W3C CSS validator is a tool that you can use to validate your CSS. You can either download the Java validator to your computer and use it offline, or use the online form to check your CSS code.

CSS Validator Firefox Add-On

To make it easier for you to validate your CSS code, there is this Firefox extension – CSS Validator – that you can install on your browser. Once installed, you can easily and quickly check your code with a right click of the mouse.

CSSCheck

Even though your CSS code is validated, it does not mean that it is free from error. The validation only means that it complies with the CSS standards set by the W3C. If you want to validate as well as looking into a few browser compatibility issues with your stylesheet, then CSSCheck is a good tool for you.

CSS Analyzer

CSS Analyzer is an useful tool that allows you to validate your stylesheet against the W3C’s standard, perform a color contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement.

In case you are wondering, the color contrast test is to check that the foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits, or when viewed on a black and white screen.

Clean up your CSS code

Dust-Me Selectors

Dust-Me Selectors is a Firefox extension that finds unused CSS selectors on the page that you are viewing. As you test subsequent pages of the same domain, the result is cross-checked with the previous data and any selectors encountered are crossed off from the list. You can use it to test individual pages or get it to spider the whole site.

In the end, you will get a report on the selectors that are not used anywhere in the site. You can then remove those selectors from your stylesheet (lesser code means smaller filesize).

CSS Redundancy Checker

Similar to Dust-Me Selectors, this tool checks your site for unused and redundant CSS selectors. The only thing that is different is that you need to manually enter the URI for each page that you want to test.

Optimize and Compress your CSS code

Once you have completed checking the validity of your CSS and cleaned up unnecessary code, it’s time to optimize CSS file and reduce it to the smallest possible size.

CSS Tidy

CSS Tidy is an open source software that you can use to optimize and compress your CSS file. It is available in .exe format (Windows only) and a zipped php script format (all platforms, for Web developers). What CSS Tidy does is mainly remove the comment, unnecessary whitespace and change some of the code to shorthand. During compression, you can choose between code readability or maximum compression. Depending on the length of your code, you can easily achieve a compression ratio of up to 30% or more.

Since CSS Tidy is an open source project, there have been several websites that use the code and turned it into an online tool for people to use. Here are some of them:

• CLEAN CSS
• Code Beautifier
• CSS Formatter and Optimizer from CSS Portal
• CSS Formatter and Optimizer from Flyspray

Other CSS Optimizers

FlumpCakes CSS Optimizer

A simple optimizer that comes with several options for you to choose from.

Robson CSS Compressor

While it may look the same as others, I have found the compression rate for Robson CSS Compressor to be the highest among them all. Although it comes with several options for you to tweak the setting, leaving all the options untouched (all options checked) always produces the best result.

CSS Drive CSS Compressor

The CSS Compressor offered by CSS Drive comes in two modes that you can use: Regular and Advanced. In the Regular mode, you only need to select which level of compression you want (Light, Normal or Super Compact) and the CSS Compressor will do the rest. In the Advanced mode, you are given more options and a greater say on how you want your stylesheet to be optimized.

CSS Optimizer

The CSS Optimizer from mabblog.com is a command line application for Mac and Linux. It is meant for those who are more comfortable with the terminal rather than an online interface. There is also a simple online version available for those who want to quickly get it over and done with.

Hopefully the tools listed here are enough for you to tweak and optimize your CSS stylesheet. If you have used any other tools that are more useful than those mentioned above, share them with us in the comments.

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• Top 5 Sites To Learn CSS Online (32)
• Top 10 Professional Sample Code Websites For Programmers (28)
• How To Install Firebug on IE, Safari, Chrome & Opera (22)
• Web Developer Toolbar for Firefox (4)
• Selected 25 CSS Applications and Tools (19)

Design inspiration sites help you refresh your concepts. You look at the work of the best designers, and incorporate – not copy – those concepts into your own. There are tons of websites and blogs that showcase creative design content, but here are some that actually specialise at the task. Here are some of my favorite sites to get inspiration and ideas for webdesign and other design projects.

FaveUp

One of my favourite design sites, Faveup features categories for logos, business cards, flash websites and CSS websites. The submissions are hand picked by the staff, which ensures that only the best of designs get through. Seriously, there’s no junk in here. The site itself is pleasant to look at, with minimal ads and interruptions (although a bit of a pain to navigate). From the day I discovered it, FaveUp has stayed in my bookmarks.

Web Creme

If designing websites is your thing, you’re going to love WebCreme. The site provides a daily dose of websites that reeks of quality. These are not concept sites but real websites that are designed by professionals.

Web Creme also has a pleasant design of its own, with ads tastefully placed so as to not interrupt your great enlightenment!

Logo Pond

For logo design ideas, look no further than Logo Pond. Featuring an extremely large user base, constantly fed with logos. The quality control isn’t as tight, but most of the logos that come through are solid. You can even hire designers or buy logos directly from the site.

DesignFLAVR

If Photoshop, Illustrator or one of these graphic editors is your kind of application, DesignFLAVR is your kind of site. While it includes CSS and Flash website categories, its main content revolves around digital art, advertising, photo manipulation and such.

The artwork isn’t necessarily done by professionals, but it’s a lot better than weeding through hundreds of amateur submissions on DeviantArt. The site is updated regularly with decent quality content.

I Love Typography

What is design without type? Typography is a means of communicating with the viewer, spelling out the words we speak. Started by graphic designer John Boardley just over a year ago, the I Love Typography blog has taken the design world by storm. iLT features a brilliant site design, well written articles and is a great resource for finding type used in the most unique ways.

The site will also prove to be an excellent font resource for your design needs. You might also want to take a look at these free font download catalogues.

That completes my creative fodder. What remains is of course, putting it all to practice. What is your regular stop for design inspiration?

Photo Credit : I’m Your Pusher

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• How To Make Your Own Banner For Your Website (13)
• 6 Excellent Mac Apps for Graphic & Web Design (9)
• 5 Sites To Spread The Love For Google Doodle Pictures (11)
• 5 Best Sites for Free Tattoo Designs (22)
• 3 Cool Ways To Check Out An Archive of Google’s Doodles (4)

Even though I have learnt my lesson from that day, I still love fonts and I am always trying out new ones. Art and graphic design were my best subjects at school and calligraphy has always been a big interest of mine as well. So I am always collecting new free online sources for fonts.

Here are the five best ones in my opinion :

What The Font?!

Do you really like a particular poster design or a particular style of font and you would like to duplicate it?   “What The Font” allows you to upload a scanned image of a piece of writing or a font and it will identify the name of the font for you. Or instead of uploading, you can point it to a URL.

It seems to be very accurate and fast. I uploaded a scan of the title of a book I have called “To The Lighthouse” by Virginia Woolf. ”What The Font” identified the font seconds later as “Baskerville Old Face”:

DDFont

Some nice fonts here. Not too many to choose from but the ones that ARE available are quite nice. Just click on the one you want, enter the activation code, and it will download to your computer.

Fonts 500

Claims to be the top 500 free fonts on the web.   Not sure if that is true but nevertheless the fonts on this site are REALLY good.    Each one is in a ZIP file so just click on the ones you want and they will immediately download to your computer.   Then just unzip them.   Some notable ones include Harry Potter, Yahoo, Scrabble letters, Star Wars, Godfather, Terminator, Bon Jovi and Pizza Hut.

TypeNow

Here, they have some movie and TV themed fonts. If you have a favourite movie or TV programme, check here to see if the font is available. TV show-wise, they have things like “Lost” and “Prison Break”, movie-wise, they have ones like Casino Royale and Kill Bill. In other ones, they have the Google font and Estee Lauder, among others. Worth checking out.

Search Free Fonts

This excellent site allows you to search through 13,000 free fonts, broken down into various categories.  When you click on a particular font, it then gives you a close up view of that font so you can see what it looks like. You can type in your own text, specify a size up to 72 and preview it in that font so you can decide which font will suit you best before downloading it :

To finish off, here’s a College Humor video on a “Font Conference” which I have always found very funny.

Where do you find your fonts?  What are your favourite sites for free fonts?

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• How To Install Microsoft Text Fonts In Ubuntu Linux (46)
• How To Hide Text In Microsoft Word 2007, Reveal It & Protect It (6)
• 4 Custom Bullet Tips and Tricks for Microsoft Word 2007 (11)
• 3 Ways To Strip Formatting From Text in MS Word 2007 (9)
• 14 Application Cheat Sheets & Posters for Popular Programs (33)

Search Color Schemes (Use Words)

Picking out a color scheme for your website? Not sure how to describe the actual colors you need? Try out ‘Instant Color Schemes’.

This excellent free service makes it easy for anyone to find an entire matching color scheme simply by typing in a word. For example, just search for ’sunset’, and color schemes related to ’sunset’ will be made available on the spot.

“Instant Color Schemes” makes full use of Yahoo’s image search API. How it works is that they take 5 related images from Yahoo Image Search and then show the most prominent 6 colors from each image and then find related colors to come up with the color schemes.

After some testing, it does work out pretty well in most cases. It did give me abnormal results once in a while (along with yellow and orange, pink and grey colors were displayed to me when I searched for ‘curry’!), but it looks to be a good product overall.

Search Color Schemes (Use Images)

Lost for words? If you are, you can let your favorite image do the talking. Sometimes words don’t cut it. This is especially true when you’re trying to pick colors to match certain objects, a painting or a statue for instance. Just upload a picture to Color Palette Generator and it will break down the key colors from within that photo and allow you to obtain a color scheme from that image.

Also of note is the fact that the source code for this project is available for free which means you can grab it, change and modify the code and put it to good use as well.

So there you go, two tools which will help you make the right decision about colors – all the time.

You might also want to check out The Best 3 Tools to Search for Images Online by Color by Ann.

How do you pick color schemes? I would love to hear your thoughts.

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• The Best 3 Tools to Search for Images Online by Color (26)
• Instant Eyedropper Drops The Pain From Color Matching (12)
• 6 Excellent Mac Apps for Graphic & Web Design (9)
• Yahoo Searchmonkey Expands with Playable Music Tracks (3)
• Write & Develop HTML Offline with First Page (12)

Of course everyone wants their blog to look pretty. As pretty as possible because looks count. You want your site to look tempting yet professional. You’ll be represented by your site’s appearance.

Perhaps some of you will want to make your own themes. If that’s your thing, Jeffry wrote a great article on how to create your own Wordpress theme here.

If not, read on. Below is a list of some very good places to find your free WordPress and/or Blogger themes.

Free WordPress Themes

Lets start out with the WordPress ones. If you’re looking for Blogger skins, please skip this section.

WordPress is a great blogging engine, and one I would certainly advise to people who want to have a more advanced input.

1. 49 Most Downloaded Wordpress Themes Of All Time (by HONGKIAT)

This site has made a list of the 49 most downloaded Wordpress themes of all time (at the moment of writing). This is a great site with a lot of the best themes available.

You won’t be exactly original, but there’s a good reason these were downloaded this much.

2. 83 Beautiful WordPress Themes (by Smashing Magazine)

Smashing Magazine looked at a few things while creating this list. First, it had to be beautiful. Next, it shouldn’t already be worn out by the community, they wanted things ‘you probably hadn’t seen’ yet. Finally, they wanted it to be user friendly.

“All themes offer quality and elegance.” Here you’ll be able to find some (83) great-looking themes, to give a distinct character to your blog.

Blogger Skins

Blogger has a less advanced interface than WordPress, but it’s still a great blog engine. It was even bought up by Google some time ago.

For people who don’t want things to get complicated, who want to blog in a few clicks without too much fuss, Blogger is great.

1. 70 Fresh And Modern Blogger Templates (by Mashable)

“You can never have a too wide choice of templates for your blog, especially if you’re the experimenting type.”

This is Mashable’s list of 70 free, fresh and modern Blogger templates. Here you’ll find some really great and professional looking Blogger templates.

This list features photo previews of all the themes, as well as a brief review.

2. BlogSkins.com

BlogSkins is my personal favourite. Compared to the above sites, this is not a static site, but a revolving, constantly changing template site. You can browse by Hot Skins, Recent Skins, and each day there’s an elected “Skin of the Day”.

“BlogSkins is a community of blog template designers, users, and friends. Whether you’re looking for a fresh new design for your blog or wanting to share your hot designs with others, this is the place for you!”

Go to BlogSkins.com to find the most recent and most popular blogger templates of the moment.

Where did you find your blog template? Do you have a secret online stash of templates that you’d like to share with us? If so, let us know the link in the comments and tell us why you like them so much!

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• A Beginner’s Guide To Building Your Own Wordpress Theme (9)
• The 5 Free Wordpress Templates To Dress Up Your Blog (15)
• 3 Firefox Add-Ons To Help You Blog More Easily (19)
• Top 10 Blogger Hacks and Tips (123)
• The First Wordpress Plugins You Must Install (29)

A lot of high-end software companies provide extremely good value packages for students often involving completely free giveaway editions, stripped-down versions or huge discounts on the off-the-shelf price.

Maybe you hate Microsoft for charging so much for its operating system, but at least it also has plenty of great free software giveaways (such as Windows Live). This year it has released two great deals, one for students only and the other for anyone else interested in getting into software or web development:

Visual Studio 2008 Express Editions

The Visual Studio Express editions are feature-limited but not in a way that will affect most beginners just wanting to try out development themselves. The Express editions are available for anyone to download and include four main applications, the two main stand-outs being;

Visual Basic 2008 Express

If you’ve ever wanted to have a go at learning how to develop your own Windows applications then this is the best place to start. 2008 Express includes the capabilities to create applications using the new Windows Presentation Foundation (WPF) and Microsoft provides plenty of free guides, tutorials, samples and extra resources.

Visual Web Developer 2008 Express

Visual Web Developer is for the design and creation of web pages and more. 2008 Express includes a lot more support and tools for using CSS, building JavaScript applications and more complex data-driven web sites.

It’s great for learning for the same reasons described above, you’ll find plenty of tutorials and assistance.

The Express editions also includes Visual C# 2008 and Visual C++ 2008 for more.

DreamSpark

DreamSpark is restricted to students currently attending a university or academic institute which has been accredited and signed up for this program. The number of universities is actually pretty comprehensive and I would guess most universities around the world have actually joined up.

You’ll have to use the student number and password you should have received from your university. Verification is simple and instant before you can download for free any of Microsoft’s software for designers and developers. These aren’t trial or feature limited in anyway and are the exact tools you can buy off the shelf for hundreds of dollars:

Visual Basic 2008 Professional Edition

Provides the features missing from the Express edition. Create software for Windows, the web and devices running Windows Mobile. You can also create applications with then new Office 2007 Ribbon UI or create addins for the Office applications like Word and Outlook.

This file is downloaded as an ISO file which you’ll need to burn to a DVD before installing. Or if you have a mount program to mount ISO files that should be fine as well.

Expression Studio 2

Expression Studio is Microsoft’s set of products designed to compete with Adobe’s developer and designer software such as Dreamweaver and PhotoShop. This installation is 500MB and includes:

I’m still only trying these products out for myself so I can’t really give you a honest opinion at this point. For the price of free though there is little to complain about. Incidentally the Expression 2 applications were all re-written in WPF. An interesting point although I’m not sure what advantage this gives, perhaps someone can help me?

XNA Game Studio 2

The strength of this application is that it enables developers to easily create games for both Windows and Xbox 360 which have support for the Windows Live and Xbox Live respective multiplayer gaming networks. This application is for hobbyists and independent developers, for fun or profit.

The student download also includes a 12 month trial subscription to XNA Creaters Club which would normally be $100 per year. You won’t get access to premium content though. Seriously, what’s with these stingy companies these days?

If you try these tools you’ll discover the software alone isn’t the best part of this, but the community, the extra resources, free assistance and tutorials and sample code and templates which will go a long way to helping people who are teaching themselves.

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• Top 5 Sites To Learn CSS Online (32)
• Top 10 Professional Sample Code Websites For Programmers (28)
• Notepad Programming on Steroids for Application Developers (19)
• How To Install Firebug on IE, Safari, Chrome & Opera (22)
• Web Developer Toolbar for Firefox (4)

Due to Opera’s speed and strict adherence to web standards, it makes for a great web design/development browser.

With the addition of these widgets your design/development tasks will become that much easier.

	1. Screen Ruler Screen Ruler is exactly what you’d think it is – a tool that allows you to measure the space on your screen – specifically in Opera. Just click the grid in two places to measure the distance between the points (in pixels). To remove the points, click again. You can create straight lines by using the Shift key.
	2. Colours of the Rainbow Colours of the Rainbow allows you to quickly select a colour and view its HSV, RGB and CSS hex codes. It can be quickly “folded up” to take up less screen real-estate when it’s not in use.
	3. CSS Help CSS Help provides you with quick access to the W3C CSS 2.1 codes, right on your desktop. The built in search makes finding tags super-quick.
	4. Site Validator Site Validator combined with a validate.xml file that contains a list of all the files (HTML/CSS) allows you to quickly confirm files and links are correct. Alternately, you can link to a standard sitemap.xml, but I’ve had issues (errors when there shouldn’t be) using that method.
	5. Javascript Cheatsheet Javascript Cheatsheet provides quick reference to JS information from the Mozilla Developer Center.
	6. Character Map Character Map allows you to quickly find and select various typographic characters. Once found, just click the character and it’s placed into the text field where it can be easily copied.
	7. HTML Entities HTML Entities is a floating sheet that displays all HTML Entities (Latin-1, Greek, Math and other) with descriptions that can be toggled on or off.
	8. Charge by the Hr Charge by the Hr allows you to keep track of the time you’ve spent working on a project. It also allows you to put in an hourly rate, so you can see how much you’ve made as time passes (a bit of motivation).

So what do you think of these widgets? Have you used them yourself? Would you use them? Do you have any favourites of your own you’d like to add? Let us know in the comments.

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• Useful Widgets for the Opera Browser (11)
• Test Your Site In Multiple Versions of Internet Explorer (6)
• Web Developer Toolbar for Firefox (4)
• Top 5 Sites To Learn CSS Online (32)
• Top 10 Professional Sample Code Websites For Programmers (28)

So what’s a web designer to do? Although there’s a wonderful website Browsershots which can give screenshots in almost any browser/version out there, sometimes a screenshot is not enough.

Enter IETester. It’s essentially a Windows-only web browser which emulates the rendering and JavaScript engines of Internet Explorer versions 5.5, 6, 7, and 8 Beta 1. You can browse websites just like you would in any other web browser, with an option for each tab you open to render as one of the four versions. Although it doesn’t have all the features that an actual web browser would have, it’s great when you need to test websites, or if a particular site requires Internet Explorer but doesn’t work with the version you have.

One feature I like in IETester, which I’d actually like to see in Firefox, is its multi-paned view. As you can see in the screenshot below, the pane on the right side has a tab which is in IE 8 mode, and the pane on the left side has a tab in IE 7 mode and another tab hidden behind the drop down menu. This makes it really easy to compare side by side, without having to open a whole new window.

Do you use IETester? What do you think of it? I’d love to know how you feel about this program in the comments below, or if you know of something better.

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• Preview Sites in Multiple Versions of Internet Explorer with Microsoft SuperPreview (7)
• 8 Opera Widgets for Web Designers and Developers (3)
• Web Developer Toolbar for Firefox (4)
• Transmute – Migrate Bookmarks Between Your Browsers (3)
• Top 5 Sites To Learn CSS Online (32)

After using numerous items, I (and I’m sure that most people too) have reached the point where I wanted to make my own blog. While developing your own Wordpress plugins requires a certain level of programming knowledge, building the themes is not.

So, before the CSS and PHP die-hard fans begin shouting their protests, let me assure you that these two free easy options to build Wordpress themes are only for beginners and for those with basic knowledge.

Online Wordpress Theme Generator

This online Wordpress Theme Generator has been around for sometime but seems to be unheard of among the thousands of freely available themes.

Creating your own personalized theme is a snap. Just tweak the options in the left column and see the real-time results on the right. My experience of using it to create my first theme took me less than ten minutes and resulted in an acceptable design.

I have to admit that the available options will make the ‘really-true beginner’ feel overwhelmed. But if you’ve been around your Wordpress blog for some time, you’ll be fine.

The real beauty comes after you click the “Save” button at the very end of the left column. Aside from getting a download link for your piece of virtual art, you’ll also get the “Theme Setting URL” link (http://tinyurl.com/xxxxx). You’ll be able to share your design with others or re-tweak the design again at a later time.

Becoming a Theme Artist

The second option is a Windows-only application which I stumbled onto by accident. The name is Artisteer and is actually a web design app.

The good news is that this one is a great and easy web design application and is (still) available for free. The bad news is that the beta version is watermarked and I didn’t find it sooner (the beta testing period will end on September 1st with a possible availability of a free version).

Creating a beautiful Wordpress theme is a no brainer. You can choose to tweak each and every element of the design, or let the app suggest a design for you. You then can export the result as a Wordpress theme. (We’ll wait and see what will happen after September 1st.)

Being a person who has tried to build a Wordpress theme from scratch (and failed miserably), I can say that these two are the easiest methods I have ever tried. If you can suggest a better option, shoot it out in the comments below.

(By) Jeffry Thurana is a blogaholic who has just started his own self-improvement journal “Supersubconscious” and manages an Indonesian tech blog “InterNeTips“. He actually thinks there are 30 hours everyday.

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• 4 Websites for Great Wordpress Themes & Blogger Skins (9)
• The First Wordpress Plugins You Must Install (29)
• The 5 Free Wordpress Templates To Dress Up Your Blog (15)
• ScribeFire vs DeepestSender: One Blogging Addon to Rule Them All! (18)
• Online FTP Clients: Use FTP Online without Installing A Client (18)

There are several ways that I know of to do that. The first is to open up a program and seek out its color matching dialogue and apply what I call the “gosh, that looks close enough!” method to pick out a color. Another way is to copy the item that has the color I want by hitting “Print Screen” and then opening Paint, pasting in the item from the clip board, zooming in on it and then use the ‘Pick Color’ tool. At that point I can copy down the HEX code and I am good to go.

Obviously the first method is not very exact, and the second method requires a number of steps. If you need to do this a few times a day, one heck of a lot of time gets wasted!

So, to my great delight, Instant Eyedropper reduces all of that to one click, for free!

Once you install the free download, a new icon appears in the system tray that looks like this:

To use the tool you simply left click on the icon and then drag the mouse to the color that you want and voila! The hex code appears in the tool window. Release the mouse button and the code is now in your clipboard. Now you can return to your project and using the PhotoShop (or another graphics program) color picker tool, just drop in the code and you are done. You’ll have the exact color match.

A simple set of options is available if you right click the icon.

As you can see, you can choose from HTML, Hex, Delphi Hex, VB Hex, RGB and HSB formats.

I think that this is a really great time saver and you sure can’t beat the price!

Do you know of any other similar color tools?

(By) Jerry Kidd is a California Real Estate Broker, blogger, educator and author of RealtyTechBytes

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• The Best 3 Tools to Search for Images Online by Color (26)
• 6 Excellent Mac Apps for Graphic & Web Design (9)
• The Ultimate, Free Online Color Schemer To Help Complement Your Colors (29)
• How To Search For the Perfect Color Scheme (7)
• Write & Develop HTML Offline with First Page (12)

If you’re prepared to pay for a text editor with a free trial option, there is Dreamweaver and Aptana, Aptana has three software packages Aptana Studio, Aptana Cloud and Aptana Jaxer.

If you don’t want to pay for a text editor and would prefer a free option, read on…

Intype

Intype is a really good lightweight text editor for Windows. The interface of Intype is just like the one for TextMate for OS X so it works really well and keeps things simple, easy and tidy. Intype has been around since its first alpha release back in January 2007 and is now on alpha version 3. The progress of Intype has been really slow because they only have two developers. The first is Martin Cohen who is the project leader and the person behind interface for Intype. The second person is Juraj Durech who is responsible for the core C++ programming.

When Intype finally hits 1.0 I think that it’ll be without a doubt one of the best text editors around. Why? Well, Intype is only at version 0.3.1 at the moment and it already packs a good punch. It supports bundles and plugins as well as a bundle editor and a lot more features. All of Intype’s finished and pending features can be viewed here.

The languages that Intype supports syntax highlighting for are C, C++, CSS, HTML, HTML (Rails), Jasmine, Java, Javascript, PHP, Perl, Python, Ruby, Ruby on Rails, SQL, SQL(Rails), Textile, XHTML, XML, XSL and YAML. The Bundles that Intype comes installed with are PropertyList, C, CSS, DOM, HTML, Jasmine, Java, Javascript, Perl, PHP, Python, Rails, reStructuredText, Ruby, SQL, Textile, XML and YAML.

What is a bundle?

A bundle is like a shortcut for typing certain functions and commands in languages. An example of how to use a bundle in PHP is if I want to do an If statement, I would type ‘if’ and then hit enter and then it would fill in the other characters to save me time.

Notepad++

Notepad++ is a very popular open source text editor for Windows that a lot of programmers use because of the functionality that it has. Notepad++ was first released in November 2003 and as of writing this article is at version 5.0.

Just like Intype, Notepad++ supports syntax highlighting for a lot of languages.

The languages that it supports syntax highlighting for are C, C++, Java, C#, XML, HTML, PHP, CSS, makefile, ASCII art, doxygen, ini file, batch file, Javascript, ASP, VB/VBS, SQL, Objective-C, RC resource file, Pascal, Perl, Python, Lua, TeX, TCL, Assembler, Ruby, Lisp, Scheme, Properties, Diff, Smalltalk, Postscript, VHDL, Ada, Caml, AutoIt, KiXtart, Matlab, Verilog, Haskell, InnoSetup, CMake and YAML.

Notepad++ has a style editor so that you can change the syntax highlighting of a language so that it’s more comfortable for you if you’re used to a different type of syntax highlighting that Notepad++ uses by default.

Notepad++ allows for the use of plugins and comes with 8 installed. Light Explorer, Spell-Checker, NppExec, MIME Tools, FTP, NppExport, Compare and Document Monitor.

Notepad++ also allows for the use of macros to save you from typing the same functions over and over again. In the preferences you can change everything from the tab size to the blink rate and width of the caret. There is also a shortcut mapper so that you can configure shortcuts to fit how you like.

Notepad++ has a lot of features that I could be here all day writing about so if you want to check out the other features that Notepad++ then head over to their website.

ConTEXT

When I was a full time Windows user my text editor of choice was ConTEXT. I really like the look and feel of ConTEXT – it’s simple and it just works. As ConTEXT is so light it requires hardly any RAM, so if you’re running a few memory intensive applications and you also need to do a bit of programming then ConTEXT is a good choice.

The languages that ConTEXT supports for syntax highlighting are C, C++, CSS, ConTEXT Highlighter, ConTEXT Language Files, Fortran, Foxpro, HTML, Inno Setup Script, Java, JavaScript, Object Pascal, Perl, PHP, Python, SQL, Tcl/Tk, Visual Basic, x86 Assembler and XML. If you don’t like the syntax highlighting that ConTEXT uses then you can always edit it under Options->Environment Options->Colors. You can also download more highlighters from their website.

With ConTEXT you can integrate a compiler to compile source code that you have written to keep a good work flow. To keep things organized with ConTEXT you can also create and manage project files.

ConTEXT also allows the creation of macros to save you time from typing the same functions.

To view all the features that ConTEXT has view their website here.

What text editor do you use for programming? One of the ones above or a totally different one? Tell us all about your favourite program in the comments.

(By) Wez is a student studying computers, also does programming and video tutorials and writes about technology, software and websites, check out his blog @ www.TheTutorialBlog.com

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• Notepad Programming on Steroids for Application Developers (19)
• Top 10 Professional Sample Code Websites For Programmers (28)
• Web Developer Toolbar for Firefox (4)
• Selected 25 CSS Applications and Tools (19)
• Learn To Code At Any Level With Google Code University (7)

A what?

Yes, it’s a valid question! Well, on the internet, Sprouts are advanced Flash based banners that come in all sizes, containing all sorts of media, can be 100% custom designed or based on a template and, like a paper leaflet, they can contain several independent pages.

Basically, a Sprout can be anything from a very simple banner to a very elaborate mini website.

If your imagination isn’t running wild yet at this point, let me give you some ideas! For example you can use a Sprout to promote your website, add a short description, a live feed and a URL back to your page. If you are an artist you can promote your work by adding sounds, videos, pictures, and much more. The Sprout can be posted on any website, on social network pages like MySpace or as a signature in a forum.

Sprout Builder is the free online tool that allows you to create Sprouts. Below is a Sprout that I created as a demonstration in less than five minutes with close to no knowledge and experience.

I’m hooked, get me started!

Let me tell you this, it’s VERY simple! If you have a basic understanding of image editing, and if you’ve ever worked with Photoshop (and pulled your hair out), you’ll not even need to read on, it’s that (much more) simple.

You can start without signing up. Once you’re happy with your first project and wish to save and eventually publish it, that’s when you will need to sign up for free. For now, you can just go ahead and give it a try, no strings attached.

Just click the GET STARTED! button in the top right, and then START BUILDING NOW! after reading the short note about compatibility and possible bugs. If you have IE 7, Firefox 2+, Safari 3+, as well as Flash 9 installed, you’re good to go.

First you’ll be asked to pick a template. If the blank slate scares you, pick any of the other preset templates to play around with. You can delete and add items anytime and make it your very own personal Sprout within the process. I’ll base my explanations on the Sports template.

Once you picked a template you can give the project a name and description. When this step is completed you can finally begin to enter the creative phase. This is what the virgin workspace looks like:

I’ll go through the menus from left to right. The Tools bar on the far left hopefully is self explanatory. Through Components you can add media, general stuff like a slideshow, a calendar, a news feed, a timer or countdown, and services such as Google Charts, a PollDaddy poll, Yahoo! Maps and much more. History should be clear and Properties allows you to customize the characteristics of any selected object. At the bottom you’ll see an overview of your Pages.

You can create things on your workspace outside the active Sprout area (white background). This is great for trying different things. Unfortunately, things outside the active area will not be automatically visible on all pages. However, you can easily copy and paste items using keyboard shortcuts (Ctrl + C and Ctrl + V).

Per default, you start out editing a content page and you won’t need the master pages, unless you wish to create a uniform look. There are two master pages, one for the foreground and one for the background, and their content will be visible on all content pages. So this is where you would add a common background, a logo, links to the other pages and things like that. Cross-linking to a content page is done through the Properties menu. In the Links & Tracking tab you check Page instead of URL and select the respective page.

Now, to add media, you’ll either need the URL of the file or upload it to your Assets. This unimpressive little Assets button sitting on top of your Sprout Builder workspace actually is a little pulldown page from where you can upload your media, i.e. images, videos, audio and flash movies.

So what you do is upload the media you want to use, then add the media placeholder through the Components menu, double-click the placeholder and drag & drop the respective media from your asset manager into the “Add Audio Media” window. You’ll see that each and every step is apparent and instructions are very clear.

You can publish your Sprout using the raw code or you can quick post it to one of the supported pages.

The coolest thing is that you can track your Sprout’s activity once it has been published! Check out the Reports section (red link in the top right of the page) and see how many times your projects have been viewed, posted and where your visitors came from.

I hope I could give you a good idea of what Sprout Builder is, how it works, and I’m sure you can work out the rest of the details on your own. Please let us know what you think, all feedback welcome! Also, I would love to see your results! Please send me links to your Sprouts, and if there’s an adorable example among them, or two or three, we will feature them here on Make Use Of. Be creative – ready, set, go!

(By) This post was written by one of our regular authors, Tina from Recommended.

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• MUO Games – Put Yourself In The Game With Pictogame (9)
• Create DVDs Out of AVI or Other Media Files (14)
• AIM Express lets you use IM without installing a client (12)
• [Quick Tip] Stop Pidgin Spam in Its Tracks with Bot Sentry (26)
• Write & Develop HTML Offline with First Page (12)

Once installed, it will give you a host of useful options for developers, and even some for non-development usage. You can disable cookies, clear the cache, resize to different resolutions, validate links, code, disable images, show alt attributes and the list just goes on and on. Possibly the best feature is the ability to edit the css and view the results instantaneously. This of course doesn’t actually edit the source css, but a simple copy and paste will enable you to apply these changes to your page in reality.

Features for the common user

There are a number of things you could make use of just as a simple surfer. Using the disable menu you can disable java, javascript, disable page colors, minimum font size, and even redirects to create a comfortable or safer environment. You can also disable, delete or add cookies and view info contained in them, so you know exactly where they are coming from.

You can manipulate images in a few ways too. Choosing to disable them via the images menu will save you bandwidth if you need it, and may give you a better reading experience overall. What’s really cool though is you can disable only external images and you can also replace images with their alt attributes if you want to keep some pics, but not waste bandwidth on the rest.

You can display some info on the site too, like abbreviations, although this only works if the site author uses the appropriate tags. You can also take a peek into the meta information, page information and link information if you are doing research, or trying to find the author of a page for example.

Web development features

While the toolbar can be used for normal browsing, the additional features you get as a developer are what makes this addon really worthwhile. As I mentioned earlier, my favorite features can be found in the CSS menu, where you have all sorts of options to manipulate the styles of a page.

First and foremost, you can disable styles. Not just altogether, but you can choose to just disable browser default styles, embedded styles, linked styles and so on. This is great for finding that stupid error which makes the div container go in a weird place.

Among other features here, my two favorites are the view CSS and the edit CSS options. By enabling view CSS (ctr+shift+Y) you can view the styling of that particular piece of code. You can see a red box around the element you’re viewing, giving you a good idea of dimensions as well. Clicking will bring up a sidebar showing you the exact css code applied to that section. While this is a very helpful feature, it would be nice if you could go ahead and edit the details you see right away, since this mode only enables you to view. Also, depending on how garbled your code is, it may be hard to select underlying elements like divs and so on. I only run into this problem once a while and it’s no biggie, but it would be nice to implement some sort of sorting mechanism here.

The edit CSS feature brings up another pane with the css code inside. You will also see, and be able to edit multiple linked styles, and any changes you make will be shown automatically. This is especially awesome because there’s no need to save, and upload and refresh, you can see it right there in the browser window. If you are happy, just copy the code into your actual stylesheet and save. One problem I have is that searching in the code doesn’t always work for me. If you don’t know the code too well this is a big problem, you will spend a lot of time searching in this case. A feature to upload via ftp would be nice, although one that’s not very sorely missed, at least by me.

One of my other favorite features is actually a very simple one, the resize feature. This enables you to resize the window to any resolution, making cross-resolution development a cinch. You can input some common presets for use in the future, or resize to a given value at any time. Since I have a widescreen laptop this is an invaluable tool which I use to check for the standard 1024×768 compatibility.

The outline menu is also very useful for selecting and highlighting various parts of a page. Outlining depreciated elements, headings, links and so on may also help you in debugging, or helping you arrange your page in the fashion you want to. Apart from my favorites shown here there really are many features you could use as a developer, this tool has made my life so much simpler.

One awesome feature would be the interaction with the popular addon named IE tab. This addon enables you to view a page with the Internet Explorer engine in Firefox, again, very helpful for catching and correcting those annoying problems with IE. It would be nice if Web Developer worked with this addon, showing you all the info as it does with the Mozilla engine. Overall one of my favorite addons is this though and I heartily recommend it to any developer.

(By) Daniel, who needs to learn to write well, manage a blog and learn how this internet thing works but otherwise is a really great blogger. You can read his personal blog or his productivity blog if you dare!

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• Top 10 Professional Sample Code Websites For Programmers (28)
• Selected 25 CSS Applications and Tools (19)
• Notepad Programming on Steroids for Application Developers (19)
• How To Install Firebug on IE, Safari, Chrome & Opera (22)
• Amateur’s Guide To Customizing Website Design With FireBug (39)

When I first fired it up it was a bit slow, but after that I was quite impressed. Presentation-wise it looks more like Dreamweaver than Notepad++ or HTML-kit, and this is true features-wise as well.

It has a tabbed interface, so you can work on multiple files at a time, and since it supports a lot of languages, you can use it for multi-language development too. HTML, CSS and Javascript are its main strong points, but with plugins you can enable php, AJAX, iPhone development, and more. One of the drawbacks I found is that it won’t open a file it doesn’t recognize. It would be nice to open any file like Notepad++ can, since many times you don’t need advanced features for a quick edit.

The selling point of Aptana for me was the FTP integration. I don’t actually use advanced features too much.

I like writing my HTML and CSS totally by hand, so those are just convenient extras for me. FTP support is built in very well and effectively. You can add FTP directories directly to your file list and download files from there, syncing them with every save. Downloading was a bit slow for me occasionally, usually just after establishing the connection, but not so much that I would call it a drawback.

Once you have a file loaded, you can get to editing. You get a sort of rich text editor, but instead of being able to bold text, change font and so on, you get tag-wraps, like “wrap with <h1>” and “wrap with <li>”. This is actually the one part I use, when creating lists there is no end to the encasings that I need to do, since usually my list items are links as well. Now I can blow through list creation in seconds. You can also switch between languages which will give you different options, like inserting CSS comments and wrapping in a loop.

Code collapsing is also available in the editor, and is done automatically. Start and end tags are paired automatically, so if you press the minus icon left of a tag, it will collapse it until the matching end tag. You can then expand again by pressing the plus icon, or just view the code by hovering over it. I use this feature a lot when developing a website, I collapse the parts of code I want to put in separate php files, and css that I will be placing in an external file later on for example.

Another feature I love, although haven’t learned to make use of yet is the outline feature. By default you will find this in the top-right corner, and it shows the tag structure of your code. Tags contained within tags can be expanded and collapsed and you can get a great overview of your code. One useful way to use this is for navigation, since you can quickly jump anywhere, but I’m sure I’ll find other uses later on.

Since I could go on and on about the features in Aptana, let me choose a few more quickly from my favorites. Validation works extremely well in Aptana, it’s built in underneath the editor in a minimizable box. It refreshes automatically when correcting and gives you very good explanations of the errors, right down to what you should change exactly. It’s very unobtrusive, which is something I rarely see in html/css related applications. The other feature I loved was one-click formatting, which changes your code from a mess to a beautifully formated code with tabs and line breaks in the right place. If you’re a messy coder, this one will come in handy, since you can forget about code presentation until the very end.

Beginners will love Aptana because once you familiarize yourself with the interface, you’ll realize that there is a lot of help there for beginners. From the one click formatting to the expressive contextual tag help to examples and validation help you could probably start learning HTML and CSS in Aptana itself. On the other hand, these features won’t get in the way of serious coders who don’t need in-your-face help. You can work normally without even noticing these.

Overall I am very impressed with Aptana. I have been looking for a tool like this for ages, but everything I found was not up to the job, so I just used a notepad replacement. While Aptana has shortcomings from the text-editor side, it’s obvious that it is not meant for that purpose. As a code editor it works extremely well, serving novice users and pros alike.

The size of around 100Mb may be a bit scary, but you get a lot of examples, code snippets and other extras, so it’s well worth the download. There is a paid version available as well with advanced features, but for JS, HTML, CSS and PHP you will be fine. You can take a look at the difference between editions and decide if you need to go pro.

Considering that it costs a fourth of what Dreamweaver costs and has about 9/10th of the features, I think you’re getting quite a bargain.

(By) Daniel, who needs to learn to write well, manage a blog and learn how this internet thing works but otherwise is a really great blogger. You can read his personal blog or his productivity blog if you dare!

Did you like the post? Please do share your thoughts in the comments section!

New on MakeUseOf ? Get cheat sheets and cool PDF guides @ www.makeuseof.com/makeuseof-downloads/

• Web Developer Toolbar for Firefox (4)
• Top 10 Professional Sample Code Websites For Programmers (28)
• Selected 25 CSS Applications and Tools (19)
• Notepad Programming on Steroids for Application Developers (19)
• Learn To Code At Any Level With Google Code University (7)