Abdullah Yahya

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

The || operator is used for setting default values.

var name = persons_name || "John Doe";

This code is the same as

if (persons_name) {
	var name = persons_name;
} else {
	var name = "John Doe";
}

var name = person && person.getName();

This code is the same as

if (person) {
       var name = person.getName();
}

I’ve been using Sublime Text 2 for a few months now and it’s by far the best code editor I’ve ever used. BUT, surprisingly it doesn’t even come with a code auto-formatter. There are some plugins but some don’t work and others required additional dependencies. So, here’s a web-based formatter called Dirty Markup that can clean up your HTML, CSS, Javascript very quickly and easily.

http://dirtymarkup.com/

To increase website performance, one best practice is to minify and compress your assets and put them on a CDN.

Minify
To minify assets like CSS and Javascript files, there are many tools available.  YUI Compressor seems to be one of the best for compressing Javascript files.

Compress
To compress assets like CSS and Javascript files, there are manytools available. Gzip seems to be one of the best ones. On Windows, you can use 7-Zip to do the compression as shown below.

CDN
One cheap CDN you can use is Amazon’s CloudFront. It has a web interface as well as an API.  You first upload files to Amazon S3 and then reference your files using the CloudFront URL. Just remember to set your files metadata correctly as shown below for javascript.

For CSS files, you would set the Content-Type value to “text/css” without quotes.

For CSS files, you would set the meta data to

content-encoding: gzip
content-type: application/javascript
cache-control: max-age=31449600

Including files
When referencing files in your web pages, using protocol-less URLs, e.g.

<link charset=”utf-8″ href=”//d1dejaj6dcqv24.cloudfront.net/vendors/jquery-ui.selectmenu/jquery-ui.selectmenu-1.2.0.min.gz.css” rel=”stylesheet” type=”text/css”>