Thursday Roundup # 81
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
- jQuery Plugin for Generating Small World Maps – SmallWorld.js
- 18 Free, Open Source Responsive Image / Content Sliders
- CSS Gradient with Background Blend Mode
- Animated Progress Bar
- jQuery Plugin to Make Video as Background Cover Image – CoverVid
- Web-Based Digital Audio Workstation – Hya.io
- A Composite Textbox Effects Plugin: FancyText
- Simple HashChange-Driven Tabbed Navigation – hashTabber
- Create Stylish Notifications – AmaranJS
- Boilerplate & Tooling for Multi-Device Development – Web Starter Kit
- Create Responsive Dynamic Layouts – Brick Work
- Display and Shuffle Multiple Images – Shuffle Images
- HTML5 Beginner’s Guide
- VisualCaptcha – A Configurable Captcha Solution
- Improve Your PayPal Shopping Cart Integration – Minicart.js
- FREE TEMPLATES AND THEMES
- DESIGN 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
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.
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.
VisualCaptcha – A Configurable Captcha Solution
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.
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.
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.