Newly Released Tools And Resources For Web Designers And Web Developers

As you already know, I’m releasing an article with new resources and tools once every three weeks cause there are so many good ones that are released that I can’t just ignore them. I saw that slideshow plugins are very popular and you see at least one of these a week being released on the web. Besides these you will find other useful tools in here and I’m sure you’ll use them wisely.

Style Tiles

Style Tiles Tool for web designers and web developers

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.

Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room. An interior designer doesn’t design three different rooms for a client at the first kick-off meeting, so why do Web designers design three different webpage mockups?

Flow

Flow Tool for web designers and web developers

Flow is a traffic visualization like none you’ve ever seen. It’s beautiful, it’s fast, and it’s incredibly intuitive.

Instead of a line graph or a table, you get a diagram of the actual paths people take as they browse your site. Follow your users every step of the way – from the homepage, through signup, and each page they hit as they use your product.

Rhinoslider

Rhinoslider Tool for web designers and web developers

Rhinoslider is the most flexible jQuery slideshow there is. Be welcome to try it yourself. Not only do we offer a variety of effects, we also allow you to add your own styles, effects and features to the slider.

We also give you a mighty tool: The generator. Even with very limited JavaScript and jQuery experience it should be no problem to implement Rhinoslider into your website. Just build your customized call by click-and-see and copy it into your .js-file.

ResponsiveSlides.js

ResponsiveSlides.js Tool for web designers and web developers

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slideshow using images inside < ul >. It works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don’t natively support it. Only dependency is jQuery (1.4 and up supported) and that all the images are same size.

jPages

jPages Tool for web designers and web developers

jPages is a client-side pagination plugin but it gives you a lot more features comparing to most of the other plugins for this purpose, such as auto page turn, key and scroll browse, showing items with delay, completely customizable navigation panel and also integration with Animate.css and Lazy Load.

Apart from all its features, the main diference for the other pagination plugins is that with jPages you can create as many navigation panels as you want and you can choose exactly where to place them.

The plugin is very unobtrusive and it won’t apply any extra styles to the items you are paginating. It will only create and insert the links inside the element(s) you are applying the plugin to, in order to turn them into navigation panel(s).

retina.js

retina.js Tool for web designers and web developers

retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays.

When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.

Gumroad

gumroad Tool for web designers and web developers

We want to democratize the ability to sell stuff online. You’re a creative person; you create a lot of content. But most of it sits, archived, on some computer somewhere for the rest of time.

It’s either too hard, or too time-consuming, or it doesn’t even make sense to put in a store! We let you easily sell the stuff you haven’t been able to, yet.

iPicture

iPicture Tool for web designers and web developers

iPicture is a jQuery Plugin to create interactive pictures with extra descriptions. The first plugin with configuration wizard. Drag’n’Drop the tooltips for placing and setting up the plugin! Move the points around and get the code to initialize iPicture Plugin. It’s simple to add extra icon. Choose to animate the tooltip or customize the css. iPicture works with every image size. The images can be defined in a list or in divs.

Meteor

Meteor Tool for web designers and web developers

Meteor is a set of new technologies for building top-quality web apps in a fraction of the time, whether you’re an expert developer or just getting started.

Spaceport

Spaceport.io Tool for web designers and web developers

Spaceport uses OpenGL to accelerate rendering (including vector graphics) on native devices. OpenGL is the industry standard for developing portable, interactive 2D and 3D graphics applications.

With Spaceport’s graphics engine, you use versatile and efficient vector graphics formats instead of bloated sprite sheets. Doing so minimizes the size of asset downloads and drastically reduces loading times.

PanoJS3

PanoJS3 Tool for web designers and web developers

An interactive JavaScript widget for panning and zooming a panoramic image stitched together dynamically from smaller tiles. This widget can be used for viewing images that are much larger than the available space in the browser viewport. Examples include panoramas, maps or high resolution document scans.

sigma.js

sigma.js Tool for web designers and web developers

sigma.js is an open-source lightweight JavaScript library to draw graphs, using the HTML canvas element. It has been especially designed to:
– Display interactively static graphs exported from a graph visualization software – like Gephi
– Display dynamically graphs that are generated on the fly

Scrollpath

Scrollpath Tool for web designers and web developers

jQuery Scroll Path is a plugin that lets you define your own custom scroll path. What this means exactly is best understood by checking out the demo. The plugin uses canvas flavored syntax for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initating the plugin.

Scrolling can be done with the mousewheel, up/down arrow keys and spacebar. The spacebar scrolls faster than the arrow keys, and holding shift while pressing space will scroll backwards. A custom scrollbar is also included, which allows click and drag scrolling. The scrollbar is enabled by default.

The plugin also allows rotating the entire page, using CSS transforms. This can be done either along a path, or around the current position. In browsers without CSS transform support, all rotations are ignored, but paths are still followed. This means the plugin works with graceful degradation in all browsers.

LionBars

LionBars Tool for web designers and web developers

Free jQuery OSX style scrollbars. Lightweight, cross-browser, cross-platform.

SageFrame

SageFrame Tool for web designers and web developers

SageFrame is a highly extensible open source CMS that helps you build your site, and builds it to perfection. It empowers you with all the essential tools required for developing custom modules, applications, templates and various-purpose websites with ease and convenience.

The plug-n-play module concept employed in SageFrame offers enhanced dynamism to your site, and also holds provision for addition of new features. Moreover, by virtue of the drag and drop widget feature, and a highly configurable control panel, SageFrame imparts flexibility to your website like no other CMS.

Timeline

Timeline Tool for web designers and web developers

Timeline is also great for pulling in media from different sources. It has built in support for pulling in Tweets and media from Twitter, YouTube, Flickr, Vimeo, Google Maps and SoundCloud. More media types will be supported in the future.

Creating one is as easy as filling in a Google spreadsheet or as detailed as JSON.

Fiddlesalad

fiddlesalad Tool for web designers and web developers

As an extension to CSS, LESS is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax. This makes learning LESS a breeze, and if in doubt, lets you fall back to CSS.

WebPutty

WebPutty Tool for web designers and web developers

WebPutty gives you a syntax-highlighting CSS editor you can use from anywhere, the power of SCSS and Compass, a side-by-side preview pane, and instant publishing with minification, compression, and automatic cache control.

Webshims Lib

Webshims Lib Tool for web designers and web developers

Webshims Lib is a modular capability-based polyfill-loading library, which focuses on accurate implementations of stable HTML5 features, so that developers can write modern, interoperable and robust code in all browsers. It is built on top of jQuery and Modernizr.

The Wookmark jQuery plugin

The Wookmark jQuery plugin Tool for web designers and web developers

Hammer.js

Hammer.js Tool for web designers and web developers

Hammer.js is a javascript library that can be used to control gestures on touch devices. It supports the following gestures: Tap, Double tap, Hold, Drag, Transform (pinch)

Envision.js

Envision.js Tool for web designers and web developers

Envision.js is a library for creating fast, dynamic and interactive HTML5 visualizations.

Rainbow

Rainbow Tool for web designers and web developers

Rainbow is a code syntax highlighting library written in Javascript. It was designed to be lightweight (1.4kb), easy to use, and extendable. It is completely themable via CSS.

blur.js

blur.js Tool for web designers and web developers

blur.js is a jQuery plugin that produces psuedo-transparent blurred elements over other elements.

Kimai

Kimai Tool for web designers and web developers

Kimai is a free open source timetracker. It tracks work time and prints out a summary of your activities on demand. Yearly, monthly, daily, by customer, by project, by action …

It’s simplicity is its strength. Due to Kimai’s web browser based interface it runs cross-platform. Likewise you can install it as a web service or as a single-user program on your local workstation.

HTML Canvas Javascript Library

HTML Canvas Javascript Library Tool for web designers and web developers

HTML canvas library is a full-featured lightweight wrapper library of the native html canvas element written in Javascript, aimed to make visualization and animation using canvas simpler. Features animation support, layers, event capture, multitouch and many examples.

smoke.js

smoke.js Tool for web designers and web developers

A framework-agnostic styled alert system for javascript. Lightweight, flexible, css3 animation, blah blah blah easy to use something clever needs to go here.

Enjoyed this article? Subscribe to read more like it

 

Sponsors