Showing posts with label Tools. Show all posts
Showing posts with label Tools. Show all posts

How to Determine Resources Coming From Cache using Browser Developer Tools

As web developers, we all use web browser developer tools to monitor browser requests. The most commonly used ones are Firebug, Fiddler and Chrome Developer Tools.

Have you tried using these tools to determine which resources are served off the cache? You will be surprised to learn that only Chrome Developer Tool is able to correctly show the CDN resources coming from a cache.

Let’s see some results. I am accessing an ASP.NET site that makes use of some CSS and jQuery files served off the CDN. Feel free to choose a site of your choice like jQuery.com.

I observed that out of all the three browser tools, only Chrome clearly showed static resources coming from the cache. It was not easy to determine cache items using IE 9 and Firebug tool. See for yourself! I have refreshed the page a couple of times and also cleared the cache a couple of times.

On IE 9 using Developer Tool (F12)


ie9-developer-tool

Observe the misleading 304 result, when it should actually be coming from a cache. Eric Lawrence explains why does this happen.

Using Firebug


firebug-tool

Firebug too does not clearly show which static resources are fetched from the cache.

Using Chrome Developer Tool (Ctrl + Shift + I)


chrome-developer-tool

As you can see, Chrome clearly shows which static resources are fetched from the cache.

Sysinternals Suite Update

The Sysinternals Suite by Mark Russinovich’s has some recent updates. The latest build 16.02.2012 brings along updated Coreinfo, DebugView, LiveKd and Process Explorer.

Sysinternals Suite is a powerful set of Windows system utilities. Here are some changes in this latest update:

Coreinfo v3.04: Coreinfo, a tool that dumps information about a system’s processor topology and capabilities, adds a fix for a bug that sometimes misreported the presence of hyperthreading. Presence of TSC (timestamp counter) Invariant support is now reported.

DebugView v4.78: This update to DebugView, a utility for capturing and logging user-mode and kernel-mode debug output messages, can now capture output generated by Metro applications on Windows 8.

LiveKd v5.1: LiveKd, a utility for leveraging kernel debuggers to analyze live physical systems or Hyper-V virtual machines, now supports newer Intel processors that implement the XSAVE instruction.

Process Explorer v15.13: This Process Explorer release adds Background priority to the process context menu, which sets the CPU, memory and I/O priorities of a process to low, and includes a bug fix for restoring user-entered process comments.

Make sure you check out the Sysinternals Utilities Index

Real Developers never start a Project without Source Control, Period! Mercurial on BitBucket

Real developers never start a project without source control, period! So, today I am going to walk you through the steps to use www.bitbucket.org’s Mercurial (Hg) repository.

Disclaimer: BitBucket has not sponsored this article, you can use any available online Mercurial repository

BitBucket offers both Mercurial and Git repositories. I started off with Hg because at the time they had better tooling for Windows. But Git tooling has fast come up to speed and is now on par. I also chose BitBucket over the more popular GitHub because it doesn’t allow free private repositories. You have to pay for private repositories. BitBucket allows private repositories, even for commercial purposes. 

Please read the EULA carefully. For me I needed a place to keep my blogging source code that I make available for free, so I don’t have a commercial interest.

- To start off, go to www.bitbucket.org and setup a free account.

- Next go to http://tortoisehg.bitbucket.org/ and download Tortoise for Hg. If you have used tortoise for SVN earlier, this will be very familiar to you. If not, no worries, we’ll walk through the steps to learn the basics.

- Install Tortoise, since it’s a shell extension you may need to restart the machine. Go ahead and restart.

- Hg is a distributed source control, meaning you have a complete repository locally and any changes you make and ‘check in’ or ‘commit’ goes into the local repository. This is advantageous in multiple ways
  • You can keep checking in your code without affecting others or the build (that should be from a build server’s repository).
  • In your local repository, you can revert and diff code for your changes or changes pulled down from server.
  • You can start a local repository first and then push it to the server once you are ready.
  • You can do a repository pull from the server to create your ‘clone’ and continue committing locally till you are ready to push changes to server.
Method 1: Creating a Local Repository and pushing it to server

Let’s say you are travelling in an airplane without access to Internet and you come up with a brilliant idea that you have to prototype, then and there. You can get started with source control right away.

Create your solution in VS, mine is called HgVersioning. Open Windows explorer and navigate to the folder. Right click on it and select TortoiseHg -> Create Repository Here

create-local-repository

The following dialog, will popup. Select ‘Create’. Click Ok for the confirmation dialog

local-repository-path

repository-created-successfully

Notice the folder will now have a (?) attached to it indicating it’s being watched for changes and that it has uncommitted changes.

new-hg-folder

Committing code locally

Right click on the folder and select ‘Hg Commit’. This will bring up a dialog similar to the one below

commit-initial

Right click on one of the file in obj folder and select Ignore. The following dialog will pop-up.

ignore-filter-obj-files

Change the selection highlighted from Blob (default) to Regexp. Basically we are telling Tortoise Hg to ignore obj folders because these keep changing with every build. Repeat the same for the bin folder

Now select the .suo file and add it to ignore list. Only this time keep the ignore type to Blob. Repeat for .hgignore file.

With all the non-required files ignored, your check in list should like the following

first-local-commit

Don’t forget to put comments because even though it’s a local commit when you push it to server all your comments will be pushed to server. Hit Commit. The code is now in your local repository.

You can continue to make changes and commit to local repository

Pushing code to server

Now let’s assume your first cut of prototype is done and checked in on your laptop. Your plane lands, you get to a place with Internet. So for safety you want the code off your machine into some place more ‘reliable’. Let’s see how to push the code to BitBucket.

Log in to BitBucket. To create a new Repository click on the big green + sign.

bitbucket-create-new-repository

Fill in the Name, Description, Repository Type and Public/Private status. Keep the name same as local.

bitbucket-repo-creation-1

Click ‘Create Repository’ to finish the repository creation process. You should see a success screen as follows.

bitbucket-repo-created-1

You can push code in two ways.

1. From the command line.

Navigate to the folder where your project is and type in
Hg push https://[youraccountname]@bitbucket.org/sumitmaitra/hgversioning
<Once you hit return, it will ask for your password>
Password: [Provide your BitBucket Password]

2. From the UI.

Right click on your Project folder and select ‘Hg Workbench’

invoke-hg-workbench

The workbench looks as follows, select the ‘Refresh’ button as selected below

add-remote-repository-url

Initially the “Remote Repository:” will be empty. Change the Url Type from ‘local’ to ‘https’.

Put in the User ID and url of remote repository, Finally provide the path to the repository.  The final URL should look something like below

provide-url-params-for-remote-repository

Now click on the ‘Push outgoing changes to selected URL’ button (highlighted above).

push-to-remote-confirmation

Click Yes to Confirm

password-confirmation

Provide your BitBucket account password and wait for the push to complete. A banner on top will indicate the push is complete.

push-to-remote-successful

There your code is now secure in a cloud hosted source control server and you don’t need to worry if your laptop crashes what will you do. Next we’ll see the second method of creating the project on BitBucket first and pulling it down

Method 2: Creating the project on Server first and committing the code back

Create a new project in BitBucket as shown earlier. Copy only the url part from the instruction on how to clone the repository

Open Windows Explorer, go to the folder where you want to download the project, right click, TortoiseHg->Clone

provide-remote-repository-url

Paste the URL in the Source, and hit Clone. Provide the password as prompted and done. New source controlled folder is ready

remote-repository-cloned-locally

Create your project and ‘Commit’ as earlier. Only difference is when you Push to server the URL will be ready for you so you don’t have to add it explicitly.

That concludes this article on how to get started on BitBucket using Hg.

Don’t let your code be without source control anymore!

Web Browser Developer Tools and Layout Engines

A layout engine a.k.a web browser engine or browser rendering engine is a component that parses HTML, XML, CSS, Images etc. and renders it on the screen. A browser developer tool lets you inspect, debug, analyze and diagnose issues with CSS, HTML, Scripts etc. inside your browser.

As a web developer, you must know what layout engines and developer tools your browser uses. It helps to understand browser rendering and resolve issues when you are developing cross browser apps. Here’s a list of some popular browser developer tools and the layout engines for your reference.

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

CSS3 Code Generation Tools That Save Time

One of the challenges faced by designers is to implement cross-browser properties while designing sites. The extra bit of code to accommodate properties that are browser-specific, can take up a lot of time. CSS3 Code Generators can help you save time and reduce errors, by generating code that works across different browsers. In this article, I will list six very useful CSS3 Code Generators.

CSS3 Please

CSS3Please is an effective cross-browser CSS3 Rule Generator that provides a live preview while you edit the values in this css file. The best part is that you don't have to worry about making sure the corresponding values match, as the generator does that automagically for you.

image

CSS3 Generator

A set of CSS properties that can be generated using sliders and changes can be previewed live.

image

CSS3 Generator 

Allows you to generate CSS for various CSS Properties like Border Radius, Box Shadow, RGBA, @Font Face etc.

image

CSS3 Sandbox

A set of tools that lets you generate Gradients, Shadows, CSS Transforms and CSS Text Strokes

image

Ultimate CSS Gradient Generator

A powerful Photoshop-like CSS gradient editor and supports most browsers.

image

Button Maker

Creates beautiful buttons by specifying properties like Gradient, Border, Background, Text Color and Font.

image

Free Photo Editors for Web Designers

A good photo editing software comes with a price, but here are some free open source photo editors that could do the job for you!

IrfanView is a popular free, fast lightweight graphic viewer and editor which can handle a number of graphic file formats including BMP, JPEG, GIF (animated), PNG, PCX, TIFF and more

image

Developer: Irfan Skiljan
Current Version: 4.3
Supported File Formats: Check the different file formats.
Download: Download Link
OS Support: Windows 9x, ME, NT, 2000, XP, 2003 , 2008, Vista, Windows 7.
License: Free for personal/educational use. Use it commercially for a nominal fee.

XNView

XnView is a free cross platform software to view, organise, convert graphics and photos files or to create slide show, contact sheet, HTML pages.

image

Developer: Pierre-emmanuel Gougelet
Current Version: 1.98.2 (Windows)
Supported File Formats: Check the different file formats.
Download: Download Link
OS Support: Windows, Linux, MacOSX, PocketPC
License: Free for personal/educational/non-profit use. Use it commercially for a fee.

Paint.Net

Paint.NET is free image and photo editing software and features an intuitive and innovative user interface with support for layers, unlimited undo, special effects, and a wide variety of useful and powerful tools
image

Developer: Rick Brewster
Current Version: 3.5.8
Supported File Formats: Supports raster graphic formats. Check the Roadmap
Download: Download Link
OS Support: Windows XP (SP3), Windows Vista, Windows 7
License: Free to use. Donate Here

GIMP

GIMP is the GNU Image Manipulation Program. It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring.
image

Developer: GIMP team
Current Version: 2.6.11
Supported File Formats: JPEG (JFIF), GIF, PNG, TIFF. Check the Feature List
Download: Download Link
OS Support: Windows XP (SP3), Windows Vista, Windows 7
License: GNU Public License. Donate Here

There are many more free photo and graphic editors, however I have listed the ones I found very useful. Feel free to share the ones you have used!

Find more here http://en.wikipedia.org/wiki/Comparison_of_image_viewers

Test Websites in Different IE Browser Versions

If you have a requirement of testing your websites in older versions of Internet Explorer, Microsoft has provided VHD’s (Virtual Hard Disk) with Windows set up with the specified version of Internet Explorer. Here’s the list

Windows XP – IE6, IE7 and IE8
Windows Vista – IE7, IE8 and IE9
Windows 7 – IE8 and IE9

All these set ups are patched with the latest security updates and will run on Microsoft Virtual PC.

Download Internet Explorer Application Compatibility VPC Image

Monitor Website Uptime using Free Services

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:


Uptime Robot

image

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.

  • Monitors 50 websites
  • 5 minutes monitoring frequency
  • Alerts via Email, SMS, RSS and Twitter
  • Supports websites with SSL certificates as well as self-signed certificates

.mon.itor.us

image

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:

  • Monitors unlimited sites
  • Checks from USA and Europe
  • 30 minutes monitoring frequency
  • Alerts via SMS, E-mail, RSS and Instant Messenger

Montastic

image

Monstastic, as they put it, is the free website monitoring service that doesn't suck! The Free Service:

  • Monitors 3 websites
  • Checks from multiple locations in USA
  • Support for http, https and port numbers
  • 30 minutes – 1 day (selectable) monitoring frequency
  • Alerts via E-mail, RSS and PC & Mac widgets

    100Pulse

    image

    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:

    • Monitors two sites
    • 15 minute – 3 hours (selectable) monitoring frequency
    • Alerts via E-mail, RSS, Twitter
    • Weekly, Month Periodic Reports

    InternetSeer

    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:

    • Monitors one site
    • 60 minute monitoring frequency
    • Confirm all alert errors prior to notifying you
    • Alerts via E-mail, phone email or pager email
    • Weekly Performance Report

    Creating a Google Chrome Extension is as Easy as 1-2-3

    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 (image )in the top-right corner of your browser > Select Tools > Extensions. Click the + Developer Mode to expand it if it is not already expanded.

    image

    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:

    image

    Your extension has been installed! To view it, check the World Clock icon next to the address bar in the Chrome toolbar.

    image

    Clicking the dropdown brings up the rest of the countries.


    image

    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.

    Test New Fonts using HTML 5 and CSS 3

    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:

    image

    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

    image

    Preview of Anonymous Pro

    image

    Applications like font dragr, showcase the power that upcoming web technologies like HTML 5 has in store for us!

    Developers, there are Better Ways to Maintain your Notes

    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.

    Free Bug Tracking Software for your Projects

    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

    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

    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

    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

    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


    Mantis

    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.

    Free SVN Repositories to Host your Projects

    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 system
    • mailing lists, forums, issue tracker, pages, download area
    • web based administration

    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

    Free Text Editors to Open Large Text files

    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

    Understanding YSlow – A Firebug Extension to Analyze and Improve Webpage Performance

    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.

    image

    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.

    image

    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.

    image

    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:

    image

    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.

    image

    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.

    image

    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

    Free Antivirus Software for your Windows OS

    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.


    Microsoft Security Essentials

    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!

    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

    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

    Test Regular Expressions in Your Browser

    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.

    image

    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.

    image

    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.