Photo Credit: practicalowl

I discovered a cool free tool at the recent RSA conference, called Paros, a man-in-the-middle (MITM) proxy. While my fist impression was that Paros is no more than a hacking tool, upon further investigation I discovered it can be really useful to developers and testers.

If you don’t know what a man in the middle attack is, it is an Internet attack, where the person doing the attacking intercepts, and attempts to read or alter information moving between two computers.

As a dev tool, Paros is useful because:

• You can easily monitor the traffic between the browser and the site you are developing.
• You can trap the requests, and if you made an error you can change it, so you can test that whether the remainder of the application works correctly. This saves you having to immediately change the application to correct the erroneous request.
• It raises the visibility of the information being exchanged. If there is any user related information, other than the initial login information, get rid of it quick, as this will allow hackers to easily request other user’s information.

Fore warned is fore armed.

One thing I don’t like is that when you download Paros, they hide the download link in the top right hand corner of the download page, and present sponsor solicitations, which on a quick glance, you think they are required for downloading. They are not, so skip them.

I have since discovered Fiddler, which I had yet to try. This is a free tool, supposedly from Microsoft, so if you prefer a non-Java based application, as Paros is, give this a try.

Photo Credit: SMITHMag

Update #1 – March 14, 2008

Update #2 – September 22, 2008

Translated into Italian at Geekissimo

There is some amazing stuff out there on the Web–resources, tools, tricks, and tips. Problem is, as a Web developer, you spend so much of your time just keeping up with new technologies – learning, playing – and this doesn’t leave much time to go hunting for the latest and greatest tool, or for a better way of doing things.

So we’ve put together a list of over 100 resources to help make your life as a developer easier; where to find snippets of code, sites that automate processes, cheat sheets, lessons, useful tools and a couple of silly videos to give your brain a break if you make it through to the end. Please enjoy!

Code

Photo Credit: Josh Lewis

1. Little Boxes
CSS Templates for various page layouts

2. Snipplr
Collection of code snippets – JavaScript, HTML, PHP, CSS, Ruby, Objective C

3. AJAX, DHTML and JavaScript Libraries
An extensive list with over 60 Ajax, Javascript and DHTML Libraries – with detailed descriptions.

4. Javascript Framework
Easy Ajax and DOM manipulation for dynamic Web applications

5. AJAX Javascript Solutions for Professional Coding
Over 90 useful AJAX-based techniques you should always have ready to hand

6. DHTML and AJAX samples
Nice looking simple downloadable DHTML and AJAX code

7. AJAX Patterns
A Wiki of reusable AJAX code, and huge AJAX resource

8. Mozilla Developer Center – AJAX
Mozilla’s offering on AJAX

9. CSS Typeset
Interactive CSS generator

10. Open Source Directory
An archive of the Web’s best Open Source software, applications and references.

11. .htaccess Creator
Online tool to create .htaccess files

12. PHP Form
Create HTML Forms in seconds and get the code

13. Best Solutions for Images
30 scripts of impressive slideshows, lightboxes and galleries you can use for effective presentations of your images.

14. Lightbox
Lightbox is a simple unobtrusive script used to overlay images on a page

15. Design patterns and tips
101 Design Patterns and Tips for Developers

16. Spanky Corners
Creates CSS and GIF images for rounded corners

17. Nifty Corners Cube
Rounded corners with no images

18. How to redirect a Web page the right way
Don’t lose PageRank! Steven Hargrove gives you the code to redirect using htaccess, Mod_Rewrite, IIS, ColdFusion, ASP, Java, Perl, Ruby and PHP.

19. jQuery
jQuery is a fast, concise, JavaScript Library that simplifies how you write your web pages.

Cool Online Tools

Photo Credit: Stavros Markopoulos

20. Pipe Bytes
Send files of any size through any Web browser. No software to install, private and the recipient can start downloading while you’re still uploading

21. PHP FTP Synchronizer
Free program to update your website from local files

22. Dummy Text Generator
Generate text by number of paragraphs, words, bytes or lists

23. UTF-8 decoder
Unicode Decoder

24. CSS Tidy
Open source CSS parser and optimizer

25. HTML Tidy
Open source utility for tidying up HTML

26. FireFTP
Free, secure, cross-platform FTP client for Mozilla Firefox

27. FileZilla
Free FTP client and FTP server

28. Dust-Me Selectors
Firefox extension that finds unused CSS selectors

29. ColorZilla
Get a color reading from any point within Firefox

30. FireFox IE Tab
Run IE inside Firefox

31. Font Sizer
Let visitors change the font size on your site. XHTML, CSS, and PHP source available

32. Recaptcha
Captcha helps prevent automated abuse of your site, ensuring only humans perform certain actions; free

33. Super Screenshot
Take a full sized screenshot of any Web page

34. Web Site Thumbnails
Get thumbnails of any Web site

35. Back Orifice
A remote admin system that enables a user to control a computer over a network

36. CoPilot
Remote control another computer – free on weekends, otherwise $5 for 24 hours

Documentation and Reference

Photo Credit: Perreira

37. Ajax: A New Approach to Web Applications
The ultimate AJAX introduction

38. Cheat Sheet Round Up
Your one stop shop for all cheat sheets including: Actionscript, Ajax, Apache, ASCII, ASP, C#, CSS, CVS, C++, Django, Firefox, Google, HTML/XHTML, Java, JavaScript, LaTeX, MySQL, Perl, Photoshop, GIMP, PHP, Python, Regular Expressions, Ruby, Unix, Linux, Weblogs, Windows, XML.

39. Quick reference
Searches for references on C, C++, CSS, HTML, HTML DOM, Java, JavaScript, MySQL, Perl, PHP, Python, and Ruby

40. Got API
Easily search sites for API documentation

41. CSS Basics
Cascading Style Sheets made easy

42. The Ultimate CSS Resource

43. RSS Specifications
The authority on RSS – from Harvard

44. RSS Best Design Practices and Icons
All things RSS including free icons

45. Go To and Learn
Free video tutorials on Flash

46. Optimize Your PHP code
40 Tips to optimize your PHP code

47. Optimizing MYSQL queries
10 Tips to optimize MYSQL queries

48. How to Create a Dynamic BlogRoll
Using Feedjumbler – it takes 5 minutes

Testing

Photo Credit: Sebastian Bergmann

49. CSS Validation
At W3C

50. HTML/XHTML Validation
At W3C

51. HTML Validator
Firefox extension to validate your HTML (as used within http://validator.w3.org/)

52. Link Checker
Checks for broken links in your HTML pages

53. Firebug
Edit, debug, and monitor CSS, HTML, and JavaScript live in any Web page

54. Gray Bit
Online testing tool; convert a full color page into grayscale to visually test contrast

55. Cross Browser Compatibility Testing
Check your site with multiple browsers on a single machine

56. Screen Sizer
Check out your site in different screen sizes

57. Feed Validator
If you’ve ever noticed invalid characters or XML markup in content items, check your feed for validity problems.

Windows

Photo Credit: Marius

58. Windows Unlocker
Tells you the application that is stopping you from deleting a file

59. Windows Dependency Walker
See which DLLs are required for Windows applications

60. Pending Moves
Show files will be updated when you next restart Windows

61. Process Explorer
View active processes – Task Manager on steroids

62. Process Monitor
Monitors file system, registry and process/thread activity

63. Regulazy
Visual regular expression builder

64. WinDirStat
Display size of files and folders graphically

65. wget for Windows
Gets a HTML resource (HTML, image, document, javascript, css etc)

66. WinSnap
Takes a snap shot of your screen ($19.90)

Converters

Photo Credit: AndiH

67. Convert HTML to RSS
Generate an RSS feed for almost any Web page.

68. Convert RSS to HTML
Creates a widget displaying a specific RSS feed in HTML.

69. Binary to Base64
Create data streams for embedding images (or any type of file) in (X)HTML, CSS and XML

70. HTML To JS/PHP/Perl Converter
This tool will convert normal HTML code to a script based language such as JavaScript, PHP or Perl

71. Text to Voice
Create an MP3 of a voice reading your text

72. Free PDF online conversion
Converts various files (DOC, PUB, RTF, XLS, PPT, HTML, JPG, PNG, BMP, TIFF, WMF, EMF, GIF etc.), to PDF online, then e-mails you the PDF

73. Web 2 PDF
Allow your visitors to create PDFs of any Web page

74. Text to Hex converter
Write your name in hex

Graphics

75. YotoPhoto
Search engine for royalty free images (over 250,000 indexed)

76. Background Image maker – http://lab.rails2u.com/bgmaker/
Create background images online with this quick and easy tool

77. Iconaholic
Lots of great free icons

78. Animated GIFs
Generate and preview animated GIFs, then download

79. 216 Color Webmasters Palette
Web Safe colors for webmasters

80. ASCII Art
The original Web Art

81. ASCII Generator

82. Image to ASCII
Convert images and text to ASCII

83. GIMP
GNU Image Manipulation Program

84. Inkscape
Open Source vector graphics editor, similar to Illustrator and CorelDraw

85. Create Web 2.0 Badges (image –png)
Ajax lessons show you how to create a shiny Web 2.0 badge in eight easy steps

86. Color Scheme Generator

87. Smashup Graphics
Smashups to create logos, backgrounds, buttons and menus.

88. IconFinder
Great looking resource with easy to identify licensing information.

89. Tabs Generator
Creates tab buttons on demand.

Site Analytics

Photo Credit: Wessex Archaeology

90. Who is the Owner?
Find out who owns a Web site quickly

91. Google Banned Tool
Quick way to find out whether your URL is in Google’s banned database

92. Crazy Egg
Variety of products to see what people are doing on your site using a heatmap or just plain hard data. Pricing plans start with free accounts that let you track up to 5000 visits per month and four pages, up to Pro an offering for $99 per month that lets you track 250,000 visits per month.

93. SiteScan
A free way to ensure that your website is configured properly for Google Analytics.

94. Reinvigorate’s Snoop
Real Time Web Analytics – free for PC and Mac. Greater flexibility than Google Analytics

95. PopURI
At-a-glance link popularity of any site based on its ranking (Google PageRank, Alexa Rank, Technorati etc.), social bookmarks (del.icio.us, etc), subscribers (Bloglines, etc) and more

96. Quantcast
Demographics for your site

97. Social Meter
Scans popular social websites to analyze your social popularity.

98. StatCounter
Highly configurable hit counter and real-time detailed web stats. Useful for European Web sites.

99. Clicky Web Analytics
Web analytics – nicely organised and oh so pretty.

WordPress

100. How to create a WordPress theme
A 16 part series on how to build a WordPress theme from whoa to go

101. Highlight Author Comments
Matt Cutts shows you how to change the color of your own comments so they stand out. For WordPress

102. 100 High Quality and Free WordPress Themes
Smashing Magazine has downloaded, installed, and tested hundreds of themes; these are their top 100 picks. Whether you are after design inspiration or coding solutions, this is the place to start

Online Storage

Photo Credit: Kevin

103. Box
Up to 1GB free storage but monthly bandwidth restricted to 10GB, file size restricted to 10MB

104. Xdrive
Up to 5GB free storage. AOL sign-up required.

105. Humyo
Up to 30 GB [25 GB media (phots/music/videos) and 5 GB non-media files]. BUT files are deleted if no login on the account within 90 days.

106. Orbitfiles.com
Up to 6GB free storage, but monthly bandwidth restricted to 20 GB, file size restricted to 100 MB.

107. GigaSize
Unlimited storage, but file size is limited to 600 MB, and files are deleted after 45 days. Unspecified download limits apply. Awful ads!

108. DropBoks
Up to 1GB free storage, but file size is limited to 50MB.

109. Get Gspace
Use Google’s GMail 2 GB storage as your own private online storage with this Firefox extension.

110. WordPress.com
Want another 3GB of free online storage? Why not make a private blog and use the space for your files!

Miscellaneous

Photo Credit: Robin Hutton

111. Map-o-net
Shows you where you lie in the structure of IP addresses

112. Domain Hacks
Helps you find domains which are the combination of unusual TLD, directories and subdomains. For instance, http://l.id can be registered (from Indonesia)

113. Scratch – programming for kids
Want your little person taking over the family web development business? Let them play with Scratch. Developed by MIT

114. Internet World Stats
Comprehensive statistics about the Internet and Web

115. Feed Journal
The next generation newspaper, FeedJournal turns your RSS feeds into a newspaper formatted PDF so you can print it out and read it anywhere – free

Useful Sites

116. Windows Guides

Fun Stuff

You’ve made it this far – so a little silliness for your viewing pleasure – enjoy!

117. Music using ONLY sounds from Windows XP and 98! (approx. 2 mins)

118. Mac Parody (approx. 3 mins)

119. Ze Frank’s Punctuation Substitution (approx. 2 mins)

120. Wes Borg-Internet Help Desk Live (approx. 6 mins)

121. BlueScreen of Death Screen Saver v3.2

I’d love to see this list grow over time; get rid of defunct listings and add new and useful ones as I come across them, so if you know of any that should have been included (or if you think some are really awful) please let me know, and I’ll keep editing. With your help, I think this could be a great resource for tons of folk!

Why is this useful?  If, for example, you have a navigation panel on the left hand side of your page, you can hide this panel when you print, so the printout contains the useful information only and takes advantage of the full page width, which generally means it can be printed on fewer pages.

Normally stylesheets are used within a HTML page as follows:

  <link type='text/css' rel='Stylesheet' href='sytles.css'>

To use different stylesheets for the screen and printer, you use the media attribute as follows:

  <link type='text/css' rel='Stylesheet' media='screen' href='screen.css'>
  <link type='text/css' rel='Stylesheet' media='print' href='printer.css'>

In this case, you would need to duplicate all the common styles in both files, so if there are a lot of common styles, you may want to have smaller stylesheets which just contain those styles which you want to be different on the screen to how they appear on the printer.  So, a better strategy would be:

  <link type='text/css' rel='Stylesheet' href='common.css'>
  <link type='text/css' rel='Stylesheet' media='screen' href='screen.css'>
  <link type='text/css' rel='Stylesheet' media='print' href='printer.css'>

The  different media types include handheld, projection, braille, and more, so you if your web pages appear in different devices, you can customize the appearance to better suite the device.

If a delete fails, you get the generic access denied error message from Windows; however, if you have Unlocker installed, then it will popup and display the processes which have a lock on the file or folder.

For example, attempting to delete C:\Windows\System32\user32.dll (yes this would be a dumb thing to do) will display the following list of processes (which will be almost everything running on Windows):

Unlocker allows you to force the file to be unlocked, or even kill the processes; however, I prefer to find out which processes are preventing the deletion and closing them myself.

One common issue, is that you have an editor active, but no files currently being edited, and you can’t delete the folder which contained files you just recently edited.  The editor’s current directory is the one you want to delete, so Unlocker will show the editor process in its list.  So you know to exit the editor so you can delete the folder.  An alternative is to open a file from a different folder within the editor, so the current directory changes to something other than the folder you want to delete (or ones of its children).

You can run Unlocker on a file before you attempt to delete it.

It would be nice to have a Close button within Unlocker, which would politely ask the application to close, much the same way you would select Close from the system menu when you right click on the system tray’s entry for the application.

Why would anyone need readme.htm, Readme.htm, README.htm, ReadMe.htm, ReAdMe.htm, readme.HTM etc to be unique files within the same folder?

And if a Web site is hosted on a UNIX box, you get a whole lot of contradictions.

For example, http://www.werelocate.com/index.html is valid, but http://www.werelocate.com/Index.html is not (capital I in Index), since the file “Index.html” does not exist, only index.html does.  Now http://www.werelocate.Com/index.html is valid, since domain names are not case sensitive thankfully (the C in com is a capital).  Good luck explaining the difference to grandpa!

Whether it was by design, intentionally or otherwise, thankfully good old DOS just didn’t care.  No matter which way you said readme.htm, it would match whatever casing was present.

I just got burnt by a Unix box hosting a web site which dynamically created script to load a javascript file.  The same files work on Windows Server, but failed on Unix.  All due to casing.  Arrrrrrr.

Casing should only be important in sentences!