There are various jQuery plugins for creating Pinterest-like dynamic grid layouts.

jQuery.Shapeshift is a strong alternative to them with an an extra touch: the items can be drag ‘n’ dropped (uses jQuery UI).

The drag ‘n’ drop doesn’t effect the grid negatively as the grid auto-fills the gaps when needed.

It also works on touch devices and responsive layouts.

The plugin comes with lots of options to set the margins, enable/disable drag-drops, customize animation and much more.

There are self-learners and others that find it easier to learn from another.

Although neither is better and “which one is easier/better for you” is the most important, learning the tricks -at least- from experts make so much sense.

For anyone willing to improve their web/graphic design-related skills, MightyDeals is offering a huge discount (50%) for the “Certified Adobe Training system: Train Simple“.

Train Simple has 3000+ video tutorials on technologies like HTML5, CSS3, JavaScript or WordPress and programs in this field (Dreamweaver, Photoshop, Illustrator..).

The deal includes a year of membership for $47/year (rather than $99) and there are also mobile apps for iOS/Android to watch them on the go.

P.S. Train Simple also provides certification once a specific track is followed through their system and they are trusted by companies like Zappos, Google, Nike and much more.

TopCoat is an open source library of user interface elements that are built without any JavaScript.

The elements use clean, standards-compliant HTML-CSS and all of them are created with responsive layouts in mind.

The library provides 2 style guides, one for desktop and the other for mobile where all elements are showcased inside these guides.

Using TopCoat is very straightforward, just include the CSS file, use its HTML structure and customize however wanted.

For anyone not using any front-end frameworks or looking to improve their frameworks, TopCoat is a good resource to get started quickly while developing web apps.

Moot is a fresh and free web service for instantly creating a discussion environment on any web page.

It is setup so quickly. The service provides you a unique HTML code and, once embedded into any web page, Moot appears.

Btw, Moot loads the full HTML and it is no IFRAME. This makes all types of customizations possible. You can apply CSS or even change interactions via JS.

The service provides a single feed of posts, users can follow any number of topics, view other online users or make searches quickly.

It can be a flat or threaded discussion, works in real-time (no refresh required), has an easy-to-use control panel and supports responsive layouts.

Maps are used so widely in web design and they are usually expected to be interactive when presenting data.

It can be the branches of an international company, statistics about  countries or just destinations to visualize. Like said, lots of uses.

Simplemaps is a website that provides professional, highly-customizable and interactive maps built with JavaScript and SVG (or Flash).

SVG has a wide browser-support and it works very well on mobile + tablet as well.

There are maps for “world/countries, continents, USA and Canada” and the usage +customization doesn’t require advanced development knowledge. It works by simply editing a text file and a detailed, step-by-step documentation exists.

Also, Simplemaps website has an online customization tool that enables the users to edit the countries, change colors, descriptions, links and more.

Considering that the maps are in vector (SVG), tiny or huge, they work great on all sizes. And, they even come with a zoom-in functionality.

With some JavaScript, it is so easy to add new features to them like tooltips, selectable regions and much more.

To sum up, SVG maps are definitely the way to go for modern web maps and Simplemaps has a wide range of products on the field.

P.S. For Flash fans, the website also offers similar maps in Flash with their source code.

How to join the giveaway?

Simplemaps is giving away 3 licenses (for a map of your selection). Commenting to this post is enough.

Winners will be selected on 22 April 2013 (1 week later) with the query below and announced as an update to this post.:

SELECT * FROM wp_comments WHERE comment_post_id=3981 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

Good luck to all.

The winners

Here they are:

• Roshin C (comment #1260748)
• Jed (comment #1260726)
• DR (comment #1260708)

1260708

Whoops is a PHP library for handling errors and debugging them much easily.

The library provides stack-based error handling with a good-looking error interface.

It has a simple API for dealing with exceptions, trace frames + their data and can integrate with any framework (ready-to-use integrations exist for end and Silex).

Whoops has no dependencies to run and has the ability to open referenced files directly in your editor and IDE.

It is kinda easy to find high-quality open source web apps in PHP or JavaScript. But that’s a little harder for ASP.NET.

JabbR is one of those treasures, it is an open source ASP.NET app for real-time chats.

The app uses SignalR library for the communication and allows users to register/sign-in with their e-mails or via social auth (Facebook, Google, etc.).

Users can define an avatar for themselves and communicate in a chat room (multiple chat room support with a tabbed interface) or privately.

It can display inline content from multiple sources like YouTube, Vimeo, Twitter, imgur, Google Docs and much more.

There are multiple notification types so that you also keep up with the conversation (Chrome pop-ups, live Twitter mentions or audio).

JabbR support Emojis, has keyboard shortcuts and IRC-like commands. Also, it has a responsive layout.

It is always hard to guess how users browse + how they perceive the content and flow of a website or web app.

There are tools to analyze these as much as possible and, using  methods like A/B testing, improving the usability is always possible.

However, it is always a great idea to guide users whenever they want. Nothing to lose on that for sure.

There are awesome jQuery plugins that ease guiding users and creating site/page tours for them. They are stylish, customizable and simple to use. Check them out:

Intro.js

A lightweight plugin that uses data attributes and has keyboard navigation support.

It focuses on objects beautifully and pretty easy-to-setup.

aSimpleTour

aSimpleTour uses a JSON data for all the configuration and content.

While a floating box helps managing the tour, tooltips (that can be positioned however wanted) help focusing on the elements.

Pageguide.js

Pageguide.js offers a very slick way to provide site tours.

The steps are highlighted beautifully and a sticky footer/header allows navigating through them while providing extra info about each step.
Read the rest of this entry »

On small screens, displaying a button/icon that can show/hide menu items in a single column is a very common method for responsive navigations. Even the icon used is pretty standard.

Responsive-Nav, a JavaScript plugin, simplifies creating such responsive menus with a lightweigt footprint (1.6kb minified-gzipped).

It makes use of touch events and CSS3 transitions for a great performance and works on screen readers + with a JavaScript-disabled state.

Also, the plugin is standalone and has callbacks for the init, open and close events.

When it comes to the word “social network”, Facebook and Twitter are probably the first ones that come to the mind. And, creating a new one can sounds like “creating an alternative to them (which is kinda crazy)”.

However, there are lots of niche social networks out there which are used by millions of people. And, creating a new one is not something crazy, actually, something not that hard.

Dolphin, a professional PHP web application, is the most popular self-hosted solution for building such communities.

The application has all the core features (and more) that can be expected from social networks like connecting with friends, status updates, messaging, chats, image/video sharing, groups or events.

Members can discuss on forums, have personal pages or blogs and there are even e-commerce features where the site owner and/or members can create stores and sell stuff.

Visitors can register with their e-mails or sign-up with Facebook Connect to see which other Facebook friends are there (also invite them).

Considering audio/video is shared too much on social networks and handling audio/video streaming +processing can be expensive, Dolphin has a custom media server that takes care of this.
Read the rest of this entry »