Firebug too does not clearly show which static resources are fetched from the cache.
Using Chrome Developer Tool (Ctrl + Shift + I)
As you can see, Chrome clearly shows which static resources are fetched from the cache.
Browser Name | Layout Engine | Developer Tools |
Chrome | WebKit | Google Chrome Inspector |
FireFox | Gecko | Firebug |
Internet Explorer and WP 7 | Trident | IE Developer Tools |
Konqueror | KHTML | KIO |
Opera (desktop and mobile) | Presto | Opera DragonFly |
Safari (desktop and mobile) | WebKit | Web Inspector |
A webmasters biggest nightmare is receiving mails from visitors informing that the website is down. A website can be down for many reasons including hardware failure, software issues, security reasons or a power outage.
Most Webhosting companies (even those who claim 99.99% uptime) do not notify you about an unscheduled downtime and if you happen to inform them about the website going down every now and then, here’s a standard answer - ‘It seems there are some routers across the world having an issue and we cannot help as this is third party’. Moreover they fail to acknowledge the mails from your visitors as they are not ‘real-proofs’
So in this scenario, how do you monitor your site’s uptime and get notified, when there’s an issue? Here are 5 Free tools that I suggest to monitor your website uptime for Free. Feel free to use the comments section and suggest any other services that you have used to monitor the uptime of for your websites:
This is one of my favorite uptime monitoring services! It checks your website headers and monitors status codes for errors or timeouts. While most uptime monitoring tools monitor your website after a one hour interval, Uptime Robot monitors your websites every 5 minutes, for FREE.
Once you get started, .mon.itor.us monitors your websites, network devices and more and reports your site outage and response time. The Free Service:
Monstastic, as they put it, is the free website monitoring service that doesn't suck! The Free Service:
100pulse website monitoring checks on your site regularly and monitor websites for downtime and response time. The free uptime monitoring service monitors http services. The Free Service:
InternetSeer is probably the world's largest website monitoring service. Their monitoring systems remotely check your website from several geographic monitoring stations at selected intervals. If the monitoring system is unable to reach the site, an email, cell phone or pager alert is sent to notify you of the problem. The Free Service:
Chrome Extension allows 3rd-party developers to add new functionality to the Google Chrome browser. Did you know, all that it takes to develop a Google Chrome Extension is HTML, CSS, JavaScript and an icon. Sounds doable right? Let’s see how easy it is to create a ‘World Clock/Time’ Chrome Extension.
Step 1: Create a folder on your computer and call it JSClock. Create a manifest file (text file) inside the folder and call it manifest.json. Add the following contents to the file
{
"name": "World Clock",
"version": "1.0",
"description": "World Clock showing Time of 12 countries",
"browser_action": {
"default_icon": "clock.ico",
"popup": "clock.html"
}
}
Note: If you are using any information from an external website, such as Google or Flickr, you also need to provide permission to the environments in which you’ll work. That’s done by adding the permission info to the manifest as follows:
"permissions": ["http://*.google.com/", "http://api.flickr.com/"]
Anyways for this example, we do not need to add the permission info. So leave the manifest as it is. As you will observe, the manifest file provides browser actions (for UI) to load a HTML page and an icon. So let’s create them.
Step 2: Add an icon to the folder. I downloaded a clock icon file from here and rename it as clock.ico
Step 3: Now create a clock.html page and add your JavaScript, CSS and HTML tags in it. I downloaded a free World Clock script over here and added it to clock.html.
Your extension is ready. I told you it’s easy! You can download the entire folder here (uncompress it before using).
Installing the Extension
Step 4: All you have to do now is load the extension in Chrome. Open Chrome, click on the Tools icon ( )in the top-right corner of your browser > Select Tools > Extensions. Click the + Developer Mode to expand it if it is not already expanded.
Click on ‘Load unpacked extension..’ button and browse to the JSClock folder and click ok. If everything is in place, you will be able to view information about the extension in the extensions page as shown below:
Your extension has been installed! To view it, check the World Clock icon next to the address bar in the Chrome toolbar.
Clicking the dropdown brings up the rest of the countries.
If you plan to distribute your extension, the contents of the folder are packaged into a special ZIP file that has a .crx
suffix. Read more on Hosting an extension
IMHO, Developing an extension for Google Chrome is the simplest of all the browsers! Note that I have tested this extension only on Windows, although it should also work on a Mac.
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 application that demonstrates the awwsomness and hawtness of HTML 5. Once you have downloaded a truetype (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) font to your machine, you just have to drag and drop the font from your desktop to a specified area in this web application. How very cool!
Note: Currently this application works only on Firefox 3.6.
So after downloading Anonymous Pro font, I dragged all the four true type font files from my desktop to the specified area as shown below:
Once all the fonts are dropped in this area, they get added to the list as shown below. Just select a font and see the preview in the section to the right.
Preview of Anonymous Pro Bold Italics
Preview of Anonymous Pro
Applications like font dragr, showcase the power that upcoming web technologies like HTML 5 has in store for us!
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 times when I need to remember a code snippet for the 11th-hour kinda fixes, which I wish I had documented, instead of choosing to be lazy.
It's true hard work never killed anybody, but I figure, why take the chance? ~Ronald Reagan
Many would agree that a good old notebook best serves the purpose, as it can be carried anywhere and requires only a pen/pencil to jot down your notes. However with time, we realize that paper notes becomes almost impossible to maintain (search, store, carry). I have seen some extremely-fond-of-notebook developers use a Livescribe Echo Smartpen which is a smart option, but then not everyone has that pen right?
Here are some tips to keep your developer notes in a more organized manner and make your life easier.
Tip 1:
A blog can be used as a developer’s journal. Blogging is an ultimate tool to keep your programming notes and refer to them later. Almost all popular blogs (like blogger, wordpress etc) give you an option to set up your blog for free, and with the help of plug-ins, you can even save your code snippets with syntax highlighting. Depending on how you configure it, you can choose to keep these notes to yourself or rather share your experiences with thousands of developers across the world and receive feedback on it (and also earn some extra money).
I speak out of experience. Blogging may look like a tedious thing to do initially, but once you get into the habit of recording notes in your blog, it does wonders for you later. This blog DevCurry.com is one and a half years old and there are over 600 posts here, all containing bits and pieces of our experiences, which have helped us and hundreds and thousands of developers as a reference, and will continue to do so.
Tip 2:
If you want to save only random bits of code, use an online tool called Snipplr . Snipplr lets you store your code at one place and you can share access to your code with other guys/gals at work. Another tool is Snipt where you can share your collection of frequently used commands or code snippets. If you are a Visual Studio developer, Code Snippets is something you definitely want to check out.
Tip 3:
If you are a bunch of developers looking out for a free tool to record documentation online, use ‘Wikis’.
MediaWiki is a great piece of server-based software (wikipedia uses it), designed to be used between a large team of programmers, working on the same documentation. MediaWiki stores display data in a MySQL database. You can add notes, codes, faq’s, images etc. with revisions. Here’s a sandbox to try it out.
If you are a small developer team and want to store your documentation as text files (to be reused outside the wiki), you can use DokuWiki.
If you want a wiki solution for your own personal use, you can use TiddlyWiki which is a client-side reusable personal web notebook and a collaboration tool. It is like a one page personal blog designed like a wiki and can also be used as a personal productivity tool.
Tip 4:
You can use a free software like Evernote to records your random thoughts, ideas, things to do etc. You can even access it using your phone. It also gives an option to save webpage clippings and screenshots and you can write code snippets and search them later.
Tip 5:
Apart from the tips shared above, you can use an awesome professional tool like Microsoft OneNote to store, sync, organize, style, encrypt, backup and share your notes (to yourself, over a network or internet). Check a demo video.
I hope these tips will help you organize your notes, if you already haven’t been doing so. It’s never too late to start! If you have been using a tool that has worked wonders for you, feel free to share it using the comments section.
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 raising, managing and fixing these issues, as they arise. Here’s a list of some open source bug tracking softwares.
Bugzilla is one of the well known open source Defect/Bug-Tracking System using which you can track bugs and code changes, customize workflows, submit and review patches, test plan integration, manage quality assurance (QA) over a multi-project environment. In comparison to other Bugtracking softwares, Bugzilla being a powerful tool, has a very ordinary UI, making it difficult for beginners to use the tool.
Bugzilla uses MySQL, PostgreSQL, Oracle as its backend and integrates well with Git, CVS, Subversion, Mercurial etc.
Download Link - Feature List - Documentation
Trac is an enhanced wiki and issue tracking system for software development projects . The installation is a breeze and I particularly found the search option to be very powerful. Trac allows wiki markup in issue descriptions and commit messages, creating links and seamless references between bugs, tasks, changesets, files and wiki page.
Trac uses SQLite, PostgreSQL, MySQL as its backend and integrates well with Subversion and other version control systems.
Download Link - Documentation - Demo
JIRA provides issue tracking and project tracking through a clean, easy to use interface for capturing and organizing issues with customizable workflows, dashboards, a pluggable framework to integrate with external frameworks like CruiseControl, Confluence etc. JIRA is free for use only for official non-profit organizations, charities and open source projects.
Jira can integrate well with Git, CVS, Subversion, Mercurial etc.
Download Link - Feature List - Documentation
Redmine is an open source project management web application with a flexible issue tracking system. It contains a wiki, discussion forums, Gantt Charts, email integration, calendars, LDAP support, multi language support, export to PDF, Excel/CSV etc.
Redmine uses SQLite, PostgreSQL, MySQL as its backend and integrates well with Git, CVS, Subversion, Mercurial etc.
Download Link - Feature List - Documentation - Demo
MantisBT is a free web-based bugtracking system.
Mantis can connect to MS SQL, PostgreSQL, MySQL and can integrate with Git, CVS and Subversion.
Download Link - Feature List - Documentation - Demo
Wikipedia contains a very good Comparison of Issue-Tracking systems that can help you out with some additional open source bug tracking systems.
Feel free to share feedback about the ones you have used.
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:
Here are some free SVN repositories we found and thought of sharing with you, in case you too are looking out for some. Note that some of the products listed here have both free and commercial options. I am highlighting only the Free plans.
Assembla - Unlimited Users. Unlimited Projects. 2 GB Storage. Ideal for consultants and small agile-development teams that want a safe, reliable version control solution.
Unfuddle – Free for 2 users, 200 MB of space. Unlimited Repositories Subversion & Git.
BeanStalk – Free for 3 users, 1 private repository (Git or SVN) and 100 MB of space.
ProjectLocker – Free for 5 Users, 500 MB space and unlimited projects
Origo - Origo is an open source software development and collaboration platform that provides an SVN repository (with web interface), project wiki page, issue tracker with tag support, releases area etc.
Google Code - Project Hosting on Google Code provides a free collaborative development environment for open source projects. Each project comes with its own member controls, Subversion/Mercurial repository, issue tracker, wiki pages, and downloads section.
Gna! - Gna! provides Source Code Repositories (CVS, GNU Arch, Subversion), Download Area, Web Pages, Mailing-Lists and Trackers (Bugs, Task, Support Requests, Patches).
BerliOS - BerliOS Developer is a free service to Open Source developers offering easy access to the best in CVS/SVN/Mercurial/GIT, mailing lists, bug tracking, message boards/forums, task management, site hosting, permanent file archival, full backups, and total web-based administration.
You may also want to take a look at CodePlex, GitHub, SourceForge and Freepository
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 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 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 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 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 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
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:
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.
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’ 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 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 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 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.
I am a Windows power user and have the habit of regularly backing up my data, use a firewall, understand the pitfalls of bad internet behavior, regularly keep my OS updated with patches and do a lot of other stuff that other power users do to keep the system safe. However in addition to all of these points, I also use an Antivirus for my machine, just to add an extra layer of security.
Here is a short review and list of FREE Antivirus Programs if you are running Windows OS. Please note that this list is not comprehensive and contains only the Antivirus programs that I have used and tested on my machine.
IMHO, Microsoft Security Essentials is one of the best Antivirus solutions (in the freebee category) to guard your PC against viruses, spyware, and other malicious software. The automatic upgrades are smooth, the software is lightweight, runs quietly without constant interruptions and is very easy to use. You should have genuine Windows to install Microsoft Security Essentials. There’s also a new Beta for Next Version of Microsoft Security Essentials Now Available
Terms of Use: As mentioned in the Eula, “You may install and use any number of copies of the software on your devices in your household for use by people who reside there or for use in your home-based small business”
OS Supported: Windows XP (Service Pack 2 or Service Pack 3)/Windows Vista (Gold, Service Pack 1, or Service Pack 2)/ Windows 7 (32/64 bit)
avast! provides good protection against viruses, spyware and other forms of malicious software. One of the features that I specifically liked was that avast runs in Safe Mode too, has a Boot time scanner, is easy to use and does not take a lot of my system resources. It’s free edition does not contain a spam filter nor does it provide any technical support, which I feel is a serious limitation.
Terms of Use: avast! Free Antivirus is free only for personal and non-commercial use
Features: http://www.avast.com/free-antivirus-download#tab2
OS Supported: Microsoft Windows 2000, Microsoft Windows XP/Vista/7 (32/64 bit)
Avira AntiVir Personal is a free antivirus solution against malicious programs such as viruses, Trojans, backdoor programs, hoaxes, worms, dialers etc. It’s free edition supports Netbook with low resolution, comes with a Generic Repair option for your PC and also includes customer support. Although I haven’t personally used their support, friends have given me a feedback that their support is very prompt. I found that at times it gives out false alerts ‘too frequently’ but that can be controlled by
Terms of Use: Free of charge virus protection to home-users, for personal use only, and is not for business or commercial use.
OS Supported: Unix/ Windows 2000, SP4 and update rollup 1, Windows XP, SP2/ Vista (SP 1 recommended)/ Windows 7 (32/64 Bit)
Other Free Antivirus Softwares
Apart from the ones listed above, a quick search reveals some free antivirus solutions like AVG, ClamWin, Comodo etc. There is also a good thread on superuser.com that discusses free antivirus solutions.
If you are looking out for a paid Antivirus solutions then I strongly recommend to try ESET NOD32 Antivirus 4
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.
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.