Best 5 hand-drawn social icon set

Do you like hand-drawn style? Are you looking for some icons to improve the design of your website? Take a look at this collection that contains the best 5 hand-drawn social icon set in circulation.

Hand-drawn Social Media Icons (download)
This beautiful icon set, designed by Alex Latimer for WooThemes, comprising of 24 different icons, should cover most of the social networks that you frequent regularly and the default icon size has been set at 64 x 64 pixels.

Handycons 2 (download)
Handycons is a free, hand drawn social media icon set that contains more than 20 icons. Package contains Facebook, Blinklist, Feedburner, Flickr, FriendFeed, Furl, Gmail, Google, Heart icon, Last FM, Linked IN, Magnolia, Newsvine, PayPal, Skype, Sphinn, Twitter, Vimeo, Yahoo and You Tube icons. All icons come in four sizes: 16x16, 32x32, 64x64 and 12x128px.

Social Icons hand drawned (download)
Another beautiful set. The icons are available in the size: 24x24, 32x32, 48x48 and 64x6.

Free Hand Drawn Doodle Icon Set for Bloggers (download)
This set of free hand drawn doodle icons designed by Chris Spooner includes 14 graphics tailored specifically for bloggers. Including social media graphics for Delicious, Design Float, Digg, Facebook, StumbleUpon, Technorati and Twitter as well as commonly used icons such as RSS, Home, Comments, Contact and Wordpress.

FreeHand ColorStroked Icon Pac (download)
This pack includes many social media icons such as Delicious, Digg, Flickr, StumbleUpon, Technorati, Twitter and WordPress.

Related Posts

- 10 Beautiful icons set for web developers and designers
- Beautiful and free social websites icon set for bloggers
- 10 High resolution relaxing wallpapers for your desktop

Beautiful sets of environment and nature icons

Are you looking for some interesting new icons for your next web project related to environment and nature? Take a look at this collection of some awesome sets of professional icons. A large part of these icons are not totally free but their price is not so expensive respect to their high quality and affordable for everyone.


Gaia 08-09
Climate change and the conservation of our planet is one of the most impartant issues facing us today. Inspired by Live:Earth, a group of Customize.org members tried to find a way of contributing their own part with this beautiful icon set. You can find the new icon set Gaia 09 here.

Environment - Set 72 (download)
This is definitively one of my preferred icon set available on myVectorStore.

Green Icons (download)
A nice set of icons representing the human responsibility to help protect our environment.

Satin Environment and Nature Icons (download)

Environment icons (download)
Another beautiful green icon set.

Tulliana 2 (download)
These icons designed by Umut Pulat are not strictly related to the environment and nature but colors and some characteristic of their design are particularly suitable for this topic.

Environment Icons by Alexey Potapov (download)
An elegant and essential icon set designed by Alexey Potapov.

Environment set by niclienos (download)
This set of icons designed by niclienos is another of my preferred set.

Environmental & Green Energy Icons Set (download)
Environmental & Green Energy Icons Set on white background for Adobe Illustrator.

Eco Design (download)

EPA Icons (download)
A set of rounded icons by the United States Environmental Protection Agency.

WP WooThemes Ultimate Icon Set (download)
This is a nice set with some icons nautre-inspired.

Practical solutions to hyphenate text on web pages

In this post I want to suggest you three simple and useful ways to hyphenate text on your web pages using JavaScript or PHP. If you take a look at W3.org documentation you can find this explanation about hyphenation:

"In HTML, there are two types of hyphens: the plain hyphen and the soft hyphen. The plain hyphen should be interpreted by a user agent as just another character. The soft hyphen tells the user agent where a line break can occur. Those browsers that interpret soft hyphens must observe the following semantics: If a line is broken at a soft hyphen, a hyphen character must be displayed at the end of the first line. If a line is not broken at a soft hyphen, the user agent must not display a hyphen character. For operations such as searching and sorting, the soft hyphen should always be ignored."

To hyphenate text I found the following practical solutions:

Hyphenator.js
This script automatically hyphenates texts on websites and runs on any modern browser that supports JavaScript and the soft hyphen (­). It runs on the client in order that the HTML source of the website may be served clean and svelte and that it can respond to text resizings by the user. The result is really great:

The usage of this script is really simple. You have to include the script into your pages in the <head> tag:

<script src="hyphenator.js" type="text/javascript"></script>

...then you have to invoke the script adding this code after the previous code:

<script type="text/javascript">
Hyphenator.run();
</script>

...and use this HTML code to active hyphenation:

<p class="hyphenate text" lang="en">
Your text here...
</p>

Take a look at this example for a live preview.

You can also choose the language changing the property "lang" (actually the script support 16 languages, for the full list take a look here).


phpHyphenator
The phpHyphenator is a PHP port of the JavaScript hyphenator.js by Mathias Nater for automatic hyphenation in web pages using soft hyphens. The hyphenation algorithm needs large pattern files for doing the hyphenation and and using JavaScript can slow down page loading. PHP instead is doing hyphenation directly on the server wihtout sending the pattern files to the client.


Online Soft Hyphenation Generator
You can also try this interesting on-line HTML Soft Hyphenation Generator a configurable automatic hyphenation (soft or hard) generator for HTML text based on phpHypenator.

Any suggestion about this topic? Please leave a comment, thanks!

10 Useful resources for web designers and developers

Today I want to present you a selection of some useful resources for web designers and developers. This list contains in particular some awesome fonts, a simple PHP Content Management System, a JavaScript Cart, a PHP application for job boards, a weekly calendar (Google Calendar like, made with jQuery), an open source knowledge base application and interesting links with jQuery and MooTools plugins.


1. 52 Really High Quality Free Fonts For Modern And Cool Design
This post contains a great collection of awesome fonts



2. Beautiful New Free Fonts For Your Designs
In this collection Smashing Magazine presents high-quality fonts: Calluna, Andika Basic, Mentone, Sovereign Regular, Medio, Tiresias Infopoint and many other high-quality free fonts.

3. GetSimple CMS
GetSimple is a powerful and very simple CMS that has everything your client needs, and nothing a CMS doesn't.

4. SimpleCart(js)
No databases, no programming, no headaches. SimpleCart(js) is a simple javascript shopping cart in under 20kb that you can setup in minutes. It's lightweight, fast, simple to use, and completely customizable. All you need to know is basic HTML.

5. jQuery Week Calendar
The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar.

6. JoobsBox
JoobsBox is the most flexible software for job boards, allowing community expand it to unlimited needs. Plugins and Themes allows you to extend JoobsBox to do almost anything with your job board.

7. jCryption
In short words jCryption is a javascript HTML-Form encryption plugin, which encrypts the POST/GET-Data that will be sent when you submit a form.

8. 68Kb Knowledge Base Software
68KB is an open source PHP MySQL driven knowledge base script. Built with you in mind to make it easy to configure and setup.

9. Moowheel
The purpose Moowheel is to provide a unique and elegant way to visualize data using Javascript and the <canvas> object. This type of visualization can be used to display connections between many different objects, be them people, places, things, or otherwise. The script is licensed under an MIT-style license.

10. SlideItMoo
SlideItMoo is a simple MooTools plugin to display thumbnail images of your gallery. It can slide either by mouse wheel scroll or by clicking the arrows on the left and/or right.

Interesting Code Highlighters for blogs and websites

Code highlighters are very useful tools to present code snippets on your blog or website with a professional look and improve the readability of code you provide for your readers. In this post I want to reply to some requests I received in the past weeks about this topic and suggest you my five favourites code highlithers.


1. SyntaxHighlighter
SyntaxHighlighter is a popular code highlighter to help a developer/coder to post code snippets online with ease and have it look pretty. It's 100% Java Script based and it doesn't care what you have on your server. This is the final result:

2. Quick Highlighter
Quick Highlighter is an useful online tool to convert a plain text that contains some code (HTML, PHP, JavaScript) to formatted-highlighted code ready to copy and past on your blog or website. This is the result:

3. FV Code Highlighter
Frank Verhoeven released this great code higlither that transforms plain text in higlighted code in the same style of the Dreamweaver higligther. The result is very nice and professional:

4. Source Code Highlighter
This online tool allows you to highlight your C#, VB, ASPX, HTML, XML, JavaScript code for publishing on a web site or in a blog.It doesn't use CSS styles in output, but pure HTML FONT (size, color and font attributes) tag.


5. Highlight.js
Highlight.js highlights syntax in code examples on blogs, forums and in fact on any web pages. It's very easy to use because it works automatically: finds blocks of code, detects a language, highlights it.

Any suggestion? Please leave a comment!

15 Awesome tutorials and resources for web developers

A new week is coming and in this post I want to suggest you some interesting tutorials and resources for web developers I bookmarked this week. If you want to suggest a link, please leave a comment.

1. InfoVis Toolkit
The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web. It supports multiple data representations: treemaps, radial layouts, hypertrees/graphs, spacetree-like layouts, and more.

2. Vaadin
Vaadin is a Java framework for building modern web applications that look great, perform well and make your user happy.

3. Flip!
Flip is a jQuery plugin for jquery that will flip HTML elements in four directions. It's really simple to implement and customize.

4. Uploadify
Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.

5. Create a Twitter-Like "Load More" Widget
Both Twitter and the Apple App Store use a brilliant technique for loading more information; you click the link and fresh items magically appear on the screen. This tutorial teaches you to use AJAX, CSS, Javascript, JSON, PHP, and HTML to create that magic. This tutorial will also feature both jQuery and MooTools versions of the script.

6. FullCalendar
FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

7. HTML5 drag and drop in Firefox 3.5
In this tutorial you can learn HTML 5 specification section on new drag-and-drop events, and Firefox 3.5 with an included implementation of those events.

8. Music Player with mouse gestures
This tutorial illustrates how to implement an amazing music player using mouse gestures & hotkeys in jQuery. You can Click & Drag with mouse to interact with interface’s music player or use directional keys & spacebar instead of mouse.

9. jQuery Image Magnify
jQuery Image Magnify enables any image on the page to be magnified by a desired factor when clicked on, via a sleek zoom in/out effect. The enlarged image is centered on the user's screen until dismissed. It works on both images with and without explicit width/height attributes defined.

10. Creating a Keyboard with CSS and jQuery
Sometimes it's just fun to play around with the programming languages we know and see what we can create. It might be nice to create a little online keyboard with CSS, and then make it work with jQuery. The keyboard includes "action" keys (caps lock, shift, and delete) which dynamically changes the keyboard when clicked. This tutorial it'll show you how to build it.

11. Img Notes
Img Notes is an useful jQuery plug-in to add notes over images in a Flickr-like style. It's simple to implement and customize.

12. WriteMaps
WriteMaps is a free web-based tool that allows you to create, edit, and share sitemaps online. As a WriteMaps user, you and your team will be able to build and access your sitemaps from anywhere, without having to rely on proprietary desktop apps and static files.

13. Simple vibration effect for your form box with jQuery
This effect can be used to validate certain criteria in your form. Other than using highlighter to highlight the error area, we can use a more creativity approach by vibrating that particular input box to alert the user. This tutorial demonstrate a very easy way to understanding how vibration works on the web and how it can be used in your web design.

14. epiClock
epiClock is an extremely lightweight jQuery plugin which gives users the ability to easily create and manage any number of javascript powered clocks.

15. ThickBox
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

10 Interesting lightweight jQuery plugins for web developers

In this post I want to suggest you ten interesting lightweight jQuery plugins for web developers. This list includes a lightbox, an HTML markup editor, some plugins to work with images, a tooltips creator and a PHP interface for jQuery.

1. ColorBox
ColorBox is a light-weight, customizable lightbox plugin for jQuery 1.3 (only 9KB). It supports photos, photo groups, slideshow, ajax, inline, and iframed content; appearance is completely controlled through CSS so users can restyle the box; behavior settings can be over-written without altering the ColorBox javascript file. ColorBox is completely unobtrusive, requires no changes to existing HTML, preloads background images to avoid flash of unstyled content on first use. It can preload upcoming images in a photo group.

2. markItUp!
markItUp! is is a JavaScript plugin built on the jQuery library (just 6.5 KB). It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented.

3. jFlow
jFlow is a widget to make your content slides. One popular alternative that exists out there is coda-slider. jFlow is super lightweight because it is only 2KB minified.

4. JPolite
JPolite - jQuery POrtal Lite - is a lightweight front-end web portal framework based on jQuery (5 KB). The focus is easy content integration at the front-end, through an intuitive naming system and conventions plus simple and easy configuration. Developers can make use of various server side technologies and frameworks to generate content for the portal. Features: Flexible layout configurations, Module drag-drop (thanks to jQuery UI Simple UI controls (Tabs, accordion, ...), Sample RSS Reader. Take a look at the demo here.

5. vTip
vTip is designed to quickly provide very lightweight (706b js, 272b CSS, 270b image) tooltips to users of jQuery. The zip includes everything you need (including an example page), as well as jQuery for the examples to work. Using the jQuery framwork any element with a class of vtip will have it’s title attribute turned into a sleek, customizable tooltip without the klunk and loading time of a large tooltip script.

6. jQuery Cycle Plugin
The jQuery Cycle Plugin is a lightweight slideshow plugin. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. The plugin provides a method called cycle which is invoked on a container element. Each child element of the container becomes a "slide". Options control how and when the slides are transitioned.

7. Wilq32.RotateImage
Wilq32.RotateImage is a lightweight and very simple to use plugin to rotate images.

8. jqModal
jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, akin to a "Swiss Army Knife", and makes a great base as a general purpose windowing framework.

9. jQPie
The idea of jQPie is to provide a lightweight PHP interface to jQuery. The lightweight interface allows multiple ways to interact. jQPie is lightweight, supports XML, HTML and JSON, handlers
API is simple, while the handlers engine is PHP based the javascript library is usable by any language and includes a powerful autocomplete plugin, plans to provide other plugins for use and as examples.

10. jContext
jContext is an ultra-lightweight right click context menu for jQuery. How lightweight is jContext? It’s approximately 0.6kB when minified.

Do you have any suggestion? Please leave a comment. Thanks!

10 Fresh tools and resources for web developers

In this post I want to suggest you some interesting tools and resources for web developers. This list includes a CSS framework to design sitemaps using HTML lists, some interesting JavaScript frameworks, some interesting jQuery plug-in, a PHP face detection script, a tutorial to work with the Twitter API and a tutorial about how to retrieve your Gmail emails using PHP.

1. SlickMap CSS, A Visual Sitemapping Tool for Web Developers
SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences. The general idea of SlickMap CSS is to streamline the web design process by automating the illustration of sitemaps while at the same time allowing for the predevelopment of functional HTML navigation.

2. WaveMaker 5
WaveMaker gives you an easy and productive way to build Web 2.0 applications. Typical applications include a rapid prototyping and development, a form-driven database apps, a front end "face" for SOA architecture.

3. QuickFlip jQuery Plugin
QuickFlip is a jQuery plugin that uses a CSS trick to cause a div, paragraph or any other piece of HTML markup to flip like a card. With a result similar to the UI animation on the iPhone, this jQuery plugin is easily integrated into your webpage to make any portion appear to flip and show its back.

4. Face detection in pure PHP
Maurice Svay released this interesting face detection script to detect automatically faces in photos with PHP.

5. PHP.JS
PHP.JS is an open source project in which we try to port PHP functions to JavaScript. By including the PHP.JS library in your own projects, you can use your favorite PHP functions client-side. Using PHP.JS may speed up development for PHP developers who are increasingly confronted with client-side technology.

6. jQuery Blend
Blend is a jQuery based animation/effects, progressive enhancement plugin for CSS backgrounds (just 1.4KBs).

7. Twitter API: Simple Twitter Search using PHP
This post illustrates how to implement a simple Twitter search and display search results in a web page with a custom format.

8. Flapjax
Flapjax is a new JavaScript framework designed around the demands of modern, client-based Web applications. Its principal features include: Event-driven, reactive evaluation; An event-stream abstraction for communicating with web services; Interfaces to external web services.

9 Glow
Glow is a JavaScript library which aims to make working with JavaScript and the DOM easier. It tries to do this by abstracting common tasks, hiding cross-browser issues, and providing a set of user interface widgets.

10. Retrieve Your Gmail Emails Using PHP and IMAP
Grabbing emails from your Gmail account using PHP is probably easier than you think. Armed with PHP and its IMAP extension, you can retrieve emails from your Gmail account in no time! Take a look at this interesting post of David Walsh.

Useful Adobe Flash frameworks and graphical engines for developers

Are you an Adobe Flash developers? In this post you can find some really interesting Flash frameworks and graphical engines that help you develop quickly complex Rich Internet Application and Flash-based games. This list includes graphic UI elements, Flash and Flex components, a physical engine and an open source component to create isometric games with Flash.


Gaia Framework
Gaia is an open-source front-end Flash Framework for AS3 and AS2 designed to dramatically reduce development time. Gaia is targeted at anyone who develops Flash sites. It provides solutions to the challenges and repeated tasks we all face with front-end Flash site development, such as navigation, transitions, preloading, asset management, site structure and deep linking. It provides speed and flexibility in your workflow and a simple API that gives you access to its powerful features. For an example of Gaia-made website take a look at Inglorious Basterds Official Site.

Progression
Progression is a real powerful framework for Adobe Flash with focus on your creative work. You can just focus on user experience matter, how to transit, what dramatical effects you want to provide for your UI. Progression supports wide range of developing styles - from traditional timeline-based style to stylish class-based style. Progression packages all necessary functions of Web site development as component. You can develop web site using the component by drag & drop on the stage.

Yahoo! ASTRA
Yahoo! ASTRA, is an ActionScript Toolkit for Rich Internet Applications. It provides a collection of Flash and Flex components, code libraries, toolkits and utilities developed by Yahoo! for ActionScript developers.

ARP
ARP is an open source pattern-based Rich Internet Application framework for the Adobe Flash Platform. ARP currently supports Adobe Flash and Flex-based RIA development in AS 2 and AS 3 and is designed to be simple to use and lightweight.

JSwiff
The aim of the JSwiff project is to create an open source, pure Java framework for Macromedia Flash file creation and manipulation.

PushButton
The PushButton Engine is an Open Source, Flash game engine and framework that's designed for a new generation of games. PushButton Engine makes it easy to bring together great existing libraries and components for building Flash games. Spend less time on code, more time on building fun games.

Fisix Engine
The Fisix Engine is a 2D verlet physics engine for Flash. It is written completely in AS3 in order to make use of flash player 9’s improved cpu capabilities. Although Flash is still slower than platforms such as c/c++, or java, which means that you most likely won’t be able to make the next Half-Life in flash, it doesn’t mean you can’t do really cool stuff with 2D particles, constraints, rigid bodies, etc. and make great looking games and simulations. Take a look at the demo here. The result is really awesome.
FFilmation
FFilmation is a really impressive, open source, Flash Engine to create isometric locations for Flash-based games.

Related Content

- 7 Powerful image carousels for web designers
- Useful scripts and resources Facebook-inspired for web developers
- Best Image Croppers ready to use for web developers
- 10 Beautiful Web UI libraries
- File uploaders collection for web developers
- Interesting html FORM Validators for web developers