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

September 04 2011

Happy Birthday Google: Making Sense of the Web for 13 Years

What were you up to 13 years ago? Maybe you were perfecting the ideal AIM screen name. Or you might have been surfing the “WestHollywood” neighborhood of GeoCities. Chances are, you had been using Yahoo! or AOL as your primary search engines. But Google’s debut on this day in 1998 would change the World Wide Web forever.

On September 4, 1998, Larry Page and Sergey Brin filed for incorporation as Google Inc. — they had received a $100,000 check from an investor made out to Google, Inc., and needed to incorporate that name so they could legally deposit the check.

Prior to the launch, Page and Brin met at Stanford in 1995, and soon decided to launch a search service called BackRub in January 1996. They soon reevaluated the name (and the creepy logo) in favor of Google, a play on the mathematical figure, “googol,” which represents the number 1 followed by 100 zeroes. The name embodied their mission to create an infinite amount of web resources. And that they did.

Since then, Google has become a household name to billions of people worldwide. You’ll overhear senior citizens command their grandchildren to “google” the price of foot cream. You’ll witness toddlers punching the screen of the latest Android phone. And chances are, you’ve navigated the circles of Google+ (if not, let’s get you an invite already).

SEE ALSO: 10 Fun Facts You Didn’t Know About Google

We’d like to guide you on a trip down Google lane, presenting the key products and acquisitions that were born in the first Google garage office, and innovated in the Googleplex. In the comments below, please share how Google has had an impact on your life, and join us in wishing Google a happy birthday!

1996-1997: BackRub

Google was first launched under the BackRub nomer. Soon after, founders Larry Page and Sergey Brin registered the Google.com domain name in September 1997. The two arrived at the name as a play on the mathematical figure, "googol," which represents the number 1 followed by 100 zeroes. The name embodied their mission to create an infinite amount of web resources.

1998: Google's First Homepage

The original Google homepage prototype debuted in November 1998. Earlier that year Google received a $100,000 check made out to as-yet-unestablished Google Inc. from first investor Andy Bechtolsheim.

In September 2008, the two founders set up shop in Susan Wojcicki‘s garage in Menlo Park, CA, deposited their check and hired their first employee, Craig Silverstein.

1999: The Uncle Sam Homepage

Apart from adding Uncle Sam to its homepage, in 1999 Google outgrew its next office and moved to its first Mountain View, California location. The team announced $25 million in equity funding from Sequoia Capital and Kleiner Perkins in its first press release.

2000: Google Becomes Yahoo's Default Search Provider

Apart from its partnership with Yahoo, in 2000 Google announced that its index reached the 1 billion-URL mark, making it the largest search engine in the world. Google also launched AdWord, a self-service ad program that allowed people to purchase keyword advertising that would appear alongside search results.

2001: Google Image Search

Image search launched in July 2001 with an index of 250 million images. That same year Google acquired Deja Usenet and archived its index into categories that ultimately made up Google Groups.

2002: Google Search Appliance

Early in 2002 Google marketed its first hardware, the Google Search Appliance, a device that plugged into a computer and provided advanced search capabilities for internal documents. In May Google announced Labs, a resource for people interested in trying out beta programs emerging from Google's R&D team. Later Google launched its News tool that provided links from 4,000 sources.

2003: AdSense

Google announced the world's largest content-targeted ad program, later dubbed AdSense after Google acquired Applied Semantics. Earlier in the year Google acquired Pyra Labs, the creator of Blogger.

2004: Gmail

Google launched Gmail on April Fool's Day 2004, but the beta version required an invitation to join. In January Orkut launched as Google's foray into social networking. In August, Google's initial public offering contained 19,605,052 shares of Class A common stock at $85 per share.

2005: Google Maps

Google Maps launched in February 2005, to go live on the first iPhone in 2007. Additionally, code.google.com went live to provide resources for developers, and included all of Google's APIs. The company also acquired Urchin, whose content optimization service helped create Google Analytics, launched later that year. In June Google released Google Earth, a satellite-powered mapping service. In October Reader was unveiled to help organize and consolidate content into a single feed.

2006: YouTube

In a $1.65 billion stock transaction, Google acquired YouTube in October 2006. Google also unveiled Trends, a tool that allows a user to evaluate popular searches over a specific timeframe. Earlier that year Google released Gchat, a Gmail-based instant message service derived from Google Talk. Google Checkout emerged later as a way to pay for online purchases.

2007: Android

In November 2007 Google announced its first mobile venture, Android, which the company called "the first open platform for mobile devices."

2008: Google Chrome

In September 2008 Google introduced Chrome, its open source browser. The surprise was spoiled when the comic book that was meant to help debut Chrome leaked a day ahead of schedule. Later that month T-mobile announced the G1, Google's first Android-powered mobile device. That year Google also added Google Suggest capabilities and site search.

2009: Google Wave

To much anticipation, Google announced its venture into real-time communication via the Wave platform. Little more than a year later, however, Wave was no more. That same year Google launched Mac-based photo application Picasa.

2010: Google Apps Marketplace

In 2010 Google launched its Apps Marketplace, an app store that allows third-party developers to sell their creations. That same year Google unveiled Google Buzz, its latest attempt at social sharing that originated in Gmail. The company also released Google TV after teaming up with Intel, Sony and Logitech.

2011: Google+

Google's most talked-about and participatory social platform thus far, Google+ launched in June 2011 with invite-only access. The tech giant also announced its most expensive acquisition to-date when it bought Motorola Mobility for $12.5 billion.

More About: Google, media, Tech

For more Business & Marketing coverage:

July 14 2011

5 Chrome Extensions That Improve Google+

Already using Google+? Follow Mashable News for the latest about the platform’s new features, tips and tricks as well as our top social media and technology updates.

Google+ has launched to great aplomb, but its “project” status means some tools have yet to be developed. While Google works on adding more features, some available Chrome extensions can fill the functionality gap.

Whether you want to get better notifications, enjoy improved sharing options, or scroll through your stream more quickly, there’s an extension available — for free — to help.

Take a look through the gallery for five tried and tested picks that will help you be more productive on Plus. Let us know in the comments about other Chrome Extensions you’ve found useful — they may end up in a future gallery.

1. G+ Count in Title: Add a Notification Count to Your Google+ Tab

A simple but useful option, this extension adds a counter to your Google+ page tab so you can see at a glance how many new posts you have to view.

2. G+ Extended: Add Shortcuts

Simple and very unobtrusive, this extension adds more shortcuts, as well as offering one-press "+1" options, when a post is highlighted you can press "e" to expand all the comments or "s" for quick sharing options.

3. Helper For Google+: Get Desktop Notifications

This extension has tweaked search and also lets you share to Twitter. Helper gives you desktop notifications for new Google+ posts with a little pop-up window or an audio alert option. There's also a "translate" button, which some may find useful.

4. +Comment Toggle: Hide Comments

If your stream is busy, then this extension will save you some precious scrolling time. It automatically hides all comments on a post, reducing the on-screen info to a simple comment tally (which you can choose to expand if you wish.)

5. Extended Share For Google+: Share Plus Posts to Other Networks

This handy extension expands your sharing options. It adds a "Share on..." button that gives you the ability to quickly and easily share a Plus post to Twitter, Facebook or LinkedIn.

More About: chrome, Chrome Extensions, Google, google chrome, Google Lists, Google Plus, Google Plus Lists, List

For more Social Media coverage:

Sponsored post

Soup.io will be discontinued :(

Dear soup.io fans and users,
today, we have to share very sad news. Soup.io will stop working in less than 10 days. :(
It's breaking our heart and we honestly tried whatever we could to keep the platform up and running. But the high costs and low revenue streams made it impossible to continue with it. We invested a lot of personal time and money to operate the platform, but when it's over, it's over.
We are really sorry. Soup.io is part of the internet history and online for one and a half decades.
Here are the hard facts:
- In 10 days the platform will stop working.
- Backup your data in this time
- We will not keep backups nor can we recover your data
July, 20th, 2020 is the due date.
Please, share your thoughts and feelings here.
Your Soup.io TEAM
Reposted bydotmariuszMagoryannerdanelmangoerainbowzombieskilledmyunicorntomashLogHiMakalesorSilentRulebiauekjamaicanbeatlevuneserenitephinangusiastysmoke11Climbingpragne-ataraksjisauerscharfArchimedesgreywolfmodalnaTheCrimsonIdoljormungundmarbearwaco6mieczuuFeindfeuerDagarhenvairashowmetherainbowszpaqusdivihindsightTabslawujcioBateyelynTabslaensommenitaeliblameyouHalobeatzalicexxxmgnsNorkNorkarthiimasadclownwhatssurpriseme

July 04 2011

5 Free Virtual Firework Shows To Celebrate July 4

If your favorite part of July 4 celebrations is the fireworks, then we’ve got a fun gallery for you. We’ve found five tools that offer virtual fireworks you can enjoy right at your desk.

Whether you want to send someone an animated message, play around to create a mesmerizing browser show or add fireworks to your own site, we’ve found web sparklers to suit.

Light the touchpaper, stand at a safe distance and rocket through the gallery. You can find out more about the tools by clicking on the blue title text at the top left of each slide. Let us know which ones you like in the comments below.

1. Enjoy Canvas Fireworks

This hypnotic HTML5 Canvas experiment offers three different shapes of fireworks that you can control with your mouse for a 3D wow experience.

2. Write a Message in Fireworks

This is tons of fun. Compose your own message and see it written across the London skyline in fireworks. You can also share it with an automatically generated tiny URL.

3. Add Fireworks to Your Own Site With Fireworks.js

You can add fireworks to your own site with this nifty Javascript animation experiment. Or if you're just firecracker-curious, you can play around with it on the dev's site.

4. View Augmented Reality Fireworks

Simply print off the marker, fire up your webcam and you can enjoy your very own miniature augmented reality fireworks show.

5. Go Old School With Fireworks Just For You

Dating back to 2002, this particular desktop show is perfect for kids, offering mesmerizing fireworks generated by the click of your mouse.

BONUS: Join the HTML5 Fireworks Festival

If you're handy with HTML5 then join the "Hanabi fireworks festival" by forking the sample code, or creating your own from scratch. The resulting entries will then be revealed as an online spectacular on July 7.

More About: apps, fireworks, HTML5, july 4, List, Lists, software, web apps

For more Dev & Design coverage:

March 10 2011

Firefox 4: What You Need To Know

After no fewer than 10 beta releases, Firefox 4 finally entered the “release candidate” stage Wednesday.

Assuming that no fatal bugs emerge, this version (minus minor bugs) will soon be released as a final product that is up to six times faster than its predecessors, features a new minimalist interface and incorporates long-awaited sync and panorama features.

Whether you decide to download the release version or wait for the final release, here’s a quick overview of the new features to expect.

1. Tabs Are On Top


As with Opera and Chrome, Firefox 4 tabs are placed by default above the search bar instead of below it.

Alex Faaborg, the principal designer on Firefox, created a video to explain the thought behind this decision. The advantages of doing so, he says, are more logical visuals, space efficiency, and accommodation of new features like app tabs and a redesigned notification window that associates the notification with its site’s tab.

2. App Tabs


Mozilla 4 allows you to turn any tab into an “App Tab” by right-clicking on it and selecting “Pin as App Tab.”

These tabs stay put in the upper left-hand corner of the browser even as you scroll through your other tabs, which prevents the web applications you return to frequently from getting lost.

When there’s an update on one of the app tab pages, like a new e-mail, Facebook message or Twitter update, the tab glows — rather classy compared to the bouncing, flashing alternatives.

3. Switch to a Tab Via the Search Bar


Start typing the address of a website that is already open in a tab, and Firefox 4 will suggest an option to switch to that tab, even when it’s in a different open window. If you’re someone who opens more tabs than you can remember, this feature can help prevent repeats.

4. Sync Across Multiple Devices


The ability to sync bookmarks, browsing history, passwords, form fill data, and open tabs across multiple computers and smartphone is built in to Firefox 4.

While similar features have been default in Chrome and Opera for a while, Firefox director of engineering Johnathan Nightingale says that the organization took the time to develop “weapons-grade encryption.”

5. Panorama

Panorama (formerly tab candy) now allows you to overview all of your tabs and organize them into groups using a drag and drop interface.

The feature is accessed through an icon in the upper right-hand corner of the browser that opens to a blank workspace and icons for each of your existing tabs. You can create a new group by dragging two icons near each other, move and resize groups, and close all the tabs in a group with one click.

More About: browser, Firefox, mozilla

For more Tech & Gadgets coverage:

December 27 2010

6 Free Chrome Apps and Extensions for Small Businesses

This post originally appeared on the American Express OPEN Forum, where Mashable regularly contributes articles about leveraging social media and technology in small business.

Google recently launched its Chrome Webstore for dedicated applications and extensions. Although the store is still in its early stages, there is already a wealth of choice for any small business owner.

This post highlights six noteworthy apps and extensions ranging from note-taking to project management. For small businesses with limited budgets, these resources can aid in productivity and time-management and let you concentrate on the more important aspects of your business.

Let us know in the comments below about any additional Chrome apps or extensions you would recommend.

1. Google Shortcuts

This extension brings all the Google services to your browser in a space-saving pop-up next to your address bar. Reach services like Gmail, Google Reader, Google Maps, Google Calendar and many more in just two clicks from your browser. The extension includes more than 140 Google services and websites. Once installed, just open the settings to customize and personalize the extension.

The level of customization is extensive, including sorting and rearranging the order of the buttons, selecting from six different icon sizes (16, 24, 32, 42, 48, and 64 pixels), adding your own custom URL button, integrating the Goo.gl URL shortener and changing the URL and names of services.

The support for Google Apps is what makes this really stand out from the crowd of Google-related extensions. Just scroll to the last section named Custom Domain for Google Apps and type your Google Apps domain name in the place provided. Now select the services of the domain you wish to add as a shortcut.

This is the official port of the well-known Firefox extension called ‘Google Shortcuts.’

2. Scribble

Scribble employs an approach that combines the simplicity and flexibility of text files with the order and control of GTD applications. If you have a habit of saving .txt files to your desktop as reminders, notes, thoughts and random ideas, Scribble is for you. You can now manage all those notes in one place, clutter free. It also works offline, which is invaluable, meaning your notes are stored locally. It has an attractive, simple UI, as well.

Perhaps the neatest feature is the letter-by-letter auto-save — there is no save key — because your note gets saved with every keystroke. Other features include the ability to attach reminders to specific notes; drag, drop and arrange the notes however you want; and store to-do lists, grocery items, phone numbers and e-mail templates.

Scribble can become a lifesaver if you have a habit of opening Notepad or TextEdit to jot down notes and reminders; it even gives a desktop pop-up reminder when something is due.

The developer has sync-to-cloud features and keyboard shortcuts planned for future releases.

3. Vyew

Vyew is a tool that allows you to meet and share information both in real-time and continuously. Upload images, files, videos and more, and Vyew will store the information in one “Room” that anyone can access and contribute to at any time. You can work independently over periods of time or in groups in real-time. All meeting content is auto-saved in real-time with no worry of losing work, even if a connection is lost.

There are several real-world applications for Vyew, including hosting presentations, reviewing documents, drawing and annotating, tutoring and training, desktop sharing and the ability to publish (read-only) versions of your meetings to a website, blog or through e-mail.

The app also includes a free conference call service, which means you can quickly and easily bring all your collaborators and participants together via telephone for live conferences. You can also use VoIP (up to two users) and webcams (up to five users).

4. Todo.ly

Todo.ly is an intuitive and easy-to-use to-do list and task manager to help you stay organized and get things done. Todo.ly was designed to be as simple to use as possible and fit in with your workflow.

It lets you divide your work into projects, which may have sub-projects. A task can also have sub-tasks. Managing “Tasks” and projects is straightforward; using the intuitive drag-and-drop interface, you can simply move your task from one project to another. Tasks will also pop into your “Today” list as due dates approach.

Due dates and filters (Inbox, Today, Next) are supported. The filters are easy to use and have been designed according to the Getting Things Done method. You can right-click tasks to edit them or add new tasks before or after it. The interface has been kept simple and functional and you’ll be up and running quickly. For example, if you want a simple unordered to-do list, you can simply start entering tasks.

While Todo.ly isn’t team-oriented at the moment, it has enough power under the hood and selection of features to be an excellent aid in personal productivity.

5. Write Space

Write Space is a customizable full-screen text editor for Chrome that is designed for distraction-free writing. It works offline, saves data locally and persistently backs up your work as each document is automatically saved with every key-press, so there is no worry of losing work. It allows customization to the font, background, width of the editor window and more. The live document statistics mean there’s no need to dig around menus to find the word count.

The standout feature is the ability to make Chrome go full-screen for a truly distraction-free environment. You can also set it to open in full-screen mode automatically by right-clicking on the application icon and selecting ‘Open full screen.’ You can import plain-text files, though if you already have data saved in Write Space, make sure you back it up before importing.

As Google Chrome does not yet support the HTML5 File Writer API, Write Space does not currently have an automated export function. However, you can export your work manually by copying the text in the browser window to another file or location.

Write Space is open source software, so you are free and encouraged to edit the application as you see fit.

6. Pivotal Tracker

Pivotal Tracker is a simple, story-based project management tool that allows teams to collaborate and react to feedback in real time. It’s based on agile software methods, but can be employed on a wide range of projects. It can be used on anything that you or your team works on that delivers some value, and that is large enough to benefit from being broken down into small, concrete pieces. It’s commonly used for organizing marketing campaigns or for general productivity management.

Everyone shares the same, up-to-the-minute view of what’s going on with the project and what needs to be done next. It lets project owners know exactly where things are without having to ask, and lets the rest of the team spend time on work, rather than on reporting the work.

You can create a Twitter account for your project, and let followers (team members) see project updates as they occur, as well as being kept up-to-date via Campfire, e-mail or web callbacks.

Iterate also provides a way to access Pivotal Tracker from your iPhone, with the same simple, well-designed UI as Pivotal.

Bonus Round

Here is a selection of quick links to six apps and extensions that are also worthy of making it into your Chrome setup:

  1. Scratchpad – A simple note-taking app from Google that allows you to take notes offline and optionally sync to the cloud when you’re online.
  2. Ge.tt – A real-time file-sharing service that allows you to share any number of files, no matter how large, within seconds.
  3. 280 Slides – Create beautiful presentations, access them from anywhere, and share them with the world.
  4. Hootsuite – Publish updates, track activity, and analyze results across multiple social networks including Twitter and Facebook.
  5. LovelyCharts – Online diagram software to create professional-looking flowcharts, sitemaps, organization charts, wireframes and more.
  6. Gpanion – Gpanion is your Google companion and provides a sleek dashboard for working with your Google Apps.

What other noteworthy Google Chrome apps or extensions have you discovered? Be sure to share your picks in the comments below.

More Business Resources from Mashable:

- HOW TO: Land a Job at Microsoft
- 5 Predictions for Small Business in 2011
- 5 Essential Web Apps for the Lean Small Business
- 5 Design Trends That Small Businesses Can Use in 2011
- 23 Free, Web-Based Tools SMBs Are Asking for Now

More About: business, chrome, Chrome App Store, chrome apps, Chrome Extensions, google chrome, List, Lists, small business, web apps

For more Business coverage:

October 14 2010

Top 5 Developer Questions About HTML5 Answered

HTML Questions Image

Paul Gubbay is vice president of engineering for design and web at Adobe. He has spent the past 25 years working in the software industry with a specialized focus on creative and web professional tooling and solutions.

There’s been a lot of talk lately about HTML5 and confusion about what it is, what can be done with it today, the best way to learn it, etc.

With so much hype in the marketplace, I wanted to tackle the questions we hear most from creative professionals who want to take advantage of HTML5 but are unsure about how to get started.

1. What is HTML5?

In its simplest form, HTML5 is the evolution of HTML. Interestingly, it has become a “catch all” term for many technologies that can move the web forward, including CSS3, SVG and Canvas. What it offers most web professionals is a new set of functionality for creating richer interactivity for websites and applications across multiple screens. Due to the adoption of WebKit on mobile devices, HTML5 is gaining a lot of traction around smartphone and tablet development. In its early days, HTML5 will feel incremental in terms of how users can take advantage of it. But as the ecosystem evolves, frameworks and tooling will enable web professionals to create a new world of interesting experiences including applications that are accessible on a variety of devices.

2. Can I Use HTML5 Even if Users Have Outdated Browsers?

Although HTML5 is still in its infancy, there are several ways users can employ new language elements while ensuring that content degrades gracefully on unsupported browsers. There are plenty of articles on the web that discuss these techniques. For example:

  • Developers can work conceptually with new structural elements such as Header or Footer by creating classes with the same name and attaching them to divs within a user’s page.
  • You can take it a step further by using the new HTML5 elements today with a combination of JavaScript and some CSS to ensure compatibility with older browsers.
  • Developers can leverage JavaScript libraries such as Modernizr that take advantage of emerging technologies (HTML5, CSS3) while providing control over older browsers that may not support this functionality.
  • Developers can use HTML5 forms with new Input elements and types to provide richer functionality on modern browsers that support them with no penalty on older browsers where they will degrade gracefully to text inputs.

Of course if you are just targeting mobile browsers, you can take advantage of many more HTML5/CSS3 features. The mobile browsers that are primarily based on WebKit provide a lot more support, although there are still some inconsistencies across different implementations.

3. What Should Designers and Developers Learn First?

Developers should start incrementally by expanding their skills with technologies they already understand. Leveraging new functionality in CSS3 is a great place to begin. I also recommend following blogs to stay on top of what’s going on and keeping an eye on the different JavaScript frameworks that are springing up. There is a lot of innovation happening around mobile frameworks and runtimes right now. Some good resources to watch include:

Developers should also make sure they keep in mind the platforms they are building for, because the gating factor right now is browser support.

4. Am I Behind the Times?

9 Elements HTML5 Canvas

Hype about a particular technology can often lead to designers and developers feeling like they’re behind the curve, but that just isn’t true with HTML5. While there are some really cool examples out there today, in reality it is a much smaller subset of web developers that can create them, and the content works on an even smaller subset of devices.

There are significant hurdles to face when developing for devices, in addition to the typical cross-browser desktop compatibility issues everybody experiences. How do you take advantage of hardware acceleration? How do you take advantage of device APIs (e.g. touch, geolocation, offline cache, etc.)? What do you do when device APIs are not consistently accessible through the browser implementations?

Look for JavaScript frameworks and tools that can abstract across these differences and provide a set of building blocks that work consistently across the devices you are targeting. While there are many exciting capabilities being made available, most users will need to be pragmatic in their approach.

5. Why the Wait?

The gating factors right now for the widespread adoption of HTML5 are the browser vendors and the HTML5/CSS3 specification. Similar to the browser wars in the early days of the web, there is a significant amount of innovation happening within the browsers themselves. WebKit is becoming the predominant browser for mobile devices, but there are multiple implementations. Firefox and Chrome continue to push the boundaries on the desktop, with IE9 now joining the race with deeper support for HTML5/CSS3. While fast innovation is good news for web pros, it also creates inconsistency. This is where the Spec comes into play. The Spec drives the standard that all browsers need to adhere to. However, the Spec will not be ratified for many years.

Most web pros will be well served by standardizing on frameworks and tooling that can help them take advantage of the new functionality while degrading gracefully on the browsers that are still behind. Sites such as HTML5 Readiness can give users insight into what is and isn’t supported across Browsers.

What Is Adobe’s Stance on HTML5?

This is a question we get a lot at Adobe. As the current landscape continues to evolve rapidly, we believe people will benefit from implementing a hybrid strategy where Flash and HTML5 technologies are both utilized depending on the business need. For instance, if you are building an enterprise RIA with a multi-function team that needs a strong development framework, ubiquity across devices, and one vendor behind the technology, then Flash makes a lot of sense. If you are building a dynamic website that targets desktop, tablet and mobile, then HTML5/CSS3 is likely the right technology. In short, there will be places where HTML5 makes the most sense and provides basic interactivity, but there will always be a place for richer interaction and guaranteed consistency, and that’s where Adobe feels that Flash technology excels.


There’s no question that designers and developers should familiarize themselves with HTML5, learn what capabilities are currently supported, and, most importantly, where those capabilities are available based on the audiences they’re trying to target. Users shouldn’t make the mistake of falling in love with a particular site element and charging ahead only to find out that it doesn’t work at all in a browser that matters to their customer.

These are exciting times for designers and developers. We have some great challenges and opportunities in front of us that will have a huge impact on the future of the web. I can’t wait.

More Dev & Design Resources from Mashable:

- 10 Captivating Time-Lapse Design Videos
- A Beginner’s Guide to Integrated Development Environments
- 5 Hot Design Trends for Aspiring Bloggers
- 5 Tips for Developing a Global-Friendly Website
- HOW TO: Customize Your Background for the New Twitter

More About: adobe, Browsers, chrome, css3, Firefox, html, HTML5, IE9, List, Lists, questions, tech, web design, Web Development, web standards

For more Dev & Design coverage:

October 08 2010

5 Tools for Keeping Track of Your Passwords

This post originally appeared on My Life Scoop, where Mashable regularly contributes articles about using social media and technology for a more connected life.

Time and time again, we’re warned of the importance of having strong, secure online passwords. Phishing scams — where legitimate looking e-mails and websites try to trick you into entering in your sensitive login information to a bank site, e-mail host or social network — are bad enough when a scammer is able to compromise your account, but the result can be many times worse if you use that same password for a number of online accounts.

Likewise, when crackers breach servers for various web services and expose the user information to other ne’er-do-wells, your accounts could be at the fate of many shady characters.

That’s why it’s more important than ever to use strong, secure and unique passwords for each of your online accounts. Of course, that sounds great in theory, but the main reason we often reuse the same password or passphrase is because trying to remember 50 different logins, each with various alphanumeric strings, is just not realistic.

Fortunately, there are some great tools and services available to users to not only keep your passwords secure, but to also make them accessible and usable from multiple computers or web browsers. Here are five of my favorites.

1. 1Password

1Password from Agile Web Solutions is my favorite way to manage, create and securely access my passwords from a Mac, iPhone, iPad or Android device. The program is $39.95 (a family license for 5 users is available for $59.95) but you can install it on as many of your own computers as you want. It’s a great way to create and fill-in passwords across the web.

The application has plugins for all the major web browsers — Safari, Firefox and Chrome, and you can also pull up your passwords from the application itself. The app works like this:

When you’re on a website and you create a new account, 1Password will prompt you to save that account to its database. In the future, rather than having to type it in manually or rely on your browser’s built-in manager, you can just use 1Password to automatically fill in your username and password data.

Even better, 1Password includes a truly fantastic password generator that lets you create robust passwords of a length that you choose. You can generate a password for an account and then automatically save it.

1Password saves all of your passwords and login information into its own secure database that is stored on your computer, but where 1Password really shines is with its ability to sync with Dropbox. Dropbox is a free service that lets you keep a cloud copy of anything within the Dropbox folder on your desktop. That folder is then accessible across computers and devices. Any change to that folder is synced across every connected computer. 1Password can use Dropbox to store its secure database, which means that if you use multiple Macs or want to have constant syncing on the iPhone, iPad or Android, you can.

1Password has a beta version of its app available for Windows. Like the Mac app, the Windows version can connect to a Dropbox account and sync its database with other platforms.

1Password can even store other form information like credit cards, address information, server logins for your website and software serial numbers.

2. LastPass

LastPass is a very popular cross-platform password manager that stores all of its data in the cloud. It works on Windows and Mac and in every major web browser. Like 1Password, LastPass can automatically save your logins, help you generate safe and secure passwords and automatically fill in your passwords when you visit a site.

The difference is that instead of storing its database on your computer or in Dropbox, it’s all stored on LastPass’s servers. LastPass actually has a really robust set of security around your data and if its center is compromised, your data still can’t be accessed.

LastPass is free to use but for $12 a year, you can gain access to LastPass’s many mobile apps (including iPhone, BlackBerry and Android) and gain access to priority support. It also means you get to skip any advertisements.

3. KeePass and KeePassX

KeePass and KeePassX (which is KeePass but for Mac or Linux) is a free, open-source password manager. It works very much like 1Password, in that the database is stored on your local computer. Like 1Password, you can use Dropbox to keep KeePass synced across machines and profiles.

KeePass can run off a USB drive, which makes it a great choice for users who frequently work on different machines but don’t want to leave any of their personal data on those machines.

KeePass isn’t as user-friendly as LastPass or 1Password, but its dedicated userbase loves it because it can be extended and used in a variety of ways. Plus, it’s free.

4. RoboForm

RoboForm is very similar to 1Password, but it’s just for Windows users. It works with Internet Explorer, Firefox, Google Chrome and with Safari and Opera via a bookmarklet.

RoboForm also has mobile apps for Android, iPhone, BlackBerry and Symbian. Like KeePass, you can even run it off of a USB drive, which is great for users who want a way to keep their passwords with them and use RoboForm on various computers they use, but don’t want to have to install a program on each of those computers.

You can also use RoboForm with Dropbox, which makes using it across machines that much easier. RoboForm is $29.95 for a single-user/computer license and you can get RoboForm with two computer licenses for $39.95.

5. Firefox Sync

Formerly known as Mozilla Weave, Firefox Sync is a plugin for Firefox 3.5/3.6 that will also be an integrated feature in the upcoming Firefox 4. Firefox Sync is a pretty cool concept and it takes a slightly different approach to password management and syncing from the other tools in this list.

Firefox Sync securely syncs and protects your passwords, bookmarks and browser tabs (you can choose to sync all or none of these items). When you login to another computer with Firefox on it, you can just login to Sync and have access to your existing data and even pull up tabs that are open on your other computer. When you log out, all of that information disappears.

Sync also has iPhone and Android apps so you can bring your tabs over to those mobile devices. The upcoming Firefox Mobile for MeeGo and Android will let you access your passwords securely and remotely as well.

By being built into the browser, Sync is a great way for Firefox users to keep track of their passwords. Because it is part of Firefox, Firefox Sync is really designed for people who use Firefox as their primary web browser. If you use Google Chrome, Internet Explorer or Safari, you’ll want to look at the other options listed above.

Do you use a password manager or syncing tool? Let us know in the comments and also share any of your best password tips.

More Tech Resources from Mashable:

- 7 Questions With AOL Co-Founder Steve Case
- 15 Creative USB Drives for Storing Your Data in Style
- 10 Killer Firefox Tips, Tricks and Shortcuts
- 11 Astounding Sci-Fi Predictions That Came True
- HOW TO: Score a Job in Social Gaming

Image courtesy of Flickr, Erica Swallow

Reviews: 1Password, Android, Chrome, Dropbox, Firefox, Flickr, Google Chrome, Internet Explorer, KeePassX, LastPass, Linux, Opera, Safari, Windows

More About: 1password, Browsers, Dropbox, Firefox, Firefox Sync, KeePass, KeePassX, LastPass, password, password management, password manager, password managers, passwords, RoboForm, secure passwords, security, tech, web apps

For more Tech coverage:

September 29 2010

10 Killer Firefox Tips, Tricks and Shortcuts

FireFox Image

One of the reasons for the popularity of the Firefox browser is the wealth of downloadable add-ons, and the customization options available via the about:config hacks. However, there are some tidy tricks you can employ from within the “as is” browser that can greatly improve your web surfing experience.

These simple but powerful tips and tricks for the open source browser will have you cruising the web faster and smarter in no time.

So, if you’re a Firefox user, check out these 10 features we’ve highlighted and, as always, please do share any other Firefox hints you’ve found useful in the comments.

1. One-Click Bookmarking

Firefox offers a very fast way to add a site to your bookmarks — simply click on the star icon in the browser’s “Location Bar.”

Clicking once will add the page to your “Unsorted Bookmarks” folder while clicking twice will open up a window that will allow you to edit where the bookmark should be saved, its title, and any tags (see #2 below).

2. Tag Your Bookmarks for Quick Access

One way of organizing your bookmarks in Firefox is to tag them with keywords. You can either do this as you save them down, or retrospectively by going to the “Bookmarks” menu, selecting “Organize bookmarks,” finding the bookmark you want to tag, and adding in the keywords.

Once you’ve added a word, such as “news” as you can see in the example above, Firefox will offer this as a tag option in future, meaning you just have to tick the box to add it as a tag to another site.

Once you’ve set up your tags, typing a tag into the Location Bar will bring up all the sites you’ve tagged with that word, offering quick access to sites you visit often.

3. Shrink Your Icons

You can change how Firefox’s toolbar icons are displayed to give you a little more screen space. This is useful when every pixel counts (as on a netbook screen), or simply to achieve a more minimalist look.

Simply go to the “View” menu, select “Toolbars,” hit the “Customize” option and then tick the “Use Small Icons” box.

If you want to lose the icons altogether, you can follow the same steps, but hit the drop-down menu next to “Use Small Icons” and select “Text” for a graphics-free toolbar.

4. Add Icons to the Toolbar

If you carry out the same actions often, such as printing, viewing your history, or managing downloads, there’s a way to add more functionality to your toolbar.

Go to the “View” menu, then “Toolbars,” then the “Customize” option, and you can drag and drop a number of extra icons to the top of your browser for easy access.

5. Change the Default E-mail Setting

When you click on “Send Link” or “mailto:” links in Firefox, the browser will load up your operating system’s default e-mail program (so likely Outlook in Windows or Mail on a Mac). But it’s quite often the case that these aren’t the mail programs you want.

You can stop the annoyance of Firefox loading up a default mail program by changing your preference in settings, and it’s really easy if you use Gmail or Yahoo Mail.

Go to “Tools,” “Options,” “Applications” and scroll down until you see “Mailto” on the left. Now, just hit the drop-down menu and select the e-mail program you’d like to use in the future. The next time you click on a mail link in a webpage, it will load up your preferred e-mail program.

6. Save a Search Shortcut

You can save time on sites you search regularly so that you can quickly start a search process on that site from anywhere on the web. To get this set up, right-click on the site’s search box and select “Add a Keyword for this Search.”

Once you assign a keyword to a site search, you can simply type “keyword + search term” in your Location Bar to search that website. So, for example, typing “Mashable + Social Good” will search Mashable.com for that content, once the keyword is set up. This will save you the extra steps of loading the site, finding the search box and entering the term.

7. Change the Default Font Size

You can ensure you’re never left squinting at tiny text on your monitor with an option that forces sites to display text at a minimum font size.

Although it should be noted that this may cause some sites to display erroneously, if textual clarity is more important to you than web design purity, go ahead and make the changes — your optician may thank you for it!

Go to “Tools,” “Options,” then “Content” and then click on the “Advanced” button next to “Fonts & Colors.” You can then select a minimum font size from the drop down menu. Rest easy knowing that you’ll never be presented with a sea of 6 pt. text again.

8. Learn Some Shortcut Keys

There is a whole load of mouse and keyboard shortcuts in Firefox, but we’ve highlighted the ones we find most useful:

  • Control + Enter — adds .com to the end of text in the Location Bar
  • Control + Shift + T — reopens the last tab you closed
  • Alt + D — highlights the text in the Location Bar
  • Control + Page Up/Down — Moves to previous or next tab
  • / — Quick find

9. Set Up Multiple Homepages

It’s true, you can have more than one website as a homepage. You can configure Firefox to load your webmail, favorite news site and social network of choice as it starts.

To set this up, simply load up the sites you want as your homepages, go to “Options,” then “General,” and then hit the “Use Current Pages” button.

Now, the next time you start Firefox, you’ll be productive from the get-go.

10. Clear a Single Site From Your History

We’ve all done it — typed “Facbook” instead of Facebook. And now the browser loads up the wrong site every time. However, this need not be the case, as Firefox offers a clever way to delete one site from your browsing history rather than forcing you to clear all your recent activity.

To tidy up any typos in your web tracks, go to the “History” menu, click on “Show All History,” and then type the name of the site you want to get rid of in the “Search History” box. When it has loaded, simply right-click on the site and select “Forget About This Site.” Now it’s no longer history — it’s ancient history.

More Firefox Resources from Mashable

- Back to School: 10 Must-Have Firefox Extensions for Students
- 10 Firefox Add-ons to Beautify Your Browser
- 16 Great Music Add-Ons for Firefox
- 40+ Add-Ons for Managing Firefox Tabs
- 20+ Great Twitter Tools for Firefox

Reviews: Facebook, Firefox, Gmail, Mashable, Windows

More About: Browsers, Firefox, how to, how tos, List, Lists, mozilla, productivity, shortcuts, tips, tricks

For more Tech coverage:

September 09 2010

10 Killer Google Chrome Tips, Tricks and Shortcuts

Google Chrome Image

As Google’s Chrome browser celebrates its second anniversary, we thought it appropriate to commemorate the occasion with some handy tips and tricks.

Here are 10 tried and tested hints that will help you to get the most out of Chrome by taking advantage of some of its more functional tools and time-saving setups.

Read through the suggestions below and let us know which ones you’ll be trying out, or any tricks we haven’t included, in the comments box.

1. Open Multiple Pages on Startup

Rather than just one trusty homepage, you can get Chrome to open several pages as it starts up, giving you instant access to whatever sites and services you prefer to start your day with.

It’s easy to setup. Just click on the wrench icon on the top right of your browser window, select “Options” and under the “Basic” tab check the box where it says “on startup… open the following pages.”

If you click “Add” it brings up a list of recently browsed sites to choose from, or you can manually enter a URL in the box at the top.

Now, the next time you fire up your browser, those pages will be automatically loaded in the order in which you entered them, saving you some precious time.

2. Pin Tabs in Place on the Browser Bar

If you are going to be using a site or service a lot in one web session, you can “pin” a tab in Chrome, which will shrink the window down to the size of the favicon, leaving more room for multi-tasking. It also prevents tabs from getting lost on the side of the screen when you have many open at once.

To do this, right-click on the tab you want to pin and hit “Pin tab.” To enlarge the tab, just right-click and hit “Pin tab” again to uncheck the option.

3. Turn Your Favorite Websites into “Desktop Apps”

There’s another option open to you in Chrome if you want fast access to a favorite site — turn the site into what could be loosely described as a desktop app.

To do this, navigate to the site you want to desktop-ize, head over to the wrench icon on the top right of your browser window, select “Tools” and then click on “Create application shortcuts.”

This will then bring up a window that gives you the option to create shortcuts on your desktop, in your start menu, or on the quick launch bar and you can check or un-check the boxes to make your selection.

If you opt for desktop you’ll instantly see an icon for the site appear on your desktop display, as per the grab below:

Now, double-clicking on that icon will load up that website in a separate window with no navigation tabs, giving it the feel of a native desktop application — so it could be great for webmail services.

4. Add a Home Button to the Toolbar

Chrome boasts a minimalist design that many love, but there are some users who just need to have a “home” button to click.

Adding a home button to Chrome is very easy — just click on the wrench icon at the top-right, select “Options,” and under the basic tab you’ll see a check box for “show Home button on the toolbar.” Hit it and you’ll never be homeless again.

5. Carry Out Calculations in the Omnibox

In addition to being a URL bar and a search field, Chrome’s “omnibox” is also a basic calculator. Rather than load up your computer’s calculator, Google or Wolfram Alpha, you can just type your mathematical query into the omnibox and the result will show up where you’d normally see auto-suggestions.

Beyond simple sums, this also works for unit conversions like feet-to-meters, pints-to-liters, etc,.

6. Use AutoFill to Auto-Complete an Address

If you find yourself typing your address time and time again, you might want to consider Chrome’s AutoFill options which can remember it and save you the repeat effort.

To activate the feature, click on the wrench icon, select “Options,” then click on the “Personal Stuff,” then choose “AutoFill options.” By selecting “Add address,” you can enter your details. The next time you are presented with a form, you won’t have to manually type it all in.

You can also choose to add a credit card via AutoFill, but for security reasons we’d advise thinking twice before going down that route.

7. Use Chrome URLs to See History, Bookmarks & Downloads

Chrome can show you some of your browser data and settings via special Chrome URLs, which is a handy way to see the info in your browser — especially as all options are searchable.

You can view your bookmarks, downloads and history by typing “chrome://bookmarks,” “chrome://downloads,” or “chrome://history” in the omnibox.

8. Make a Favicon-Only Bookmarks Bar

There’s yet another cool way to get quick access to your favorite, or most-visited sites in Chrome. Plus, it looks pretty cool.

You can get Chrome to display your bookmarked sites in the toolbar, but by deleting the site’s name from the bookmark settings, the browser will just show the site’s favicons, making for a colorful display along the top of your window.

To get this going, you’ll first need to make sure you have the bookmarks bar displayed. You can check this by clicking the wrench icon, selecting “Tools” and then ticking “Always show bookmarks bar.”

Once you’ve done this, as you add new sites to your bookmarks, be sure to delete the text in the name box, as per the screen shot below, for a favicon-only list.

Alternatively, to edit existing bookmarks so that they display favicon-only, go to “chrome://bookmarks,” right-click on the bookmark, select “Edit” and then delete the text in the name box.

To add the bookmarks to your bookmark bar, simply drag and drop them from your bookmarks list.

9. Sync Your Chrome Settings to Your Google Account

This isn’t the most exciting tip, but it’s darn useful if you work or play across multiple computers. You can sync your Chrome settings to your Google account so all those preferences you’ve taken time to set up, and all the bookmarks you’ve saved along the way, will follow you wherever you go online.

Simply click the wrench icon, go to “Options” and under “Personal Stuff” you can “Set up sync” by signing in to your Google account. This will now mean all your Chrome settings will sync wherever you sign in with your Google account.

10. Play a Trick on Your Chrome-Using Buddies

If you’ve a buddy or a work-mate who uses Chrome, you can use the “developer tools” functionality to play a really clever trick on them, should they step away from their computer at any time.

When on a webpage, right-click and choose “Inspect element.” This will split the screen to view the page code. In this view, you can select and over-type the text that appears on the page and replace it with wording of your own choosing, or even change measurements, colors, etc. if you’ve got a basic grasp of HTML.

Here are a few more familiar webpages we “edited” via the “Inspect element” function. As you can imagine, a sneaky couple of minutes at a friend’s computer as they wander off for a comfort break and you could really have them going.

More Google Chrome Resources from Mashable:

- 7 Cool Chrome Extensions for Twitter
- 8 of the Best Chrome Extensions for Web Designers
- 10 Firefox Extensions Google Chrome Should Have Too
- 6 Killer Google Chrome Extensions for Social Media Addicts

Image courtesy of Deviant Art, domox.

More About: Browsers, chrome, Chromium, Google, google chrome, how to, how tos, List, Lists, shortcuts, tips, tricks

For more Tech coverage:

August 22 2010

7 Cool Chrome Extensions for Twitter

Chrome Twitter Image

We all know Chrome is fast, but can it also be social? We’ve already brought you a list of social media extensions for Google’s Chrome browser, but here we set our sights on extensions designed specifically for Twitter.

We’ve scoured Chrome’s extensions listings and found seven free tools that we think are worth the install for anyone who uses Twitter’s web interface.

From extensions that will help you be more productive, to those that will just let you have more fun, check out our list below and let us know about any Twitter-related Chrome plug-ins that you use in the comments.

1. Twitter Share This Page

If you want a super-quick way of sharing a URL on Twitter, you can’t go wrong with the “Twitter Share This Page” extension.

Once installed, all you have to do — when you are on the page you want to share — is hit the blue “t” icon (which appears on the right-hand side of your browser bar) and the extension will load the relevant URL in your “What’s happening?” Twitter box.

If you want the link shortened, right click on the “t” icon and select the shortening option. All shared links will be pre-shrunk using Bit.ly.

2. Twitter Extender

Khaled Musaied’s “Twitter Extender” also offers tidy Bit.ly URL shortening abilities with an “add URL” option inserted just below the “What’s happening” box.

There are a ton of other enhancements offered by the extension, including old-style retweeting abilities, “reply to all” functionality, quicker direct messaging and the option to load previous tweets if the tweet is a reply.

3. TwitterWatch – Real Time Twitter Update

This tool is very useful for anyone wanting a lightweight way to watch keywords and topics, especially if they are topical memes.

Installing it will place a little blue “t” button on the right-hand side of your browser bar, which, when clicked, lets you manage your keyword phrases.

Once you’ve set up the words you want watched, a tiny number will appear on the “t” letting you know how many mentions the word has racked up. Clicking it again will let you see the mentions in full.

4. Twitter Refresh

You can make Twitter streams — whether they are your homepage stream or a search stream — refresh automatically. Tweets pour fluidly down the page, saving you from having to bother with the “X new tweets” clickable bar.

5. Twitter Creation Date

This is a fun one. Other than pure nosiness, the only real reason we could see for anyone needing this data is journalistic/research purposes. Usefulness aside, this extension will let you see the date that any user joined the micro-blogging service.

6. Twitter Photo Zoom

Ideal for the lazy Twitterer, Twitter Photo Zoom will super-size anyone’s avatar from the home screen or sidebar lists when you run your cursor over the thumbnail.

7. Twitter Symbols

Use this extension if you want to spice up your tweets with unusual symbols like stars, check marks and the like. If they’re supported by the browsers and systems on the reader’s end, they’ll appear in your tweets normally, and you won’t have to memorize any unusual codes or load up a character map outside the browser to make it happen.

More Startup Resources from Mashable:

- 5 Startup Tips From the Father of Gmail and FriendFeed
- 20 of the Best Resources to Get Your Startup Off the Ground
- 6 Ways to Recruit Talent for Startups
- 5 Lessons to Learn from Web Startups
- 40+ Essential Social Business Resource

More About: browser add on, chrome, Chrome Extensions, extensions, google chrome, twitter, twitter apps, twitter tools, web apps

For more Social Media coverage:

April 14 2010

8 of the Best Chrome Extensions for Web Designers

This series is supported by Wix.com, an online design tool that enables you to create limitless amounts of Flash websites, social network layouts, and more. Learn more about Wix here.

Google Chrome’s popularity is rising, but while web designers are likely to be among the earliest adopters of new web technology, they’re not likely to make a dramatic change to their workflow and toolset by switching browsers completely until they’re confident all the features they need are available.

Since Chrome’s extension support launched, the browser has become a much more viable tool for web design and development. Whether it can replace Firefox or not depends on your personal preferences and needs, but you won’t know until you try. That’s why we’ve spoken with experienced web design professionals about Chrome to compile this list of extensions that will help you make the transition.

We’ve included some of the designers’ favorites below, along with their comments on what makes these extensions useful. Do you have some other helpful extensions in mind? Share them with us in the comments.

1. Firebug Lite

This extension was far and away the most frequently recommended during our talks with experienced web designers. POSTSCRIPT5 owner Grace Smith explained it this way: “Firebug Lite allows you to inspect the HTML, CSS and Javascript code live in any page, You’re also able to edit the code and test the new changes immediately.”

Firebug was originally a Firefox extension, and the Chrome version came later. “While not as advanced as its Firefox counterpart, it’s perfectly suited for doing basic inspection of elements,” said Smith.

2. Speed Tracer

Speed Tracer records how much time your web app spends on various tasks and tries to figure out where the bottlenecks in performance are. You can use that information to speed up the user experience. The extension can tell you how much time the browser is spending interpreting JavaScript, for example.

The downside to Speed Tracer is that it’s a little complicated and unwieldy to use. For example, you have to run the browser with the command line flag “–enable-extension-timeline-api.” On that subject, Web Developer Toolbar creator Chris Pederick said, “It’s a little overwhelming at first and I’m still learning how to use it, but with performance continuing to be an important factor in developing sites it’s a great tool.”

3. Pixlr Grabber

You can use this extension to select any area of the visible screen — either a custom space or the entire web page — to export to an image file.You can also share the screenshot to Pixlr imm.i or modify it in Pixlr’s editor. It’s a good tool for analyzing your own work or admiring the work of others.

The features are neat, but the main draw is speed. Design Informer editor Jad Limcaco called it “very useful, especially when you need to screenshot something very quickly.”

4. Eye Dropper

With EyeDropper, you can identify any color on a website you’re viewing. It comes with a color picker tool that will tell you the pixel’s HTML color code and RGB levels. Once you’ve picked a color you’ll also see where it belongs on the included color wheel.

Grace Smith describes this one as “a simple color picker which allows you to select any area on a web page to see what color is being used.” The boon for your workflow: “It can certainly save some of those regular trips to Photoshop!”

5. Picnik

Picnik could be described as an alternative to Pixlr Grabber since it helps you capture images from a website and edit them on the fly, but it’s different enough that it merits a separate mention. Picnik doesn’t just make an image from a defined space on the web page; it lets you isolate and edit any existing image on the page. The editing tools are easy to use, but they’re obviously not as powerful as something like Photoshop.

C3M Digital President Chris Olbekson advocated Picnik to us. “I used Picnic for Chrome to capture and edit images in the browser,” he said. “I also use it for taking screen shots of web pages I am designing to keep track of revisions for my clients.”

Picnik was recently acquired by Google.

6. Web Developer Toolbar

Web Developer Toolbar was originally a popular Firefox extension, but it’s available for Chrome now, too. It does a myriad of things with CSS, HTML, forms, and images. You just click a button in the top-right corner of the browser to view all the options. Consider it a jack of all trades extension; you can view CSS or disable CSS styles, resize things and more.

Chris Pederick created Web Developer Toolbar for Firefox, and he’s working on the Chrome version now. “It’s still in the early stages of development, but it’s a good start to move some of the features from the Firefox version of the plugin over to Chrome,” he admitted. “I’m working on the next release right now in fact which will include the ‘Edit CSS’ functionality.”

7. Lorem Ipsum Generator

Use this extension to create random, dummy text on the fly so you can fill out your designs and get a sense for the aesthetics when no copy has been written for the site yet. It just takes a couple clicks, and it’s not complicated at all. Grace Smith called the Lorem Ipsum Generator “a web designer’s favorite filler.” She also said that “it’s uncomplicated, minimalist and isn’t memory hungry.”

8. Pendule

Pendule is a pop-up control panel loaded with tasks helpful to designers. Like the Web Developer Toolbar, it can serve as a catch-all extension for web designers. Jad Limcaco called this one “a very powerful tool” that “lets you do a myriad of things.” A few of its notable features: a pixel ruler, an eye dropper, a color picker, and several script validators. You can also use it to reload or disable CSS, view JavaScript and hide images.

Series supported by Wix.com

Wix.com offers you a simple, powerful, drag & drop editing platform to create stunning Flash websites, social network layouts, and more, for free. You can choose from 100’s of high quality, professionally designed templates that are completely unique and customizable. Or, create your own design from scratch. Wix even provides a platform in which graphic designers can create multiple web products for their clientele and store them all in one place.

Upload image files, videos and mp3’s. Add Twitter, Facebook, and blog links with ease. Use Wix domains or connect your own. The options are practically limitless. With added e-commerce features, search engine visibility and other professional tools, Wix is the ultimate solution for creating and publishing spectacular web content for free.Start designing!

For more technology coverage, follow Mashable Tech on Twitter or become a fan on Facebook

Reviews: Chrome, Facebook, Firefox, Pixlr, Twitter, picnik

Tags: browser, chrome, extensions, google chrome, web design, web designer series, Web Development

March 03 2010

10 Popular Firefox Add-ons for Web Developers

This series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace’s hosting solutions here.

We searched forums, blogs, and Twitter to find out which Firefox add-ons are most popular with web developers, and we came up with this top 10 list.

Every plug-in on the list offers outstanding utility to developers who install them in their browsers. In fact, some of them are even considered indispensable. And they’re all available as free downloads for Firefox, right now.

If you know any other developer staples that didn’t make our top 10, be sure to share them with us and our other readers in the comments. And if you’re more into Google Chrome, be sure to check out our list of 10 essential Chrome extensions for developers.

1. Firebug

With Firebug, you can edit the CSS, HTML, and JavaScript on any web page live without navigating to a different application. Changes can be made and previewed in real-time. The add-on also comes with network activity analysis tools and a JavaScript performance profiler. Like the Firefox browser itself, Firebug can be extended with plug-ins that add new features.

2. Web Developer

The Web Developer add-on is the most powerful and dynamic extension in this list; it adds a toolbar that lets you do numerous useful things.

You can disable Java, disable or view cookies, disable CSS, view styles, see detailed information on forms, disable images, find broken images, view JavaScript, display all kinds of behind-the-scenes information, edit HTML, show hidden elements, resize the window to a specified resolution, validate code and much more.

3. ColorZilla

ColorZilla is a color picker that lives down in your browser’s status bar. Just click the ColorZilla button and move the cursor over the color you want to find out about; you’ll be given a reading that includes the color’s RGB values and the hexadecimal code you need to duplicate the color on your own site. ColorZilla also includes a color wheel, a page zoomer and a measuring tool.

4. HTML Validator

HTML Validator appears as an icon in the status bar, and displays the number of HTML errors Firefox encountered when opening up a web page. You can then dive into the HTML code to investigate what caused the errors.

Be warned that when you navigate to the Firefox add-on page for HTML Validator, you’ll be told that the add-on isn’t available for download for your operating system if you’re a Mac or Linux user. Take a quick trip to the developer’s website and you’ll find versions for several platforms, though.

5. FireFTP

FireFTP is an adequately featured FTP (File Transfer Protocol) client that runs inside Firefox. When you execute it, it appears as an extra window just like Firefox’s bookmark or download managers. Features aren’t just limited to the basics; you can perform integrity checks or searches, sync directories while navigating, compare directories and so on. This add-on should meet the needs of the majority of FTP users.

6. IE Tab

Microsoft’s Internet Explorer web browser is barely used by web developers, but it’s the most popular browser in the world at large. With IE Tab you can open any website in a tab that’s actually running IE instead of Firefox. That way, you can more easily make sure your website runs correctly for millions of people who aren’t using Firefox.

Note that IE Tab is not available for Mac or Linux, since you need to have IE installed for it to work and there are not any currently supported versions of IE for non-Windows operating systems.

7. MeasureIt

With MeasureIt, you can draw a rectangular ruler anywhere on the website to get the measurements (height and width) in pixels of any element or space. Similar functionality is offered by ColorZilla, so running both add-ons at the same time would be redundant, but this plug-in is nevertheless hugely popular.

8. Greasemonkey

Greasemonkey allows more advanced customization of your browser by executing custom JavaScript scripts that change the way websites are displayed. Hundreds of scripts are available, and many of them are tailored to specific websites. For example, we’ve covered the Facebook Friends Checker script in the past; it monitors your friends list when you’re logged in to Facebook and notifies you when one has been removed.

9. View Source Chart

When you look at the source for a web page using Firefox’s normal tools, you’re given a massive block of barely-organized text; it’s not very easy to scan and look for something specific. View Source Chart displays a web page’s source code in a set of smartly divided, colored partitions. It visually represents tag boundaries and DOM structure so you can navigate efficiently without getting lost in the noise.

10. Aardvark

Use Aardvark to select elements on a website and perform any one of a broad selection of functions on them. You just click on an element and hit one of several keyboard shortcuts. Possibilities include hitting R to remove the element, W to widen it, I to isolate it or V to view the element’s source. Hitting H for “help” brings up a list of all 14 shortcuts.

Series supported by Rackspace

Rackspace is the better way to do hosting. No more worrying about web hosting uptime. No more spending your time, energy and resources trying to stay on top of things like patching, updating, monitoring, backing up data and the like. Learn why.

Tags: add-ons, developers, extensions, Firefox, plugins, software, Web Development

February 24 2010

10 Essential Chrome Extensions for Web Developers

This series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace’s hosting solutions here.

As a web developer, you’re probably among the earliest adopters of new browser technologies. Google’s relatively new Chrome browser is one of those products that developers jumped all over as soon as it became available, but its initial lack of extensions was a dealbreaker for many.

Now extensions are supported in Chrome and some of the tools you’re accustomed to using in Firefox have become available, plus a few unique to Chrome. We’ve compiled a list of ten of the most useful Chrome extensions for web developers right here; if you use these extensions, you might even be able to make Chrome your main workhorse. Maybe!

Look at the list and give it a try — and if there are any great ones that we missed, be sure and share them with us and the other readers in the comments.

1. Firebug Lite

Arguably the most popular Firefox extension for web developers, Firebug lets you look at and edit the HTML, CSS and JavaScript of any page on the fly without leaving your browser. Firebug Lite is a scaled-down version of Firebug made for Chrome. You can inspect a page for errors then quickly edit to fix them.

Though Firebug Lite doesn’t have all the same features as Firebug, it has most of the essentials, and there’s a console interface for power users.

2. IE Tab

Microsoft’s Internet Explorer web browser is not at all popular with web developers, but it’s by far the most popular browser for the general population. With IE Tab you can open any website in a tab that’s actually running Internet Explorer instead of Chrome. You can make sure your website runs correctly for those millions of people who aren’t using Firefox, Safari, Chrome, or Opera.

3. Eye Dropper

With EyeDropper, you can find useful information on any color on a website you’re viewing in Chrome. Click the extension button and a color wheel interface drops down. From there, you can click the color picker button, then click anywhere on the site to see where the color for that pixel falls in the wheel, what its RGB levels are, and what its HTML color code is.

4. Chrome SEO

Tapping the Chrome SEO button after the extension has been installed will give you website information that’s important for search engine optimization. You can check backlinks, traffic measures like the Alexa Rank and Google PageRank, popularity on social bookmarking sites like Delicious, and more.

5. Lorem Ipsum Generator

The Lorem Ipsum Generator extension will generate filler text for your websites so you can make sure your formatting works well without wasting time typing several paragraphs of text. This extension is lightweight and minimalistic, so it’s easy to use and it won’t take up a lot of memory. That means it’s easy to pop in and out of as needed.

6. Resolution Test

Resolution Test’s purpose is right there in the name — it re-sizes the browser window to show what your website will look like at various popular screen resolutions. As a web developer, you probably have a very high-resolution display. Good for you! But most of the visitors to your site don’t; this extension will help you make sure the site’s formatting looks ok to them.

7. Speed Tracer

Speed Tracer uses the browser’s built-in metrics tools to record how much time your web application is spending on various tasks so you can find out what the hang-up is if your site is running slowly. It can tell you how much time the browser is spending interpreting layout, Javascript, and other details.

The only downside to this useful tool is that for it to work, you have to run the browser with the command line flag “–enable-extension-timeline-api.” But if you’re a developer, that’s probably not a big issue, right?

8. MeasureIt!

MeasureIt! is pretty straightforward — it gives you the dimensions (pixel width and height) of any element present in a website you’re looking at. Like a lot of the other extensions on this list, it was previously available for Firefox.

9. Pendule

Pendule pops up an easy-to-use, well-laid-out control panel full of miscellaneous tasks helpful to developers. Examples include reloading or disabling CSS, viewing JavaScript scripts, hiding images, a color picker, a display ruler, viewing source, and several script validators. It works well as your basic, catch-all web developer’s extension.

10. BuiltWith

BuiltWith gives you a profile of the website you’re hanging out at, including a list of all the technologies it can find there. It will tell you what widgets the site is using, which analytics tracker the webmaster is using, which frameworks are present, which advertising platforms are in use, and so on.

Series supported by Rackspace

Rackspace is the better way to do hosting. No more worrying about web hosting uptime. No more spending your time, energy and resources trying to stay on top of things like patching, updating, monitoring, backing up data and the like. Learn why.

Tags: development, extensions, Google, google chrome, rackspace, web development series

November 28 2009

10 Firefox Extensions Google Chrome Should Have Too

Extensions are coming to Google Chrome in the near future. The current developer build supports them, and there’s a lot to be excited about in the implementation -, you don’t have to restart the browser to use an extension you’ve just installed like you do in Firefox, for example.

On the other hand, the group of brave folks using the developer build don’t have nearly as many extensions to pick from yet. Firefox has the best lineup in the browser biz, so let’s play a wishing game; here are some Firefox extensions we’d love to see pop up in Chrome’s gallery, too. Some of our favorites are already in the works, but we haven’t yet heard a peep about any of the ones on this list.

If you’ve already thought of at least one plugin without which you just can’t make the switch from Firefox to Chrome, feel free to add to our list in the comments.

1. Tree Style Tabs


The proponents of Tree Style Tabs are not the majority, but they make two excellent points. Their extension of choice sorts tabs vertically along the left side of the website you’re viewing instead of at the top of the browser. This makes more efficient use of screen real estate on widescreen displays — which means most displays nowadays.

Even more notably, Tree Style Tabs displays your tabs in a tree (Surprise!), with each tab appearing one level beneath the tab from which you opened it. If you have 50 tabs going, that visual certainly makes them easier to manage.

2. IE Tab

There are some web applications that still only work properly and with all features intact in Internet Explorer — Microsoft Sharepoint, for example. Firefox’s IE Tab extension opens a native IE tab within the Firefox interface. It looks like any other Firefox tab for the most part, but under the hood it’s all IE. This feature is supported in the spinoff browser ChromePlus, but the original still lacks it. The extension is also great for developers who want to test sites cross browser without actually having to open two separate browsers.

Hey, while you’re at it, can we have a Firefox Tab too?

3. TwitterBar


It’s neat that Chrome will do Google searches from its address bar, but with Firefox’s TwitterBar you can type and send tweets there too. Jumping over to TweetDeck or your Twitter.com tab would use up two or three more clicks or key presses. You’ll hear no complaints here if you accidentally tweet “http://www.mashable.com” but be warned that it’s a possibility with this extension installed.

4. ScribeFire

You can use ScribeFire to write blog posts and publish them to WordPress, Movable Type, and a number of other platforms without browsing away from the site you’re blogging about. It pops up at the bottom of your Firefox window, and you can drag items from the site in front of you to the body of your post.

Chrome’s speed and stability make it attractive to bloggers, so ScribeFire or something like it would be right at home.

5. StumbleUpon


Delicious was among the first extensions to make its way to Chrome, and we like it, but we’re still hoping for an easy StumbleUpon solution to add to our social bookmarking options. Admittedly, there is a functional web-based workaround out there for Chrome, but it demands some URL tweaking, so it doesn’t match the Firefox extension’s ease of use by a longshot. That’s why we want a legit Chrome extension.

6. FaviconizeTab

This extension adds an option to reduce tabs to the size of a favicon (the tiny website icons seen in the address bar), removing the accompanying title text. It’s useful in the eternal battle to keep as many tabs visible as possible. You probably don’t need all that text; for example, Twitter and Facebook tabs should be recognizable by their iconic (pun only sort of intended) lower-case “t” and “f” logos, respectively. Chrome’s tabs are already more conservative with pixels than Firefox’s tabs are, but every little bit helps.

7. AutoCopy

AutoCopy sends text to the clipboard as soon as you select it, no keyboard shortcut necessary. You’ll never need to hit Control or Command + C to copy text, and if you have an application like CopyPaste Pro you can recover any clipboard items you might accidentally replace.

Many Linux distributions with out-of-the-now-proverbial-box clipboard history functionality ditched Control + C ages ago, and so have many Firefox users thanks to this extension. Chrome should be next.

8. LeechBlock


Never let it be said that Chrome users are not as productive as Firefox users. LeechBlock helps you manage your time with up to six groups of websites by blocking them when you know you shouldn’t be visiting them. You can limit your time with each group to specific hours of the day — like only being able to visit Facebook after you clock out of work at 5:00 PM — or you can tell the plugin to only let you access certain sites for so many minutes out of each hour.

9. Taboo

The self-described cure for “tabitis,” Taboo adds a button to save tabs for later (scrollbar location, form data, and all) instead of leaving them open to eat up memory and clutter the top of your browser. It also takes a snapshot of each saved tab so you can browse thumbnails when you’re ready to revisit the stuff you didn’t have the time to finish before. The usefulness of this extension is platform-agnostic, so the extension should be too. Let’s hope we see a Chrome clone soon.

10. Stylish


Google has run ads promoting Chrome’s many aesthetic themes, but with Stylish you can re-theme not just your browser but each website you visit.

It’s similar in principle to Greasemonkey; you download geek-made tweaks to the CSS of existing websites, and the plugin interprets those tweaks and displays the sites differently as a result. We’ve already pointed out some of the best examples of what this extension can do for Firefox users, and we’d love to see it on Chrome in the near future.

What other Firefox extensions would you love to see on Chrome? Let us know in the comments.

Reviews: Chrome, Delicious, Facebook, Firefox, Google, Internet Explorer, ScribeFire, StumbleUpon, TweetDeck, Twitter, WordPress

Tags: chrome, extensions, Firefox, List, Lists

November 18 2009

6 Killer Google Chrome Extensions for Social Media Addicts

chrome-puzzlepieceAbout a year ago, Google launched Chrome, their super fast, open source web browser. Since then it has grabbed just over three and a half percent of the world’s web browser market, according to Net Applications. That’s not bad, but still puts Chrome firmly in fourth place behind Internet Explorer, Firefox, and Safari. One of the reasons why Chrome has been stuck in fourth place: extensions — Chrome hasn’t got them.

Or more precisely, Chrome doesn’t have them yet. At least, not officially. If you ask most Firefox fans the main reason they won’t switch to Chrome, a good majority of them will probably cite its lack of extensions. But that might change, because Chrome extensions are coming — perhaps soon. And for users of the developer’s build of Chrome, they’re already here. So for those of you brave enough to use the unstable developers release of Chrome, here are 6 extensions that social media addicts will want to install.

Where to Find Chrome Extensions

chrome-logoChrome only has extensions enabled in the developer release. To get that release, you have to subscribe to the Chrome Dev Channel. Once you’ve downloaded the developer’s version of the browser, you can begin to install extensions.

For now, the best place to find and install extensions is probably from the ChromeExtensions.org directory, which offers one-click installation of extensions from its categorized listing. You can also find extensions via the ChromePlugins.org and GoogleChromePlugins.com forum communities, and via the My Chrome Addons blog.

However, Google has recently dropped hints that an official extensions gallery may be coming soon, which also indicates that support for extensions in the stable release of Chrome might be right around the corner.

Once you’ve installed some extensions, you can manage them by navigating to chrome://extensions in the address bar or clicking on ‘Extensions’ in the tools menu. Chrome extensions are still a very new animal, and Chrome’s developer build changes frequently, so be prepared for the extensions listed below to break on occasion.

6 Must-Have Social Media Extensions

1. Gmail Checker


Staying up-to-date with email is one of the most important tasks for social media fanatics, and Chrome makes that task easier for Gmail users with the Gmail Checker extension. It’s one of Google’s official sample extensions and adds an indicator icon next to the address bar in Chrome that shows you how many unread messages you have in Gmail.

The extension only works if you’re logged into Gmail, but that’s nice because it means you don’t actually have to share your password with any third-party.

2. Chromed Bird


There are a bunch of Twitter extensions for Chrome, but the best one might be Chromed Bird. It’s a fairly polished extension that lets you read and reply to tweets directly from within Chrome. It worked very well in my testing today, though you do have to share your username and password with the app (no OAuth support).

Chromed Bird’s icon changes color when you have new tweets waiting, which is a nice visual cue, but the extension has no support for @reply or DM notifications, even though it has (non-working) tabs in the UI for filtering those types of messages. In all, Chromed Bird is very barebones, but functional as a basic, in-browser Twitter client.

You should also check out Metrist, which is highly rated, but in Chinese (and I couldn’t get it to work properly).

3. Twitter Ticker


If you’re less concerned with tweeting, but would rather just stay up-to-date with tweets in your stream, then Twitter Ticker is a great extension to have. Once installed, the addon will scroll tweets in the bottom status bar of the browser as they happen. Holding your mouse over the scroll will pause it.

On its own, that’s not very impressive, but when used in tandem with Chrome Bird — which, lacks advanced tweet notifications — Twitter Ticker is definitely very useful.

4. Micro Last.fm


Micro Last.fm is a very simple set of controls for Last.fm radio. It certainly lives up to its name by offering a super tiny UI that lives in the bottom status bar in Chrome. One of the nicest things about Micro Last.fm is that it doesn’t need your login credentials — and you don’t even need to be logged into Last.fm for it to work!

The extension functions by opening up Last.fm radio in a new tab in Chrome, and then linking itself to that tab so you can control the radio station.

5. TPGoogleReader


There are a bunch of Google Reader addons for Chrome, but most just display your unread count or allow you to subscribe to feeds in Reader more easily. TPGoogleReader does a lot more than that, however. Made by the same person as Micro Last.fm, it is one of the most complete Google Reader extensions currently available for Chrome.

Perhaps its most compelling feature is that you can set it to automatically open stories in a new tab in Chrome as they come into Google Reader and mark them as read. For heavy RSS readers that might be a nightmare, but for those subscribed in Google Reader to just a handful of feeds, the feature offers a way to get news pushed to you as it happens throughout the day without ever having to actually visit Google.

Also check out Google Reader Checker, which just checks Reader for unread items, but does it in an elegant way.

6. Facebook Notification Checker


Facebook Notification Checker works just like Gmail Checker, but for Facebook. It adds an icon next to the address bar in Chrome that alerts you to new notifications in Facebook. In my testing it was a little finicky and didn’t always catch new notifications, but for avid Facebook users it will nonetheless be useful.

One of the nicest features of Facebook Notification Checker is that it doesn’t require you to give it your username and password — you just need to be logged into Facebook in order for it to work.

What other Google Chrome extensions would you recommend to social media addicts? Let us know in the comments.

Image courtesy of iStockphoto, Mike_Kiev

Reviews: Chrome, Facebook, Firefox, Gmail, Google, Google Chrome, Google Reader, Twitter, iStockphoto

Tags: addons, chrome, extensions, List, Lists

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.
No Soup for you

Don't be the product, buy the product!

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