Category: Features

Posted on

The Evolution of Browser Extensions: From Web Customization to Advanced Development Tools

Browser Extensions

It’s been a while that I published a post. A week before, I created a new Chrome extension and shared with my team and noticed the new developers didn’t have knowledge on how powerful the browser extensions can be. It pushed me to write a short post about the history and power of browser extensions.

A Brief History

Browser extensions have dramatically transformed how users interact with the internet, offering a plethora of customization options and functionalities that enhance productivity, security, streamline workflows and user experience. These small software modules, integrated into web browsers like Chrome, Edge, Firefox etc., enable users and developers to tailor their browsing experience, automate tasks, and access additional features not available in standard browser installations. The evolution of browser extensions has marked a significant milestone in web development, fostering a community of developers who continuously innovate and simplify complex tasks.

The Early Days

Browser extensions trace their origins back to the early days of web browsers. The first notable implementation was by Internet Explorer in the late 1990s, which allowed for basic plugins to extend browser capabilities. Early days of these extensions allowed developers to add custom menu bars(also known as Browser Bands and Communication Bands), context menu options for seamless integration with extensions. CricInfo cricket score ticker was a popular toolbar that I have used in the early days. Internet download manager extension is one another toolbar which allowed the download of audios and videos, changed the life of lot of Dial-up connection users.

The Rise of Firefox

However, it was Mozilla Firefox that popularized the concept of extensions by providing a dedicated platform for the developers to create and submit the add-ons. Themes and skins are a fun part of extensions world. Greasemonkey,one of the early add-ons, allowed users to write custom code on top of extensions was a boon for customization. I used my first AdBlocker script from UserScripts.org installed using Greasemonkey. This Add-on allowed me to create customize my own scripts without taking the hassle of publishing. Firefox’s various components like Add-ons, Extensions, and Plugins (Flash, Java, SilverLight, etc.) eventually evolved into standardized extensions.

The Chrome Era

Then came the days of Chrome. Google Chrome, introduced in 2008, revolutionized the extension landscape by offering streamlined APIs and a dedicated web store for its extensions. This facilitated easier development and distribution of extensions, leading to a surge in their popularity. The Chrome Web Store, launched in 2010, became a central hub for users to discover and install extensions, further solidifying their importance in the web ecosystem.

Extensions like Web Developer and React Developer Tools provide essential utilities for debugging, testing, and optimizing web applications. By leveraging browser APIs, developers can create tools that integrate seamlessly into their development environment, automating repetitive tasks and offering real-time insights into application performance.

Essential Extensions for Users

Some of the most used extensions include:
AdBlock / AdBlock Plus / uBlock Origin: Blocks ads on websites, improving load times and reducing clutter.
Microsoft Editor / Grammarly: Enhances writing by checking grammar, spelling, and style.
Honey: Automatically finds and applies coupon codes at checkout.
Bitwarden / LastPass: A password manager that stores and auto-fills passwords securely.
Momentum: Replaces the new tab page with a personal dashboard featuring a to-do list, weather, and inspirational quotes.
Dark Reader: Applies a dark theme to websites, reducing eye strain.

Must-Have Extensions for Developers

From a developer’s perspective, extensions are a boon. Some popular developer-friendly extensions are:
TamperMonkey – Modify website layouts, add/remove features, or automate actions – Alternative to Greasemonkey supporting userscripts.
React Developer Tools / Vue.js / – Provides debugging and inspection tools for React and Vue.js applications.
Redux DevTools – Allows developers to inspect every state and action payload for Redux applications.
Postman – A powerful tool for testing APIs by making HTTP requests.
JSON Viewer – Formats JSON data to make it more readable.
XPath Helper – Helps to find XPath expressions for elements on a webpage.
ColorZilla – Advanced color picker and gradient generator.
WhatFont – Identifies fonts used on a webpage.

We will see how to create a simple browser extension in the next post –Browser extension sample – Chrome/Edge – HttpRequestViewer

Posted on

Best operating system to run older configuration PC – Lubuntu

Choosing Lubuntu:

LatelyI was pushed to use my 7 year old PC for an emergency which had Windows 7 in it. It was very tough for me to use the old PC as compared to my latest one, even though it had 1.5GB or RAM and Dual Core Processor. I even had thoughts to install Windows XP to achive better performance.

Before starting anything, did some research to if I can find a Linux distro that could consume very less resources. I was always fond of the Ubuntu distros for as long as 10 years.
I was very fond of receiving the Ubuntu distro CDs that was transported freely to my remote village earlier in 2004 or 2005.
With that fondness I searched the latest distro and then came the Lubuntu (Lite-Ubuntu). I installed it in my PC with dual boot configuration. I should say that the performance is very impressive.

About Lubuntu:

Lubuntu is a good operating system for many old computers, but not for all of them.
Some computers have too little horsepower or memory. A rule of thumb is that the computer should not be more than 10 years old.
Lubuntu is recognized as a member the Ubuntu family by the developers of Ubuntu and has the same release nomenclature.

System Requirements, as per Lubuntu site:

We have done many tests and we've found out that Lubuntu can be installed on a Pentium II or Celeron system with 128 MB of RAM, but such a system would not perform well enough for daily use.
With 256MB - 384MB of RAM, the performance will be better and the system will be more usable.
With 512MB of RAM, you don't need to worry much.

If you like to use the system for normal activities like general browsing, viewing mails etc., the above config would be great.
But if you intend to use it for video watching like using Youtube, I must warn you, the browser you use could eat up all all memory.

Differences between Lubuntu and Ubuntu:

1. Different Desktop Environment (DE) – Lubuntu uses LXDE (Lightweight X11 Desktop Environment) while Ubuntu uses Unity as the default DE.

  • Both Lubuntu and Ubuntu share two major important things: same Core System and same Repositories.
  • Lubuntu and Ubuntu belong to the same family and talking about each as totally different two systems is not correct since they have some things in common.
  • They even share the same Forum Area and share many Wiki Pages. Other than that, they are the same.
  • The DE is what makes Lubuntu a lightweight OS, and of course the selected applications too because we make sure to use the lightest applications which are not resource hungry.
  • However, you are still free to use any application available in Ubuntu’s repositories, as long as your computer can run it.

2. Different Default Applications

Lubuntu Application Function
Xpad Stickies
Evince PDF Viewer
Gnumeric Spreadsheet
Abiword Docs
Simple-scan Scanner
Gnome-disk-utility Partition Editor
Light-locker Screensaver
Guvcview Webcam Utility
Gucharmap Character Map
Scrot Screenshot
Hardinfo System info
Mtpaint Image Editing
Xfburn Cd Burning
Pcmanfm File Manager
Gcalculator Calculator
Audacious Audio Player
Gnome-mplayer Video Player
Transmission Torrent
Pidgin Instant Messaging
Sylpheed Email Client
Mozilla Firefox Web browser
Leafpad Editor
File-roller (De)Compress files
Lxterminal Terminal
Gpicview Image Viewer

Download Lubuntu:

http://lubuntu.me/downloads/
https://help.ubuntu.com/community/Lubuntu/GetLubuntu

Official Websites:

http://lubuntu.me/
http://lubuntu.net/
https://wiki.ubuntu.com/Lubuntu

Posted on

Must have Android apps for developers (Non Android developers)

The below list of apps are note rated or ordered in any ways.

1. AndroIRC – An IRC client application
2. Chrome – Mobile browser
3. Mozilla Firefox – Mobile browser
4. SSH/SFTP Server – Exposing your mobile as a SSH/SFTP server
5. AndFTP – FTP client
6. JuiceSSH – SSH client
7. aLogcat/aLogrec – Logger apps to view or save Android logs
8. Network Info II – Shows info about the phone and the current network, Bluetooth, IPv6 and Cell connection
9. kWS – Android Web Server
10. Google Analytics – Mobile client for Google Analytics
11. WordPress – Mobile client for WordPress dashboard
12. Control Panel for cPanel – Mobile client for cPanel Dashboard
13. File Expert – All in one File manager supporting Windows Samba, FTP, SFTP, FTPS, Webdev, Bluetooth OBEX client

Note: The above app list is used by me and has nothing to do with the other users.

Posted on

Bhuvan, The Earth browser – A Geoportal of Indian Space Research Organisation

Most of us would have used the mapping services like Google Maps, Nokia Maps, Bing maps, Wiki Mapia etc on the net. But how many of us knew that we in India have a dedicated Mapping system. Yes, all those PSLV family satellites, Remote sensing satellites from ISRO send us a lot of images; details etc daily and these details are available to the public’s view.

Bhuvan is a Geo-portal of Indian Space Research Organization Showcasing Indian Imaging Capabilities in Multi-sensor, Multi-platform and Multi-temporal domain. This Earth browser gives a gateway to explore and discover virtual earth in 3D space with specific emphasis on Indian Region. The other services provided by the Bhuvan are Land services, Ground water prospects, Weather services, Ocean services, Disaster services

The Mapping system provides both the 2D and 3D viewing capability and can see information that is otherwise dry and academic, in ways that are visually fascinating. It helps you capture large databases of satellite data, which can be transformed into 3D presentations that capture the imaginations of the rest of us. Users can experience the comprehensive globe with multi resolution imagery, thematic information, historical multi temporal imagery, and other points of interest. As a User we can explore and visualize the world in a 3D landscape along with all other wide ranging tools to explore Bhutan.

Bhuvan also provides a mobile version of its site and can be accessed from here.

As a feast for developers, Bhuvan also provides the API’s to embed a true 3D digital globe, into the web pages. Using the API you can draw markers and lines, drape images over the terrain, allowing you to build sophisticated 3D map applications.

Bhuvan Quick Tour:

If you are unable view the video, click Here to download.

Posted on

Printing Complex Layouts in Adobe Flex – FlexPrintJob

I have come across a basic need for printing a complex layout in the Adobe Flex. After a long search i thought the following will be helpful to all if shared.

Requirements:

1. My layout has the following. Header (Fixed, to be shown in all page.), First Page Header (Displayed only in single page), DataGrid with data rolling out to more than one page, Fixed footer following the DataGrid and a Footer that come only in last page of the Printed output.
2. I am given only the outer most component object and list of all ids of the following components.
3. No server side support is available.

Problems:

1. My DataGrid is not accessible directly.
2. Complex layout and needed Paginationrn3. Fixed, floating header and footers.

Solution:

With reference to the Adobe Live docs, the solutions is almost near except to the complex structure.
rnI have created a Template that holds all the data to be iterated in the report. I contains the sections like Fixed Header, Floating Header, DataGrid, Fixed Footer, Floating Footer as follows.

1. PrintTemplate.mxml

<s:VGroup id="allPageHeader" width="100%" />
< s:VGroup id="firstPageHeader" width="100%" />
< mx:PrintDataGrid id="printDataGrid" width="100%" />
< s:VGroup id="allPageFooter" width="100%" />
< s:VGroup id="lastPagefooter" width="100%" />

2. PrintSample.mxml

protected function doPrint(outerGroup:DisplayObjectContainer, fixedHeaderIDs:ArrayCollection, floatHeaderIDs:ArrayCollection, dataGridId:String, floatFooterIDs:ArrayCollection , fixedFooterIDs:ArrayCollection):void{...}

Here we have to pass the list of IDs of the sections as we need to the doPrint method as follows.

doPrint(outerGroup, fixedHeaderIDs, floatHeaderIDs, dataGridId, fixedFooterIDs, floatFooterIDs);Completing the rendering the print object will be sent to printer and a popup will be shown.

Source Code: Printing in Adobe Flex

Update:

In the above example, if the Printout is taken with the printAsBitmap set to false, then there will be thick line under the header of the DataGrid ie, the PrintDataGrid. To solve this problem you have to use a Header Renderer and set a background color or Image for the header as follows.

<?xml version="1.0" encoding="utf-8"?>
< s:SparkSkin xmlns:fx="http:/s.adobe.com/mxml/2009" xmlns:s="library:/s.adobe.com/flex/spark" xmlns:mx="library:/s.adobe.com/flex/mx" > < s:Rect left="0" right="0" top="0"> < s:fill> < s:BitmapFill source="@Embed(''header.png'')"/> 
< /s:fill> < s:stroke> < s:SolidColorStroke color="grey" /> 
< /s:stroke> < /s:Rect>< /s:SparkSkin>

Save the file as SampleSkin and add this skin to the headerBackroundSkin property of PrintDataGrid in the PrintTemplate as follows.

<mx:PrintDataGrid id="printDataGrid" width="100%" headerBackgroundSkin="SampleSkin" />

This will resolve the issue and set a neat header to the DataGrid in the print.

Posted on

Internet Explorer 9 to let Users Block “Tracking”

The Next version of Internet Explorer will let users turn on “tracking protection”, a new mechanism that will block specified users, Microsoft says.
The IE 9 announcement came as the U.S Federal Trade commision proposed that consumers be allowed to subscribe to a “do not track” system similar to “do not call” (in short DND) list that blocks telemarketers.
In IE 9, users can turn the feature on and then choose a list of sites to block. Anyone-Including individuals, companies, and consumers-protection groups-can make lists, and users can subscribe to as many as they please. List authors can update lists; the updates will automatically push out to subscribers, as IE 9 will check for updates once a week. The features will not block Flash cookies.
Some users may be surprised by the result, however: Sites that users block for tracking them will also be prohibited from displaying certain content. Websites will be able to detect when visitors are using the list; the sites will therefore know that some page elements may be blocked for the visitors.
The new tracking protection feature is available from the Internet Explorer 9 Release candidate.

The Next version of Internet Explorer will let users turn on “tracking protection”, a new mechanism that will block specified users, Microsoft says.

The IE 9 announcement came as the U.S Federal Trade commission proposed that consumers be allowed to subscribe to a “do not track” system similar to “do not call” (in short DND) list that blocks telemarketers.

In IE 9, users can turn the feature on and then choose a list of sites to block. Anyone-Including individuals, companies, and consumers-protection groups-can make lists, and users can subscribe to as many as they please. List authors can update lists; the updates will automatically push out to subscribers, as IE 9 will check for updates once a week. The features will not block Flash cookies.

Some users may be surprised by the result, however: Sites that users block for tracking them will also be prohibited from displaying certain content. Websites will be able to detect when visitors are using the list; the sites will therefore know that some page elements may be blocked for the visitors.

The new tracking protection feature is available from the Internet Explorer 9 Release candidate.