Yesterday, I was reading a post on ycombinator about the New free monospace programming font by Mark Simonson: Anonymous Pro. I decided to check out this new font using a cool HTML 5 application called font dragr.font dragr is a HTML 5 and CSS 3 web ap… Continue reading →

I have been developing applications over the past 10 years, and I admit I do not have a long term memory, especially not when it comes to remembering a piece of code or technique, I had used in my previous projects. My memory acts alien especially at t… Continue reading →

A couple of days ago, I had shared a collection of Free SVN Repositories to Host your Projects. Software contains bugs and this is the inevitable truth. This week, I will share some open source bug tracking software that will streamline the process of … Continue reading →

We are planning to start work on an open source project soon. As a result, we were looking out for a free SVN repository [what is SVN?] with the following main features:reliable version control systemmailing lists, forums, issue tracker, pages, downloa… Continue reading →

Every week in my company, we go through the process of opening large log files (over 200 MB) and search and edit text. We searched out a few Text Editors that can make our lives easier and open these large files without hanging the system. Here are some Text Editors that are free with an impressive feature list:

Vim/gVim (Graphical VIM)

Vim is an advanced text editor that seeks to provide the power of the de-facto Unix editor ‘Vi’, with a more complete feature set.

Platform Supported: Windows, MAC OS X, Linux, BSD and Unix.

Cream

Cream is a modern configuration of the powerful and famousVim, You can check it’s lengthy feature list here

Platform Supported: Windows, GNU/Linux, and FreeBSD.

GNU Emacs

GNU Emacs is an extensible, customizable text editor—and more. Amongst other features, it has syntax highlighting, can open large files and has Unicode support.

Platform Supported: Windows, MAC OS X, Linux, BSD and Unix.

JujuEdit

JujuEdit is a file/text editor with syntax highlighting and advanced find/replace algorithms. Amongst other features, this editor can open very large files and has Unicode support.

Platform Supported: Windows

Notepad2

Notepad2 is a fast and light-weight Notepad-like text editor with syntax highlighting. This program can be run out of the box without installation, and does not touch your system’s registry. We have tried opening a 200MB file with this editor and have no issues so far.

Platform Supported: Windows

You may also want to read this – Comparison of Text Editors

Continue reading →

Yahoo’s YSlow is a ‘must have’ Firefox add-on and is an extension (for performance) to the Firebug tool. YSlow analyzes web pages and suggests ways to improve the performance of web pages based on a set of rules for high performance web pages laid out by Yahoo. There are 34 rules laid out by Yahoo and YSlow is capable of testing 22 of them.

The 22 rules testable by YSlow and as listed in the YSlow user guide, are:

1. Minimize HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires or a Cache-Control Header
4. Gzip Components
5. Put StyleSheets at the Top
6. Put Scripts at the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. Minify JavaScript and CSS
11. Avoid Redirects
12. Remove Duplicate Scripts
13. Configure ETags
14. Make AJAX Cacheable
15. Use GET for AJAX Requests
16. Reduce the Number of DOM Elements
17. No 404s
18. Reduce Cookie Size
19. Use Cookie-Free Domains for Components
20. Avoid Filters
21. Do Not Scale Images in HTML
22. Make favicon.ico Small and Cacheable

Assuming you have downloaded YSlow and installed it in Firefox, let us quickly run the YSlow tool on a website and then dissect the results to understand the tool better. Once installed, the YSlow tool can be invoked from Firefox. Just open your web page in Firefox and click the YSlow tool (lower right corner of the Firefox status bar). Here are the results of running YSlow on a sample webpage from my site.

As you can observe, the results consists of 4 Tabs – Grade, Components, Statistics and Tools. The screenshot also shows the rulesets applied as well as the the Grade received by the website. Let us understand these terms one by one.

Rulesets

Let us first understand the rulesets that YSlow uses to grade pages (we will understand grading shortly). There are 3 predefined rulesets that you can choose to apply on a webpage:

YSlow(V2) – This ruleset contains the 22 rules listed in the beginning of this article.

Classic (V1) – This ruleset contains rules from 1 to 13.

Small Site or Blog – This ruleset contains 14 rules that are applicable to
small websites or blogs. These are Rule 1, 4, 5, 6, 7, 9, 10, 11, 12, 16, 17, 20, 21 and 22.

In addition to these rulesets, you can also create your own set of rules. For more information on creating custom set of rules, read Customizing Rulesets.

Grade

‘Grade’ is one of the four tabs as shown below and depicts a report card on our page’s performance.

YSlow examines all the components of a webpage and then grades the web page based on one of three predefined ruleset or even a custom-defined ruleset, we discussed about in the Rulesets section. How the grading works, is when YSlow analyzes a webpage, it deducts points for every breach of a rule and then applies a grade to each rule. Here’s a sample screenshot of the grades received by the webpage for each rule and the suggestion for improvement, shown on the right.

Then a final grade is computed (in our case ‘B’) by summing up the values of the points gained for each rule, weighted by the rule’s importance.

Components

Components is the second of the four tabs as shown below:

The Component tab shows the various components on the page (javascript, css etc) and information related to each component (click the ‘+’ icon or ‘Expand All’ link). This will give you an idea which component takes more time to load and you can consider to gzip it and improve performance.

Statistics

Statistics is the third tab and provides a graphical representation of the number of HTTP requests made to the server and the total weight of the page in kilobytes for both Empty Cache and Primed Cache scenarios.

The Empty Cache scenario is when the browser makes the first request to the page and the Primed Cache scenario is when the browser has a cached version of the page. In a Primed Cache scenario, the components are already in the cache, so this will reduce the number of HTTP requests and thereby the weight of the page.

Tools

Tools is the last tab and contains a list of various tools that YSlow suggests to run on the webpage resources (images, JavaScript, CSS) to improve the performance of the page.

With this, I hope this quick guide explained what YSlow is all about and how you can use it to analyze and improve the performance of your web pages. I am going to apply this tool on my web pages and follow the recommendations made by this tool to improve performance. I hope you do the same for your web pages too! You can read more about YSlow in the YSlow User Guide.

Link to Download YSlow

Continue reading →

After you have created a regular expression, you usually write a script or use a tool to test if the Regex works as expected. Alternatively, if you are using Firefox or Google Chrome, then here are some plug-ins that make it very simple to test regular expression directly from your browser. I had recently written a post on Validate US Zip Code using JavaScript where I had used the Regex ^[0-9]{5}(?:-[0-9]{4})?$ We will use the same regex for this post and test it using the add-ons for Firefox and Chrome.

Regular Expressions Tester 3.0

This is a Firefox add-on for regular expressions with color highlighting (including submatches) and helpers for creating expressions. Observe in the screenshot shown below how the color changes to yellow as soon as the Regex matches a valid US zip code.

Regular Expression Checker

This is a simple add-on for Google Chrome and is inspired by Regular Expressions Tester 3.0. You can save a regular expression and the tool also shows the number of matches, sub patterns etc. The only thing that I was not comfortable with was that this tool wanted access to my browser history to work properly. Now I am not sure why was that required. Nevertheless, here’s a screenshot of the results after testing my Regex.

I could not find any add-ons for Internet Explorer that can test Regular Expressions. If you know of any such add-on, let me know and I will add it to this list.

Continue reading →

‘Copy Text To Clipboard’ is a frequently requested feature. Different browsers have different security implications when it comes to manipulating the clipboard. For example Firefox by default, does not allow you to store data in the clipboard, although you can override this setting.

Users have used JavaScript and Flash as a workaround. Until Flash 9, you could set data on the system clipboard at any time. However with the changes in Flash 10, you can manipulate the clipboard only through ActionScript that originates from user interaction, i.e. an explicit mouse click or through the keyboard.

I recently came across a free and open source library that is fully compatible with Flash Player 10 and provides an easy way to copy text to the clipboard using an ‘invisible’ Adobe Flash movie and a JavaScript interface. The library is called ‘zeroclipboard’. How this library works is that it overlays a Flash object over a button or any other DOM element that initiates the copy. So when the user clicks the element, the Flash object registers an explicit action and copies text into the clipboard, which sounds perfectly ‘legal’ as I may say so.

This library requires that the browser has JavaScript enabled and FlashPlayer installed. You can learn how to use the library through the Instructions Wiki. Also see a working Demo.

As always, I would love to hear some alternate solutions. Feel free to drop in your comments!

Continue reading →