After updating my Firefox to the new 3.6 version I've noticed that my favorite shortcut Cmd+Shift+F (Display Element Information – Web Developer Toolbar) didn't work anymore. Instead of getting the expected results Firefox just switched to full screen mode. Well, my first thought was that there might be an version conflict between the Web Developer Toolbar and the new Firefox and I would simply update the plugin to fix the issue. But there is no new version of the toolbar yet.

What happened?

Mozilla has added the new shortcut for full screen mode to Firefox which apparently overrules the shortcut of the plugin. As a web developer I use Cmd+Shift+F on a daily basis for my work. And honestly, who needs to switch Firefox to full screen mode, at least I never do.

Firefox Menu

Web Developer Toolbar Menu

The Solution

There is a very simple solution to this issue:

1. Download the Keyconfig plugin for Firefox at http://mozilla.dorando.at/keyconfig.xpi
2. Restart Firefox
3. In Firefox go to Tools -> Keyconfig
4. Find the entry "Full Screen" (the one with the unwanted shortcut) and press Disable

That's it. Your Web Developer Toolbar should work again.

Did you ever wonder why there is no Ant support in your Eclipse installation?

If you are working with Eclipse as your standard IDE for PHP Projects you will probably use the PDT Eclipse environment which doesn’t include much of the Java project tools. Ant is one of the very handy ones.

What is Ant?

With Ant you can write simple and as well sophisticated batch jobs for compiling and deploying your code or any other task you could think of. For an example, I’m using Ant to compress and obfuscate my Javascript and CSS files.

How does it work?

Tasks you would like to be processed with Ant you put in a build.xml file.
Here is a simple example:

 
     Files foo.txt and bar.txt are present.
 

 
     
         
             
             
         
     
 

To learn how to write your own build files checkout the Ant Manual.

Activating Ant in Eclipse

1. In Eclipse go to Help -> Software Updates -> Available Software
2. Select Java Development Tools and install it
3. Restart Eclipse

Now you should be able to see Ant in your Eclipse Preferences and when you right-click on a build.xml file in your project you can run it via Run As -> Ant Build.

The Mozilla Team has done a great job with the new Firefox 3.5 browser. FF 3.5 is twice as fast as FF 3 in terms of Javascript speed and even 10 times faster than FF 2.

Smaller Memory Footprint

One of the things I didn’t like about Firefox was the fact that having several tabs open would lead to an unbelievably high consumption of memory. These days are over. The XPCOM cycle collector continuously cleans up unused memory. Plus, hundreds of memory leaks have been remedied.

Awesome Bar

The location bar is now called the awesome bar for good reasons. Now you have Safari functionality inside Firefox. You don’t need to remember exactly the website URL anymore – just start typing some keyword and it will present you results from your browsing history. Great!

Offline Browsing

Websites that are Google Gear enabled (like GMail) you can surf offline without having to install any additional Add-ons.

Newest Web Technologies

These web technologies are now natively supported:

• CSS 2.1
• CSS 3
• HTML5
• SVG Filters
• Ogg Vorbis
• Ogg Theora
• Native JSON
• MathML
• Animated Portable Network Graphics (APNG)
• Cross-Site XMLHttpRequest
• Microformats
• Web Worker Threads

Private Browsing

You can easily switch between normal and private browsing and you won’t leave a single browsing fingerprint behind for others to discover. You can even remove every trace of a specific site from your browser without loosing the history of the rest of the sites.

So don’t wait any longer and get your Firefox 3.5 upgrade here.

Photoshop comes with a very powerful filter for extracting complicated areas like hair, clouds, trees and others. Whenever I need to extract parts of an photo where there are no sharp edges the Extract Filter is the best tool for the job.

Photoshop CS4 does not include the Extract Filter in the basic installation but you can copy it from the Goodies folder on the install DVD. You can also download it directly from Adobe’s website.

Download

Adobe Photoshop CS4 Optional plug-ins pack includes:
• Bigger Tiles
• Picture Package (ContactSheetII)
• ExtractPlus
• PatternMaker
• PhotomergeUI
• TWAIN
• Web Photo Gallery (WebContactSheetII) plus presets
• Textures for Texturizer
• script for Layer Comps to Web Photo Gallery

Mac Download:
http://www.adobe.com/support/downloads/detail.jsp?ftpID=4047

Windows Download:
http://www.adobe.com/support/downloads/detail.jsp?ftpID=4048

WordPress has released the new 2.8 “Baker” version. I already did the automated update and I have to say that I really like it.

These are the new features of WP 2.8 Baker:

• Browsing and installing new themes within the WP panel
• CodePress Editor: syntax highlighter and contextual documentation for functions
• the widget interface has been redesigned
• new screen options allow rearranging of every page
• and many more (see full list of changes here: http://codex.wordpress.org/Version_2.8)

Screenshot of the new CodePress Editor (btw, finally):

There is even a video you can watch to see the new features in action:

You should update too, but don’t forget to make a full backup before you start.

I think the majority of mac users would say that spotlight is a really nice tool. But most of them don’t even know what cool tricks Spotlight can even do. In my opinion, Spotlight is one of the best productivity tools that comes for free (well, you have to buy Mac OS anyway).

Windows users can only dream of it. You would need to buy a lot of software to cover the same functionality. And performance I don’t even want to mention here.

So, what can we actually do with Spotlight?

1. Normal Search

Searching for some documents is pretty simple. Just hit cmd+Spacebar (Spotlight will open in the top right corner of you screen) and start typing the phrase. Let’s say we are looking for: script. And voila, we get a list of everything containing script.

2. Boolean Search

Now that we’ve got a nice list, we want to refine it a little bit. We don’t want to get results that contain editor. Spotlight comes with boolean search functionality. It works with the following operators: AND, OR, NOT. Now the important part here is to type these operators all in capital letters, otherwise they will be understood as search terms.

3. Type Search

When you are looking for a specific type of document, let’s say an image, you can use the kind command followed by a colon and the file type. In this case the command would be script kind:image.

Make sure that you don’t have any space before and after the colon. There is a list of types you can use with this command:

4. Calculations

There is a nice calculator in the Dashboard but you could use the space for another nice widget. Spotlight can to all basic calculations as well. It also can handle brackets withing the formulas. Furthermore it is capable to handle a few more advanced calculations too, like square root, power, PI, …

As you can see spotlight is more advanced than the regular Dashboard calculator.

5. Application Launcher

That’s my absolute favorite one. The Dock has a limited space to place icons. Of course you can extend it with a stack and put there even more icons but it’s so much simpler with Spotlight. Just start typing fire to show Firefox in the list.  Just think about how many clicks it can take you sometimes to launch a specific application.

6. Definition

Another nice feature of spotlight is that it can show you the definition of a word you type. Just hover the definition row in the result set and it will show you the definition of that word in a tooltip. Really nice.

7. Show in Finder

If you don’t want to open a document within Spotlight but show it in a Finder window you just press cmd and hold it while clicking the found document.

Spotlight is a powerful tool to speed up your work. It is included in every open/save file dialog box and helps you finding lost files in TimeMachine.

I found today a superb resource for Cheat Sheets (also known as reference cards) on DZone.

Whenever I find a cheat sheet in a book store I need to buy it.  Looking up information on the Internet is way faster but sometimes you don’t have a connection and these short e-books can be of good help.

Here is a short list of Cheat Sheets I found on DZone:

• Essential MySQL
• Core ASP.Net
• Core CSS: Part III
• Essential Ruby
• Core Java
• PHP
• Struts
• C#
• JQuery Selectors
• Design Patterns
• Spring Configuration
• Getting Started with Eclipse

You will find on http://refcardz.dzone.com more the 50 of these sheets.

Firefox is my favorite browser for creating and testing website design and functionality. On the one hand you have big share of visitors using Firefox (Wiki: Usage share of web browser)  and a rapidly growing user base. The reasons for the success of Firefox are speed, stability and a strong open source community behind it.

And then you have IMHO the most important part: an endless range of great plugins

Although there exist hundreds of absolutely great plugins I’d like to share with you today only these plugins that helped me best while working on web projects in the past:

1. Web Developer

A must-have plugin for any web developer. It will add a new toolbar to Firefox with a lot of great tools for displaying page information, request headers, CSS element information, disabling/enabling Javascript, Cookies, Images and CSS, validation and displaying Javascript generated content. I just named some of the features but there is a lot more inside this tool. So make sure to have it.

2. SearchStatus

This one is great helper for SEO work. It includes a better PageRank information (forget the original – problems with cached values), Alexa Rank and the essential NoFollow link highlighter.

3. HTML Validator

I would say 20% of SEO work is On-Site optimization. This tool will help you in locating every validation problem of your HTML code. And I guess most of you will agree: Google loves valid content.

4. Javascript Debugger

Working with Javascript can get very tricky, especially when you are loading dynamic content via Ajax requests. Just looking into the code won’t help you a lot. The Javascript Debugger allows you to set breakpoints in your script and inspect variables and objects.

5. Live Http Headers

As the name already says this plugin will show you all Http headers while browsing a website. Sometimes a valuable source to understand the redirection mechanism of a website and how data is sent across.

6. Leet Key

A very useful tool for quick transforming encoded data. Sometimes when I need to check if a Base64 encoded parameter was transferred correctly I can decode it with this plugin to plain text. Apart of the transforming for Base64, Bin, Hex, Morse and others, there is even a functionality for encrypted contents in AES and DES.

7. JS View

When you want to have a quick look on a JS or CSS file from some other website you need to view the page source and copy the file path. But it can be so much simpler. JS View provides you any given JS/CSS file of a website with the easiness of a mouse click.

8. Duplicate Tab

Sometimes you need the currently open page in a second tab. But if it’s javascript generated content you cannot just copy and paste the URL in another tab. But Duplicate Tab can.

9. Add N Edit Cookies

This tool allows you to manipulate and add cookies and can help you to test the security of your website.

10. Clear Cache

Very simple and useful. While you are changing elements on your website you want to make sure to see the changes and not a cached version. Things like that can end up in frustration.

As mentioned before, these plugins helped me a lot. I know there are a lot more useful plugins out there, so feel free to share your list with us.

Update 2009-06-10:

Firebug

Another essential tool for web developers that allows you live editing of CSS, HTML and JS on any website.

Being used to the 3-finger-swipe functionality to navigate within Safari and other Apple applications I wanted Firefox to behave the same way. Safari is really a great browser but not used by many users. To test my websites in terms of design and functionality I use Firefox and IE as well.

Unfortunately the Trackpad gestures are not working with these browsers. After some research in Google I finally came across a great piece of software:

MultiClutch

MultiClutch brings you the MultiTouch gestures to any application and lets you control the action behind every gesture. It embeds within the System Preferences Panel and is really simple to use.

Here is an example configuration for Firefox to use Swipe for back and forward history navigation: