Tag Archives: Plugin

Power Tip #5: Firefox’s (3.6) new toggle full screen shortcut conflicts with Web Developer’s Display Element Information shortcut

power-tip-5-firefox-fullscreen-conflicts-web-developer-shortcut

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

firefox-menu

 

 

Web Developer Toolbar Menu

webdeveloper-toolbar

 

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.

Activating Missing Ant Plugin in PDT Eclipse

ant-with-eclipse-header

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:

1
2
3
4
5
6
7
8
9
10
11
12
 <target name="myTarget" depends="myTarget.check" if="myTarget.run">
     <echo>Files foo.txt and bar.txt are present.</echo>
 </target>
 
 <target name="myTarget.check">
     <condition property="myTarget.run">
         <and>
             <available file="foo.txt"/>
             <available file="bar.txt"/>
         </and>
     </condition>
 </target>

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.


Top 10 Firefox plugins for web developers & designers

firefox-plugins-header

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

web-developerA 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

seachstatusThis 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

html-validatorI 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

javascript-debuggerWorking 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

live-http-headersAs 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

leet-keyA 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

js-viewWhen 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

duplicate-tabSometimes 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

add-n-edit-cookiesThis tool allows you to manipulate and add cookies and can help you to test the security of your website.


10. Clear Cache

clear-cacheVery 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

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