What’s new for designers, June 2012

Skrollr

Skrollr makes it easy to create a smooth, parallax scrolling animations on your website. It has no dependencies (not even jQuery) and is just under 5.5k minified. You can control any CSS property of any element, all dependent on the horizontal scrollbar position.

class="spacer_" />

Mixpanel Flow

Flow is a free analytics program that makes it easy to track where your visitors are on your site and when they leave, in real time. Installation is quick and only requires a small code snippet, and then you’ll get visualizations of your traffic patterns, with actual traffic diagrams rather than just charts or graphs.

class="spacer_" />

Stroll.js

Stroll.js is a collection of CSS3 scroll effects. It includes more than a dozen individual effects, including tilt, fan, twirl, fade, wave, and more.

class="spacer_" />

ddSlick

ddSlick is a free jQuery plugin that lets you create a custom dropdown menu that displays images and a description along with the usual text and values most dropdown menus include.

class="spacer_" />

Pageguide.js

Pageguide.js lets you create an interactive guide for webpage elements with jQuery and CSS3. Users just click on the Pageguide and are shown arrows to highlight various elements and provide more information.

class="spacer_" />

AngularJS

AngularJS is a JavaScript framework for extending HTML for use in web apps. It works well with other libraries, is fully extensible, and adds a ton of extra functionality to HTML that makes it much more suitable for creating dynamic applications.

class="spacer_" />

Moobile

Moobile is a new framework for creating mobile applications built on MooTools. You can download either the Moobile Boiler Plate or just the Source (minified or not). Full documentation is also provided.

class="spacer_" />

jQuery Picture

jQuery Picture is a small plugin for adding responsive images to your layouts, supporting both figure tags with some custom data attributes and the new proposed picture and source tags.

class="spacer_" />

Tablecloth.js

Tablecloth.js is a free jQuery plugin for styling and customizing HTML tables. It’s built off of Twitter Bootstrap and includes popular jQuery table manipulation plugins like tablesorter.

class="spacer_" />

Octofeed

Octofeed is a new way of looking at your Facebook news feed. Just log in with Facebook and Octofeed will pull in your feed and reformat it so that it’s much prettier to look at.

class="spacer_" />

Google Consumer Surveys

Google has recently released a new product: Consumer Surveys. It makes it easy to conduct market research, letting you create surveys in minutes and get near-instant reports, charts, and insights.

class="spacer_" />

Everyme

Everyme is a new social network that’s specifcally for sharing updates with your close friends and family, rather than hundreds of acquaintances on sites like Facebook. And it lets you distribute those updates via Email, SMS, or Push, even if your contacts don’t sign up with the app.

class="spacer_" />

WorkSimple

WorkSimple is a new collaboration and social performance platform that makes it easier to complete projects and work with your team. It includes tools to help keep everyone focused, in sync, and working together.

class="spacer_" />

Yahoo! Axis

Axis is a new browser that offers up visual search previews and works on your desktop to iOS device. It shows you what’s trending when you search, and offers instant visual search results as you type. It also connects your devices, so you can move from one device to another and pick up where you left off.

class="spacer_" />

Spinto

Spinto is an app for keeping writers and developers in sync on projects they’re collaborating on. It includes a WYSIWYG web interface and is powered by Git.

class="spacer_" />

Singool.js

Singool.js is a JavaScript framework for creating single-page web apps. It includes complete documentation to make developing your application a snap.

class="spacer_" />

IE Alert

IE Alert is a simple jQuery plugin that lets your visitors know that they’re using an out-of-date version of Internet Explorer when they arrive at your site. It even gives them links to download the current versions of all the major browsers (including IE9, Firefox, Safari, Google Chrome, and Opera).

class="spacer_" />

Percentage Loader

Percentage Loader is a tiny jQuery plugin that shows a progress widget that’s a whole lot more attractive than the standard horizontal bar or textual representation. It’s built in HTML5 Canvas and is only 10kb (minified).

class="spacer_" />

QueryPosts.com

QueryPosts.com is a great reference for WordPress developers. It currently offers up a quick, searchable reference for what’s new in WP 3.4 as well as over 1800 functions, with future references planned for classes and hooks.

class="spacer_" />

Koloria

Koloria is a free set of more than 160 multipurpose icons, plus 32 pixel icons. Each icon is designed at 32 pixels square, and optimized for that size.

class="spacer_" />

Responsive Grid System

The Responsive Grid System is a flexible way to create a responsive website design that isn’t a framework or boilerplate. It simplifies the creation of breakpoints, works with your existing HTML and CSS, and lets you create a grid to suit your content, rather than the other way around.

class="spacer_" />

Nitro

Nitro is a new, easy to use task management app that syncs with Dropbox or Ubuntu One. It’s completely free and released under the open source BSD License.

class="spacer_" />

JQVMap

JQVMap is a free jQuery plugin that renders vector maps using the resizable SVG format. It even has legacy support for older browsers (IE6-8) that don’t support SVG.

class="spacer_" />

Baseline.js

If you’ve ever had a baseline thrown off completely by oddly-sized images, then Baseline.js is for you. It’s a simple jQuery plugin that will restore baselines thrown off by odd sized images.

class="spacer_" />

Markdown Here

Markdown Here is a Chrome, Firefox, and Thunderbird extension that lets you write your emails in Markdown and then automatically convert them to the proper format.

class="spacer_" />

Balloons.IO

Balloons.IO is an open source chat server and client that supports multiple chat rooms. It’s built with node.JS, Express, Socket.IO, and Redis.

class="spacer_" />

Edmondsans (name your price)

Edmondsans, from Lost Type Co-Op, is a sans-serif display typeface that comes in three weights: regular, medium, and bold, designed by James T. Edmondson.

class="spacer_" />

White Rabbit (free)

White Rabbit is a free display typeface with a rounded geometric shape and square letterforms. It’s reminiscent of system fonts from the 80s and 90s.

class="spacer_" />

Snippet (free)

Snippet is a free display typeface with swooshes and flourishes that give it a feminine feel.

class="spacer_" />

Marlowe ($80)

Marlowe is a family of display typefaces with a distinctly art deco look and feel. It includes four styles: Regular, Cocktail, Swirl, and Escapade, all of which share similar letterforms with added decorations on the latter three.

class="spacer_" />

Nelson ($85)

Nelson is a family of display typefaces with a distressed, antique look. It comes in four styles: Rugged, Bold, Engraved, and Ornaments.

class="spacer_" />

Alina ($28)

Alina is a casual condensed script font that includes OpenType ligatures to all lower-case letters, making it feel a bit more hand-lettered and lively.

class="spacer_" />

Bergamot (free – $60)

Bergamot is a display typeface inspired by vintage apothecary labels. Despite its vintage influence, it remains quite modern. The coolest part: the four variations of each letter intermingle as you type, giving it a very organic feel.

class="spacer_" />

Frida ($58.50)

Frida is a formal and elegant, hipsterish typeface that comes with four weights and italics, as well as alternate characters. It’s suitable for headlines, posters, packaging, and more.

class="spacer_" />

Rather Both ($34)

Rather Both is a set of two fonts that work very well together: Rather Jazzy and Rather Loud. There are two versions of each letter in each font, as well as contextual alternates, which results in a very handcrafted feel.

class="spacer_" />

New Cuisine ($39.53)

New Cuisine is influenced by DIY lettering and a departure from more formal and retro script typefaces. It’s great for blogs and online journals, signage, logos, menus, and packaging.

class="spacer_" />

[ Go to Source ]

10 super useful PHP snippets you probably haven’t seen

Text messaging with PHP using the TextMagic API

If for some reason, you need to send text messages to your clients cell phones, you should definitely have a look to TextMagic. They provide an easy API which allow you to send SMS to cell phones. Please note that the TextMagic service isn’t free.

The example below shows how easy it is to send a SMS to a cell phone using the TextMagic API:

// Include the TextMagic PHP lib
require('textmagic-sms-api-php/TextMagicAPI.php');

// Set the username and password information
$username = 'myusername';
$password = 'mypassword';

// Create a new instance of TM
$router = new TextMagicAPI(array(
	'username' => $username,
	'password' => $password
));

// Send a text message to '999-123-4567'
$result = $router->send('Wake up!', array(9991234567), true);

// result:  Result is: Array ( [messages] => Array ( [19896128] => 9991234567 ) [sent_text] => Wake up! [parts_count] => 1 )

Source: http://davidwalsh.name/php-text-messaging

Detect location by IP

Here is an useful code snippet to detect the location of a specific IP. The function below takes one IP as a parameter, and returns the location of the IP. If no location is found, UNKNOWN is returned.

function detect_city($ip) {

        $default = 'UNKNOWN';

        if (!is_string($ip) || strlen($ip) < 1 || $ip == '127.0.0.1' || $ip == 'localhost')
            $ip = '8.8.8.8';

        $curlopt_useragent = 'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6 (.NET CLR 3.5.30729)';

        $url = 'http://ipinfodb.com/ip_locator.php?ip=' . urlencode($ip);
        $ch = curl_init();

        $curl_opt = array(
            CURLOPT_FOLLOWLOCATION  => 1,
            CURLOPT_HEADER      => 0,
            CURLOPT_RETURNTRANSFER  => 1,
            CURLOPT_USERAGENT   => $curlopt_useragent,
            CURLOPT_URL       => $url,
            CURLOPT_TIMEOUT         => 1,
            CURLOPT_REFERER         => 'http://' . $_SERVER['HTTP_HOST'],
        );

        curl_setopt_array($ch, $curl_opt);

        $content = curl_exec($ch);

        if (!is_null($curl_info)) {
            $curl_info = curl_getinfo($ch);
        }

        curl_close($ch);

        if ( preg_match('{<li>City : ([^<]*)</li>}i', $content, $regs) )  {
            $city = $regs[1];
        }
        if ( preg_match('{<li>State/Province : ([^<]*)</li>}i', $content, $regs) )  {
            $state = $regs[1];
        }

        if( $city!='' && $state!='' ){
          $location = $city . ', ' . $state;
          return $location;
        }else{
          return $default;
        }

    }

Source: http://snipplr.com/view/48386/detect-location-by-ip-city-state/

Display source code of any webpage

Want to be able to display the source code of any webpage, with line numbering? Here is a simple code snippet to do it. Just modify the url on line 2 at your convenience. Or even better, make a pretty function according to your needs.

<?php // display source code
$lines = file('http://google.com/');
foreach ($lines as $line_num => $line) {
	// loop thru each line and prepend line numbers
	echo "Line #<b>{$line_num}</b> : " . htmlspecialchars($line) . "<br>\n";
}

Source: http://perishablepress.com/code-snippets/#code-snippets_php

Check if server is HTTPS

Is my script running on a HTTPS server? Good question. This handy snippet can give you the answer. Nothing complicated at all!

if ($_SERVER['HTTPS'] != "on") {
	echo "This is not HTTPS";
}else{
	echo "This is HTTPS";
}

Source: http://snipplr.com/view/62373/check-if-url-is-https-in-php/

Display Facebook fans count in full text

Want to display how many Facebook fans do you have, in full text, on your blog? It’s very easy using the following snippet:

function fb_fan_count($facebook_name){
    // Example: https://graph.facebook.com/digimantra
    $data = json_decode(file_get_contents("https://graph.facebook.com/".$facebook_name));
    echo $data->likes;
}

Source: http://www.digimantra.com/

Determine the dominant color of an image

This code will be super useful for people managing images or photography website. With it, you can analyze any image and get its dominant color (R, G, or B).

$i = imagecreatefromjpeg("image.jpg");

for ($x=0;$x<imagesx($i);$x++) {
    for ($y=0;$y<imagesy($i);$y++) {
        $rgb = imagecolorat($i,$x,$y);
        $r   = ($rgb >> 16) & 0xFF;
        $g   = ($rgb >>  & 0xFF;
        $b   = $rgb & 0xFF;

        $rTotal += $r;
        $gTotal += $g;
        $bTotal += $b;
        $total++;
    }
}

$rAverage = round($rTotal/$total);
$gAverage = round($gTotal/$total);
$bAverage = round($bTotal/$total);

Source: http://forums.devnetwork.net/viewtopic.php?t=39594

Get info about your memory usage

In order to optimize your scripts, you may definitely want to know how many amount of RAM they use on your server. This snippet will check memory and then print initial, final and peak usages.

echo "Initial: ".memory_get_usage()." bytes \n";
/* prints
Initial: 361400 bytes
*/

// let's use up some memory
for ($i = 0; $i < 100000; $i++) {
	$array []= md5($i);
}

// let's remove half of the array
for ($i = 0; $i < 100000; $i++) {
	unset($array[$i]);
}

echo "Final: ".memory_get_usage()." bytes \n";
/* prints
Final: 885912 bytes
*/

echo "Peak: ".memory_get_peak_usage()." bytes \n";
/* prints
Peak: 13687072 bytes
*/

Source: http://net.tutsplus.com/tutorials/php/9-useful-php…

Compress data using gzcompress()

When working with strings, it is not rare that some are very long. Using the gzcompress() function, strings can be compressed. To uncompressed it, simply call the gzuncompress() function as demonstrated below:

$string =
"Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nunc ut elit id mi ultricies
adipiscing. Nulla facilisi. Praesent pulvinar,
sapien vel feugiat vestibulum, nulla dui pretium orci,
non ultricies elit lacus quis ante. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Aliquam
pretium ullamcorper urna quis iaculis. Etiam ac massa
sed turpis tempor luctus. Curabitur sed nibh eu elit
mollis congue. Praesent ipsum diam, consectetur vitae
ornare a, aliquam a nunc. In id magna pellentesque
tellus posuere adipiscing. Sed non mi metus, at lacinia
augue. Sed magna nisi, ornare in mollis in, mollis
sed nunc. Etiam at justo in leo congue mollis.
Nullam in neque eget metus hendrerit scelerisque
eu non enim. Ut malesuada lacus eu nulla bibendum
id euismod urna sodales. ";

$compressed = gzcompress($string);

echo "Original size: ". strlen($string)."\n";
/* prints
Original size: 800
*/

echo "Compressed size: ". strlen($compressed)."\n";
/* prints
Compressed size: 418
*/

// getting it back
$original = gzuncompress($compressed);

Source: http://net.tutsplus.com/tutorials/php/9-useful-php…

Whois query using PHP

If you need to get the whois information for a specific domain, why not using PHP to do it? The following function take a domain name as a parameter, and then display the whois info related to the domain.

function whois_query($domain) {

    // fix the domain name:
    $domain = strtolower(trim($domain));
    $domain = preg_replace('/^http:\/\//i', '', $domain);
    $domain = preg_replace('/^www\./i', '', $domain);
    $domain = explode('/', $domain);
    $domain = trim($domain[0]);

    // split the TLD from domain name
    $_domain = explode('.', $domain);
    $lst = count($_domain)-1;
    $ext = $_domain[$lst];

    // You find resources and lists
    // like these on wikipedia:
    //
    // http://de.wikipedia.org/wiki/Whois
    //
    $servers = array(
        "biz" => "whois.neulevel.biz",
        "com" => "whois.internic.net",
        "us" => "whois.nic.us",
        "coop" => "whois.nic.coop",
        "info" => "whois.nic.info",
        "name" => "whois.nic.name",
        "net" => "whois.internic.net",
        "gov" => "whois.nic.gov",
        "edu" => "whois.internic.net",
        "mil" => "rs.internic.net",
        "int" => "whois.iana.org",
        "ac" => "whois.nic.ac",
        "ae" => "whois.uaenic.ae",
        "at" => "whois.ripe.net",
        "au" => "whois.aunic.net",
        "be" => "whois.dns.be",
        "bg" => "whois.ripe.net",
        "br" => "whois.registro.br",
        "bz" => "whois.belizenic.bz",
        "ca" => "whois.cira.ca",
        "cc" => "whois.nic.cc",
        "ch" => "whois.nic.ch",
        "cl" => "whois.nic.cl",
        "cn" => "whois.cnnic.net.cn",
        "cz" => "whois.nic.cz",
        "de" => "whois.nic.de",
        "fr" => "whois.nic.fr",
        "hu" => "whois.nic.hu",
        "ie" => "whois.domainregistry.ie",
        "il" => "whois.isoc.org.il",
        "in" => "whois.ncst.ernet.in",
        "ir" => "whois.nic.ir",
        "mc" => "whois.ripe.net",
        "to" => "whois.tonic.to",
        "tv" => "whois.tv",
        "ru" => "whois.ripn.net",
        "org" => "whois.pir.org",
        "aero" => "whois.information.aero",
        "nl" => "whois.domain-registry.nl"
    );

    if (!isset($servers[$ext])){
        die('Error: No matching nic server found!');
    }

    $nic_server = $servers[$ext];

    $output = '';

    // connect to whois server:
    if ($conn = fsockopen ($nic_server, 43)) {
        fputs($conn, $domain."\r\n");
        while(!feof($conn)) {
            $output .= fgets($conn,128);
        }
        fclose($conn);
    }
    else { die('Error: Could not connect to ' . $nic_server . '!'); }

    return $output;
}

Source: http://www.jonasjohn.de/snippets/php/whois-query.htm

Email PHP errors instead of displaying it

By default, most servers are set to display an error message when an error occured in one of your script. For security reasons, you may want to get an email with the error, instead of displaying it to the public.

<?php

// Our custom error handler
function nettuts_error_handler($number, $message, $file, $line, $vars){
	$email = "
		<p>An error ($number) occurred on line
		<strong>$line</strong> and in the <strong>file: $file.</strong>
		<p> $message </p>";

	$email .= "<pre>" . print_r($vars, 1) . "</pre>";

	$headers = 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

	// Email the error to someone...
	error_log($email, 1, 'you@youremail.com', $headers);

	// Make sure that you decide how to respond to errors (on the user's side)
	// Either echo an error message, or kill the entire project. Up to you...
	// The code below ensures that we only "die" if the error was more than
	// just a NOTICE.
	if ( ($number !== E_NOTICE) && ($number < 2048) ) {
		die("There was an error. Please try again later.");
	}
}

// We should use our custom function to handle errors.
set_error_handler('nettuts_error_handler');

// Trigger an error... (var doesn't exist)
echo $somevarthatdoesnotexist;

Source: http://net.tutsplus.com/tutorials/php/quick-tip…

Go to Source

15 Free And Useful jQuery Image and Content Sliders Plugins

Content and image sliders have become very popular in recent years. With jQuery you can enjoy new way of web development and image galleries are the best way to use it effectively! Here you’ll find 15 awesome jQuery image and content sliders plugins, and the best of all they are free.

Slides

Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

Elastislide – A Responsive jQuery Carousel Plugin

Elastislide is a responsive jQuery carousel that will adapt its size and its behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid.

FlexSlider

FlexSlider is an amazing, totally responsive jQuery slider plugin. It bears uncomplicated, semantic markup, slide and fade animations, and is supported in all major browsers, therefore you won’t have any compatibility issues. Flexslider is built for novices and pros in a similar way.

Slider Kit, sliding contents with jQuery

The purpose of Slider Kit is to gather common slideshow-like jQuery functionalities (such as news sliders, photos galleries/sliders, carousels, tabs menus) into one lightweight and flexible plugin combined with ready-to-use CSS skins.

Lateral On-Scroll Sliding with jQuery

You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from “outside” of the page to the center when they are in the viewport.

Orbit: A Slick jQuery Image Slider Plugin

jQuery plugin lets you create a simple, effective and beautiful slider for images of any size, and even includes some parameters for making awesome captions and a sweet timer.

Circular Content Carousel with jQuery

With this circular content carousel, you can have some content boxes that can slide substantially (circular). Clicking the “More” link will move the respective item to the left and slide out the content area, so that you can navigate through the carousel where every step will disclose the next or previous content box with its extended content.

Minimit

Minimit Gallery is a highly customizable Jquery plugin that does galleries, slideshows, carousels, slides… pratically everything that has multiple states.

jQuery Based Flipped Image Gallery with Bounce Effects

a simple jQuery based flipped image gallery. On hover the images will expand. Its simple and stylish gallery.

Rotating Image Slider with jQuery

An asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will also add an autoplay option and the mousewheel functionality.

Slidorion

A combination of an image slider and an accordion, the Slidorion displays beautiful images along with a variable length description. With slides linked to each tab, and accompanied by a large array of effects, the Slidorion is a great alternative to the traditional jQuery slider.

Shutter Effect Portfolio with jQuery and Canvas

In this jQuery tutorial, we will be using the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website.

jQuery MB Bgnd Gallery

With this jQuery plugin you can make a suggestive slide show of images as the background of your page; the images will adapt their size to the window size. You can either navigate the gallery with your keyboard or with a control panel displayed where you want in the page.

Galleria

Galleria is a JavaScript image gallery framework built on top of the jQuery library. The aim is to simplify the process of creating professional image galleries for the web and mobile devices.

Image Wall with jQuery

With this plugin you can create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when we click on the picture. The ribbon will show some description next to the picture and when clicking again on the thumbnail, the ribbon will close and open again with a large version of the image.

Go to Source

10 awesome HTML5 audio players

Media Element

MediaElement is an audio an video player which is written in pure HTML5 and CSS. Older browsers are supported by Custom Flash and Silverlight players that mimic the HTML5 MediaElement API.
Media Element is skinnable, and offers plugins for popular platforms such as WordPress, Drupal, Joomla, etc.

→ Visit http://mediaelementjs.com/

Scott Andrew’s HTML5 audio player

This player is very minimalist but works well. Great to use when you do not need playlists or any fancy effects!

→ Visit http://www.scottandrew.com/pub/html5audioplayer/

Speakker

Here is a great player, probably my favorite from the whole list. Speakker is super easy to set up and comes out of the box in two variations and with incredible options of customization: Flexible dimensions, unlimited colors, etc…
Speakker is cross-browser compatible and have a Flash fallback for old browsers.
and two different button sets for light and dark themes.

→ Visit http://www.speakker.com/

MooTools HTML5 Audio Player

Are you using Mootools on your website? If yes, you’ll probably enjoy this player, made with HTML5 and the Mootools JavaScript framework. The player works perfectly on all recent browsers.

→ Visit http://simulacre.org/mootools-html5-audio-player/

Universal HTML5 Audio Player

This player is the only one from the list which isn’t free. But it’s cheap ($5 only!) and works well. It have lots of useful features, such as a way to protect your audio from being hijacked by using a beep overlay, which is a great solution for commercial uses.

→ Visit http://codecanyon.net/item/universal-html5-audio-player

SoundManager 2

Using HTML5 and Flash, SoundManager 2 provides reliable cross-platform audio under a single lightweight (10 kb) JavaScript API.
Want to see what you can do with Sound Manager 2? Then visit http://wheelsofsteel.net/ for an awesome demo!

→ Visit http://www.schillmania.com/projects/soundmanager2/

jplayer

jplayer is a jQuery plugin which have been my audio player of choice for several months because of its simplicity. A great tool which can also play videos.

→ Visit http://jplayer.org/

audio.js

audio.js is a drop-in javascript library that allows HTML5′s <audio> tag to be used anywhere. It uses native <audio> where available and an invisible flash player to emulate <audio> for other browsers. It provides a consistent html player UI to all browsers which can be styled used standard css.

→ Visit http://kolber.github.com/audiojs/

HTML5 Audio Player Bookmarklet

This bookmarklet adds an audio player to play linked audio files on any page. It can be used on any page which has links to downloadable audio files. A great tool to stream audio instead of downloading!

→ Visit http://marklets.com/HTML5+Audio+Player.aspx

Go to Source

What’s new for designers, February 2012

The February edition of what’s new for web designers and developers includes new web apps, frameworks, jQuery plugins, WordPress tools, and some really great new fonts.

Many of the resources below are free and are sure to be useful to a lot of designers and developers out there.

As always, if we’ve missed something you think should have been included, please let us know in the comments.

And if you have an app or other resource you’d like to see included next month, tweet it to @cameron_chapman for consideration.

Dolody

Dolody is a new weekly online magazine for the design community. They cover design, coding, graphics, and WordPress, with commentary from some leading designers, quick tutorials, interviews, and more.

class="spacer_" />

Zip.js

Zip.js is a JavaScript library for zipping and unzipping files. It’s a great addition to an online file management system or site where users need to upload content.

class="spacer_" />

WP Remote

WP Remote lets you manage and maintain all of your WordPress sites from a single dashboard. You can update your core, plugins, and themes, track site status, and have daily backups run and stored to Amazon S3.

class="spacer_" />

Bear CSS

Bear CSS is an online app to help you build a stylesheet based on your HTML markup. Just upload your HTML file and Bear CSS will generate a CSS template based on it.

class="spacer_" />

Zoey

Zoey is a framework for developing mobile apps. It includes a range of UI elements and is lightweight and customizable.

class="spacer_" />

Arctext.js

Arctext.js makes it easy to create curved lettering with CSS3 and JavaScript. It calculates the right rotation for each letter to distribute it across the arc of a given radius.

class="spacer_" />

SlabText

SlabText is a script that lets you create a big, bold, responsive headline for your web designs. It splits headlines into rows before resizing each row to fill the available horizontal space, and even lets you specify preset word combinations.

class="spacer_" />

HTML KickStart

HTML KickStart is a set of HTML5, CSS, and jQuery building blocks for rapid website development. It includes files, layouts, and elements that will give you a headstart and save you hours on your projects.

class="spacer_" />

Fokiz

Fokiz is a content management system designed for ease of use by designers, developers, and users. It has a minimal learning curve, with a simple templating system and easy-to-develop module system for expanding functionality.

class="spacer_" />

GuideGuide

GuideGuide is a Photoshop plugin for creating grid-based designs with pixel-accurate columns, rows, midpoints, and baselines, all of which can be created with the click of a button. Frequently used guide sets can be saved for repeated use, saving you even more time.

class="spacer_" />

deCSS3

deCSS3 is a free bookmarklet for testing the graceful degradation of your designs so you can see exactly what they’ll look like on older browsers that don’t have CSS3 support. It currently supports Chrome and Safari.

class="spacer_" />

Bootstrap Generator

Bootstrap Generator makes it easy to get started with your Twitter Bootstrap project the way you want. Just alter the options to suit your needs and it will generate your compiled Bootstrap CSS file.

class="spacer_" />

Gridpak

Gridpak is a responsive grid generator that creates PNG, CSS, LESS, JavaScript, and SCSS files to your specifications. Just enter the number of columns, the padding for each, and the gutter width.

class="spacer_" />

Create

Create is a new web editing interface that uses a browser-based HTML5 environment for managing your content. It can be adapted for use with virtually any content management backend.

class="spacer_" />

Dabblet

Dabblet is a CSS and HTML sandbox that lets you test out your code and preview it instantly. You can save files anonymously or create an account for more options. You also have a variety of views available, including a results-only view for previewing your entire design.

class="spacer_" />

Impress.js

Impress.js is a presentation tool that uses CSS3 transforms and transitions to create more interesting slideshows. It’s currently supported in Chrome and Safari, and will be supported in Firefox 10.

class="spacer_" />

EaselJS

EaselJS is a JavaScript library for working with HTML5 Canvas. It provides a retained graphics mode, including a full, hierarchical display list, helper classes, and a core interaction model.

class="spacer_" />

Notification Control

Notification Control is a one-stop source for resetting your email notifications for popular web services, including Forrst, Facebook, Twitter, Path, StumbleUpon, YouTube, Tumblr, and more. Just visit the page, and click the links to go directly where you need to to adjust your email notifications for each site.

class="spacer_" />

IconBox 2.5

IconBox is “like iPhoto for your icons”, and lets you organize and customize your icons. It also includes tools and an “Icon of the Day” that features a new icon from a different artist each day.

class="spacer_" />

The Shock Free Bundle 2

WordPress Theme Shock is now offering the Shock Free Bundle 2, a collection of 99 PSD themes, all for free. Each comes with home and internal pages, in a wide variety of styles. The free version includes a personal license, but a commercial license is available for purchase.

class="spacer_" />

youRhere

youRhere is a jQuery plugin that gives your users a chance to mark their article-reading progress just by clicking. It’s an incredibly useful plugin for sites that post long-form content, and uses the HTML5 local storage API.

class="spacer_" />

Eenox Designer

Eenox Designer is a tool that lets you create dynamic and interactive touch-optimized websites for computers, smartphones, and tablets, using HTML5. It lets you design and animate without coding, and then lets you download your design to host on your own servers. There’s a free plan with limited functionality, while paid plans start at $99 for 2 months.

class="spacer_" />

Reverie

Reverie is an HTML5 responsive WordPress framework based on Zurb’s Foundation. It uses media query to adjust for all kinds of devices, is optimized for iPhone and iPad, and is hNews microformat ready.

class="spacer_" />

SyntaxHighlight.in

SyntaxHighlight.in is an online tool that displays formatted source code. It doesn’t use dynamic styling (so there’s no flash of unstyled content), is only about 6kb (JS and CSS), and code can be opened in a popup for easy printing.

class="spacer_" />

Enlight

Enlight is an open source e-commerce framework created by Shopware. It’s based on both the Zend and Symphony 2 frameworks, but focuses on creating rich internet applications and individual e-commerce applications. It’s highly adaptable, uses a simple plugin system, and is specifically adapted to e-commerce.

class="spacer_" />

Bemio (Name your price)

Bemio is an ultra-bold sans serif typeface that bridges the gap between old fashioned signage and modern forms. It includes more than 1000 glyphs and full language support.

class="spacer_" />

Hagin (free)

Hagin is a new serif typeface with strong geometric forms and old school style. It’s perfect for a variety of graphic design, including web, print, motion graphics, and more.

class="spacer_" />

Veles (free)

Veles is a handwritten-style Cyrillic and basic Latin Ukrainian style font that comes in regular and bold weights.

class="spacer_" />

Meander (free)

Meander is an experimental script font with a freestyle winding and intertwining style. It was created by doodling with felt pens, and is best used at larger sizes.

class="spacer_" />

Wonder Brush ($29.95)

Wonder Brush is an incredibly versatile script typeface that’s perfect for display use. It was inspired in part by a 1969 typeface called Poppl Stretto, but fused with ideas found in interwar designs.

class="spacer_" />

Made for Japan ($20)

Made for Japan is a glyph typeface that was created to raise money for relief efforts after the devastating earthquake and tsunami in Japan. All proceeds from the sale of this typeface are delivered directly to organizations in Japan.

class="spacer_" />

Anodyne ($19)

Anodyne is a weathered all-caps font with hand-printed texture. Layering regular and shadow versions offers a variety of unique shadow options.

class="spacer_" />

Memoir ($59)

Memoir is a very romantic script font, inspired by handwritten letters, journals, and documents dating to the 18th century. It’s designed to allow letters to connect fluidly, as if they were actually written.

class="spacer_" />

Eterea ($134)

Eterea is an antique-style font that comes in 12 weights and styles. It includes italics, small caps, swash caps, handtooled caps, ornamented caps, and calligraphic caps.

class="spacer_" />

Uniwerek ($46)

Uniwerek is a hand drawn font reminiscent of university sportswear. It includes six fonts, including stencil and light versions.

[ Go to Source ]