Posts Tagged ‘tools’

10 Web-based Sandbox Tools for Testing Your Code Snippets

07 Oct

Advertise here with BSA

10 Web-based Sandbox Tools for Testing Your Code Snippets

One of the greatest benefits the Internet provides web developers is the ability to share and collaborate with other professionals. When you’ve hit a coding roadblock, you can reach out on your social networks to see if your friends can give you a hand.

When you need to debug, experiment with, and share short code snippets, sandboxing tools are immensely useful.

Why use a web-based sandbox tool instead of a testing server or a local web server stack like XAMMP or WAMP? Not having to set up and save HTML, CSS and JavaScript documents simply to test and debug small code snippets, being able to back up your code snippets remotely, and the capability of quickly linking to and showing off your work (which many of these tools can do) are the major reasons you’d want to use them.

In this article, you’ll find some of the best free code sandboxing tools for testing, debugging and/or sharing your code.

Common Features

Though each tool in the list has its own unique features that might make one of them more appealing than another, you’ll find these general features in most of them:

  • Simple and optimized for snippets: these tools aren’t meant to be full web-based IDEs/source code editors (like the Amy Editor and Kodingen)
  • Web-based: Can run in the browser without having to install any software
  • Free: You can use these tools without paying a cent, and many are even open source
  • Preview pane: Allows you to see how your code will render
  • Runs front-end/client-side code: Can, at the very least, run HTML, CSS and/or JavaScript
  • Saving capabilities: Most tools included allow you to download your code and/or save it on-site
  • Sharing capabilities: Most tools below are designed with sharing and collaboration in mind

Let’s look at some top-notch, free sandboxing tools and, for each of them, we’ll discuss some notably unique features they have, to help you make an informed decision on which one is right for you.

1. Tinkerbin

Tinkerbin sandbox tool

Created by web development agency Sinefunc, Tinkerbin is a relatively new code playground that can run HTML, CSS and JavaScript, as well as CSS and JavaScript abstraction languages/metalanguages like SASS and CoffeeScript. It has keyboard shortcuts that conveniently allow you to navigate efficiently between tabs and code panes. The auto-updating preview pane is a nice feature that displays your work as you’re coding.

2. JS Bin

JS Bin sandbox tool

This open source sandbox tool by developer Remy Sharp is an excellent JavaScript/HTML code-testing tool. It has the option for live/real-time preview and the ability to reference (include) popular open source libraries like jQuery, MooTools, YUI and Modernizr. You can grab JS Bin’s source on GitHub if you’d like to use the tool locally. View documentation, tips and tutorials for this tool on JS Bin’s very own Tumblr blog.

3. JS Fiddle

JS Fiddle sandbox tool

JS Fiddle is a free sandbox tool for HTML, CSS and JS that has a wonderful set of features, like the ability to reference popular JS libraries/frameworks like jQuery, YUI and MooTools and an Ajax-request-testing functionality for simulating asynchronous calls for your code. There’s a command for running JSLint that can check your JavaScript for code quality and the "Tidy Up" code-formatting command for re-indenting your code. The source code of this open source web tool is available on GitHub.

4. CSSDesk

CSSDesk sandbox tool

This online CSS/HTML sandbox tool is a slick way of testing snippets of your style sheet and markup. You have the option of changing the background of the preview pane, which is useful when you have a hard time scoping out the outcome of your CSS/HTML work due to low foreground/background contrast or for seeing how your work looks on different types of backgrounds. You can also maximize the screen viewing size of the preview pane by hiding the HTML and CSS code panes.

5. sandbox tool

A tool created by developer and entrepreneur Dale Harvey, is a simple and clutter-free HTML/JS open source sandbox tool. The code pane flexibly resizes depending on your browser’s viewport, which is especially awesome when you’re using a widescreen monitor. It has three useful templates ("HTML", "JavaScript" and "jQuery") for instantly auto-populating the code pane with default HTML tags.

6. sandbox tool

This sandboxing tool emphasizes on community engagement and collaboration, with features that easily give you the opportunity to share your code on your social networks as well as within the site. It has a slick interface, an auto-updating preview pane and the ability to include open source JS libraries. One unique feature is the "Smart phone preview" command that opens a new browser window with the viewport sized equivalently to mobile phones. This tool requires you to sign up and be logged-in.

7. Tryit Editor Instant

Tryit Editor Instant sandbox tool

This free and no-frills tool allows you to rapidly test your HTML markup. If you don’t need all the features that the above tools offer and simply want one for quickly testing HTML, check this one out. It auto-updates the preview pane whenever you change something in the coding pane. It doesn’t have any saving and collaboration features, so this one is more of a personal tool.

8. PractiCode

PractiCode sandbox tool

The PractiCode online code editor is a supplementary tool for’s educational web design materials. Though it’s meant to be used alongside their guides and tutorials for practicing and testing code snippets while you’re reading their material, it can be used as a sandboxing tool as well. This online tool can render HTML, CSS and VBScript.

9. JavaScript Sandbox

JavaScript Sandbox sandbox

Are you looking for a dead-simple tool for testing your JavaScript code snippets? Look no further than the JavaScript Sandbox, which is a very austere tool when pitted against the other web-based tools already mentioned (such as Tinkerbin and JS Bin). However, to some, its uncomplicated nature may just be the thing that’s most attractive about this tool.

10. Google Code Playground

Google Code Playground sandbox tool

Google offers web developers plenty of free APIs and services for things such as web fonts, Google Analytics and a content distribution network (CDN) for popular, open source JavaScript libraries (such as jQuery). Google Code Playground is a sandbox tool that gives you the ability to test and experiment with Google’s awesome APIs.

Also, see the top Google products and services for people who build webites.

Other Tools to Check Out

  • Pastebin: A simple text-pasting tool that has syntax highlighting. (No live preview though)
  • codepad: A web-based compiler/interpreter for server-side and software programming languages like PHP and C++
  • Real-time HTML Editor: A very simple HTML previewing tool
  • Ideone: An online interpreter/debugging tool that can run over 40 programming languages

Do you have a favorite web-based sandboxing tool not mentioned above? Please share it with us in the comments.

Related Content

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.


Mapping Tools for Developers

09 Sep

This is a great time to be a geodeveloper. There’s more spatial data, geo-processing tools, geo enabled storage and mapping tools than ever.

Let’s start with storage – not too long ago geo developers had two choices, file formats or proprietary object-relational databases. Today there are production ready open source object-relational databases such as PostgreSQL/PostGIS and MySQL; even mobile devices have lightweight databases with spatial capabilities such as SQLite. In addition to traditional object-relational databases, NoSQL databases such as Cassandra, CouchDB, and MongoDB have a spatial capabilities. Big Table clones such as Hbase can also store spatial data and there is ongoing work for developing a spatial index which facilitates spatial queries and operations. Neo4J is a graph database that also handles spatial data. Finally, even full text search engines such as ElasticSearch provide geospatial search capabilities.

Manipulating spatial data and performing analysis used to be dominated by specialized proprietary Geographic Information Systems (GIS) desktop software.  The geospatial software landscape has expanded into many open source desktop products such as QGIS, UDig and GVSig. While desktop products are typically used for spatial analyses or cartographic production, they also provide a quick way to visualize data and results from API queries. Many open source desktop are built on standard geospatial libraries such as JTS, or the Java Topology Suite, and GEOS, the C port of JTS. These spatial libraries also have bindings to popular scripting languages like Python or Ruby, which lets developers process geospatial data in their language of choice. For example, Shapely is a python library and rgeo and GeoRuby are Ruby geospatial libraries.  Software for data extraction, translation and loading (ETL) tasks are also available as open source or as proprietary software. GDAL/OGR is an open source geospatial ETL library and collection of utilities that work with most of the common raster and vector formats. FME (Feature Manipulation Engine) is a commercial product that can perform ETL on most geospatial formats.

Developers want to see their results on a map quickly and there are many services that provide base maps for applications. Google Maps is the most popular map service for mash-ups, but OpenStreet Map and derivative services such as Cloudmade provide maps that use data gathered by volunteers. For some applications, custom base maps are needed, especially when certain features such as roads need to  be de-emphasized. Both Google Maps and Cloudmade support changing map styles; however there are a number of ways to generate custom maps. WMS (or Web Map Service) is a common way to generate custom maps. The main advantage to WMS is that they are interoperable, many mapping clients understand how to talk to WMS to get a map. Their downside is the complexity of configuration, quality of output and lack of scalability for high volume sites. A fast and cartographically attractive alternative is Mapnik, one of the default rendering engines behind OpenStreet Map.  It’s main advantages are speed and high quality output. It has a simpler XML based configuration, but lacks a graphical interface to preview maps. A newer alternative is TileMill which uses CSS to to style maps. TileMill is built on top of node.js (the serverside javascript engine)  and includes a display which lets you see the map while editing styles. Finally, there are geospatial portals that allow you to import your data, perform analysis and, and create maps. ArcGIS Online is a portal based on proprietary ESRI technology that allows users to build mashups in their environments. GeoCommons by GeoIQ provides similar capabilities and offers a wide range of user contributed data.

Maps have evolved from simple mashups of pushpins overlaid on street maps. They are frequently used for interactive visualizations that integrate many types of data with interactions to tell a complex story. For example the New York Times map of Hurricane Irene’s path along the Eastern Seaboard  illustrates the effects and aftermath of the hurricane. Developers have several javascript libraries to choose from when building custm maps. OpenLayers is the largest and most flexible of the javascript map client libraries. Its strengths are:  it can handle many different data formats and mapping services, has a large developer community, and has been integrated into web frameworks such as Drupal and Django.  Polymaps is another map client library that use SVG to make interactive maps. Data can be  attached to the graphic elements of the map to create fast interactive data displays. Recently, there has been a trend towards lightweight clients that do just the minimum to keep the size of the library small and quick to download. Leading this trend is Leaftlet by Cloudmade which provides a minimal framework for displaying map tiles and data. Even smaller than Leaflet is Modest Maps JS which is a javascript port of the Modest Maps actionscript library. Modest Maps JS in conjunction with Wax, a library of UI widgets is a 28K download, making it the smallest of the client libraries.


Mapping Ecosystem

The growth of geospatial developer tools has been driven by the availability of spatial data. Collecting spatial data was once the domain of government agencies, but widespread availability of consumer GPS on smartphones has created an explosion of spatial data generated through social media and checkin services. Transparency efforts at all levels of government has added to the growing amount of spatial data. While there are a number of options for storing your own data in one of the solutions mentioned previously or hosting it on a service such as Google Fusion Tables, another alternative is to use a service that provides a consistent API to spatial data. A number of data providers, including InfoChimps, provide spatial data, but when working with spatial data it is easy to overwhelm browser based map clients by the volume of data. Schuyler Earle coined the term “red dot fever” to describe the situation where data markers obscure the map and any discernible patterns. Two ways to overcome data overload are clustering data to show outliers and aggregation which decreases spatial resolution but reveals patterns. InfoChimps provides the Summarizer tool to make data query results more usable by organizing data points into intelligent geographic clusters. Another advantage of the InfoChimps Geo API is consistency across data by a unifying schema call the Infochimps Simple Schema (ICSS). ICSS is based on to provide a consistent and web friendly way to access data The mind map above is a first stab at organizing the ever growing array of geospatial tools and data. It’s a work and progress and comments are welcome.



10 Excellent Tools for Responsive Web Design

03 Aug

Advertise here with BSA

10 Excellent Tools for Responsive Web Design

So, you’ve decided to venture into the creation of responsive web designs. Wonderful! With the browsing landscape diversifying into mobile devices, netbooks, desktops and so forth, responsive web designs allow web designers to provide different layouts for specific devices (based on screen size and browser features) giving site visitors an optimal user experience.

So now, you’ve determined that it would be beneficial to create responsive web designs. What tools can help you get the job done?

Tools have started to spring up to provide us with shortcuts and helpers for common responsive web design tasks. Let’s take a look at just  few that I find the most useful.

I divided the tools in this list into four categories:

  • Responsive typography
  • Flexible images
  • Responsive web page layouts
  • Testing and cross-browser support

Responsive Typography

First, let’s look at two tools (out of the many out there) that allow us to create beautiful, adaptive typography.

1. Lettering.js


Lettering.js, a jQuery plugin for controlling the appearance of your web type, is a great tool to help designers get a chokehold on their typography. Whether you’re working with a responsive web design or not, having this kind of control over your web type can help you craft a truly creative look without resorting to image-based solutions.

In the context of responsive design, Lettering.js gives designers precise control over typography characteristics such as spacing, leading and kerning in order to produce an optimal reading experience in various visual spaces.

2. FitText


Another jQuery plugin, FitText helps you make your headlines responsive. FitText make sure your display text appears optimally on various devices. This plugin may be simple, but its flexibility leaves the creativity in your hands and is easy to implement.

Flexible Images

After setting type, we can move on to tackling the issue of placing images in our responsive web designs. There’s one tool that should be a part of every responsive web designer’s arsenal.

3. imgSizer.js

Before heading straight to the code of imgSizer.js, make sure to read through Ethan Marcotte’s breakdown of what role this script plays in your responsive web designs. Essentially, this script was designed to make sure your images render cleanly in Microsoft Windows. Marcotte’s script does a pretty nice job of cleaning up images that have been sized down automatically by the browser.

Responsive Web Page Layouts

At the core of every responsive web design is a fluid and flexible layout that adapts itself to the screen size and features of the user’s browser. Let’s move on to resources related to layout, where most of the action happens in responsive web designs.

4. Fluid 960 Grid System

Fluid 960 Grid System

If you’ve been using the ubiquitous 960 Grid System by Nathan Smith (plenty of us have probably used it for projects or experimentation at some point), check out this fluid adaptation of the original project. If you’re comfortable with the original, then you already know how to use Fluid 960 Grid System.

5. Gridless


If a grid system for web page layouts seems too restrictive to you, check out Gridless. Gridless is built to be leaner than other grid systems and was constructed with responsive designs in mind. The Gridless code bases its philosophy on the much-discussed mobile first method for crafting websites that must be delivered to a multitude of device environments.

For designers seeking more of a barebones, content-focused approach to responsive web design, you may find yourself quite at home with Gridless.

6. PXtoEM


A tedious mathematical process associated with converting fixed-width design work to a fluid layout is converting absolute units of measurements (i.e. px and pt) into relative units of measurement such as ems and percent (%) for typography, spacing, container widths, etc.

PXtoEM is a tool that provides users with a simple conversion tool to help them with all the math. The site also allows designers the ability to quickly and easily change the base font size of their layout to something that leads to more manageable math.

For example, in your HTML document, setting your body element’s font-size to 62.5% gives you the more convenient conversion ratio of 1em is to 10px, making unit conversion a little easier to do.

Testing and Cross-Browser Support

Finally, as we create our responsive web design, we’ll come to the point where our web type is clean and adaptive, our images are flexible and our layout is fluid.

Now we need to make sure that our site works in as many browsing environments as possible.

7. Adobe Device Central

Adobe Device Central

The best way to test your website on different devices is to actually test it from within the devices themselves; nothing compares to seeing how your website actually looks and behaves within a particular mobile gadget or computer.

However, for those of us who don’t have the budget for hundreds of new gadgets, the solution comes in the form of Adobe Device Central. Device Central is one of the better pieces of software I’ve used for testing a site out on different devices.

If it’s variety and range you seek, Device Central won’t leave you disappointed. With an actively growing device library to choose from, users will find pretty much every major device on the market, ready to load in and test.

Testing websites has been made easy as well: Simply input the URI of the web page (local or remote) and then you can freely switch between the devices you want to test it in.

8. Web Developer

Web Developer

While Device Central (above) is cheaper than purchasing a bunch of devices, it still may be outside the price range of some designers’ pocketbooks.

A fantastic alternative (or additional tool alongside Device Central) is the Web Developer browser extension. Available for Firefox and Chrome, this extension provides designers with several tools that come in handy when developing responsive or fluid websites.

Most notable is the built-in ability to resize your browser window with the click of a button. New size presets can be saved and used instantly.

Web Developer

Other helpful features include viewing CSS by media type and outlining your containing elements, which I find useful for quickly identifying break points (or potential break points) in a design.

9. Respond.js

One of the glaring disadvantages of using media queries is that they are part of the CSS3 specifications and therefore is an absent feature in older browsers, such as in IE8 and below.

Of course, one might argue that we don’t see a lot of mobile devices running IE6. But one thing to note is that responsive web design isn’t just about mobile devices, it’s a way of developing sites that become optimized for all types of browsing situations. For example, IE7 or IE8 users might still benefit from a site that renders a different layout on large, widescreen monitors versus a small-screen netbook.

Fortunately, we have Respond.js, a lightweight, open source script that gives us more options for executing media-query-driven responsive web designs in IE6, 7 and 8.

The script is small — only 1KB when served gzipped to site users — and is unobtrusive, so there’s little excuse not to use it!

10. Modernizr


Much like Respond.js, Modernizr is here to bring designers the power of HTML5 and CSS3, even in older browsers. While it’s not as lightweight as Respond.js, it does give you media-query-like abilities in older browsers.

The other exciting capability Modernizr brings us, as it relates to responsive web design, is some added support for the very intriguing — but currently problematic and tumultuous — W3C specifications of the Flexbox model that allows for easier and more robust web page layouts.

Modernizr also provides conditional loading features. If you’re concerned about loading many resources because of page speed concerns, Modernizr allows you to conditionally load certain resources based on the user’s browsing circumstances.

Responsibly Responsive

Not every responsive web design project is going to require all of the resources mentioned here. As always, restrict your design projects to only the components that are required to achieve the goals desired. And then, when appropriate, sprinkle in features that can enhance the user experience for as many users as possible without degrading it for anyone else.

These resources were chosen based on their ability to help you complete your responsive web designs more efficiently.

Adaptive and responsive web design practices are still in its beginning stages, but they are important because the diversification of browsing devices and viewing methods — like 3D on the Web, for example — is going to continue as our industry progresses into the future.

If you know a tool that can help in building responsive web designs, share them in the comments!

Related Content

About the Author

Jason Gross is a freelance web designer focused on creating clean and user friendly websites. Jason currently lives in Indiana and can be found on Twitter as @JasonAGross or on the web at his personal blog and portfolio.


Cross-Species Gadget Tests Reveal Reason for Dolphin Tools

25 Jul

The dolphins of Australia’s Shark Bay, famed as Earth’s first marine tool-users, likely turned to gadgetry because echolocation couldn’t find the best fish, especially for hurried moms without time to hunt.

It was in 1984 that researchers first observed the dolphins fitting basket sponges over their beaks, then scraping through seafloor mud to disturb hidden fish. Research subsequently showed this behavior to be full-blown tool use, taught by mothers to their daughters and representing a profound difference in lifestyle between them and Shark Bay’s other bottlenoses.

A basic question remained unanswered, however: Though sponges clearly protected sensitive dolphin snouts from jagged pieces of rock and coral, why scrape seafloor at all? Why not rely on echolocation to pinpoint target prey?

In a study published July 20 in Public Library of Science ONE, biologists Eric Patterson and Janet Mann of Georgetown University set out to answer this question by mounting basket sponges on sticks and pushing them through Shark Bay seafloors, just as dolphins do.

Most fish scared from the muck were bottom-dwellers lacking swim bladders, the air-filled organs that help fish control their buoyancy. Compared to fish flesh, which interferes with acoustic signals just slightly more than water, air bladders stand out on sonar. Without them, bottom-dwelling fish are nearly invisible to echolocation. Hence the value of scraping through seafloors manually, and thus the need for a device that protects dolphin noses from scraping.

Hunting with sponges has allowed Shark Bay’s bottlenoses to fill an empty ecological niche, eating fish that other dolphins ignore, wrote Patterson and Mann. The findings also suggest why sponge foraging likely arose among Shark Bay’s females and has remained their province, taught by dolphin mothers to daughters rather than sons.

Whereas dolphin fathers are mostly absent, free to roam and chase prey in the open ocean, dolphin moms spend years with their calves. They need to put food on the figurative table but have little time to do it. Sponge foraging is convenient and nutritious, a family recipe for quick-but-delicious dinners passed on to daughters who will someday need it.

Image: Eric Patterson/PLoS ONE

See Also:

Citation: “The Ecological Conditions That Favor Tool Use and Innovation in Wild Bottlenose Dolphins (Tursiops sp.). By Eric Patterson & Janet Mann. PLoS ONE, July 20, 2011.


15 Useful Web Apps for Designers

06 Jul

Advertise here with BSA

There are lots of web apps these days and they are very popular because of time-saving and productivity benefits. Web apps work on almost all platforms and you can access them from any device. You don’t need to install anything and you can save lots of time in this way. In this compilation, I’ve picked 15 useful web apps for web and graphic designers, developers and other creatives who want to save time and achieve more. Hope you’ll become more productive with these handy apps.

Privacy policy generator

Privacy policy generator

Privacy policy generator helps you to create professional privacy policy document that discloses some or all of the ways to your website visitors about what you will do with information gathered from them, how you are gathering that information and how the information will be stored and managed.



Launchlist is a perfect tool for web designers and developers to check their work before launching any project.

Aviary’s Image Editor

Aviaryís Image Editor

Powerful online photo editor with easy to use user interface. Perfect alternative for popular Adobe Photoshop.

Color Scheme Designer

Color Scheme Designer

Very useful tool for any sort of designer. With this tool you can easily create attractive color schemes for your projects.



Buffer makes your life easier with a smarter way to schedule tweets. Work out all your tweets at one point in time during the day. Then fill up your Buffer with your tweets and Buffer schedules them for you.

deviantART muro

deviantART muro

HTML5-based app that works in all modern browsers, and you can dive in and start drawing on a blank canvas, all without Flash or any other plug-in.

CSS3 Generator

CSS3 Generator

Handy CSS3 generator with a lot of different functions and code preview. gives you the possibility to see how fast your (or any) website loads in a real browser from over 50 locations worldwide.



Great tool for creating notes on any website, you can share your thoughts, feedback about the project with your friends or colleagues.

Resize My Browser

Resize My Browser

ResizeMyBrowser is simple yet very useful online tool. With this tool you will be able to set the browser size by both Inner window and Outer window.



Kuler is the web-hosted application for generating color themes that can inspire any project. No matter what you’re creating, with Kuler you can experiment quickly with color variations and browse thousands of themes from the Kuler community.



The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.



Seen a font in use and want to know what it is? Submit an image to WhatTheFont to find the closest matches in their database.

Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator

Colorzilla has designed this very easy to use CSS3 gradient generator. It uses sliders and color pickers just like Photoshop and is highly recommended.

Twitter Profile Designer

Twitter Profile Designer

Themeleon helps you to create custom Twitter background. You can use lots of patterns and colors available there or you can customize any of the colors or patterns to get just the right design for you.


Riak Rethinks Its MapReduce Framework with Riak Pipe

15 Jun

This week Basho, the company behind the open source NoSQL database Riak, released a beta of Riak Pipe. Basho community manager Mark Philips describes Pipe as "more or less a rewrite of our existing MapReduce framework. It builds on the lessons we learned in the initial (and still in use) version of MapReduce." You can find the code in GitHub.


Basho Senior Software Engineer Bryan Fink elaborates in the official announcement:

Essentially Riak Pipe allows you to specify work in the form of a chain of function pairs. One function of that pair describes how to produce output from input, and the other describes where in the cluster an input should be processed. Riak Pipe handles the details of ferrying data between workers by building atop Riak Core's distribution power.

Riak Pipe will eventually power Riak's MapReduce system and expand its MapReduce capabilities. You can get an early look at a Riak branch that integrates Pipe here.

You can learn much more about how Pipe works in the Readme file, and you can learn more about how Riak is being used in the real world here.



Google Products You Probably Don’t Know

03 May

Google search engine is one of the best product by Google, but there are many other innovative products as well that Google is developing them in  their so-called Google Labs. Many of these products are still in beta stage, but are really useful. Today I’m going to share some of the lesser known products from Google, which can help you. Some of them may even surprise you as you might not even heard about them and yet they’re so useful.

1. Related Links

In WordPress you have used various plugins to show related pages to your post, Related Links from Google does the same thing it generate the list of related pages to the current page & display it to the user. Related Links works using Google search, it uses keyword for your title to search your site for related content & display them on your website. Currently this product is in limited to invited users only & you can ask for invitation by sending mail to [email protected]

2. Follow Finder

There are many to tools to find followers on Twitter, but very few tools to find users with similar interest. Follow Finder helps you to find users on Twitter, based on similar interest, mutual followers, users with similar followers & users following similar list to help you identify potential Twitter followers you should follow.

3. Browser Size

Browser Size is a really useful tool for web designer & developer, as it helps them to visualize what part of their websites it getting maximum attention from users. You just need to enter your URL & your website will be segmented using a semi-transparent color layer describing users attention to different segment of your website.

4. Page Speed

As website loading time becomes one of the factors in ranking your websites in Google search engine, you need to know how fast your websites loads. There are many tools for doing that but you surely want to consider what Google thinks. Page Speed is such tool recently made available online by Google where you can check the loading time for your website.

5. Aardvark

Last year Google acquired Aardvark, It’s not just question-answer site for professional, but anyone get help here, the best thing about Aardvark is you get answers to most of the questions in few minutes, I have tried it my self & was surprised to see how fast was my questions got answered. Another great feature about Aardvark is it will deliver you answer to your mail or GTalk.

6. Experimental Search

Google Experimental Search have offers three services +1 Button, Keyboard Shortcut & Accessible view. The only problem with all this features is you can’t use them all at once, that is you use this feature one at time.

+1 Button

+1 Button is a kind of recommending Google search results to your friends, so when anyone in your friend searches Google, your recommendation will appear in search results.

Keyboard Shortcuts

This is really useful feature, I think Google should implement it to the normal search results, as it helps users to navigate between searches using keyboard shortcuts.

Accessible View

Accessible view adds to more feature to Keyboard Shortcuts it does everything the Keyboard Shortcuts does in addition to that it help you to navigate from one page to other using keyboard & magnifies the search results as you browse through them.

7. Google SketchUp

Google SketchUp is 3D modelling software which helps you to create 3D models easily or you can just download available 3D models from Google 3D warehouse & start editing them

8. Image Swirl

Most of you have used Google Image to find some quality images, but when it come to searching similar images using a standard keyword it get difficult. Image Swirl uses your generic query & group down images related to those queries into different search results, as for example if you are searching for “Design” it will groups images in website design, logo design & graphic design, hence making simpler for user to search for related images with a single query.

9. Art Project

This tool is helpful for artist around the world, as it let them explore museums from around the world & view hundred of art work from the comfort of their home. You can view various paintings in detail & explore various museums.

10. Google Scholar

Want to do some good research? Then forget conventional Google search and use Google Scholar, as it will search for scholarly literature from various sources like

academic publishers, professional societies, online repositories & more so you get more prevalent results & find really things that are really useful.

11.Google In Quotes

Google In Quotes uses Google News to find quotes of political figures. You can search for different keywords & see what have been quoted about it by different political figures.

12. YouTube 3D Video Converter

Create your own 3D videos using YouTube 3D Video converter, its easy & simple you just need to two camera to capture the video & upload them it’s that easy. You can also find the detail guide on here

13. Transit

Using Google Transit you can find about various public transit available in your area, with information about schedules, timing to reach the destination & route the transit systems takes.

14. Google APIs

Want to know about various APIs Google offers, here the periodic table of different APIs offered by Google.

15. Google Apps

Work Smarter with Google Apps as it offers easy communication & sharing data. I have been using Google Apps for more than 2 years now & it has been hassle free operation. The free package is boon to small businesses as it offers 50 free custom emails setup, but after 10 May it’s going to change to 10 users only.

If you have been using any of the above listed products, then do share your experiences on working with them in the comment section.


10 New Twitter Tools That Will Make Your Life Easier

30 Mar

10 New Twitter Tools That Will Make Your Life Easier

Twitter continues to add a staggering amount of 460,000 users each day. In order to be fully equipped to stay on top of this popular web service, you can use Twitter tools to help. Here are 10 fresh, new Twitter tools that you can use to achieve greater productivity on Twitter-related tasks.

1. The Archivist

The Archivist

This tool gives you insights and data about a specific search term. Simply search for terms that interest you and The Archivist will present you with plenty of information such as how much the term has been tweeted, top users that use the term, how many retweets the term has gotten, and more. It also lets you search for topics and hashtags, and gives you amazing visualizations about the Twitter activity surrounding them.

The Archivist allows you to download the data so you can go and pull it into presentations, reports and other analytics tools.

2. Tweriod


This Twitter tool analyses your tweets and your followers’ tweets and then gives you a graph of times of the day and days of the week your tweets will have the most visibility. Super simple and very useful. It’s an app that attempts to answer one question: What times are your followers most active?

Tweriod saw development at a great pace in the past few weeks. It started out as a simple service a few months back, but has recently received an overhaul in its design and in its algorithm.

3. ManageFlitter


ManageFlitter has been around for a while; however, a few weeks ago, the app rolled out an overhaul and launched a pro version of its service. Managing your Twitter followers is now easier than ever before.

With ManageFlitter, you can unfollow Twitter accounts that don’t follow you back, users that clutter your Twitter stream, and people who’ve stopped using Twitter.

There is no signup or registration process; you simply connect using Twitter’s authentication system and off you go.

4. Buffer


(Full disclosure: I work at Buffer.) There exist many different tweet-scheduling services out there. However, Buffer gives you a simpler and hassle-free solution than other services you might know of (such as Hootsuite or CoTweet). Buffer allows you to add many tweets at once, without flooding your followers with too many tweets back to back. All you do is throw a few tweets in your Buffer and the app then schedules them for you throughout the day. No need to figure out when to tweet. It gives your Twitter stream better consistency.

Another great feature is that you’re able to add tweets to your Buffer from any web page using a browser extension.

5. Hashable


This high profile New York City startup gives you a chance to document all the relationships you make on Twitter and other social networks. It’s a new way of sharing the people you have met and can become an online space you can always go back to as a contact list.

It works in a very simple manner: You simply tweet out hashtags alongside an introduction or piece of information in reference to the person you have met.

What you’ll appreciate with Hashable is that it will store all this information in the form of a log so that you can keep track of your contacts. And it’s good fun to use, too.

6. Qwerly


Qwerly gives you a place to put all your Twitter contacts and other social networking profiles in one place. Another one of these all-in-one apps? I hear you, but Qwerly allows you to make this a fun and convenient experience.

All you do is sign in using Twitter’s authentication and it automatically pulls in all the information for you. Qwerly saves you all the trouble of manually entering your information. In addition, it helps you connect with more users by telling you what other people are up to.

7. Twileshare


You most likely know that there are several file-sharing tools out there for Twitter. In the past few weeks, I tested a few of them, and my decision is firm that Twileshare is the best one out of the whole bunch.

You simply upload files and share them with your followers, all in one tweet. The files are safely hosted on Twileshare’s servers and you get a generous storage space of 1GB to start out with. You’re able to share a variety of file formats such as PNG, GIF, JPG, DOC and PDF files. Another neat feature on Twileshare is that you’re able to see the amount of views your files get.

8. Twoolr


This app gives you detailed statistics about everything happening around your Twitter account. It tells you about your mentions, retweets, the words you’re using, the progression of your follower count, and more.


At a market share of just above 10% of all Twitter usage, it was only a matter of time til Tweetdeck would extend its functionality. allows you to write updates longer than Twitter’s 140-character limit. The first part of a message over 140-characters will be tweeted alongside a link to a new platform Tweetdeck created so that your followers can view the entire message.

It comes in super handy when you need to reply or send out tweets without having to resort to cutting down your message. It even allows you to include embedded videos. is sort of like Posterous on top of the Twitter platform.

10. Proxlet


This tool allows you to mute certain tweets without unfollowing the person altogether. It also eases the pain of finally getting rid of Foursquare tweets and tweets about trending topics that you no longer want to hear about. You can do this under Settings by blocking whole hashtags, terms or apps.

Proxlet works on Tweetdeck, iPhone and other Twitter clients.

Related Content

About the Author

Leo Widrich is a Social Media enthusiast with an extra large addiction to Twitter. As Co-Founder of Buffer, he blogs at the Buffer blog every week to help their users make the most of their service. Say "Hi!" on Twitter @leowid.


10 Useful Scripts of Calendar for Web Developers

17 Mar
Most popular blogs and personal websites decorated by beautiful calendars. A beautiful calendar in website is so essential to track back new, specified and important older information’s. This article will show you some useful scripts to use in your blog or website. Are you looking to contribute to our design community? Suggest a link to [...]

Time-Saving and Educational Resources for Web Designers

18 Jan

Advertisement in Time-Saving and Educational Resources for Web Designers
 in Time-Saving and Educational Resources for Web Designers  in Time-Saving and Educational Resources for Web Designers  in Time-Saving and Educational Resources for Web Designers

Web design community is strong and hard-working. We have plenty of useful resources, tools and services created, developed and released every single day: apart from goodies such as free fonts or icons, there are also many educational resources and little time-savers that can significantly improve designer’s workflow. We permanently look out for the new projects and support them by presenting them on Twitter, Facebook, in our e-mail newsletter and, evidently, in Smashing Magazine’s posts.

Today we are glad to present one of such posts: an overview of handy new resources for web designers; most of them were released recently, but some of them are a bit older. Still, they were included to supplement the overview, making the post more comprehensive and complete. Please feel free to discuss the featured resources in the comments to this post. And, of course, thank you guys for creating and maintaining all these useful resources. Your efforts are deeply appreciated.

Useful Resources for Web Designers

Fonts in Use
This site presents a catalogue for real-world typography samples and innovations in branding, advertising, signage and publishing. The regularly updated collection of trends and case studies is commented on by typography experts and gurus from around the world. The sharp, interesting comments and discussions will keep you engaged, all backed up by real examples.

Fonts-in-use1 in Time-Saving and Educational Resources for Web Designers

Note and Point: Keynote and PowerPoint Gallery
Note and Point highlights the most beautiful Keynote, PDF and PowerPoint work on the Web, which happens to be mostly Web design-related, although various topics are covered. No doubt these presentations — which really do look that much better — might surprise you by the attention given to color, illustrations and typography.

Note-point in Time-Saving and Educational Resources for Web Designers

Free High-Quality HTML Email Templates
The page presents 38 free HTML email templates (including PSD and HTML files), created by talented professional designers. Every template has been tested in more that 20 popular email clients, including Outlook 2010, Gmail, Lotus Notes, Apple Mail and the iPhone. All of the Photoshop documents are layered and ready to be tweaked. You can download all of the templates for free (320 MB) and use them for any private or commercial project. In case you use Campaign Monitor to send out newsletters, you’ll also get Campaign Monitor’s templates as an extra goodie. Mailchimp users can choose from the professional templates for Mailchimp.

45royale in Time-Saving and Educational Resources for Web Designers

The Grammar Cheat Sheet
Never mix up your dashes again, learn how to set quotations marks and remind yourself to keep paragraphs short and topical. Overall, this article is a nice little overview of suggestions that would help you improve the quailty of your copy. For a closer examination of what else might go wrong, check out “The Trouble With EM ‘n EN (and Other Shady Characters)” by Peter K Sheerin.

145-useful in Time-Saving and Educational Resources for Web Designers

FPO: For Print Only
For Print Only is a blog that is dedicated to everything related to pint design. FPO celebrates that print is not dead by showcasing the most compelling printed projects. Print is alive and well as witnessed by this well organized and inspirational resource.

Print in Time-Saving and Educational Resources for Web Designers

Graphic Atlas: History of Printing
The site is a virtual study collection that showcases printing processes from early woodcuts to modern digital print. The print-identification tool guides you through a number of explorations that replicate the experience of identifying prints using common tools. Among other things, you’ll learn about such printing techniques as relief, letterpress, gravure, silver-dye bleach, dye sublimation and direct thermal. The object explorer allows you to view two images side by side to compare traits across processes. Characteristics such as size, format, color, texture, sheen and layer structure are explained as well.

Graphics-atlas in Time-Saving and Educational Resources for Web Designers

Smarthistory is a free and open, not-for-profit art history textbook. The website covers a wide variety of the artwork usually found in art history classes, ranging from ancient cultures to post-colonialism. In addition to the audio and video, Smarthistory contains articles and images organized by style and chronology. As a bonus, the user interface itself is worth looking at. The appealing design and intuitive navigation (which allows you to browse by era, style, artist and theme) makes this experience not only educational but enjoyable. A comprehensive overview of the seeds that helped sew the graphic design field.

Smarthistory in Time-Saving and Educational Resources for Web Designers

The Photoshop Etiquette Manifesto for Web Designers
This site lays out a number of guidelines for creating Photoshop files and workflows that are conducive to productivity and team collaboration. By following these guidelines, you make it easier for others to work with your files, and more likely that your project will go smoothly. Some of the things included are common-sense (proofread before exporting), but others aren’t necessarily something you’d think of if you’re not used to collaborating or working on big projects (use folders, keep logos as vector smart objects). It also includes helpful illustrations for each example, so there’s no confusion.

Manifesto in Time-Saving and Educational Resources for Web Designers

Desks Near Me
This site features places all over the world that designers and developers might like to work in, be they offices or cafés. The website provides detailed information, including hours of operation and reviews. Some places charge a small fee for use, and many throw in a few goodies like food, drink and access to equipment.

Desks-near-me in Time-Saving and Educational Resources for Web Designers

Dark Design Patterns
Dark Design Patterns aims to expose these black-hat designs whose sole aim is to misdirect and deceive visitors. Anti-usability design patterns that are currently identified on the website include the “Roach Motel,” “Bait and Switch,” “Privacy Zuckering” and “Forced Information Disclosure,” among others. Examples of each are included, and visitors can add their own in the comments on each page. It’s a great website to show clients when they ask you to implement a questionable “feature” on their website.

Darkpatterns in Time-Saving and Educational Resources for Web Designers

The Anatomy of a Perfect Landing Page
Formstack explains how design translates to users and ten key landing page features that draw them in. A useful breakdown of elements to include in your designs and things to keep in mind during your design-work.

127-useful in Time-Saving and Educational Resources for Web Designers

100 Principles for Designing Logos and Building Brands
Inspiration can come from anywhere, but sometimes the simpler the better. From Brand Identity Essentials, here are some principals for designing logos and building brands. These cover example shapes, consistency, voice, meaning and flexibility.

126-useful in Time-Saving and Educational Resources for Web Designers

Design Is History
A wonderful reference site for all designers and provides brief overviews of a wide range of topics — for us, designers, it is improtant to understand where design originates from.

172-useful in Time-Saving and Educational Resources for Web Designers

NounProject provides a huge collection of highly recognizable symbols, available for free download and use. The designers are committed to quality in what they do, and so the icons are indeed designed very well.

153-useful in Time-Saving and Educational Resources for Web Designers

Ethics for Web Designers
Robot Regime is dedicated to ethics and Web design, and it discusses what our ethical obligations are — to ourselves, our colleagues and our clients. The site already features some nice pieces, including posts about fair pricing, misrepresenting yourself as a designer and giving clients what they want.

Robotregime in Time-Saving and Educational Resources for Web Designers

Politely Decline Speculative Work
“I won’t do free design work to win your business — here’s why” is a Web page that offers a stock letter you can send to clients explaining why spec work is bad for everyone involved. It’s concise and professional, and it presents clear arguments against spec work, with links to additional information. Plus, you can personalize the letter by adding the recipient’s name to the end of the URL.

Rfp in Time-Saving and Educational Resources for Web Designers

Type Tips
A nice short overview of quick useful tips on all things related to Web typography by Harry Roberts from CSS Wizardry.

160-useful in Time-Saving and Educational Resources for Web Designers

The website brings together lectures, screencasts and conferences from around the world. Both expert and novice developers and designers should be able to find topics of interest, whether it’s CSS and HTML5 or start-ups and creativity. Ontwik is free, and anyone can suggest content for the website; you can even submit your own lectures.

Ontwik1 in Time-Saving and Educational Resources for Web Designers

Design Moo
“Join together and share valuable free Web design resources.” This could be the slogan of this design community, created and curated by front-end developer Chris Wallace. The project is a network of designers and a high-quality collection of free design resources: fonts, icons, illustrations, patterns, textures and Web layouts. All goodies are tagged for easy navigation, and you can follow new releases on Twitter. You might want to check Boxtuffs and Premium Pixels as well, another websites featuring free high-quality resources.

Designmoo in Time-Saving and Educational Resources for Web Designers

Design Kindle: Free High-Quality Design Files
This site offers a ton of free high-quality design files that you might actually want to use, all without restrictions on personal or commercial use. Everything from design elements to images to full themes is included. Design Kindle doesn’t have a big library of files just yet, but more are sure to be added soon.

Designkindle in Time-Saving and Educational Resources for Web Designers

365psd: A Free PSD Every Day
Every day, this site offers a free PSD file for you to download. These files are almost all design elements that you can use in Web and application designs, including buttons, progress bars, navigation elements and more, and they are well designed. Currently, there are more than 300 days worth of freebies, all tagged, browsable and searchable.

365psd1 in Time-Saving and Educational Resources for Web Designers

Guidelines for Mobile Web App Design
This article presents a comprehensive list of links to official user interface and user experience guidelines from various manufacturers. The guidelines include samples, tips and descriptions of common weaknesses for mobile platforms such as iPhone, iPad, Android, BlackBerry, Symbian, webOS and Mee Go. Many of the guidelines focus on native application development, but they can be applied to design of mobile applications in general, too.

Mee-go in Time-Saving and Educational Resources for Web Designers

List of Freely Available Programming Books
Here is a list of programming books on programming languages or about computers in general with open-source licenses and others. If you’ve been searching for some freely available programming books on the Internet, this list will surely give you some good tips.

159-useful in Time-Saving and Educational Resources for Web Designers

Secure Password Generator
The tool lets you enter parameters, including the length of the password, whether to include uppercase and/or lowercase letters or numbers or punctuation and whether to eliminate characters that resemble each other (such as i and l, 1 and I, and o and 0). Then, just select the number of passwords to generate, and it returns a list. It even includes phonetics for each password to make it easier to read out loud (in case you’re giving a password to someone over the phone, for example).

Passwordgenerator in Time-Saving and Educational Resources for Web Designers

This tool is a nice little application for finding shortcuts in Mac OS X, Photoshop and so on. Currently, more than 300 Photoshop shortcuts are available. Simply type the name of application in the search box, and it spits out a long shortcut list.

Keyonary1 in Time-Saving and Educational Resources for Web Designers

Let’s Swap
A place where artists and designers can swap art for free. The site is an experiment: if you are an artist or designer, you probably have something hanging around and you’ll be willing to swap it for something else. The site gives you the opportunity to do exactly that; just put out an open invitation and see what happens. Very interesting idea.

168-useful in Time-Saving and Educational Resources for Web Designers

Starting with Git: Cheat Sheet
After freshening up her git skills, Loma Jane Mitchell shares her ‘cheat sheet’ — the commands that she uses on a day-to-day basis when working with git. Also note that GUI tools and IDE plugins are available for Git, so it is worth taking a look at what is available for the development environment you use.

144-useful in Time-Saving and Educational Resources for Web Designers

Rails 3 Cheat Sheets
The site provides Rails 3 Cheat Sheets for Activemodel, Actionmailer and Actioncontroller, XSS protection and UJS, Activerelation, Bundler and Routing API.

152-useful in Time-Saving and Educational Resources for Web Designers

Bounce Rate Demystified
If you are doing business on the web and have Google Analytics set up for your website, it’s very likely that you know the bounce rate for your website. But, do you know anything about how it’s calculated, what your industry’s average bounce rate is or even what factors affect your bounce rate? Inspired by common questions, KissMetrics created this infographic to give you answers and some tips to help you improve your bounce rate.

136-useful in Time-Saving and Educational Resources for Web Designers

User Experience quotes and articles to inspire and connect the UX community.

178-useful in Time-Saving and Educational Resources for Web Designers

Quotes on Design
A growing collection of useful quotes by designers for designers and developers.

179-useful in Time-Saving and Educational Resources for Web Designers

Information Architecture Television features a collection of videos from around the Web that all focus on information architecture. Hundreds of videos dating back to 2008 offer a great wealth of information on everything from design thinking to usability.

119-useful in Time-Saving and Educational Resources for Web Designers

The Bazaar
On this site you can create galleries, upload your artworks and specify your products which you would like to sell. Once the buyer has checked out and has made the payment, your artwork is printed, wrapped and delivered.

148-useful in Time-Saving and Educational Resources for Web Designers

A Collection of Materials Related to Interaction Design
This IxD library provides you with an ultimate collection of posts, articles, PDFs as well as videos related to interaction design for you to read and gain more knowledge and inspiration.

164-useful in Time-Saving and Educational Resources for Web Designers

Pinterest — Catalog the Things You Love
Pinterest is a social catalog service. Think of it as a virtual pinboard — a place where you can post collections of things you love, and “follow” collections created by people with great taste.

169-useful in Time-Saving and Educational Resources for Web Designers

WordPress Snippets
WP-Snippets can come in handy when you’re designing a WordPress theme. Rather than start from scratch when building some functionality or another, why not grab a snippet of code that has already been tested? The website includes many useful snippets, from highlighting author comments to listing random posts to filtering the loop. Make sure to read the comments for each snippet because they could contain helpful information on whether the code works in certain WordPress versions.

Wp-snippets in Time-Saving and Educational Resources for Web Designers

CSS Terms and Definitions
This article discusses the consistency in the use of terms with reagrds to CSS.

143-useful in Time-Saving and Educational Resources for Web Designers

CSS Vocabulary
“I realized quite late that to say something meaningful about CSS, I would have to know exactly what the terms used means. Often, I have asked for help in forums, and have got stuck wondering how exactly to describe my problem. So I thought it would be a good idea to describe all the common terms of CSS.” A nice overview of common CSS terms and definitions and a good addition to the article “CSS Terms and Definitions” described above..

102-useful in Time-Saving and Educational Resources for Web Designers

BagCheck lets you share your personal collections and also lets you browse through other ‘bags’ to find out common hobbies or activities that helps you connect with people and their interests.

155-useful in Time-Saving and Educational Resources for Web Designers

ManyBooks: Repository of Free E-Books
This site offers a huge collection of public domain e-books, as well as other newer books that have been released in the public domain or under Creative Commons licenses, in a variety of formats. You can download classics such as Pride and Prejudice, as well as newer books such as The Gospel of the Knife, in formats such as ePub, Mobi, PDB and even PDF and plain text. Books are also browsable by genre, author and title. And of course, there is a search function.

Manybooks in Time-Saving and Educational Resources for Web Designers

Last Click

Should I Work for Free?
Who’s ready to stop working for free? Hopefully you are! If you have any doubts, consult this handy chart below. Start in the middle and work your way to your answer.

150-useful in Time-Saving and Educational Resources for Web Designers

Email Etiquette for the Super-Busy
In a recent blog post, venture capitalist Fred Wilson talked about his ongoing struggle with email management and the various solutions he’s tried, concluding: “Every time I make a productivity gain, the volume eventually overwhelms me.” It’s a familiar problem. We’re all extremely busy, and we all get too much email. So what to do?

123-useful in Time-Saving and Educational Resources for Web Designers

The Future of Advertising
An article on advertising; stating that advertising is on the cusp of its first creative revolution since the 1960s brings us to a new prespective. This involves the ad industry that just might get left behind. Click here to read and find out more. Very interesting read.

175-useful in Time-Saving and Educational Resources for Web Designers

Why Your Form Buttons Should Never Say ‘Submit’
When you see a ‘Submit’-button on a form, what comes to your mind? One could easily reason that clicking the button submits the user’s information into the system for processing. A ‘Submit’-button describes what the system does well, but it doesn’t describe what the user does at all. The article suggests to stop using the wording ‘Submit’ on buttons and provide more meaningful, task-specific names instead.

122-useful in Time-Saving and Educational Resources for Web Designers

© Smashing Editorial for Smashing Magazine, 2011. | Permalink | Post a comment | Add to | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , , , ,