This is our web design and web development news series where we share our favorite design/development related articles, resources, tutorials and awesome freebies.

NEW DEVELOPMENT RESOURCES AND TOOLS

Medium.com Style Commenting Interface Plugin

SideComments.js is a UI component to give you Medium.com style comment management on the front-end. It allows users to comment directly on sections of content rather than the boring comment stream on the bottom of the page that we’re so used to.

Note that this component only handles the display / user interface of how your comments are presented. It does not provide any utilities to help manage storing or retrieving your comment data from your server, how you do that is entirely up to you.

jQuery Plugin for Generating Small World Maps – SmallWorld.js

Smallworld.js is a utility for generating map overviews using GeoJSON and HTML Canvas. It was created out of a need to render simple map previews, quickly and efficiently, without strict Terms of Use and without heavy client libraries.

The utility has no dependencies, weighs ~5kb (sans GeoJSON), and also comes with a simple wrapper to use with jQuery or Zepto.

18 Free, Open Source Responsive Image / Content Sliders

Image sliders are one of the most common component of modern web design. Go to any popular e-commerce website and you are most likely to find a carousel displaying latest products and offerings.

Image sliders are often used to present large amount of information in a limited space. They can be used to catch attention of website visitors, display important information or some times just to add colorful imagery to the design layout. Carousels can be catchy as well as distracting – but that is another debate. As advocate of usability and simplicity of the design, we believe that image sliders, when used correctly, can be used as a means to present information effectively. And fortunately, there are plenty of free and open source image sliders that you can integrate in your web design effectively. Here is a list of 18 responsive image sliders for free use.

CSS Gradient with Background Blend Mode

New CSS gradient possibilities with the background-blend-mode property.

Animated Progress Bar

An animated progress bar that updates the progress based on how far scrolled you are into a content section.

jQuery Plugin to Make Video as Background Cover Image – CoverVid

CoverVid is a jQuery plugin to make your HTML5 video behave like a background cover image. It’s so easy to use and implement.

Web-Based Digital Audio Workstation – Hya.io

Hya.io is a web-based plugin-based audio application that supports hardware MIDI though Web MIDI, audio synthesis, sequencers, and lots of plugins. You can add plugins to the workspace, connect them to route audio, play, experiment.

Hya supports AMD and ES6 modules. They use a simple JSON object that describes the plugin, and a constructor function. You can bind to the Hya GUI using various events, like handleMouseOver and handleMouseDown.

A Composite Textbox Effects Plugin: FancyText

Adding animation effects has never been so easy like it is now a days. You don’t need to learn flashy action script that somehow hard to embrace for hardcore programmers. With the advent of jQuery the animation is now very much in reach of even novice programmers. Anyone can author reusable animation scripts called “plugins” with trivial amount of knowledge about animation techniques.

Simple HashChange-Driven Tabbed Navigation – hashTabber

hashTabber is a simple JavaScript plugin for a hashchange-driven tabbed content switcher.

Create Stylish Notifications – AmaranJS

Amaran JS is a jQuery plugin to create beautiful and stylish notifications with animations.

Boilerplate & Tooling for Multi-Device Development – Web Starter Kit

Web Starter Kit from Google Based on the Google’s Web Fundamentals recommended best practices, Web Starter Kit is a boilerplate for multi-screen web development.

Create Responsive Dynamic Layouts – Brick Work

BrickWork is a reponsive jQuery plugin to create Dynamic layouts. The main goal is to create the best and most customizable dynamic layouts plugins. When uglifid the code is 15KB.

Display and Shuffle Multiple Images – Shuffle Images

Shuffle Images is a jQuery plugin that allows you to display and shuffle multiple images within a gallery by moving or shaking the cursor. The plugin is perfect for when you want to save space while allowing users to take a peak at what other images are related to the one displayed.

HTML5 Beginner’s Guide

The ability to make compelling, beautiful web pages is a useful skill to have. It allows you to present information you care about whilst capturing the attention of those who visit your web page.

25 JavaScript Libraries and Plugins for Creating Maps – Part 1

JavaScript libraries and plugins can be a solution when you want to solve a problem, after all that’s why they were created, to solve issues.

By getting your hands on the right JavaScript libraries and plugin, you can reduce the amount of time and effort needed for any web development task.

We present you with 25 JavaScript libraries and plugins for creating/building and embedding maps.

VisualCaptcha – A Configurable Captcha Solution

VisualCaptcha is a configurable captcha solution, focusing on accessibility & simplicity, whilst maintaining security. It also supports mobile, retina devices, and has an innovative accessibility solution. visualCaptcha is now available across multiple backend languages. If you are using JavaScript, Ruby, or PHP, you can use visualCaptcha.

You can now use visualCaptcha as plain JavaScript, as a jQuery plugin, and Angular JS directive, or even build your own integration with your favourite framework. You can use your own pictures or audio as captchas which can be configured through JSON files. There are thousands of websites are already enjoying the benefits of visualCaptcha, with less spam and more customer engagement.

CSV Parsing and Encoding in JavaScript – CSV.js

A comma-separated values (CSV) file stores tabular data (numbers and text) in plain-text form. A CSV file consists of any number of records, separated by line breaks of some kind; each record consists of fields, separated by some other character or string, most commonly a literal comma or tab. CSV.js is a simple, blazing-fast CSV parsing/encoding in JavaScript. Compatible with browsers, AMD, and NodeJS.

Improve Your PayPal Shopping Cart Integration – Minicart.js

Minicart.js is a great way to improve your PayPal shopping cart integration. One simple change and your users will be able to manage their shopping cart directly from your website. Additional APIs provide you the power to customize the behavior to your needs.

The minicart has a JavaScript API for advanced users to customize the behavior. The minicart HTML template and CSS can be fully customized using two different approaches: configuration and custom themes. In both approaches, all functionality from the API is available using Embedded JavaScript Template syntax.

FREE TEMPLATES AND THEMES

Umbrella – One Page Website Template

Personal Website PSD Template

One Page Free HTML CSS Website Template (Bootstrap 3) – Meilleur

Meilleur is a professional, multipurpose and responsive one page HTML5 website template which has been built using the new Twitter Bootstrap 3 framework.

FREE Product Documentation HTML Template: StockDocs

StockDocs, a FREE HTML template for creating software documentation. StockDocs is designed with the objective to provide a simple, clean and responsive HTML template that can be used to develop all sort of documentation for software products.

DESIGN FREEBIES

Modern UI Kit

A simple, elegant and free modern UI Kit available as a free PSD download under MIT licence.

You can use the royalty-free icons for any personal, commercial project including web design, software, application, advertising, film, video, computer game, gui design, illustration, for you or for your clients, without having to pay additional licensing fees.

10 Free Subtle Grunge Brushes for Photoshop

Free Vector Wireframing Kit – Shades 1.0

Free Font – Axis

Axis is a free sans-serif font inspired by the geometry of urban environment.