Abdullah Yahya

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”>

Here is  a collection of useful Javascript tools:

1. Javascript Minifier – Compress your Javascript to make it a smaller file size for faster downloads
   YUI Compressor
   YUI Compressor GUI 1.0 for Windows
   
   There’s no need to check any of the boxes.
2.  JS Beautifier – Pretty-print your Javascript
   http://jsbeautifier.org/
3. JS Lint – Check your Javascript for errors
   http://jslint.com/
4.  JSON Lint – Check your JSON code for errors
   http://jsonlint.com/