Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

April 18 2013

17:30

Mozilla Labs TowTruck: Brand-new Real-Time Collaboration Tool Tested


  
towtruck-logo

Mozilla Labs achieves amazing things. And this is more of an under- than an overstatement. The latest sprout from Mozilla's garden, interestingly named TowTruck, makes no exception and promises a lot. TowTruck lets you integrate collaboration features into any website with a mere two lines of code. Once done, people can communicate, collaborate, create together right inside any website. They can even talk to each other via WebRTC. Noupe took a closer look...

September 11 2011

10:00

Personalize Your Browser: How to Create Your Own Firefox Skins

The Internet browser is the user’s vehicle to all online information. Whether we are checking email, managing accounts, facilitating business, or watching movies, without a browser we would be stuck. Most of us do not give the browser the credit it deserves and this is probably because most of us are not really interested in our browser itself; we are instead interested in what our browser provides us.

Firefox brings us the best of what a browser has to offer the user. Here, you will not only find a vehicle for online information, you will also find a vehicle for personal interests. Firefox allows you to enjoy personalized browser themes that are tailored to the individual user. There are a host of things to keep in mind when creating and designing Firefox skins.

Type of Firefox Theme

There are different styles of skins for Firefox ranging from a single, flat image to a robust combination of graphics and content. Your audience’s needs and desires will shape the best path for you to take.

Personas

Pros: Single image that’s easy to create.

Cons:Limited to distribution through GetPersonas.com. Provides simple background image only.

Mozilla defines a Persona as a lightweight theme that changes the look of your browser without changing the navigation buttons, toolbars, and menus.You can also preview a design by hovering over an image and install it in one click without needing to restart.

A Persona is basically a single image 3,000 x 200 pixels under 300K and only available at Mozilla’s GetPersonas.com site. When you go to the site and look at the gallery of Personas, you’ll see the entire image on a page. This is not what your users will experience. You can hover on the “Wear this Persona” button to see how it will look in the browser.

As a designer, you want to recognize that only about a quarter of the image will be seen by most users. The shaded region in the image below shows the area viewed by the majority of users. The “extra” space helps with wide resolution monitors or for the vertical height for users with multiple toolbars.

This is a single-layer flat file, you see a portion of the image and as the browser is resized you see more or less of the of the image.

LadyBug1

LadyBug2

http://www.getpersonas.com/en-US/persona/25991

Enhanced Personas

Pros: Layered graphics and full CSS for a more versatile layout. Galleries can be offered outside of Mozilla’s GetPersonas.com. Once a user has installed Personas Interactive, the preview and ease of install mirrors the regular Personas experience exactly.

Cons: Users have an extra step of installing the Personas Interactive extension for Firefox.http://brandthunder.com/personas

Enhanced Personas allow for the full range of CSS background attributes to be applied to the background, as well as providing more control over color. A backgroundImage attribute is required for an Enhanced Persona. Without it, no other Enhanced Personas attributes are processed.

Enhanced Personas give the designer more control and flexibility over the theme experience. The designer gets to use layers of images that are anchored independently of each other. For the images below, the ladybug is layered on top of the grass. As the browser is resized, the ladybug maintains position in the relative center of the theme.

When working with clients and brands, we find a lot of value by anchoring a logo to the left of the browser, a style element that anchors to the right and a color or texture underlying both that keeps the design seamless as the browser is resized.

LadyBug3

LadyBug4

Browser Theme

Pros: A completely unique experience that can serve a particular audience’s exact needs.

Cons: A great deal of work if you theme each attribute of the theme.

Themes change the full appearance of the browser including navigation buttons, toolbars, and menus. Installing a theme requires you to restart your browser, like with extensions and other add-ons. And as you can expect, something that goes into this level of detail is quite a bit of work. Ever since the release of Firefox 3.6 in January 2010, which built Personas into the browser, the volume of themes created has dropped off dramatically. The capability, however, remains.

Full description of how to create a theme is still available. Mozilla’s own blog offers a good place to start exploring the options.

If you need a fully redesigned experience, this is the way to go. For example, if you want to create a Steampunk browser theme, you’re not going to be able to give every element that style without redesigning each navigation element.The popular Night Theme for Firefox, shown below, exhibits some of these attributes.

NightLaunchTheme

https://addons.mozilla.org/en-US/firefox/addon/nasa-night-launch/

Interactive Browser Theme

Pros:Visual redesign with engagement that increases interaction between a site and its theme users.

Cons:Listing product on Mozilla’s Add-ons site does not fall under their definition of Personas or Themes.

The Interactive Browser Theme is a step beyond an Enhanced Personas by adding content and functionality to the theme experience.This can give the users a more immersive experience related to the theme they’ve installed. It is also far less work than a full theme as it maintains the normal navigation elements of the browser.

The interactive component is also important for many brands seeking more than the brand awareness a theme can offer. The links and content drive up return site visits, purchases and engagement with the social media efforts of a brand. All are contributors to a company’s return of investment for their web investment.

Using a tool like http://bt-engage.com gives designers the ability to add a logo to their design. This is a left-hand graphic that moves the navigation to the right giving an unobstructed view of the logo. Logo integrity is a requirement of some brands and good flexibility to have.

DailyBeastTheme

http://thunderthemes.com/BT_ThemePage.php?themeid=159

Design Requirements

Basic Dimensions

Plan your Firefox theme with a 200 pixel high image. Your audience won’t see all of it, but it will address the majority of Firefox users while serving those with extra toolbars. For reference, users with Firefox versions 3.6 and below will see about 85 pixels by default. Firefox 4.0+ shows 110 pixels.

If you use a single background image, it’s best to follow the recommendation for Personas and make it 3,000 pixels wide. The majority of users still have resolutions from 1024 to 1280 pixels wide, so they’ll only see a portion of the image. Yet, you still need the wider image. With wide screen monitors and resolution improvements, there are also a lot of users that see more than the 1280 pixels.

File Size

Mozilla recommends keeping Personas under 300k and we agree. Like any web content, you want your image to be a light as possible so it pulls up quickly. The detail of the image you choose can affect this. That’s why many of the popular Personas have the graphic emphasis in the upper right of the theme design and fade to a single color.

YazukaPaintTheme

https://www.getpersonas.com/en-US/persona/98983

You can also optimize file size by leveraging the multiple images supported with Enhanced Personas. Split images are less weighty than single images which slow down performance. A great way to get a fully styled background with less file weight is to use screened elements and tiled textures/partial images. Many themes offered by brands will use two anchor images, one on the right and one on the left, with a color or texture connecting the two images.

Below, is the design template Brand Thunder uses for Firefox.We give guidance for using multiple images as well as the interactive capabilities.

BrowserDimensions 

Tips & Tricks

When designing a theme, it is important to know that only certain design elements are going to be visible in the theme. A browser at 1024 pixel resolution will show far less than one expanded to 1920 pixels. In the Daytona International Speedway browser theme shown below, at the 1024 resolution the blue background color is not visible. It’s only when the browser is in extra wide resolutions that you’ll see the color. The key here is to optimize for the smaller resolutions but make sure there’s a seamless transition if a user is at a very wide resolution.

Daytona-Theme

Logo Size and Transparency

Keeping a logo on a transparent background will help ensure integrity with the rest of the design allowing it to meld with the background color or image that rounds out the design. Logos with a box or on a rectangle of color create a hard edge that makes the theme look unfinished.

Logos also work better when they are square shaped. Stay away from rectangles and wide images as the logo placement pushes the browser navigation to the right. Moving the browser navigation can be unsettling to users, so you want to keep this to a minimum. Look at the example of the College Humor theme below.

College Humor’s original browser theme used their wide logo. The most recent theme design for College Humor has a square logo that makes use of the space more wisely. There are less alignment complications throughout the browser.

CollegeHumor-Theme

 Keep Browser Buttons and New Tabs Legible

It’s tempting to build a beautifully designed and intricately detailed browser theme. This can, however, work against you. With all the text and small icons used in a browser, you can create a reading nightmare if your theme is too complex. If you’re going to use a detailed image, keep it to the far right of the browser and move quickly to a softer edge for a better backdrop for text to be read against. The Old Comic theme below is an example of a good concept gone bad in execution.

OldComicTheme

The browser theme will be utilized a great deal by the user and therefore should not be visually overpowering. The design needs to be minimal and clear, yet also bold enough to stand out from other elements within the design. There is obviously going to be a lot going on within the theme (tabs, URL bar, etc.) and the main design elements need to be strong yet subtle. Design should not too visually complicated for the user. Even the Buffalo Bills theme shown below maintains a style and energy, the color and intensity are consistent enough across the theme that it doesn’t interfere with usability.

BuffaloBills-Browser-Theme

http://www.buffalobills.com/fans/bills-browser.html

Build One Now

Browser design is an interesting and challenging endeavor. To get started visit the following sites and see which path you want to explore. The easiest, BT:Engage is a platform that will allow you to drag and drop images and create your own theme in a matter of minutes:

• BT:Engage: Firefox and IE theme creator
• Firefox: How to Create Your Own Persona for Firefox
• Firefox: Create and Host Your Own Personas Gallery with Personas Interactive

Sponsored post
soup-sponsored
04:52

April 01 2011

17:33

Firefox 4: A Developer’s Perspective


Right on the heels of Internet Explorer 9 arrives the much vaunted, latest iteration of Firefox 4. The release has been a success so far, with over 7 million downloads in the first 24 hours and over 40 million till date. Today, I’d like to give you a quick overview of the changes from a developer’s perspective — I’ll be skipping the new UI and the other whizbang features.


More HTML5

Tutorial Image

A new rendering engine, Gecko 2.0, is under Firefox 4′s hood.

A new rendering engine, Gecko 2.0, is under Firefox 4′s hood. For the most part, as expected, it offers great support for standards-oriented web development. Also at play is a brand new HTML5 parser that defines how your HTML code is turned into a web page.

As a result, you get improved performance, from innerHTML calls specially, the ability to include SVG inline in your code and overall stability and responsiveness due the parsing algorithm being run on its own processor.

More improvements from a HTML5 development standpoint are the more mature support provided for HTML5 forms and the Audio API. Support for the newer markup elements and attributes will significantly decrease the JavaScript code you’ll have to write to provide equivalent functionality. Think easier validation — your form elements will require zero JavaScript to glue the validation rules to it.


WebGL

Tutorial Image

WebGL is a standard that is based on OpenGL ES that lets you perform 3D rendering on the web.

WebGL support has been pretty nascent in previous versions of Firefox — only the nightly test builds featured support for the technology. Firefox 4 ships with full support for the platform.

If you’re wondering, WebGL is a standard that is based on OpenGL ES that lets you perform 3D rendering and other assorted manipulation through the canvas element. The API itself is more low level than you’d exect providing you with enormous flexibility and power. If something can be done on a desktop, you can do it on the web too!


Hardware Acceleration

Tutorial Image

We reduce the workload on our general purposes CPUs by letting much more parallel, and capable, GPUs handle specific computations.

Hardware acceleration is offloading tasks that are typically handled by the software to the hardware wherever possible. In our scenario, we reduce the workload on our general purposes CPUs by letting much more parallel, and capable, GPUs handle specific computations, thus eking out better performance. Both the task of rendering the page content and then compositing it are accelerated though different APIs are used on different platforms.

On Windows, Direct2D is used for content acceleration, including canvas manipulations and drawing, while Direct3D is used for compositing acceleration. On OS X, Quartz handles the former while the much more open OpenGL takes care of the latter.


JägerMonkey JavaScript Engine

Tutorial Image

JägerMonkey is an advanced, optimized version of TraceMonkey, the JS engine in Firefox 3.6

In accordance with developer expectations, Firefox boasts a newish JavaScript engine under the hood — JägerMonkey. An enhanced version of TraceMonkey (the JS engine in Firefox 3.6), JägerMonkey adds many more optimizations to the mix resulting in startling improvements in performance.

Newer and cleverer optimizations like a per-method JIT approach performs more aggressive native compilations resulting in performance that’s a lot better than the competition. To give you an example, Firefox scores roughly six times better in the V8 benchmark and thrice as fast in the SunSpider benchmarks compared to Firefox 3.6.

Overall, JägerMonkey has brought back Firefox in the race for supreme JavaScript performance.


CSS Transitions and More

Tutorial Image

Thanks to heskinradiophonic

Firefox finally supports CSS3 transitions and transformations.

One of the notable additions for a front end developer is extensive support for CSS3 transitions. While the other browsers have boasted CSS3 transitions for a long time now, Firefox has been sorely lacking. The latest version provides a nearly complete implementation of the specification.

CSS transitions provide a pure-CSS method to animate changes between CSS properties. Transformations like scaling, rotating and skewing are on tap for you too! You can even use these transformation within transitions to create nifty effects. Remeber those jQuery snippets you used to fade items and colors, in and out? For our intents and purposes, they’re pretty much redundant — a few lines of CSS is all it takes now.

The newer features include:

  • Support for touch properties.
  • Addition of -moz-any to group together structurally relevant selectors.
  • Computed values through -moz-calc allowing you to define values through mathematical expressions.

Even though it has taken the Mozilla team a while, the mere action of added support makes it easier for web developer to embrace these new technologies.


WebM

Tutorial Image

Firefox now ships with WebM support greatly boosting both its ability to consume video content on the web and WebM’s market share.

Even though developer nightly builds have been able to play the format for a couple of months now, this is the first official release to provide support for the format.

If this topic makes your head a little fuzzy, I suggest reading my earlier article on video codecs on the web where you can find further information on this topic. Suffice to say that by adding WebM support, Mozilla has strengthened its standards based idealogy and simplified life for its users in a single move.


IndexedDB

IndexedDB saves data as JSON formatted documents.

IndexedDB is Mozilla taking a radical, more usable route compared to other browsers by opting to go for the NoSQL approach. Remember that most other browsers use the Web SQL API wherein developers write SQL to obtain information stored in SQLite databases.

IndexedDB saves data as JSON formatted documents and lets you access the information it holds through a simpler, non-SQL API. The end result? Much easier syntax and a more standardized API that insulates you from the nuances of the implementation while still providing you with enormous flexibility.


Web Console

Tutorial Image

While it won’t replace Firebug, the new Web Console is incredibly handy.

The new Web Console replaces the Error Console from previous versions. While it won’t replace some of the advanced tools like Firebug, it comes eminently handy when you’re poking through the innards of a site or an application.

The console can be opened with Ctrl+Shift+K [Cmd for the fruity hipsters] and comes bundled with:

  • a command line JavaScript interpreter that lets you execute JavaScript in real time.
  • a logging mechanism that logs CSS and JavaScript errors. Network requests are logged too letting you access information about the request. Headers, responses, everything’s game.
  • an object inspector to examine any JavaScript object that resides in the browser’s memory.

Better Typography

Tutorial Image

Support for OpenType now lets you play around with more advanced settings like kerning.

You can now use OpenType, a open font format, giving you access to a much more varied palette — you’re no longer limited to web safe fonts.

While it may sound boring, support for OpenType ushers in a slew of features. You’re able to modify kerning, ligatures and get automatic fractions among many others.

One more point to make note of is that if your site is non-English, the new Firefox engine renders your content without any hitches or visual hangups. And with the exponential rise in non-English web pages, this features helps both the developers and the end users.


That’s a Wrap

The newest iteration of Firefox is quite the leap over the previous generation with a number of additions and improvements aimed at developers and designers. JavaScript junkies too have been taken care of by the improved performance courtesy of the new engine, better HTML5 and CSS3 support as well as a much more robust set of tools.

So what do you think about Firefox 4? Love it? Hate it? Let us know in the comments and thank you so much for reading!

November 12 2010

20:20

HTML5 forms validation in Firefox 4

Mounir Lamouri looks at native browser-side form validation in Firefox4  – while re-iterating the need for re-validating on the server-side too. The objective of the browser-side form validation is to relieve JavaScript of the need to do a lot of basic form checking. Lanouri writes:

”All new input types introduced with HTML5 forms except search and tel benefit from internal validation.
Firefox 4 is going to support email and url and the validation will check if the value is a valid email or url respectively.”

Also discussed is added pattern matching support and a new pseudo-class that applies on submit controls when a form has an invalid element.

November 11 2010

19:33

Firefox 4 Beta

A new beta for mobile this way comes. Outstanding issues addressed include reduced memory usage, improved text rendering install size reduction on Android.

September 21 2010

12:00

Animating With Firefox’s mozRequestAnimationFrame

Firefox 4 is going to be a very exciting release. Robert O'Callahan details one of the new features, which should help animation, called mozRequestAnimationFrame. First the motivation:

In Firefox 4 we've added support for two major standards for declarative animation --- SVG Animation (aka SMIL) and CSS Transitions. However, I also feel strongly that the Web needs better support for JS-based animations. No matter how rich we make declarative animations, sometimes you'll still need to write JS code to compute ("sample") the state of each animation frame. Furthermore there's a lot of JS animation code already on the Web, and it would be nice to improve its performance and smoothness without requiring authors to rewrite it into a declarative form.

setTimeout and setInterval can only go so far; as Robert describes, we sometimes need something between purely JavaScript-driven animation using setTimeout and having to go full declarative using CSS3 or SMIL. mozRequestAnimationFrame is one potential way to get better synchronization and performance from JavaScript based animation.

Some sample code from Robert using it:

JAVASCRIPT:
var start = window.mozAnimationStartTime;
function step(event) {
   var progress = event.timeStamp - start;
   d.style.left = Math.min(progress/10, 200) + "px";
   if (progress <2000) {
      window.mozRequestAnimationFrame();
   } else {
      window.removeEventListener("MozBeforePaint", step, false);
   }
}
window.addEventListener("MozBeforePaint", step, false);
window.mozRequestAnimationFrame();
 

It's not very different from the usual setTimeout/Date.now() implementation. We use window.mozAnimationStartTime and event.timeStamp instead of calling Date.now(). We call window.mozRequestAnimationFrame() instead of setTimeout().

Note that you will generally get about 50 frames per second using mozRequestAnimationFrame. As Robert describes in another blog post, this is a feature not a bug:

On modern systems an application usually cannot get more than 50-60 frames per second onto the screen...So even if an application updates its window 100 times a second, the user won't be able to see more than about half of those updates...firing a MozBeforePaint event more than about 50 times a second is going to achieve nothing other than wasting CPU (i.e., power). So we don't. Apart from saving power, reducing animation CPU usage helps overall performance because we can use the free time to perform garbage collection or other house-cleaning tasks, reducing the incidence or length of frame skips.

I hope that other browsers pick up this feature.

July 01 2010

15:26

Firefox 4 with lots of speed improvements and inline SVG

Mozilla went to London, England yesterday night to give a workshop about Mozilla Add-Ons and show some of the cool new stuff coming in Firefox 4.

Probably the most impressive thing (next to the new Add-Ons Builder based on Bespin) was the upcoming Features of Firefox 4:

  • HTML5 Video display
  • Painting with Canvas
  • Image manipulation with Canvas – pixel testing, face detection with opencivitas
  • Green screen technologies in images and video by detecting pixel colours.
  • HTML5 embedded inside SVG (yes!)
  • SVG as an IMG
  • SVG as a CSS background
  • SVG filter/mask/clip
  • SVG animations
  • Inline SVG inside HTML5
  • CSS3 (selectors, @font-face, 2D Transforms, Transitions, Shadow, Gradients ,calculations – calc(2em-10px) )
  • APIs: Geolocation, Offline (IndexDB, localStorage, AppCache, FileAPI – binary content of a file input, file drag and drop, web workers, websockets)
  • Websockets controller running the presentation from the mobile.
  • WebGL

They proved some of the points with demos:

CSS3 filters and SVG masking on HTML5 Video:

Highly interactive video interface with SVG masking and transitions:

WebGL in Firefox 4 and on Android:

After this, Tristan Nitot covered some of the other features of Firefox 4, especially the upcoming speed improvements:

As to upcoming features to the core of Firefox, we heard about:

  • TraceMonkey (a new Javascript engine)
  • Lazy Frame Construction
  • Reducing I/O from the main thread
  • Improved startup Time
  • Hardware accelleration
  • GPU text/graphics/video rendering
  • Using GPU for text rendering
  • JavaScript JIT (JaegerMonkey)
  • HTML5 parser running own thread
  • slicker interface
  • no more modal dialogs
  • no startup interuptions
  • updates in the background

For an in-depth report on all the things shown, check out this live blog post.

May 11 2010

15:06

Firefox 4: HTML5 and Native JSON Store

Mike Beltzner, Director of Firefox and all-round top chap, gave an open presentation on what is coming in Firefox 4:

The full video is also available which goes into detail on the main themes of the next release of Firefox (3.7 is dead, long live 4!)

  • Fast: making Firefox super-duper fast
  • Powerful: enabling new open, standard Web technologies (HTML5 and beyond!),
  • Empowering: putting users in full control of their browser, data, and Web experience.

What do developers get?

  • Bidirectionally connected apps (Web Sockets)
  • Better Ajax-y interactions (PushState)
  • New interactions (gesture + multi-touch)
  • Easier layout and styling (CSS3)
  • HTML5 Parser
  • Content creation (contentEditable, HTML5 forms)
  • Structured data storage (IndexedDB)

You would have guessed at most of these, but maybe not the WebSimpleDB/IndexedDB one. If a project has "simple" in the name, it normally isn't.... just like when a project has "open" in the name. It is a strange name since we have simple storage through localStorage and friends.

IndexedDB is a better name, and it is interesting stuff. Instead of the SQL databases that require standardizing on a version of SQLite (which is insane) it is JSON native. You work with the data store like this:

and you can go native JSON with the object store:

Take a look at all of the low level cursor code and you may cry a little :)

Back to Firefox 4. The media loves a binary black vs. white view of the world. Flash is Dead. HTML5 is saviour. Chrome is "the winner". IE is over. Regardless of any actual numbers.

Alpha geeks are big on Chrome these days, but Firefox has massive numbers and is still doing well, despite the fact that, in my opinion, better days are to come. Firefox will catch up on the technology side with multi-process and their new JagerMonkey VM work. Performance will become table stakes yet commodity. Where Firefox can shine is where no other browser will go. Mozilla is mission based and cares about users in a more holistic way. This is the empower goal. You should own your data. Your browser should do more for you (not just get out of the way). Firefox is uniquely positioned for this, and you can see the start of the work via the Contacts work from Mike Hansen.

Also note how the team is discussing Firefox 4. Totally in the open. What will Safari 5 have? Chrome 6 has platform status, IE9 is doing a better job.... but no one does it as well as Mozilla IMO.

I look forward to the continued browser competition. Great news for us developers!

April 05 2010

17:57

Firefox Heads Up Display for Developers

Firefox was the Web runtime that gave us the best Web developer tools... some built-in, and then the likes of Firebug. We are seeing more, newer tools coming out of Mozilla. David Dahl, Firefox engineer, is working on a fun new console heads up display:

Create an interactive Console to help web developers understand everything that happens during the creation of a web-page. Console entries will be time-stamped objects representing errors, network traffic, javascript events, DOM/HTML mutation and logging output. The Console will also have an interactive command line for evaluating javascript against the current webpage and an interactive Workspace window for entering and evaluating larger blocks of code.

For web-developers, the Console should include a logging API and a richer interactive environment for executing live javascript against the active webpage.

The Console should fully-replace the existing Error Console window.

firefoxhud

Check out the milestone releases to see some of the fun stuff coming.

  • HTTP traffic observation and logging
  • DOM Mutation event logging
  • W3C Timing Spec

Nice work!

March 31 2010

14:00

71 Professional and Modern Firefox 3.6 Themes

title-professional-modern-firefox-themesI was very happy to see that Mozilla created a new version of Firefox. Firefox 3.6 is without a doubt the most stable version ever made. In this new version many bugs have been corrected and everything is working just perfect. I was thinking about making some customization for my own Firefox so I thought it will be nice to share with you some of the best Firefox Themes I’ve seen.

These themes are great for any type of Firefox user so without a doubt you will find one that’s suitable to your needs. Bring some color into your Firefox Browser and Enjoy!

1. Ambient

ambient-professional-modern-firefox-themes

2. Chromifox Basic

chromifox-basic-professional-modern-firefox-themes

3. Chromifox Extreme

chromifox-extreme-professional-modern-firefox-themes

4. Chromifox Carbon

chromifox-extreme-carbon-professional-modern-firefox-themes

5. Black Stratini

black-stratini-professional-modern-firefox-themes

6. Past Modern

past-modern-professional-modern-firefox-themes

7. SilverMel

silvermel-professional-modern-firefox-themes

8. Aluminium Kai 2

aluminium-kai-2-professional-modern-firefox-themes

9. Anthem

anthem-professional-modern-firefox-themes

10. Camifox

camifox-professional-modern-firefox-themes

11. VFox3

vfox3-professional-modern-firefox-themes

12. Midnight Fox

midnight-fox-professional-modern-firefox-themes

13. Midnight Foxy

midnight-foxy-professional-modern-firefox-themes

14. iTunes Fox

itunes-fox-professional-modern-firefox-themes

15. Glaze Black

glaze-black-professional-modern-firefox-themes

16. Abaca Classic

abaca-classic-professional-modern-firefox-themes

17. Dark Revisited

dark-revisited-professional-modern-firefox-themes

18. Devious Green

devious-green-professional-modern-firefox-themes

19. Bluetacular

bluetacular-professional-modern-firefox-themes

20. Operetta Advance

operetta-advance-professional-modern-firefox-themes

21. iAqua

iaqua-professional-modern-firefox-themes

22. Purity

purity-professional-modern-firefox-themes

23. Phoenity

phoenity-aura-professional-modern-firefox-themes

24. Minty Fresh

minty-fresh-professional-modern-firefox-themes

25. GrApple Yummy

grapple-yummy-professional-modern-firefox-themes

26. SoCool-Calx

socool-calx-professional-modern-firefox-themes

27. W3 V8

w3-v8-professional-modern-firefox-themes

28. Aero Fox XL

aero-fox-xl-professional-modern-firefox-themes

29. Strata40

30. MacOSX Theme

macosx-theme-professional-modern-firefox-themes

31. Nuvola FF

nuvola-ff-professional-modern-firefox-themes

32. Modern Modoki

modern-modoki-professional-modern-firefox-themes

33. NetFox

netfox-professional-modern-firefox-themes

34. Gradient iCool

gradient-icool-professional-modern-firefox-themes

35. Vista AERO

vista-aero-professional-modern-firefox-themes

36. My Fire Fox

myfirefox-professional-modern-firefox-themes

37. Noia

noia-professional-modern-firefox-themes

38. Aeon

aeon-professional-modern-firefox-themes

39. WhiteHart

whitehat-professional-modern-firefox-themes

40. Pimp Zilla

pimpzilla-professional-modern-firefox-themes

41. iPox

ipox-professional-modern-firefox-themes

42. GrayModern

gray-modern-2-professional-modern-firefox-themes

43. Old Factory

old-factory-professional-modern-firefox-themes

44. FoxScape

foxscape-professional-modern-firefox-themes

45. BlackX

blackx-theme-professional-modern-firefox-themes

46. Nasa Night Launch

nasa-night-launch-professional-modern-firefox-themes

47. Sky

sky-theme-professional-modern-firefox-themes

48. OWN

own-theme-professional-modern-firefox-themes

49. MozXP

mozxp-professional-modern-firefox-themes

50. Kempelton

kempelton-professional-modern-firefox-themes

51. Kempelton Large

kempelton-large-professional-modern-firefox-themes

52. Simple Green

simple-green-professional-modern-firefox-themes

53. Phoenity Aura

phoenity-aura-professional-modern-firefox-themes

54. Vista on XP

vista-on-xp-professional-modern-firefox-themes

55. GNome Classic

gnome-classic-professional-modern-firefox-themes

56. Firefox 2 For Firefox 3

firefox-2-for-firefox-3-professional-modern-firefox-themes

57. xBox Fox

xbox-fox-professional-modern-firefox-themes

58. Full Flat

full-flat-professional-modern-firefox-themes

59. Utopia White

utopia-white-professional-modern-firefox-themes

60. Rein

rein-professional-modern-firefox-themes

61. Crystal Fox

crystal-fox-professional-modern-firefox-themes

62. Alienware Invader

alienware-invader-professional-modern-firefox-themes

63. zBlack

zblack-theme-professional-modern-firefox-themes

64. Office Black

office-black-professional-modern-firefox-themes

65. Strata O Various

strata-o-various-professional-modern-firefox-themes

66. AvantGarde Nightlife

avant-garde-nightlife-professional-modern-firefox-themes

67. MonoChrome

monochrome-professional-modern-firefox-themes

68. Arctic Glow

arctic-glow-professional-modern-firefox-themes

69. MonGrel

mongrel-professional-modern-firefox-themes

70. SkyPlus

sky-plus-professional-modern-firefox-themes

71. SlikerFox

slikerfox-professional-modern-firefox-themes
That’s it! Don’t forget to subscribe to our RSS Feed in order to get latest design related stories and resources.

March 20 2010

10:00

13 Must Have Firefox Addons to Boost the Productivity of Bloggers

Firefox is currently the ultimate choice for bloggers because of its awesome collection of addons. These addons provide a lot of flexibility by reducing the necessity of separate tools for different tasks of blogging. This saves a lot of time required in managing different tools and thus increases the overall productivity of Blogger. In this article we have compiled 13 best Firefox addons necessary for Bloggers.

1. ScribeFire

To do Blogging, you need a Blog Editor and ScribeFire in Firefox acts as a nice blogging editor. The user can drag and drop text from web pages, insert images, and post to multiple blogs. Unfortunately, there is a tracking option enabled by default but it can be disabled. This addon can actually make your blog editing platform independent from your operating system.

2. Reminder Fox

Obviously, Bloggers need to sort out their future plans to groom quickly. Reminder Fox lets you do it with ease in Mozilla Firefox. You can manage To Do lists, set Reminders with alerts or alarms right in your Firefox browser conveniently.

3. RSS Ticker

Bloggers need to remain updated with other blogs and sources of information for which the defacto communication standard is RSS. RSS Ticker is a nice add-on which displays the Live Bookmarks in a scrolling fashion across the user’s screen. It means that the user gets updates while browsing and doesn’t need to log in feed reader specifically for accessing RSS feeds.

4. Faster Fox

This addon increases overall productivity of blogger by providing some commonly used tasks in a refined manner. It tweaks wikipedia by showing related articles, auto loads next pages, shows suggestions by Google for a keyword in address bar, enhances Google’s search results and many more. Its my personal favorite and highly recommended for you.

5. Similar Web

If you are facing difficulty in finding a related website to the one you are currently visiting, Similar Web can actually provide many alternatives. In this way, the blogger can easily hit upon many similar resources and refine articles comfortably. It helps a lot and boosts my productivity while researching for an article.

6. Zemanta

You are wondering for addon like “Similar Web” which can find relative content for your blog post then you don’t need to worry, Zemanta is here. It’s a content recommendation engine which helps you in finding and suggesting images, links, articles, and tags correlated to your content from a large number of quality resources like YouTube, Wikipedia, Flickr, Amazon, Google Maps, Facebook, Twitter, and many more. An awesome addon which you should install right now.


7. Readability

Having some difficulty in reading text surrounded by redundant information on a web page. Readability addon will rip off the unnecessary information to make content more visible. In this way, the web pages can be printed with less clutter. This addon also provides auto scrolling feature which can give rest to your fingers and scroll a web page without keyboard and mouse.

8. Gmail Manager

Gmail is currently the mostly used email service in general and this happens to be same in case of bloggers. Also Google provides free email solution in a package named Google Apps for domains. Therefore, an enhanced Gmail notifier is needed and Gmail Manager addon is best for many purposes.

9. Brief

It is another Firefox addon which acts as an alternative for a feed reader. Its features are not less worth than a full feed reader. The feeds are displayed in form of a full web page with a sidebar containing user’s subscriptions. The items can be searched and bookmarked. There is also a notification option which informs whenever there is an update in any feed.

10. Read It Later

If your bookmarks are getting messy with links which you intend to read only once then you should use this extension. The web pages can be marked with single click for latter reading. The items can read offline and it is also possible to synchronize them between multiple devices and workplaces.

11. Copy Plain Text

Bloggers need to copy content from different sources and paste it in their article but in most cases the content has its own formatting. You need to remove this formatting and then match it with your content. Instead of doing this, you can copy text from a web page through this extension which removes all formatting and makes it simple text.

12. US English Dictionary

Nonnative as well native English speakers need a dictionary for easy look up. For a Blogger, it is even more necessary as it can provide more sophisticated alternatives for a given word which can polish Blogger’s write up.

13. Scrapbook Plus

This Firefox addon lets a blogger organize a library of web pages or full websites. The addon supports filters which can be defined to exclude related links and web pages that are not required.

If you are a Blogger and starts utilizing these addons, you will quickly feel an improvement in quality of your work which is obviously the ultimate goal. There may be an addon missing which is your favorite one, do let us know in comments.

March 19 2010

11:16

Jetpack SDK: The reboot of the extensions

The Jetpack project over at Mozilla Labs has been rethinking what it is to extend the browser (as has Chrome Extensions). They both move us to using Web technologies and skills rather than having to digg into XUL or C++. The project has gone through a reboot, and shed the original experiment as Jetpack Prototype.

We now have Jetpack SDK with a brand new architecture.

Two videos really show off the thinking.

Firstly, Atul Varma, tech lead for the project, talks through the update and how you go about using Jetpack SDK. There are some cool new tools revolving around developer ergonomics. These tools help with the packaging of code, developing of code, documenting code, and the management of code. The screencast below shows you how to create a module, using CommonJS at the heart of it.

The next video is from Aza and is typical Aza. It is creative. He walks through the architecture…. why the reboot happened, and what has changed, but instead of a talking head, we get Aza’s hands and pencil drawings. Oh, and he has some glasses on the top right, showing us that he has thought hard about this. :)

Exciting to seeing Jetpack come up for air again, and I can’t wait to see it quickly iterate from here. For more information check out the release notes, the FAQ, and download the SDK and write an extension.

March 07 2010

09:00

9 Handy FireFox Add-ons For Every Day Use

Having worked as a project manager at several companies and having to monitor my own projects there’s a certain list of things I do to check on often (and I still do). Some of the things are SEO related, some are tech tasks, some help to achieve the marketing goals. Some of the things are just general but still it’s very convenient to have the nice set tools to perform the actions that you do on a regular basis. Today I’m going to write about Firefox add-ons that I have added my browser options (yes, I’m an addicted Firefox lover) as a project manager and just a human. All the add-ons listed help me in my daily work and I don’t know how much time I would spend if I had to search from all the information they give to me manually. I decided to divide this list into 2 sections-  the add-ons that I use as a usual human being and the add-ons I find extremely useful for the project management. So here we go.

The Add-ons for regular Internet Surfers

1. The WOT Add-on (Web of trust)



Web of Trust warns you about risky sites that cheat customers, deliver malware or send spam. Never in my life did I have a problem with some serious viruses infecting my computer until about a month ago. Suddenly my browser got frozen and in about 5 minutes all the programs and applications on my computer stopped working while the antivirus software that I had (kasperski) haven’t showed any thread which surprised me tremendously. Having restarted the system I trying at least something I was continuously getting the notice that I have to send a sms to some address and buy the security code that should unblock my computer or something along that line. I had to reinstall the system on my pc but this was not the end yet.

On the next day I found out that I got the virus on my server that have infected all the .html and .php files. I knew from the server logs that the virus got there from my computer and thanks God I had files backed up.
Doing my daily job I visit hundreds of website and I had no idea where I could get such a deadly virus from. That’s when I started thinking that I need in some way to exclude the potentially dangerous websites or at least know what websites have low reputation. Now I’m a happy user of the WOT add-on. It works very simply and graphically clear.


Next to every link and in the browser address line you will see the circle that changes the color from green to red depending on website trustworthiness, green being safe and red very poor. They gather this information from website visitors using the WOT and you can also rank the website for several parameters like trustworthiness, vendor reliability, privacy etc. You can also leave a review if you say got infected from this website and want to warn the rest of the community. In case you get to the dangerous website they will show you a big pop-up with the warning before actually prompting you to the page, where you can choose where you want to see why the page is considered as dangerous, ignore the warning and go to the page or leave the page. If you have children there is also a children control option where the websites will adult content will not be available for browsing. You can get additional info on WOT add-on here.

2. Read It Later Add-on


Read It Later allows you to save pages of interest to read later. It’s very simple but very useful, at least for
me. Browsing tens of interesting pages daily I often don’t have time to read them right away. I used to add the pages I wanted to read to the bookmarks and then was totally forgetting about them or couldn’t find the pages I needed and finally I ended up with the long-long list of bookmarks cluttered with stuff of any kind one can ever imagine. Read it later add-on allows you to add the page to the read list in one click. You can right-click with the mouse anywhere on page you’d like to read later and choose an option “read this page later”.You can also copy the link and add it to the library clicking on small yellow arrow on the top right cornet of the browser.

3. Ad block Plus

A simple nice add-on that blocks add-on the pages. Once installed it will show up in a red hexagon in the top right of the browser window. Nothing special to say about it but it makes my life easier.

4. AddThis

AddThis is a nice add-on making sharing and bookmarking simple. The list of social icons will be added to your
browser toolbar area as well as to right-click mouse options. You just click on the icon, the application connects to your social network account and posts the update there. Here’s the sample how it looks in Twitter:

Though I use AddThis I still have a separate toolbar for stumble as this is one of my favorite websites and I love to have the options to leave a comment, thumb up or just view some cool stuff directly from the toolbar. You can install this add-on here.

Add-ons that I use in my work of a project manager

If you are starting the career of the project manager in some company or just have a start-up project I do recommend you to add this add-ons to the browser as they can not only make your life easier but help you choose the right direction in your marketing campaign as well as provide help to the customers if they run into some problems with the website.

1. Fire FTP



This might be one of the most Firefox add-ons. This plugin allows you to upload files to the server as any other FTP client but you don’t have to install it separately on your computer. The interface is quite intuitive. On the left you will see list of files on your computer and on the right once connected to the server you will see the files on the server. When you start the files upload or download you will see the how the process flows in the bottom area, the connection errors will show up there as well. You can choose the mode for files transfer (binary, ASCII and automatic) and whether to show or not to show the hidden files.

I started using FireFtp after my website files on the server were infected. Before that I was using Total Commander for years which I had to reinstall as well and since I didn’t want to get used to any other similar programs I decided to give a try to Fire FTP.

It’s not perfect and the websites in the other tabs and windows start working slower when FireFtp is working and there are now usual hot keys but it’s not bad at all. I like the error reports and I like when the program says ZZZZ when it’s connected to the server but not command is performed. This can be actually the only reason why I’m using it :)

2. HTTP Fox


HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers. In simple words it shows you how the website interacts with the server and if any errors occur you can get the details of the error without having to check the server log files. I used to work for the company who developed a cool CMS system running on php and flex. Working with the customers, uploading files to their servers and helping them to actually manage the website I was facing some php or flex errors pretty often but the problem was that these were the errors the admin area was showing and I had no idea how to handle that. I’m neither a programmer nor a flash developer and this was a real nightmare for me. One of my friends recommended me to install the HTTP Fox plugin and there hasn’t been a single problem I couldn’t fix on my own.

I guess things would still work for me much easier if I had a better php knowledge. The way it works now- I start HTTP Fox (toogle HTTP Fox as they call it in the application), get the error description, go to google to type it there and then check for solutions how the error can be fixed on the php and flash forums :) With the HTTP Fox add-on you can also check whether some website will save a cookie on your computer as well as get some other useful info.

3. Fire Bug


Fire Bug is a great add-on that will be of a great help not just for a project manager but an advanced develop as well. The number of features is enormous but in my daily work I use just a few. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. I used Firebug multiple times to customize and make small changes on the WordPress themes, to get info on the images and embedded videos and flash files and get info about properties of the page elements. You can call the application from the Tools section of the browser or just right clicking on some elements on the page.

4. SeoQuake SEO extension


SeoQuake extension is a must if you perform any type of work related to SEO, links exchange, online advertising etc. It gives you a profound info about the website, helps you study your competitors and potential partners. At one glance you can see the page PageRank, the number of pages from the domain name indexed in Google, Yahoo and Bing, Alexa Rank, the age of the domain name and the direct link to the whois info. There’s information about internal and external links on the page as well as the information on the keywords density ( you can check what main keywords your competitors use and how often and where on page).

The SeoQuake extension has another cool feature- so called Yahoo links- showing the number (and the list) of external URLs pointing to the page and domain name. Extremely useful when you need to check who’s linking to your competitors.

5. Search Status


That’s a good alternative to SeoQuake but I prefer using them both. By default the Search Status add-on options will show up in the bottom right corner of the browser alone with the traffic stats from Alexa (alexa rank), Compete and mozRank by SeoMoz. Earlier I was using Alexa stats from the SeoQuake and had a separate Compete add-on installed and now I have them all in one place. Some of the other features Search Status add-on include: no follow links analysis, general page’s link report, stats about indexed pages and keywords density, whois info etc. There’s almost the same features as in SeoQuake and some additional ones but they are not convenient to use. I prefer clicking on an icon in the toolbar rather than going to the footer, clicking on the icon and only then getting the list of options available. It would be perfect is someone could combine these two.

That’s it, I’ve listed all the add-ons that I use daily. I’ll be glad to hear what add-ons you use and how they help you in your work. I still have a place for two or three until my browser stops working so do let me know :)

January 20 2010

11:49

Firebug 1.5: New Features and ready for Firefox 3.6

Nice work Firebug team for announcing Firebug 1.5, a great release that fixes many bugs and adds great features:

  • Mike Radcliffe’s Inspector. A key feature, now solid as a rock,
  • Jan ‘Honza’ Odvarko’s expanded and refined Net panel, with accurate timings,
  • Steve Roussey’s reworking of HTML editing and entity support,
  • Kevin Decker’s CSS and Style side panel improvements,
  • Support for dynamic, graphical breakpoints through out Firebug.
  • Tested support for the soon-to-be-released Firefox 3.6

This is a big deal. The release is out *before* Firefox 3.6. No more “oh man we have a new Firefox but it doesn’t work with Firebug argh”. Awesome.

January 14 2010

09:31

Are You Ready To Transfer To Chrome? – 30 Irreplaceable Chrome Extensions

Title-valuable-google-chrome-extensions-web-designI’ve always been using Firefox browser, I mean already for 5–6 years and never thought I would want to choose something else. Firefox is great browser and what makes it so great is all those thousands of plugins you download freely. You can find now plugin for almost everything you could ever think of – there is only one big downside. Firefox is much slower than Chrome and actually eat’s more of computer’s CPU than other browsers.

I have a friend who suggested to try Chrome again and I thought I will give it a try – now I will check how much and how good extensions Chrome has and is it enough to transfer now???

This article will try to answer to question – can designer, web developer, social marketing, SEO person actually transfer to Chrome without any loss of extension features. Are there something similar to FireBug, WebDeveloper, Color Picker, SEO For Firefox, Alexa ranks, debugging tools, which can be replaced to be used daily?

Let’s put Chrome on test – shall we?

If you know a little about Google Chrome read our previous article about this browser features – Google Chrome Review.

Chrome Extensions For Daily Browsing

1. Aviary Screen Capture

Take a screen capture of the visible portion of any web page and it will open in an editor where you can crop it, add text and arrow markup, get color information or move around areas. You can easily save it to your desktop or host it online. The extension also lets you quick launch any of Aviary’s web editor design apps. View extension screenshots by clicking on the thumbnail and using the arrow keys.

Aviary-valuable-google-chrome-extensions-web-design

2. Xmarks Bookmarks Sync

Backup and sync your bookmarks across computers and browsers. Xmarks is also available for Firefox, Safari and IE.

Since I am working on one computer at work and laptop, I love this automatic tool syncing my bookmarks  and allowing me to worry about other things.

Xmarks-valuable-google-chrome-extensions-web-design

3. AdThwart

Block ads on websites. Supports EasyList and many other ad blocker filter lists.

Adthwart-valuable-google-chrome-extensions-web-design

4. Evernote Web Clipper

Evernote’s Web Clipper extension let you save interesting stuff you see on the web.

Evernote-web-clipper-valuable-google-chrome-extensions-web-design

5. LastPass

LastPass is a free online password manager and Form Filler that makes your web browsing easier and more secure.

Last-pass-valuable-google-chrome-extensions-web-design

6. RSS Subscription

This extension auto-detects RSS feeds on the page you are reading and upon finding one will display an RSS icon in the Omnibox, allowing you to click on it to preview the feed content and subscribe. Very handy extension for daily blog browsing.

Rss-subscription-valuable-google-chrome-extensions-web-design

7. Chrome Gestures

Allows you to execute common commands (like page forward/backward, close tab, new tab) by mouse gestures drawn over the current webpage, without reaching for the toolbar or the keyboard.

If you don’t know how mouse gestures work, check out this video.

Gestures-valuable-google-chrome-extensions-web-design

8. Google Similar Pages beta (by Google)

Discover webpages similar to the page you’re currently browsing. I understand this extension works similar like StumbleUpon, but it’s more objective because it’s based on Google search engine and it’s been released by Google – cannot be bad!

Similar-pages-valuable-google-chrome-extensions-web-design

Here I tested it on my own website and got 4 very popular design blogs displayed – first test looks good, I am trying it more definitely.

Similar-1st-valuable-google-chrome-extensions-web-design

9. Feedly

A magazine-like startpage. A fast and stylish way to read and share the content of your favorite sites and services. Provides seamless integration with Google Reader, Twitter, Delicious, YouTube and Amazon.

Feedly-valuable-google-chrome-extensions-web-design

10. Delicious Chrome Extension

Very simple and clean Delicious extension allowing you to simply bookmark page to Delicious. This extension adds just one button, without whole bookmark bar, I loved it!

Delicious-valuable-google-chrome-extensions-web-design

11. Google Quick Scroll

Google Quick Scroll is a browser extension that helps you find what you are searching for faster.  After you click on a Google search result, Quick Scroll may appear on the bottom-right corner of the page, showing one or more bits of text from the page that are relevant to your query. Clicking on the text will take you to that part of the page.

Google-quick-scroll-valuable-google-chrome-extensions-web-design

Chrome Extensions For Social Networking

12. Google Mail Checker

Displays the number of unread messages in your Google Mail inbox. You can also click the button to open your inbox, very handy tool for daily browsing.

Mail-checker-valuable-google-chrome-extensions-web-design

13. Chromed Bird

Chromed Bird is a Twitter extension that allows you to follow your timelines and interact with your Twitter account.

Chromed-bird-valuable-google-chrome-extensions-web-design

14. Facebook for Google Chrome

Extension which lets you read your Facebook news feed and wall. You can also post status updates.

Facebook-valuable-google-chrome-extensions-web-design

15. StumbleUpon Extension

Simple StumbleUpon toolbar for Chrome, you should be very familiar with it if you are stumbling daily.

Stumbeupon-valuable-google-chrome-extensions-web-design

16. goo.gl url shortener

goo.gl url shortener is an extension which allows you to shorten the current website URL with the new Google URL Shortener service http://goo.gl/.

Url-shortener-valuable-google-chrome-extensions-web-design

Chrome Extensions For Web Designers, SEO specialists and Web Developers

17. Lorem Ipsum Generator

Many other extensions of this type – in other browsers – simply complicate this task, using really extensive code, XHR, etc. The main purpose of this one, is to use the less amount of code (and also memory) and help the developer/user to get the job done.

Great and simple classic Lipsum extension, required in every designer’s toolbar.

Lorem-ipsum-valuable-google-chrome-extensions-web-design

18. Firebug Lite

Firebug Lite is a tool for web developers, that allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Firebug-lite-valuable-google-chrome-extensions-web-design

19. META SEO inspector

A Google Chrome extension useful to inspect the meta data found inside web pages, usually not visible while browsing.

Meta-seo-valuable-google-chrome-extensions-web-design

20. Pastebin

Post and coloring source code (C, Python, Ruby, HTML, CSS, …) on a pastebin service. Although useful for the share on the forums, IRC or social networks (like Twitter).

Pastebin-valuable-google-chrome-extensions-web-design


21. Speed Tracer (by Google)

Get insight into the performance of your web applications.

Speed-tracer-valuable-google-chrome-extensions-web-design

22. Resolution Test

An extension for developers to test web pages in different screen resolutions, with an option to define your own resolutions.

Resolution-test-valuable-google-chrome-extensions-web-design

23. Copy Without Formatting

Provides various ways (customizable keyboard shortcut, floating button, or auto-copy) to copy your selection WITHOUT formatting.

Copy-without-format-valuable-google-chrome-extensions-web-design

24. IE Tab

Use Internet Explorer to display web pages in a Chrome tab. Some sites can only be displayed using IE, and with this extension you can now see those sites without leaving Chrome. Great for web developers who want to test the IE rendering engine, users who use sites with ActiveX controls, and users who want to use the explorer view for local files (i.e. file:// URLs).

Ie-tab-valuable-google-chrome-extensions-web-design

25. Chrome SEO

I couldn’t live without great SEO tool, where I could see stats of current page I am visiting, this tool is under development still, but already it’s very lightweighted, fast and working just excellent.

“The Google Chrome SEO extension provides easy access to Search Engine Optimization Tools that can help you with Competitive Analysis, Keyword Research, Backlink Checks and other daily SEO tasks.”

Seo-plugin-valuable-google-chrome-extensions-web-design

26. PageRank

Very simple and light extension which only task is to display pagerank automatically while page loads. For advanced browsing I would use Chrome SEO, but for automatic,fast stats display I like this plugin in my Chrome Extensions as well!

Pagerank-valuable-google-chrome-extensions-web-design

27. SitezMeter

SitezMeter displays traffic charts from Google Trends, Alexa and Compete side by side, as well as ranks. This extension is a handy tool to webmaster, web site owner and SEO/SEM specialists.

Of course, you can go to SitezMeter website directly, but this helps sometimes to do it faster in handy way, anyway – your pick!

Sitezmeter-valuable-google-chrome-extensions-web-design

28. Chrome Flags

Chrome Flags displays a country flag indicating about the physical location of the websites you’re visiting. The extension also provides access to detailed information regarding the website’s servers, owners, traffic and trustworthiness.

Flags-valuable-google-chrome-extensions-web-design

29. Eye Dropper

Eye Dropper and Color Picker extension which allows you to pick color from any webpage or from advanced color picker. You can also check option, that selected color HEX code will be automatically copied to clipboard. This tool is even more handier than ColorPicker on FireFox, because HEX code I needed to copy/paste manually.

Eye-dropper-valuable-google-chrome-extensions-web-design

30. MeasureIt!

Draw out a ruler that will help you get the pixel width and height of any elements on a webpage.

Yes, this popular Firefox extension for designers is available on Chrome as well! Great!

Measure-it-valuable-google-chrome-extensions-web-design

31. Pendule

Measure-it-valuable-google-chrome-extensions-web-design

Built in features for developers

I didn’t know there are already built in features for web developers, but wow, there is – and you don’t need to install anything.

This “Inspect Element” feature works similar like Firebug, but it has different features. Just select and element, text you are interested in, click right mouse button and check inspect element – you will get advanced and precise results right away! Very, very handy!

Read more about built-in features for developers in this google guide.

Built-in-valuable-google-chrome-extensions-web-design

Summary

While testing all those different extensions, what I enjoyed the most – extensions are super easy and extremely fast to install/uninstall/activate. I was used to Firefox restart browser statement all the time, I never really thought about it. With Google Chrome you just click on install button and extension is live and working in seconds without any slow downloading or restarting, lagging. And in the same time, if I decided not to keep that extension, I could easily uninstall it as well without any problems.

I am amazed, it took me so long to try Chrome extensions, because I thought there could be nothing better then Firefox, all those thousands of plugins it has and there no way Chrome could compete with something like that EVER.

Dear readers, I was very wrong – of course, there aren’t so many extensions available just yet, but already all of them works way better, way faster and for now I haven’t got any problems with Chrome at all – just big, positive surprises.

For designers and developers I would suggest to give Chrome a try and check out design related extensions, there are already. They aren’t so much but already very handy and fast to use, which usually wasn’t the case with Firefox however.

Huh..but for daily browsing, tweeting, stumbling, mail management, blog writing ( yes, I mean all bloggers) – I suggest to switch to Chrome today and give it a chance. Try it for 3-4 days, install several your favorite extensions from this list and I am pretty sure, you will not want to go back to Firefox for daily browsing. Just my personal opinion, but I was very strong Firefox lover until yesterday, so there must be something good with this new browser I think :)

Let me know about your pros,cons and experiences with Chrome comparing it to Firefox! Let’s go to browsing!

You can download latest Chrome version here, but you need to install Google chrome BETA version in order to use and try extensions as well – get it here.

Related posts:

  1. Especially for MAC users: Google Chrome Review
  2. Popular Firefox Extensions for SEO masters
  3. 20 Professional Mozilla Firefox 3.5+ Ready Themes
  4. 33 Promising Web Development And Social Network Firefox 3.5 Plugins
  5. The Best 50 Firefox add-ons for Web-developers!

December 12 2009

03:59

Official Firefox Add-On Store?

http://www.theregister.co.uk/2009/12/11/mozilla_add_on_marketplace/

According to The Register, , Mozilla may soon build a marketplace for add-ons:

Mozilla has said it will “probably” open a marketplace for Firefox add-ons sometime next year.

Add-ons product manager Justin Scott (reluctantly) announced the news this morning at an add-on-happy conference in Mozilla’s home town of Mountain View, California. “We’ll probably be doing a marketplace pilot in 2010,” he said.

Scott did not provide details. But earlier in the morning, he did say that Mozilla has no intention of using DRM – not that you would have expected anything else. “I don’t know what we’ll do, but we won’t do DRM,” he said.

It wouldn’t be too surprising to see Moz bolt in a payment model to the existing add-on repo, which already has a review process. Of course, once you start paying developers to build add-ons, many more add-ons will need to be reviewed and Mozilla will have to make tough decisions about to what extent add-ons will be reviewed, if at all, and what kind of charge, if any, will be imposed on add-on providers.

There are already some browser extensions that come with a price tag. This happens in both IE and Safari, both browsers lacking a vibrant extension community; and it also happens with Firefox, where there is a vibrant community of typically free, open-source, extensions.

An add-on marketplace would formalize the payment model and add a big incentive for developers to build seriously useful add-ons, given the possibility of reaching a market in the hundreds of millions. The flipside is that we might no longer see free versions of some of our favorite add-ons. Given its open-source DNA, it might be nice to see a “donate” button beside any of the free offerings in the store.

It’s also interesting to consider how an app store might open up a marketplace for new types of add-ons. For example, if you see the browser as a convenient sandbox to drop small desktop apps into, we could end up with simple games and utilities which might otherwise be released as shareware. Print-on-demand might be another application.

This is all hypothetical for now, but it’s still fun to speculate on what could become of AMO!

December 03 2009

00:32

The Joy of FirePHP: A Crash-Course: New Plus Tutorial

FirePHP is a Firefox plugin and server-side library combination which allows you to send all sorts of juicy info from your web application directly to your browser, much like the console.log() functionality with JavaScript. In this PLUS tutorial and companion screencast, we’ll teach you how to get started from the very beginning! Join TUTS Plus.

Join Tuts Plus

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service called “TUTSPLUS”. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!

  • Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.



Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...