Author: Abdullah Yahya

Here are a couple of web-based fiddling tools for HTML, CSS, and Javascript.

http://jsbin.com/

http://jsfiddle.net/

They tools are great for fiddling as are the various browser inspectors.

I just came across this app / service that claims to be able to automatically convert Photoshop designs to cross-platform HTML + CSS within minutes. If this actually works, this would be great.

http://www.markupwand.com/

When correcting colors in Photoshop, here’s a quick and simple way make improvements.

1. Drag the level markers to the opposite ends of the Levels spectrum
2. Apply lighter or darker curves, if necessary.

 

Here are some Chrome browser extensions that are really useful for web developers:

• JSONView
  Validate and view JSON documents
• PHP Array View
  I couldn’t find a PHP array prettifier but if you var_dump a PHP array and inspect it in Chrome, it’s pretty.
• PageRank Status
  Shows Google PageRank and AlexaRank of current web page, quick access to Geo IP Location, Whois, Alexa, backlinks and indexed pages
• Show Title Tag
  Shows title in top of the page, since you cant read the title in the small tabs.
• Rulers, Guides, Eye Dropper and Color Picker
  For UI developers. Pick any color from webpage using eye-dropper tool; display rulers, guides and grid on the page.
• Page Ruler
  Measure any distance on a page

Here are the best SVN and Git clients I’ve found for Windows.

SVN

• SmartSVN
• SyncroSVN

Git

• GitHub for Windows
• SmartGit

When updating a website, you may sometimes notice that your changes don’t go into effect when you refresh your screen (F5). You also will want to test your site to see how they look with Javacript turned off.

To refresh your page, you can hit F5, but you may not see any changes since content may come from your local cache.

To force your page to be reloaded from the server regardless of your local cache, use Shift + F5.

To turn on/off javacript / local cache in Chrome, see the image below.

I recently needed to inspect some Javascript variables / values that were affecting a web page. I was using a 3rd party library (jQuery Tools Scrollable with Navigator plugin). Here’s one way to find out what properties (variables and functions) an object has and how to view them in your browser’s inspector.

Here’s a good website downloader:

• http://www.httrack.com/
• http://amb.vis.ne.jp/mozilla/scrapbook/?lang=en

And here’s a good audio, video, image downloader

• http://www.downthemall.net/

As well all know by now, IE (Internet Explorer) is a problematic browser for all web developers. There will come a time when everything just looks great everywhere else (Chrome, Safari, Firefox) but NOT in IE. If you can’t make your CSS, Javascript to work in all browsers including IE, you can add a separate CSS and Javascript file that works only in IE using the following code:

<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”/asset/stylesheet/ie.css” />
<![endif]–>

<!–[if IE]>
<script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>

Sublime Text 2

• Show/hide console to see all actions taken
• Show/hide status bar to see tab size, language syntax (PHP, HTML, etc), and other info
• Convert indentation from/to tabs / spaces
• Dictionary / spell check
• Layouts (single column, multi-column, rows, grid)

Notepad++

• Show/hide symbols, line endings, etc