View Source Chart: Inspect the DOM at Lightning Speed

Posted by sheraz
February 27, 2011
comments (0)


If you’re a web developer and you have used Firefox's “View page source” to analyze the DOM tree then you know that it is really a time consuming and terrible activity to go through each line of code. Firefox has provided an easy solution to this problem by providing an add-on named as “View Source Chart”.

"View Source Chart" is an add-on that color codes the page source for easy browsing. It graphically shows you the tag boundaries, tag nesting order and hierarchy eliminating manual counting.


Now if you will hover over your mouse at any container, a tool-tip will display the code of that container even if the container is invisible. 
You can zoom out the charts as well by pressing [CTRL + -.] This will really helpful when you are viewing very complex and deeply nested tags. By clicking on the containers will hide or display the tag containers.
“View Source Chart” is available for Firefox and Mac.

If you are a developer and want to get rid of code cluttering the you must try it.

Firefox: Download Here

Labels:

Source: Opera’s Extension to view the DOM Tree

Posted by sheraz
comments (0)

If you are a web developer then you know that during development “View page source” of a web page is how much important and helpful to analyze the DOM tree and syntax or logical errors.
I recently found a new add-on called “Source” which gives us more features and the feature those Firefox lakes. “Source” let you view the actual DOM tree of a web page as nicely highlighted code. This best thing about this is that it also allows you the edit and save the code to make development faster.
Once you installed, just open any page. Now right click the page and select the “source” from pop up.


This will open a new tab containing the page’s source. The code is nicely highlighted by different colors so that users can understand the code thoroughly. It even wraps the lines if code lines are too large.

Now take a look what features it is offering to you.
  • Viewing nicely highlighted page-source with clickable links (href, src, url), text wrapping, line numbers.
  • View source of the selected text.
  • Syntax highlighting for source codes that was opened in Opera.
  • It wraps the code if needed, and like in “Imagus”, there is horizontal scrolling feature if text-wrap is inactive and the scroll-height is 50% bigger than window's inner-height.
  • View NFO files in browser.
  • Centering plain text or NFOs.
  • Edit/view the source of the selected element or remove element with a single click
  • CSS formatting (for now it's really dumb)

There are some shortcut keys that you can use to work in a better way.
Press Ctrl+F9 for viewing the page source or the selection source. It works for frames too, first click on the desired frame and press the mentioned combination. If you are not sure that you are in a frame, or just want to check the top document's source, and then press Ctrl+Shift+F9. Ctrl+Alt+F9 [+Shift works too] will make an Ajax request (I think there is no better method for this) to get the original source.
“Source” is available for Opera only. Try it here

Opera: Download Here

Labels:

Google Dictionary: Lookup Definitions Instantly

Posted by sheraz
February 24, 2011
comments (0)

 
If you want to get the meaning of any word on the internet quickly and easily with just a single click then chrome makes your work simple by offering you its plug-in called “Google Dictionary”.
Once installed, “Google Dictionary” icon will be placed in the chrome address bar.
Now all you have to do is just double click any word and a pop up will be displayed containing its definition.


You can get more definitions, web definitions and history by clicking the “Google Dictionary” icon which will display a drop down.

Google Dictionary supports a number of different languages. You can configure the default dictionary language by configuring its options. Dictionary configuration can be accessed by clicking the “Extension options”.

This extension is extremely useful and efficient to find reference information for words while browsing. If you are always looking for definitions then you might want to add this extension to your browser. Try “Google Dictionary” here.

Chrome:  Download Here
Firefox: Download Here

Labels: ,

Google Sidewiki: Contribute helpful information to any webpage

Posted by sheraz
February 20, 2011
comments (0)

Google sidewiki is a new step to make your web browser social. With Google sidewiki you can share any useful information about any web page you visit with the sidewiki community. Google calls these comments sidewiki. Users can post their opinions to the discussions about specific web pages. With its help you can learn from others, review the expert’s insights about the issues and get good tips from the users who have visited the page before you.
Once installed, Google sidewiki icon will be displayed in the address bar.

When you will visit any page, sidewiki icon will display the number of sidewiki posted regarding that web page. Clicking on that icon will show you a drop down containing user’s sidewiki.

Now, if you want to share your opinion then scroll down to the bottom of drop down. There you will find sidewiki editor where you can write your own comments. Just write your comments and publish it.


You can find more information about Google sidewiki at there. To know how it works, please watch this tutorial

Google sidewiki extension is available for Google chrome and Firefox. Try it here

Chrome:  Download Here
Firefox: Download Here

Labels: ,

Amplify, the smarter way to share!

Posted by sheraz
February 19, 2011
comments (0)

As the social media sites are growing day by day it is very time consuming activity to share your posts at each channel individually. Have you ever made a wish to share your posts to all the channels at the same time? If you want to blast info to all channels simultaneously, Firefox makes is easy for you by providing you an add-on called “Amplify”.
Amplify is the social sharing add-on for Firefox and Google Chrome.

Once installed you need to login to use its features. You can create you own account or use your Facebook or Twitter account as well.
Once you logged in, find any online contents, click the “Amplify icon” placed in address bar

By clicking the icon, you will see amplify menu at the top of page.

This menu contains 4 options.  Now highlight the contents of a page you want to share and click on the “Clip this Page”. This will display the highlighted contents in a new page where you can select a theme for your post and amplify it.

You can share the links to social media by clicking the “Share this URL”. It will auto post to all the channels given below.
 
It also enables you to write your posts directly by “Write a post”.


Amplify is the best add-on I have ever used. As its name represents, it really amplifies your work. Now if you really want to amplify your work then try it here

Firefox:  Download Here
Chrome: Download Here


Labels: ,

FireFTP

Posted by sheraz
February 17, 2011
comments (0)

If you are a web developer and need a full fledged ftp client to upload files then you need FireFTP, which makes your browser a full featured FTP client.
Once installed, go to Tools menu of your browser and click on the FireFTP icon to launch it in a new tab. Now to create a connection, click on the “create an account” in the left corner of FireFTP tab. The Account Manager Dialog box will appear where you can give account details and login credentials. Once you are done, click ok and your FTP client is ready for you. It is like any other FTP client software, but the difference is that it is free, secure and cross-platform FTP client.


It also contains some advanced features such as syncing directories, directory comparison, SFTP, SSL encryption, integrity checks, remote editing, drag and drop, file hashing and searching/filtering that make it more powerful tool.
FireFTP is only available for Firefox. You can get it from there get it from there.

Firefox: Download Here

Labels:

ScribeFire

Posted by sheraz
February 16, 2011
comments (0)

Scribefire is a handy blogging tool that patches into your Firefox browser as an add-on. Scribefire allows you to quickly create blog posts through your browser without navigating and signing onto the blogging website you use, making your blogging a seamless part of web surfing.


Once installed, you can access it by clicking on its icon at the right side of status bar. It will start by loading an account manager that will require take all the necessary information regarding your blog including your username and password.

It will login to your blog and then display your blog's information i.e. categories and posts in the right panel.
It has almost every text formatting tools which are indispensable for writing blog posts. Predominantly it provides you with an option for searching and inserting YouTube videos directly.


It also let users to share the current page on multiple social websites, to access this feature, click Promote button from left sidebar menu.
Scribefire currently supports the following services:
  •   WordPress.com (http://www.wordpress.com)
  •   LiveJournal (http://www.livejournal.com)
  •   Xanga (http://www.xanga.com/)
  •   Windows Live Spaces (http://spaces.msn.com)
  •   Performancing (http://www.performancing.com)
  •   Jeeran (http://www.jeeran.com)
  •   Tumblr (http://www.tumblr.com/)
  •   MySpace (http://www.myspace.com/)
  •   b2Evolution (http://b2evolution.net)
  •   Splinder (http://www.splinder.com/)

In addition to the hosted services mentioned above, ScribeFire also supports custom blogging platforms which are usually blogging software hosted on your own server.
The currently supported blogging platforms are:
  •   WordPress (http://www.wordpress.org/)
  •   Movable Type (http://www.movabletype.org/)
  •   Drupal (http://www.drupal.org)
  •   Textpattern (http://www.textpattern.com/)
  •   Roller (http://www.rollerweblogger.org)
  •   Blogger (http://www.blogger.com)
  •   MetaWeblog API (Any blogging software that implements this API)

ScribeFire is available for Firefox, Chrome, Safari and Opera web browsers
You can get it from there

Firefox:  Download Here
Opera:  Download Here
Chrome: Download Here
Safari: Download Here


Labels: , ,

Videosurf: Videos at a Glance

Posted by sheraz
February 14, 2011
comments (0)

 
Here's one of the more useful Firefox extensions I've tried out in a while: VideoSurf. You get more than a link. You see frame-by-frame previews and summaries before you click. And when you’re searching through the standard engines, other suggestions come up to help you find what you’re looking for fast.

 
Once installed its icon is placed at the Browser’s status bar. When features are available for a site you’re visiting, the icon turns from gray to a blue “V”. 


Turn VideoSurf on and images appear in your scan of the stream. Videosurf supports a variety of sites and provide visual summaries and related videos on
  •     Google Search
  •  Twitter
  •  YouTube
  •  Yahoo! Search
  •  Friend Feed
  •  Bing
  •  MySpace
  •  OneRiot

A search with VideoSurf adds at these sites will provide visual summaries under the listings and a suggested list of related videos appears on the right. This list seems particularly helpful in searching for TV shows, where results can include clips, riffs on scenes and other content.

Get video surf from there

Firefox: Download Here


Labels:

Subscribe to: Posts (Atom)