50+ New Handpicked Goodies For Web Developers & Designers For April 2013

April 7, 2013 — Leave a comment

As web developers, web designers and graphic designers, we constantly looking at the sheer amount of new resources, tools and applications that we can tap into increases exponentially with time.

And here is just a quick look at some recently created resources that deserve your attention — everything from some great JavaScript & jQuery Plugins that give you a flexible & customisable tooltip, a plugin that check your content against accessibility guidelines, or a plugin that use HTML5 canvas to create some pretty awesome charts to name a few jQuery plugins that you will find below.

I’ve also included some apps for your apple devices and some apps for the web, to some awesome CSS resources, responsive frameworks, a site that check if your website is responsive. And to those lovers of WordPress I’ve included some themes and plugins both free and premium and finally I’ve also included some great design files that you can use.

JavaScript & jQuery

PowerTip

powertip

PowerTip features a very flexible design that is easy to customize, gives you a number of different ways to use the tooltips, has APIs for developers, and supports adding complex data to tooltips. It is being actively developed and maintained, and provides a very fluid user experience.

Quail

quail

Quail is a jQuery plugin for checking content against accessibility guidelines. It provides a flexible way to test for certain problems (say, images missing an alt text) and a collection of over 200 tests to get you started. Defining your own tests is easy, and you can pick-and-choose tests to focus on the needs of your own app.

jQuery lockfixed

lockfixed

jQuery lockfixed lets you stick elements within the viewport when a user scrolls. Position:fixed is toggled on only after scrolling the viewport, replicating the proposed future CSS position:sticky. And on mobile and tablet browsers, it degrades gracefully.

Chart.js

Chart-js

Chart.js is an object-oriented graphing system that uses JavaScript and HTML5 Canvas to create six different types of charts. It allows for line charts, bar charts, radar charts, pie charts, polar area charts, and doughnut charts, all beautifully animated and fully customizable. They’re even rendered in high enough resolution for retina displays.

Faker.js

Faker-js

Faker.js makes it simple to create massive amounts of fake data in Node.js and the browser. It has an easy-to-use API that allows you to generate things like names, addresses, phone numbers, companies, email addresses, user names, domain names, IP addresses, lorem ipsum, random numbers, and much more.

Pixi.js

pixi

Pixi.js is a fast, lightweight 2D renderer that works across devices. It lets you take advantage of hardware acceleration without prior knowledge of webGL. There’s documentation available, as well as a few demos you can check out.

Intro.js

intro-js

Intro.js makes it easy to create step-by-step user guides or new feature intros for your websites and projects. It’s fast and small, just a 4KB JavaScript file and a 2KB CSS file. It’s licensed under the MIT license for personal and commercial use, and works with all modern browsers.

Tern.js

Tern

Tern locates information it’s asked for within JavaScript. When combined with an editor plugin, it makes it easier to program JavaScript by doing things like giving you output and function argument hints and more.

Grunt.js

grunt

Grunt is a JavaScript task runner that automates repetitive tasks for you, meaning you have less manual work to deal with. Things like minification, compilation, unit testing, linting, and more can all be handled by Grunt.

RasterizeHTML.js

rasterizeHTML

Rendering HTML into canvas is severely limited for security reasons. rasterizeHTML.js circumvents these limitations by loading external images, fonts, and stylesheets and storing them inline via data: URIs or inline style elements, giving you a lot more freedom in what you can do with canvas.

Boxen

boxen

Boxen manages all of your dependencies for you, simplifying and automating your dev environment. Each time you run it, it updates to the latest release, is fully configurable, and makes it easy to use different databases and languages.

Anima

anima

Anima.js makes it easy to animate a hundred or more objects at a time with CSS and JavaScript. It also gives more control over your animations, and can even create CSS-only animations (though those offer less control and the feature is only experimental at the moment).

Superhero.js

superhero-js

Superhero.js is a collection of the best articles, videos, and presentations for managing a large JavaScript code base. It includes resources that tell you everything you need to know to create and maintain better JavaScript code.

Desktop, Mobile & Web Applications

Pling – Mac/iOS App

pling

Pling is a push-to-talk voice messenger that helps teams and individuals communicate quickly and naturally. Send messages to individuals or groups with the speed and brevity of a text message and the personality and ease of a human voice.

Kickoff – Mac/iOS App

kickoff

Kickoff is a real-time chat and task sharing tool designed for small teams. And with its offline support, deep integration with Mountain Lion and lightning fast performance, Kickoff makes your team even more productive.

Textastic – Mac/iOS App

textastic-app

Textastic is a simple and fast text, code and markup editor. With support for more than 80 source code and markup languages, it brings the powerful syntax coloring engine of the popular iOS code editor to the Mac.

Instashare – Mac/iOS App

instashareapp

Transfer files the easy way, just drag & drop the file and we will handle the rest. Available for iOS and Mac OS X, support for different systems coming soon.

ThreeBar – Web App

threebar

ThreeBar is a service designed to help promote content to your readers. As soon as a visitor lands on your web page, a custom designed welcome bar will slide down from the top of the page with your message and button. This message can be a promotion for your new book, a special limited time coupon code, or even just a welcome message to your visitors.

Retina Folio – Web App

retinafolio

RetinaFolio generates portfolio sites for creative professionals using images and videos uploaded to users’ Dropbox accounts, so they’re easy to set up and maintain and that you can share your galleries with friends, password protect them, or embed them in your own websites and blogs.

Editor – Web App

Editor

Editor is a simple online Markdown editor that you can host on your own servers. It’s sort of a hybrid between a WYSIWYG editor and a standard Markdown editor, with icons for inserting bold, italic, blockquotes, lists, links, images, and more.

CSS, HTML, Responsive & Frameworks Resources

CSSmatic

cssmatic

CSSmatic is a non-profit ultimate CSS tools for web designers. There are currently only four useful tools at the moment but you can use the Gradient Generator, Border Radius, Noise Texture and  Box Shadow.

Razorflow

razorflow

RazorFlow PHP is a framework to build interactive, cross-device dashboards using PHP code.  Use an intuitive PHP API to configure the parts of your dashboard, and RazorFlow will process the data and intelligently render the dashboard according to the form-factor and capabilities of the user’s device.

Jeet Framework

jeet_framework

Jeet takes the best of the open source HTML5/CSS3 World and combines it into a lightweight, semantic, responsive, and blazing fast framework.

Responsable

responsablecss

Responsable is a clean responsive grid system with a typographic baseline powered by LESS/SCSS, based on Semantic.gs.

Sails

sails

Sails.js makes it easy to build custom, enterprise-grade Node.js apps. It is designed to resemble the MVC architecture from frameworks like Ruby on Rails, but with support for the more modern, data-oriented style of web app development. It’s especially good for building realtime features like chat.

Diagnosticss

diagnosticss

Diagnostic CSS can be installed via Rails or Sinatra, and will visually highlight a variety of problems with your HTML files, including inline styles, invalid links, empty elements, elements missing required attributes, and deprecated elements. Once it’s installed, it will be injected into an HTML page automatically.

Am I Responsive?

am-i-responsivedesign

Am I Responsive? lets you load your site in four different view-ports (desktop, laptop, iPad, and iPhone) to see exactly how it looks. You can even interact with the site on each device, and move the devices around. It also works with http://localhost/ and you can grab a link to share your site, too.

Rapidash

Rapidash

Rapidash gives you a standard core for building a client for your RESTful API. It’s easy to install, and there are screencasts that can show you how to use Rapidash. And there are example clients to give you an idea of how to use Rapidash for your own projects.

Preboot

preboot

Preboot is a comprehensive and flexible collection of LESS utilities. Its original variables and mixins became the precursor to Bootstrap. Since then, it’s all come full circle.

Thorax

thorax

Thorax is an opinionated Backbone and Handlebars framework for doing just that. It’s battle-tested by organizations like Walmart, ASDA, and Metalab, and has extensive documentation to get you started.  thorax

Cascade Framework

Cascade Framework

Cascade framework is not just another Bootstrap clone. Where Twitter Bootstrap puts its focus on delivering shiny user elements that can be dropped into any project and takes control of your project’s overall look-and-feel, Cascade Framework is intended to do the opposite. By splitting your CSS into seperate files based on features rather than selectors as well as by implementing a modifier design pattern inspired by SMACCS and OOCSS, Cascade Framework puts you in control!

eMobc

emobc

eMobc is a set of open source frameworks for creating web, mobile web, and native Android and iOS apps that lets you quickly develop using XML. There are jQuery, Xcode, and Java frameworks for developing for different platforms, as well as an online control panel for developing apps with XML.

WordPress Frameworks, Plugins & Themes

WooCommerce Upload My File – Free Plugin

WooCommerce Upload My File

The WooCommerce Upload My File plugin allows customers to upload a file an attach it to an order. Once an Order is processed a button will appear in the order overview page and a file upload screen will appear on order-detail page.

CopySafe PDF Protection – Free Plugin

CopySafe PDF Protection

This plugin enables the use of copy protected PDF documents in WordPress posts and pages with shortcode. The resulting embedded PDF object is supported in all popular web browsers across Windows since XP (92% of net users).

Nova Gallery – Premium Plugin $21

Nova Gallery

Nova Gallery WP makes it easy to embed the Nova Gallery – Responsive HTML5 Multimedia Gallery, in your WordPress theme. It is a HTML5 multimedia gallery enabling you to showcase your photos/audio/video in a beautiful and sleek interface.

WooCommerce Drag N Drop Shop – Premium Plugin $15

WooCommerce Drag N Drop Shop

A WordPress WooCommerce plugin that will allow your site to use drag and drop shopping experience. This is mainly used for non variation products where the product does not need further interactions to add a product to the cart.

Sensitive – Free Theme

sensitive

Fully Responsive Theme using Twitter Bootstrap with Metro Styled Accent. This theme is will make your website adaptable with mobile devices. Theme Features: Custom Homepage Settings, 3 Page Templates, Custom Background Support, Search Engine Friendly.

Chun – Free Theme

chun

A responsive CSS3 and HTML5 blogging and portfolio theme. It supports all post formats and has layout, font, and color options built into the theme customizer. The theme also supports the Custom Content Portfolio plugin, giving artists and other creative people the ability to share their work.

Ant Magazine – Free Theme

Ant Magazine

A very neat and clean black and white magazine theme. The theme supports widgets. And features theme-options, threaded-comments and multi-level dropdown menu. A simple and neat typography.

FundingPress – Premium Theme $55

Fundingpress

Fundingpress is a WordPress theme that allows you to create your own crowdfunding site. Users will be able to create projects that are brought to life through the direct support of others. A lot of thought and care went into the creation of this theme, that’s why we are proud to say that Fundingpress not only is very easy to use, but is also packed with details so that you can easily monitor the progress of your projects.

FooCamp – Premium Theme $50

foocamp

FooCamp theme is ideal solution for anybody who’s organizing a conference or barcamp. Theme has built in features that allow you to easily configure conference program schedule in different rooms and locations, speakers details, FAQ section and nice countdown.

Swift – Premium Theme $45

Swift

Swift is a feature-rich, easy-to-use responsive WordPress theme built on the popular Super Skeleton theme system (with a community of over 14,000 users). It’s designed for users, not geeks – all by a couple brothers in Southern California who just loves making killer WP themes for other folks.

Imperial – Premium Theme $40

Imperial

Imperial hotel is a wordpress theme designed for hotel, resort and hostel websites. Featured in the homepage area, the slider, features and image carousel.

Design Pieces – Icons, UI’s & Fonts

Airbag – Font

airbag

Mission Gothic – Font

mission_gothic

Lev Serif – Font

Lev Serif

Flat UI Kit

FREE flat UI kit.

iPhone 5 & 4s Flat PSD

iPhone 5-4S flat PSD

UI Kit

UI Kit – Free download

Flat Icons PSD

Flat Icons

Jericon Mini Icons

Jericon

Sketch Icon Set

Sketch icon

No Comments

Be the first to start the conversation!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s