As designers, developers or even graphic designers we are constantly looking at for those new resources, tools and application that can help us increase our productivity while working on client or personal work.

Down below I’ve included everything from some great JavaScript tools, jQuery plugins, Apps for your Desktop, Web & Mobile devices to some awesome items in HTML5, CSS, email template, tumblr themes, mobile development and including some frameworks. And as always, I’ve also got some WordPress themes and plugins including some fonts, UI kits, icons etc

JavaScript & jQuery Plugins

ReadRemaining.js

read-remaining

Tell your readers how long they’ll need to get through all of your gibberish, with this clever jQuery plugin. With ReadRemaining.js TL;DR is a thing of the past.

Watermark.js

watermark-js

Watermark.js is a functional library for watermarking images in the browser. Written with ES6, and made available to current browsers via Babel. Supports urls, file inputs, blobs, and on-page images.

Toolbar.js

toolbar

Toolbar.js is a jQuery plugin that creates tooltip style toolbars. It allows you to quickly create tooltip style toolbars for use in web applications and websites. The toolbar is easily customisable using Font Awesome icons and provides flexibility around the toolbars display and number of icons plus You can run as many toolbars as required.

basicModal

basicmodal

BasicModal is a dialog-system for modern web-apps. It includes everything you need to display information, ask questions or request input from the user. Modals can be chained, so you can easily build a setup-assistant or show dialogs in a predefined order. Invalid input can be highlighted and handled using the included function. BasicModal uses SASS, CoffeeScript, CSS3 Flexbox and only requires jQuery on your website. It has been tested with the latest versions of Mozilla Firefox, Apple Safari, Google Chrome, Microsoft Internet Explorer (10+) and Opera.

Challenger

challenger

Challenger is a drop-in JavaScript library that adds interactive programming challenges to any page. Challenges are flexible and expressive, and are super simple to write. A challenge has requirements based on code structure and program output, and gives users a code editor to experiment in.

When new code is written, it’s run in a sandbox and the output is analysed. Challenges can be presented as one-off tests or linked together to form courses.

Desktop, Mobile & Web Applications

Squish – Mac App – $7.99 (Special price 5.99 at the time of writing)

squish-for-mac

Squish for Mac is a app for compressing and optimise images with ease. It’s never been this quick and easy to optimise your images for web, email and more as it’s comes with a Drag & Drop optimisation plus when using this app you won’t compromise on the quality of the picture just the filesize

Shrink – Mac App – Free

shrink

Shrink shows you Github issues that matter to you. It’s a free and simple app for Mac OSX 10.10 and higher.

Tweetbot for Mac – Mac App – $12.99

tweetbot-for-mac

Tweetbot is an award-winning, native Twitter client for the Mac. This full-featured client has fantastic support for multiple accounts and lists. It also has powerful mute filters, multiple column views, and much more.

Rocket Chat – Web App – Free

rocket-chat

Rocket.Chat is a Web Chat Server that been developed in JavaScript, using the Meteor fullstack framework. It is a great solution for communities and companies wanting to privately host their own chat service or for developers looking forward to build and evolve their own chat platforms. You can own an open source Slack-like chat.

Atomic – Web App – Free

atomic

With Atomic you can create your designs from scratch or bring your assets in from another drawing tool. Draw Hotspots over elements in your design and link pages together into a prototype, you can choose to animate these transitions between pages. When the same object exists on both pages, Atomic will animate any changes automatically. These connections between objects are created when you copy-and-paste them from one page to another, or when you duplicate a page. Anything that only exists on one page will be faded in or out. Happy prototyping.

A Web Whiteboard – Web App – Free

awwapp

A Web Whiteboard is touch-friendly online whiteboard app that lets you use your computer, tablet or smartphone to easily draw sketches, collaborate with others and share them with the world.

SmartIcons – Web App – Free/ $49 per year / $149 lifetime

SmartIcons

SmartIcons is the world first complete smart SVG icon system, It’s a powerful tool set empowers designers and developers to create their own icons and icon sprites in no time. With over 2500 icons in various styles powered by a robust system, the possibility is endless.

Curator – iOS App – Free

curator

Curator is a fast and visual tool for collecting, organising and presenting your ideas. Moodboards, portfolios and presentations for creative professionals.  Mix websites, text and images from your device or cloud sources like Dropbox, Instagram, Pinterest and more. Now with Sharing & Collaboration!

Pixelmator – iOS App – $6.49

pixelmator

Pixelmator for iPhone and iPad is a powerful image editor that gives you everything you need to create, edit and enhance images on the go. It lets you work seamlessly between Mac and iPad, and even work effortlessly with people who use Adobe Photoshop.

Tabio – Chrome Extentsion

tabio

Tabio is a Chrome extension designed to make managing lots of browser tabs significantly easier, as the search feature allows you to quickly and easily find the tab you’re looking for. Tabio makes it easy to organise your tabs by dimply using drag and drop to reorder. You can also use the enter, delete and arrow keys to navigate through your tabs without leaving the keyboard.

The Great Suspender – Chrome Extension

tgs

“The Great Suspender” is a free and open-source Google Chrome extension for people who find that chrome is consuming too much system resource or suffer from frequent chrome crashing. Once installed and enabled, this extension will automatically suspend tabs that have not been used for a while, freeing up memory and cpu that the tab was consuming. (I personally recommend this extension for all who use Chrome)

CSS, HTML, Frameworks & Other Resources

Wee

wee

Wee bundles many of the components that developers need to architect and produce responsive, interactive websites and apps and true to its name, Wee does all of this with a tiny footprint. Wee is a mobile-first CSS framework with reset, base, and Less mixin library that is 4KB gzipped.

Wee is organised in a simple, scalable hierarchy with a consistent structure for both style and scripts. Wee’s core JavaScript toolset brings logic to what can often become a daisy-chained nightmare. Compiling, minifying, and optimizing everything can be a pain, but Wee manages it all with a simple config file.

Outline

outline

Outline is simple CSS starter boilerplate for any new web project. It’s a modular, mobile-first framework which includes todays best practices for responsive design and core components I use on every project. Outline is designed to be a starting point. A solid foundation for your project, leaving the creativity up to you.

Sassline

sassline

Sassline sets text on the web to a baseline grid with Sass & rems using a responsive modular-scale. Sassline aims to spread better typography across the web. It can be used for prototyping, blogs or full website builds. It has recommended base typography styles and Sass mixins to work proportionally from the baseline grid using rems.

Inbox SDK

inbox-sdk

The InboxSDK is a high level Javascript library used to easily build browser extensions that interact with both Gmail and Inbox by Google. It provides all of the necessary APIs to create full-fledged applications directly inside Gmail and Inbox. Because the SDK is fully maintained and evergreen, you’ll never be forced to maintain your app. With InboxSDK, you interact with simple high level classes like ComposeView.

You call straightforward methods (like adding buttons or getting the subject) on the class and the SDK abstracts the entire DOM away from you.

Brunch

Brunch

Brunch is a builder. Not a generic task runner, but a specialized tool focusing on the production of a small number of deployment-ready files from a large number of heterogenous development files or trees.This is an extremely common need among front-end developers (or front-end designers, for that matter), who most often have the same set of needs: take a tree of LESS/SASS files to produce a small set of minified CSS files, same for JS, same for sprited images, etc.

Kore.io

kore

Kore.io is an easy to use web application framework for writing scalable web APIs in C. Its main goals are security, scalability and allowing rapid development and deployment of such APIs. Because of this Kore is an ideal candidate for building robust, scalable and secure web things. Kore makes it easy to get started without having to fiddle with build frameworks such as make. Using the builtin commands you can create, compile and run Kore applications. Kore exposes an easy to use API to build your applications.

HTTTML

htttml

HTTTML is a fun alternative to vanilla HTML. With HTTTML you can add a little extra flavor to your code while remaining completely semantic. Change your boring, standard markup, to include custom tags with more interesting and unique names. Works best with an OOCSS toolkit such as Basscss, which, along with HTTTML, was used to build this site.

Fotogenik – Tumblr Theme $32

fotogenik

Fotogenik is a minimalistic tumblr theme for photographers and anyone seeking a clean grid-based tumblr theme. Showcase your photography with a template that matches your style. Customize background-images, colors, fonts, and even layout.

Seven Pro – Tumblr Theme $32

SevenPRO

The Seven Pro Tumblr Theme is one of the most complete Tumblr themes around. It has so many features and a skin per area functionality that allows you to create many different sites from a single theme.

Barron – Tumblr Theme $32

barron

Barron is a content focused Tumblr theme that is responsive and built with a large parallax scrolling cover. Barron includes dozens of customizable feature including optional sticked topbar, overall colour adjustment and fonts family adjustment.

Zado – Email Template $18

zado

Zado comes with 5 unique templates with lot color schemes with over 15+ Modules for Flat designed Email Templates which can be use for any kind of business like Agency, Creative, Corporate, Blog, Magazine, Retail, Photographer, Artist, Designer, Freelancers and much more.

Eventy – Email Template $18

eventy

Eventy is responsive e-newsletter email template with appealing, clean and professional features, which can be used to serve multiple purposes like finance campaigns, portfolio, corporate and more for your online business and all other promotional activities, which will surely help you to drive more traffic on your site.

WordPress Plugins & Themes

Moosch Responsive Tester – Free Plugin

Moosch-Responsive-Tester

The plugin adds additional buttons to the WordPress Customizer Menu. These are used to test your website on various screen sizes.

Check and Enable GZIP compression – Free Plugin

check-and-enable-gzip-compression

This plugin checks if your WordPress site has GZIP compression enabled. Every time you run this check, your domain name will be sent to http://checkgzipcompression.com.

LearnPress – Free Plugin

LearnPress

LearnPress is a comprehensive WordPress LMS Plugin for WordPress. This WordPress LMS Plugin can be used to easily create & sell courses online. Each course curriculum can be made with lessons & quizzes which can be managed with easy-to-use user interface, we really made it for lazy people.

Advanced Media Manager – Premium Plugin $18

advanced-media-manager

The Advanced Media Manager Plugin for WordPress will make your default Media manager into a host for images and videos uploaded by users. you can create galleries, Image of the day, Video of the day, Specialised galleries, Allow or not anonymous upload. Adaptable to any theme design. Using masonry for gallery displays and comes with some powerful configuration tools, this Media Manager is your best option for creating a multimedia network.

Map’n’Points – Premium Plugin $16

mapnpoints

With this plugin you can put location of your offices, shops, pick points and any other objects on the Google map submitted in a convenient listing, location of various types of objects in different cities as well.  This plugin is easy to install and can be a great operation solution thats comes with a researched and professional design, which allows you to place an interactive map with objects listing icons on any WordPress website in just a few minutes.  The usability of using this plugin is in the highest level, user friendly and intuitive interface along with all the elements activity.

This plugin comes with three types of templates, unlimited number of digital circuits, convenient location categorizing and ability to display information about objects in a list right on the map allow you to integrate plugins into a website with any design!

Data Source – Premium Plugin $21

data-source-charts-tables-maps-and-data-grids-index=1&url_name=data-source-charts-tables-maps-and-data-grids

DataSource is a WordPress plugin focused on providing visual presentations of your data within pages of your website. DataSource allows you to present data from CSV files, Excel files, Google Spreadsheets, MySQL database or WordPress custom post types as sortable tables, various charts, grids and even maps!

Delish – Free Theme

Delish

Delish is a free WordPress theme that comes with clean, modern, minimal and fully responsive design well suited for blogs and magazine websites. Theme can be used for personal, photography, fashion, nature, health or any other creative and minimalistic style website. Delish theme is highly customizable with unlimited color options, several widgets and much more that can be adjusted via Theme Customizer. It features SEO friendly structure, logo upload, social media icons, popular post widget and translation ready setup.

ZBlackbeard 1 – Free Theme

Zblackbeard

ZBlackbeard is a modern responsive WordPress Theme. It’s perfect for web agencies, digital studios, corporate, product showcase, personal and business portfolio.

Oblique – Free Theme

oblique

Oblique is a creative masonry theme that works great for fashion or general bloggers. Amongst the features you will find a a parallax header image, full color control with unlimited colour variations, easy access to all Google Fonts, responsive design etc.

Lariz – Premium Theme $58

Lariz

Lariz is a multipurpose WooCommerce theme with square look applying the latest flat-design style trend. It’s perfect either for ecommerce site, online boutique or creative business website. With Responsive feature, you no need to worry about losing sales just because your potential customers failed to load your website page completely using any device (mobile, tablet or PC).

CompanyLaw – Premium Theme $48

company-law

CompanyLaw is the perfect WordPress theme for any lawyer website, for both large and small practices. With a range of custom posts specifically designed for attorneys and those in the legal field, CompanyLaw will make it faster than ever to create a website for the legal profession. Show of your recent cases, practice areas, office and team members quickly an easily using the custom posts. Simply add your content and CompanyLaw takes care of the hard work.

CompanyLaw comes with a powerful theme options panel and an options panel in each page as well. So now you can completely customize your site without touching any code. Control everything from site layout, typography, SEO, custom styling and so much more. Take control and make quick changes that will wow your clients.

Themesy – Premium Theme $58

themesy

Themesy is a multipurpose responsive retina template designed for create advanced projects, without external resources. Each of his demos is designed and structured for a particular type of business or activity. Their functionalities has been defined to cover all your needs intuitively. Create websites has never been so easy and fun! Themesy comes with 12 amazing ready-to-use demo sites. You can import any of them with one-click import module included with the theme.

You can choose a demo, import it and start building your web site in minutes and you can use any feature of any demo sites, no matter which one you imported, because all of them are created from the same theme. Merge demos easily with Visual Composer Templates, Themesy include a template for each layout or element included in any demo.

Design Pieces – Icons, UI’s & Typography

DO UI Kit with 250+ Components – Free

DO-UI-Kit-with-250-plus-Components-–-Free

Simple Line Icons – Free

Simple-Line-Icons-

48 Flat Design Icons Set – Free

48-Flat-Design-Icons-Set

Background Pattern – Free

Background-Pattern

Elegant Vector Kit with 60 Workspace Elements – Free

Elegant-Vector-Kit-with-60-Workspace-Elements

Coco Gothic Type Family – Free for Personal Use

Coco-Gothic-Type-Family

Ikaros – Free Font

Ikaros

Shumi – Free Font

Shumi-Free-font

Crimsons – Fonts from $20

crimsons

TCF Colar – Font $22

colar

Zosimo Cyrillic – Fonts from $39

zosimo

Exo Soft – Fonts from $30

exo-soft

iOS7 line icons – Sketch

iOS7-line-icons-–-Sketch

If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month

Share

New HandPicked Goodies for Designers & Developers for June 2015