It’s coming to the end of the year 2013 and It’s time once again that we looked back on to what been release throughout the twelve months of the most useful and the most innovative tools, resources and other awesome items that been around to help us perform to the best of our abilities.

Introducing Part 1 of 2 roundups that will cover what have seen through the year but we are looking through what been happening in January through to June 2013 and what is below you may ask?

Well you will find all the best of the best in jQuery plugins , WordPress Themes and Plugins, New Apps for Desktop, Mobile, Web, WordPress and add-ons for Photoshop, and in this part 1 you can also find responsive tools including frameworks, new CMS, PHP script for caching and more.

JavaScript & jQuery Plugins

ScrollNav

The scrollNav jQuery plugin is a plugin that grabs your page’s existing content and divides it up into logical sections and builds a customizable scrolling sidebar navigation. Scroll this page and watch it follow along with you.

Aware

Aware.js is a  jQuery plugin that allows a site to customise and personalise the display of content based on a reader’s behavior without requiring login, authentication, or any server-side processing, this plugin will track a reader’s visits, flag content as new or seen and can insert relative bookmarks (to clearly delineate content added since the reader’s last visit).

Color Thief

Color Thief is a javascript for grabbing the dominant color or color palette from an image. This scrip the canvas tag to steal the colours of the site.

Maskew

Maskew is a lightweight and mobile-friendly Javascript library (with optional jQuery plugin) that will ‘skew’ the shapes of elements without distorting their contents.

xCharts

xCharts, using D3.js, is an easy to use JavaScript library for building custom data-driven chart visualizations. Unlike many other charting libraries all visualization styling can be achieved directly through CSS, giving you the control to handle the visualization however you want as well xCharts has also been designed to be dynamic, fluid, and open to integrations and customization.

AppJS

AppJS is an SDK for developing desktop applications using Node.js combined with Chromium (providing the JS, HTML5, CSS, SVG, WebGL). Developing desktop applications as AppJS  make it easy to us as it uses the same libraries and knowledge used to build websites.

Howler.js

Howler.js is a JavaScript library that works with Web Audio API by default and falls back to HTML5 Audio when not supported.

Howler works by accepting multiple file formats for cross-browser compatibility that has caching and can play many sounds at the same time (it is also mute/un-mute them one-by-one or globally). The sounds can be looped, a fadeIn/fadeOut effect exists and standard media controls are just a part of the library.

Open Tip

Opentip is a pretty cool JavaScript tooltips framework that can work with jQuery, Prototype or standalone.  It creates the tooltips with HTML5 canvas so that any creative designs are possible and they are rendered almost equally in all browsers.  Opentip

Conditionizr

Conditionizr is an intelligent jQuery plugin with simple customisable options which can make integration easy to be place into any project and that detects the end-users browser and pixel ratio, allowing you to serve specific conditional JavaScript and CSS files as needed.

Maplace.js

Maplace.js helps you to embed Google Maps into your website, quickly create markers and controls menu for the locations on map. This script will need you to jQuery and Google Maps API v3 so you need to have both in your page.

Table Of Contents – jQuery Plugin

Table of Content is a minimal, tiny jQuery plugin that will generate a table of contents, using semantic, nested lists with hash-link anchors to headings.

SVG.js

This lightweight library is for manipulating and animating SVG.  As SVG.js has no dependencies its aims to be as small as possible. The base library is 3k gzipped, with all bells and whistles about 5k.

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.  You can also define your own tests is easy, by allowing you to pick-and-choose tests to focus on the needs of your own app.

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.

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.

Packery

Packery is a JavaScript layout library that uses a bin-packing algorithm. This script can also be fancy way of saying “it fills empty gaps.” Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in an ideal spot, or dragged around.

Map Escape

The Map escape jQuery plugin detects if the viewable area on your map is greater than or beyond the screen height, and places a scrollable area to the right of your map. This scrollable area then allows you to scroll out of the map and reach the rest of the content on your web page.

Mobify

Mobify.js is an open source library for capturing and manipulating your site’s DOM before any resources have downloaded, which enables resource control, conditional loading and more. Mobify.js powers millions of daily mobile visits to your favourite websites.

SVGeezy

SVGeezy is just another simple JavaScript plugin which detects SVG images on your website, and automatically “looks” for a standard image fallback for those older, less capable browsers that needs some extra loving.

Flatdoc

Flatdoc is a small JavaScript file that fetches Markdown files and renders them as full pages. Essentially, it’s the easiest way to make open source documentation from Readme files.

Desktop, Mobile, Web Applications & Design Software Add-ons

Quote Robot – Web App – $19 p/m

QuoteRobot makes it easy to write winning proposals, invoices, and contracts. Win more customers and get paid quickly by using your existing PayPal or Stripe merchant account for only $19 per month for unlimited use. The app integrates with some popular third party services like Highrise, FreshBooks, Xero, Google Apps etc. making it easier for you to pull data from an existing database.

Cashboard – Web App – From $8.25 p/m

Cashboard isn’t just software  It’s a better way of working that will save you time, keep you efficient, and let you do more of what you love. This means your employees and clients can access the system to track time, manage tasks, or pay invoices wherever they are.

Cashboard runs in any modern web browser (Chrome, Safari, Firefox, IE 9+), and on your iPhone, iPad or Android device. Data is always in sync between any client that accesses the app. For instance, this means you can start a timer on your computer, then stop it on your phone.  With Cashboard, all of your data is stored on our servers, encrypted, and backed up. We have a 99%+ uptime rating, which you can verify here.

Masterbranch – Web App – Free

Masterbranch is a site for developers and employers who are looking for great developers. This is a place where developers can create their coding profile, which is automatically updated through their open source activity, and where employers can find candidates for available positions by looking at the skills of each developer.

Toy Chest Theme – Free

Toy Chest is a “Flat UI”-inspired color scheme for programmers who like to play. Currently supports Sublime Text, TextMate 2 Coda 2, Vim, iTerm, Terminal

Froont – Web App – Free

FROONT is a currently web-based design tool that runs in the browser and makes responsive web design accessible to all kinds of visual designers, even those without any coding skills. Please note at the time of writing this this web based tool is only available in Google Chrome.

Handsome Stats – Web App – Free

Handsome Stats connects to your existing Google Analytics and simplifies the overwhelming world of web stats. We find it superb for helping our clients understand their site traffic.

Docracy – Web App – Free

Docracy is an online repository that offers free contracts and other legal documents, curated in a quasi-social network by those who need them.

ThreeBar – Web App – From $Free

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.

Copy – Web/Desktop App – $Price varies

Copy is the easiest way to store, protect and share amazing things. It keeps your computers in sync and your files available from anywhere, even on your mobile devices. With Copy, you can also easily share files with anyone publicly or privately.

Any file you save with Copy on your computer, smartphone, or tablet is automatically accessible from any device you use no matter if you use Android, iOS, MacOS, Windows, Linux platform

CleanMyMac 2 – Mac App – From $39.95 (1 License)

CleanMyMac 2 which is from MacPaw and is a well known app for cleaning your Mac brought a number of new features & UI to the app which is aimed to find old & large files and from any format such as old installers, videos, any small things that been left from old apps after uninstalling them, cleaning up your iphone library to reclaim free space

WebCode – OSX 10.7 & up Mac App  – $39

WebCode is a vector drawing app that instantly generates JavaScript+Canvas, CSS+HTML or SVG code. While you are designing HTML5 games, infographics or web user interfaces, WebCode tirelessly writes the code for you!

Developed from the ground up with resolution independence in mind, the code generated by WebCode works great on both Retina and non-Retina displays. WebCode also imports SVG and PSD files, so if you already have some of these, you can easily reuse them.

WiFi Explorer – 10.6 & Up Mac App – $2.99

WiFi Explorer is a wireless networks scanner tool to quickly identify channel conflicts, signal overlapping or configuration problems that may be affecting the connectivity and performance of your home or office wireless network.

GhostLab – Mac App – $45

Whether you want it or not, your site is going mobile – every day. Use Ghostlab to make sure all your users get the same neat experience – whatever operating system, browser or smart phone they are using.

Triage – iOS App –  $1.99

Triage is for people who struggle to stay on top of their inbox. It doesn’t try to replace your desktop mail client, but lets you use your downtime to quickly remove the noise and stress.

Textastic – iOS App – $8.99

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 – iOS/OS X & Android App – $Free (iOS/Android)/$2.99(Mac)

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.

ownCloud – Multi App – from $0.99

ownCloud gives you universal access to your files through a web interface or WebDAV. It also provides a platform to easily view & sync your contacts, calendars and bookmarks across all your devices and enables basic editing right on the web. Installation has minimal server requirements, doesn’t need special permissions and is quick.

ownCloud is extendable via a simple but powerful API for applications and plugins.

Shotcut – Multi OS App – Free

Shotcut is a great video editor with lots of compatibility and which can be install on your 64-bit linux, Apple OS X, 32-bit Linux, 4-bit Fedora Linux 16 – 18 or to your Windows computer

Retinize It

The best Photoshop actions for preparing designs for iOS or optimized for Retina-display websites

Creative Market’s Photoshop Extentsion

Creative Market’s Photoshop Extension is to help you find the perfect design assets to make your projects amazing without leaving Photoshop, once you have find the perfect asset for your project it will auto install in a single click which means no more un-zippping downloaded files and manually installing content or even saving and restarting photoshop.

Every single purchases and saved collections that you have done through Creative Market are available inside photoshop. It doesn’t matter where you had bought it or bookmarked your favourite asset it will be able to install by single click when every you need them

Perspective Mockups

Perspective Mockups is a set of clever little Photoshop actions that makes presenting your ideas a breeze. It’s simple and uses some clever photoshop techniques to get unique and crisp results.

CSS, HTML, Frameworks, CMS, Responsive Tools & Prototyping

Play Framework

The Play framework makes it easier to build Web applications with Java. It’s a clean alternative to bloated Enterprise Java stacks. It focuses on developers productivity and targets RESTfull architectures.

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.

Bolt CMS

FoundBolt is a tool for Content Management, which strives to be as simple and straightforward as possible. It is quick to set up, easy to configure, uses elegant templates, and above all: It’s a joy to use. Bolt is created using modern open source libraries, and is best suited to build sites in HTML5 with modern markup.

Koken CMS

Koken makes it easy for designers, photographers, and other creatives to publish their own websites. It includes exceptional media management features via a dedicated, desktop-like interface. You can include all kinds of content, including text, images, videos, slideshows, tweets, and more. Content from Flickr, Instagram, and Vimeo are super easy to display.

Sassaparilla

Sassaparilla makes starting responsive web projects faster using Sass and Compass. It focuses heavily on better typography with exceptional vertical rhythm, and lets you work in px while compiling in ems, eliminating a lot of math designers often need to do. It supports variables using Sass for things like color.

Topcoat

Topcoat is CSS for clean and fast web apps, with code for both desktop and mobile devices. It includes a huge number of elements, including toggles, actions, fonts, form elements, and much more.

Pure

Pure is a set of small, responsive CSS modules that you can use in every web project. Pure is ridiculously tiny as the entire set of modules clocks in at 5.7KB minified and gzipped, without forgoing responsive styles, design, or ease of use. It Crafted with mobile devices in mind, it was important to keep the file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you’ll save even more bytes.

Userium Usability Checklist

Userium’s Usability Checklist is a simple, researched based, usability checklist, which you can use to catch the most common usability issues that you find on any websites by doing user testing you can fix any obvious usability problems.

Fitgrd

Fitgrd is not a framework. It’s a solid foundation to build up your own responsive website. It is designed for rapid prototyping, but also runs well in production environments. This grid system is perfect for advanced web designers who don’t want to have their pages look like “bootstraped”. Everything but the grid is up to you and gives you the ability to save a lot of dispensable code. Give it a try and you’ll love it.

Browserhacks

Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs.

TimeJump

TimeJump seemlessly adds deep linking capabilities to HTML5 audio and video podcasts. It works quietly behind-the-scenes to add a standardized API to your episode pages.

Flat Surface Shader

Flat Surface Shader is a great alternative for creating 3D effects with WebGL which currently isn’t entire cross-platform compatible but for the demo. It can also work with the 2D context of a canvas element or an array of SVG polygons and it uses Float32Arrays to store numerical data which is much more efficient at calculations.

Polycode

Polycode is an open-source framework for creating cross-platform applications and games. You can write your code in C++ or Lua using the Polycode IDE. Polycode supports the one-click publishing, 2D and 3D graphics, animation, font rendering and much much more.

Helios

Helios is an open-source framework that provides essential backend services for iOS apps, from data synchronization and push notifications to in-app purchases and passbook integration. It allows developers to get a client-server app up-and-running in just a few minutes, and seamlessly incorporate functionality as necessary.

Pedestal

Pedestal is a set of open source tools for building Clojure web applications. Pedestal is made up of Clojure libraries and components that play nicely together so they can be configured and re-assembled as you need them.

Clown Car Technique for Responsive Images

The Clown Car Responsive Image Technique uses media queries within SVG files to load the correct image, with all the logic remaining in the SVG file itself. It’s called the “Clown Car” technique since you are including (or stuffing) many images (clowns) into a single image file (car).

Mobile Detect

PHP Mobile Detect is a lightweight PHP class for detecting mobile devices, including tablets and smartphones. It detects a mobile environment using the User-Agent string along with specific HTTP headers.

Layout It!

LayoutIt! is NOT a site builder. It’s the kick-off for every front-end project you need to develop. LayoutIt! takes every element and component of Bootstrap to make your front-end coding easier without needing to be an expert in javascript, html5 or css3. You just build what you need to start, and then code it however you most like!

Resemble.js

Resemble.js is an HTML5 canvas and JavaScript app that analyses and compares images. You just have to drag and drop images into this app and it will highlight their differences.

phpFastCache

phpFastCache is a high-performance, distributed object caching system, generic in nature, but intended for use in speeding up dynamic web applications by alleviating database load. phpFastCache dropped the database load to almost nothing, yielding faster page load times for users, better resource utilization.

WordPress Frameworks, Plugins & Themes

MobileChief  – Free Plugin

MobileChief is a powerful, extendable mobile site builder that makes it easier than ever to create mobile landing pages and mobile sites with an intuitive drag and drop interface. Unlike other WordPress Mobile Plugins, MobileChief doesn’t take your existing WordPress site and convert it to a Mobile Optimized Site, rather it lets you create new content in new mobile sites.

The ability to create mobile sites like this, allows you to run mobile marketing campaigns with targeted information, rather than sending a user to a full website where they may get lost and never find the information you’re trying to provide.

Comment Images – Free Plugin

Comment Images gives readers the ability to upload an image to their comment right from the comment form.

WordPress Charts – Free Plugin

Create amazing HTML5 charts easily in WordPress. A flexible and lightweight WordPress chart plugin including 6 customizable chart types (line, bar, pie, radar, polar area and doughnut types) as well as a fallback to provide support for older IE.

InfiniteWP – Free WordPress App

InfiniteWP is a self-hosted app that lets you manage all of your WordPress sites from one centralised dashboard. By using a single master login you can perform one-click updates, create instant backups thats including restoring those backups with a single click,  and much more.

WordPress Creation Kit – Free Plugin

WordPress Creation Kit consists of three tools that can help you create and maintain custom post types, custom taxonomies and most importantly, custom fields and metaboxes for your posts, pages or CPT’s.

WP Awesome Support – Premium Plugin – $21

WP Awesome Support is not “just” another support plugin. It is a lot more flexible and powerful than most WordPress support plugin out there. As it has been designed to seamlessly integrate to any WordPress theme. Therefore, don’t worry about design compatibility, robust code by using the native WordPress functions as much as possible and plenty more great reasons why you should use this plugin

Retail Menu Cards – Premium Plugin $14

Retail Menu Cards is a plugin that allows you to create, manage and display menu cards in WordPress. It can be used to create a restaurant menu, just as well as a retail store’s product list or a list of services for a dental practice or beauty center.

The plugin uses a custom post type and custom taxonomies, which basically means that the process of building up your menus is exactly the same as adding posts, categories and tags in WordPress. There’s almost no learning curve and you’ll feel right at home.

Alldion – Premium Plugin $17

Alldion is a responsive, touch enabled, accordion plugin for WordPress that allows you to create multiple accordions using a drag & drop interface and show them using a shortcode or a widget.

WooCommerce Drag N Drop Shop – Premium Plugin $15

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.

Appliance – Free Theme

Appliance is a clean and minimalist theme that is ideal for blogs / magazines / portfolios. Spacious, minimalist, clean, light and very fast to load.

Chun – Free Theme

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

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.

Snaps – Free Theme

Snaps is a free portfolio theme for WordPress perfect for showcasing portrait images and galleries.

Swift – Premium Theme $45

Swift is a feature-rich, easy-to-use responsive WordPress theme built on the popular Super Skeleton theme system. This theme was designed for users and not geeks as this theme was made by a couple brothers in Southern California who just loves making killer WP themes for other folks.

SelfTitled – Premium Theme $55

SelfTitled theme uses the latest features of the fast and slick Warp theme framework. It comes with a broad range of layout and module variations as well as a neat typography to style your content.

Alongside with all the features that come with the framework itself, you have a wide range of theme options, using which you can customise almost every aspect of the theme, ranging from typography options to social icons, capital topBar, WooCommerce shop options, slider options and many more. combining these features gives you the power to make your own theme and come up with your own design and styles which best suites your need.

Thumb – Premium Theme $45

Thumb is a advanced blog Theme. Easy to setup, enhanced with Massive Panel, Visual Composer and custom shortcode wizard. This combination makes creating content extremely easy.

Webpaint – Premium Theme $40

Webpaint is a 2 in 1 (Multipage and Onepage) Responsive WordPress Theme that been boxed with a fullwidth layout options. This theme is a clean and professional design which can be a great solution for your business, portfolio, personal blog or any other purpose website. Webpaint was built to be responsive so that it will be compatible on any device such as smart phone, tablet or desktop. This theme does come with 5 premium scripts that is included which has also a total value of $70, which you will get for free with this theme.

FlatPack – Premium Theme $50

Flatpack is an incredibly clean, super flexible and fully responsive multipurpose WordPress theme. The name of the theme comes from the ability of having FlatPack objects which you can create in to something. Just like the theme whereby you use all of its extensive functionality to get your WordPress website up and running and ready to operate out of the box.

This theme has a tonne of great features including, 11 different page templates, superior feature slider, portfolio section, contact page, visual customizer, eCommerce ready, boxed and full-width layouts, array of homepage layouts, sidebar layouts, social links, google fonts, custom post styles and so much more.

Bloq – Premium Theme $40

Bloq is a high customizable theme with a full responsive layout. This is made through a dedicated control panel where it is possible to configure the majority of theme’s aspects and to choose the favourite colour among ten of them. Bloq take advantage of all WordPress features such as post-formats, page templates, custom widgets, shortcodes, including important features specifically designed for it.

GrandNews – Premium Theme $45

GrandNews is a responsive wordpress theme which is made for magazines that features modular and flexible homepage and build-in rating system. GrandNews is built for heavy-content websites, but it is suitable for all bloggers! This theme comes with many cool features as slider and carousel widgets, modular featured sections and flexible layout and possibility to manage colour schemes, responsively settings plus there are also 50+ advanced short-codes with Shortcode Generator and also has support for post formats and much more!

Design Pieces – Icons, UI’s & Typography

Airbag – Font

V.GER Grotesque – Free Font

Blyth – Free Font

Hiruko – Font

Klinic Slab – Free Font

Gin – Premium Font $45

Flat UI Kit

iPhone 5 & 4s Flat PSD

UI Kit

Flat Icons PSD

3M Portfolio Icons – Free

Flat Dashboard – UI Kit

Responsive Wireframe – PSD

Rounded Social Media Icons – PSD

Rhombus Shaped Adobe Icons – PSD

Flat Design Icons Set Vol1 – PSD

Wirekit