To download your free copy, just fill in the form in the sidebar, which will take you to the download page.

I never cease to be amazed by the quantity, quality and diversity of WordPress plugins. There are several ways to find the right plugin for the task at hand such as searching on google, on WordPress.org or reading a blog post which lists the most popular WordPress plugins.

Over the past couple of years, I have developed many WordPress websites, and I’ve found myself relying on the same list of core must-have plugins. Through trial and error, I have selected the most reliable, powerful, less resource intensive, most actively developed plugins to use on all the sites I develop for clients.
And now, I am sharing this list with you, so go download it already!

I’d love to read your comments about the ultimiate list of WordPress plugins, feedback and suggestions are welcome, just leave a comment below.

semantic star rating with HTML

here is the markup:

<section id="skills">
<h3>skillset</h3>
<p><abbr title="HyperText Markup Language">HTML</abbr>/<abbr title="cascading stylesheets">CSS</abbr>: <meter class="ir" min="0" max="5" value="4">4 out of 5</meter></p>
<p>adobe photoshop: <meter class="ir" min="0" max="5" value="3">3 out of 5</meter></p>
<p>javascript: <meter class="ir" min="0" max="5" value="3">3 out of 5</meter></p>
<p>web standards: <meter class="ir" min="0" max="5" value="4">4 out of 5</meter></p>
<p>mobile development: <meter class="ir" min="0" max="5" value="3">3 out of 5</meter></p>
</section>

and the CSS:

  #skills meter{
	float: right;
	background-image: url(../images/skillstars.gif);
	background-position: 0 0;
	height: 20px;
	overflow:hidden;
	width: 114px;
  }

  #skills meter[value="0"] {
	background-position: 0 0;
  }
    #skills meter[value="1"] {
	background-position: 0 -22px;
  }
    #skills meter[value="2"] {
	background-position: 0 -44px;
  }
    #skills meter[value="3"] {
	background-position: 0 -66px;
  }
    #skills meter[value="4"] {
	background-position: 0 -88px;
  }
    #skills meter[value="5"] {
	background-position: 0 -110px;
  }

To see a demo : demo

The original design is from Design Kindle

For the page profile image, I suggest a 200px width with 12 pixels margins on both sides. This will allow for cropping which Facebook does automatically.

You can also create a custom tab, using the static FBML application.
Once you’ve added the application, you’ll be able to use custom CSS and HTML to style the page.
At the moment, I only added a banner and a call to action button, as an experiment.

Are you a freelancer and you’ve customized your page? Let me know in the comments!

When I’m collaborating with other independent web designers or programmers (I don’t use the term freelancer), I need a tool to centralize all our activities and communication regarding the project at hand. While Basecamp is an excellent project management app, which I use on some client projects – usually when they have a subscription and add me as a user – it doesn’t have a good free plan. I use TeamBox, which is a great online app, similar to Basecamp, and allows to manage 3 projects concurrently. You can archive projects, which will free a slot for new projects.

I use the free plan on Freshbooks, which also limits the number of clients, but allows all the functionality of the paid plans.
It also has a time tracking tool which you can use to create an invoice from the logged hours. Which leads me to time tracking.

I recently discovered Toggl, which seems to be a great app. I use the free plan limited to 5 users, so perfect for me.
It has a desktop utility which seems to be very clever.

I use Balsamiq mockups.
I use the free plan for getsignoff or notableapp for getting feedback on the design.

I use Photoshop. Of course, it’s not free, but it’s an industry standard, so there are many resources for learning how to use it. Also clients usually give me Photoshop files to work with.
I might move to Fireworks in the near future for creating my designs.

I use PhpStorm for coding HTML, CSS and Php.
Unfortunately the current version doesn’t permit to edit a unique file via FTP, you first have to download the whole project to a local copy, which is actually better. It means you work on a local copy and synchronize to the server. But sometimes, you just need to quickly edit a file so I use NotePad++ with the FTP plugin which is very buggy, it disconnects often or gives errors.

For keyword research, competition analysis, promotion,etc.. I use Market Samurai. It’s a free tool that’s really powerful to quickly get the information you need.
I first discovered Market Samurai during the Thirty Day Challenge, it’s a free course to learn how to start an online business, how to promote it, how to optimze it for SEO, etc. It’s really fun and I encourage you to participate this year, it starts in August, with a ‘pre-season’ in July.

Also, there is WebStorm which is specific for front end development, but PhpStorm has the same features plus PHP support. So for WordPress developers it’s recommended to get PhpStorm.

Anyway the price is 39$ for WebStorm and 59$ for PhpStorm, so I’m not sure if they’ll sell many licences for WebStorm.

The best features are:

• Native integration of Zen Coding, which allows to rapidly code HTML
• Version control (git,subversion,…)
• Automatic synchronization of remote files (see this screencast for a detailed explanation)
• code completion for php, css, html, js
• javascript debugging

and more!

I’m still discovering the many features that it offers. I’ve been waiting for such an IDE for a long time. And it’s really a bargain, 59$ until September.

.content, #primary {
       background:transparent;

     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ebe7e7,endColorstr=#80ebe7e7);

	}

.page-title, .singular-page-title {
	       background:transparent;

                  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80146ea4,endColorstr=#80146ea4);
}

This is the result:

You can see that the result is not very pretty! The font doesn’t seem to render very well.

I suspected that the IE filters were the culprit, so I removed the declarations, and here is the result:

Much better!

Conclusion: I’ll use the PNG fallback method.

Have you experienced this issue? Is there a fix?
Leave your comments!

Here is another resource : http://www.designdisclosure.com/2009/07/how-to-magento-ecommerce-tutorials/