Posts Tagged ‘google chrome’

The History of Web Browsers (Picture)

28 Mar

From the dark ages to this day.

The History of Web Browsers (Picture)

Via: WinBeta
Source: TechKing


15 Useful Google Chrome Extensions for Web Designers and Developers

04 Jan

I have only recently made the switch to using Google Chrome as my default browser, and at the same time I began using it for working on my freelance web design and development projects. Although I still find myself wandering back to Firefox every now and then because of my dependency on the Firebug extension that Chrome has yet to completely duplicate, I am thoroughly satisfied with the Chrome browser’s speed, use of screen space, and more.

In this post, I will share with you some of the best Chrome extensions I have found useful when designing and developing websites, listed in alphabetical order.

1. Aviary Screen Capture

Aviary Screen Capture lets you take a screen shot of any web page. Use the applications after you’ve gotten your screen shot to edit that shot from within your browser. The basic image editor lets you mark up (by drawing arrows and rectangles), edit (crop, rotate and resize) and get the exact pixel colors of the image.

Features include:

  • Save to desktop, host online, or edit in other Aviary apps
  • Captures instantly
  • Screen capture of the visible portion of all web pages and images
  • Capture entire web pages
  • Add visual notes like arrows, text and highlights to your capture
  • Crop your capture
  • Resize, rotate and flip your capture
  • Smart select and move of captured elements
  • Grab color information from the page
  • Quick launch six Aviary design tools including image editor, markup editor, vector editor, color palette editor, effects editor & audio editor

2. Chrome SEO

Chrome SEO provides easy access to search engine optimization tools. These tools help you with daily SEO tasks like competitive analysis, keyword research, backlink checks, page rank checks.

3. Chrome Sniffer

Chrome Sniffer allows web developers to inspect web framework / CMS and JavaScript library running on a website. The extension displays an icon indicating the detected frameworks. Currently, this extension detects up to 70 popular CMS and JavaScript libraries.

4. Eye Dropper

Eye Dropper allows you to pick color from any web page or from an advanced color picker.

5. Firebug Lite for Google Chrome

Firebug Lite for Google Chrome is not a substitute for Firebug (unfortunately), or for Chrome Developer Tools. Instead, you should use this tool with these other tools. Firebug Lite provides the rich visual representation similar to that of Firebug with HTML elements, DOM elements, and Box Model shading. Firebug Lite also provides some cool features such as inspecting HTML elements with your mouse, and live editing CSS properties.

6. IE Tab

The IE Tab is available through Internet Explorer and lets you display web pages in a Chrome tab. This extension is great for web developers who want to cross browser test with the IE rendering engine. (This is a Windows only extension.)

7. Instant Image Editor

Instant Image Editor lets you right-click any image or element on a web page with a background image while holding down the alt key (ctrl key on Linux). You can edit the image instantly in a new tab using Pixlr, which is a fast, easy-to-use app that runs in the browser. When right-clicking an element that is not an image, Instant Image Editor will also try to determine whether the element has a background image that is editable.

8. Lorem Ipsum Generator

The Lorem Ipsum Generator generates random “Lorem Ipsum” text using a minimalist and attractive design.

9. MeasureIt!

MeasureIt! lets you use a ruler to get the pixel width and height of any elements on a web page.

10. Pendule

Pendule provides extended web developer tools for Chrome. Use this extension with the built-in developer tools, which include view, reload and disable CSS, view JavaScript, forms editing, view, hide and get information about images, color picker, ruler, topographic view, markup validators and more!

11. PHP Console

PHP Console is an extension for Lagger (lightweight and flexible open-source PHP library for errors/exceptions/debugs handling in PHP) that displays PHP errors/debug messages in Google Chrome console and in notification popups.

12. Speed Tracer

Speed Tracer helps you to find and fix performance problems in your web applications. This extension visualizes metrics taken from low-level instrumentation points inside of the browser and analyzes them while your application runs.

This application helps you understand where time is being spent in your application. This includes problems caused by:

  • Javascript parsing and execution
  • Layout
  • CSS style recalculation and selector matching
  • DOM Event handling
  • Network resource loading
  • Timer fires
  • XMLHttpRequest callbacks
  • Painting
  • and more …

13. Web Developer

Web Developer adds a toolbar button to the browser with various web developer tools. This is the official port of the popular Web Developer extension for Firefox.

14. Webpage Screenshot

Webpage Screenshot is a fast and simple extension to capture the whole web page. Even long pages are saved in one image file. This extension lets you save PNG/JPG image of any web page with just one click.

Features include:

  • Has drawing tools: line, ellipse, rectangle, arrow
  • Lets you add text to your screenshots
  • Fast Crop your image to desired dimensions
  • Start Editing even before image is ready
  • Upload and share to Facebook, Twitter, Gmail, MySpace
  • Print: Image Sent directly to printer
  • Save to HD: The only extension that let you save large images to your Hard Drive
  • Can capture local files: Can capture “FILE://”
  • Comes with Color Picker: Remembers the last color you used.
  • Can capture horizontal websites as well

15. Window Resizer

Window Resizer resizes the browser’s window to emulate various resolutions. This extension is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions. The resolutions list is completely customizable (add/delete/re-order).

There are three screen types available:

  • Desktop (standard; resize the entire window to the specified resolution)
  • Laptop/Notebook (same as Desktop, but different icon; makes it easier to scan the resolutions list)
  • Mobile (different than the previous two; this applies the specified dimensions to the viewport, not to the entire window, because mobile browsers usually have no borders)

Your Turn

Do you use any of these extensions? Do you use other extensions for your web design and/or development? Which are your favorites and which do you use most often? Please share in the comments below.

Related posts:

  1. 25 Free SEO Add-ons for Mozilla Firefox
  2. 10 Ways To Increase Traffic By Changing Your Code
  3. A Beginner’s Guide to Web Development


Change Any Web Page’s Design Instantly with Chrome Extension Stylebot

21 Sep

One of our favorite web browsers just got a cool new tool in the form of Stylebot, a new Chrome extension that allows you to access and modify the CSS for any web page from within the browser.

That’s right — users get a completely customized design experience for any page they choose. The changes they make can be saved for later use and synced across multiple devices.

This is great news for you design enthusiasts as well as for end users with specific needs and wants for their browsing experience. For example, the extension makes web pages with small fonts more accessible by allowing users to increase the font size, and it can make browsing the web less commercial by removing ads.

Stylebot generates a sidebar full of basic and advanced CSS options that allow the end user to manipulate how content is displayed. This tool is simple enough to be used by a moderately competent consumer, but it also has options better suited for those with web design skills. Stylebot can be used to change font attributes, remove advertising, move page elements, change colors, write one’s own CSS selectors and quite a bit more.

Googler Rachel Shearer wrote the following today on the company’s blog:

“For example, a Stylebot user with special reading needs might change a webpage by removing images, picking new text and background colors, and even moving blocks of text around. And Stylebot saves the custom style they create, so the next time they access that page the changes will still be there. Even better, they can sync their saved styles across computers so that webpage will always appear with their preferred style.”

Check out this brief demo video to see Stylebot in action:

Stylebot was created as a Google Summer of Code project by Ankit Ahuja, a computer science student in New Delhi, India. Stylebot is open source and forkable; interested parties can check out Ahuja’s source on GitHub. He said he used elements of other open-source projects, such as Aristo and Firebug, in his work.

What do you think of Stylebot so far? Would you use it to prettify the ugliness that is Craigslist, for example, or to simplify content viewing on a news site?

Reviews: Craigslist

More About: accessibility, chrome, chrome extension, Chromium, CSS, design, designers, Google, google chrome, stylebot, web design

For more Dev & Design coverage: