Connect With WRD
feed via e-mail
feed via e-mail

Posts Tagged ‘Javascript’

Few months ago, a WRD article: "9 Free JavaScript Libraries & Templates For Beautiful Web-Based Presentations" has shared great presentation engines built by web technologies.

A new presentation framework is released recently -named Impress.js- which enables us to build very beautiful outputs.

Slides can be by positioned, rotated and scaled on an infinite canvas with zoom in/out and 3D effects by making use of CSS3 transforms and transitions to create the awesomeness (which makes it only compatible with WebKit and the latest Firefox + IE browsers).

And, for older browsers, Impress.js fallbacks to a standard presentation without the effects but by keeping the functionality.

Impress.js

You'll remember Twitter Bootstrap, a toolkit by Twitter for kickstarting CSS development and creating beautiful interfaces easily.

jQuery UI Bootstrap is a jQuery UI theme that is inspired from Twitter's project and brings the slickness of it to jQuery UI widgets.

jQuery UI Bootstrap

Using the theme, it is not only possible to use the Bootstrap-themed widgets but also work with Twitter Bootstrap side-by-side without issues.

You can also read more about the motivation behind the project on the developer's web page announcing the jQuery UI Bootstrap.

JSGL is a JavaScript graphics library for drawing and moving vector shapes with ease.

The library enables us to create and transform objects (using SVG/VML) dynamically.

There are built-in elements like line, circle, ellipse, polygon, etc. and support for stroking and/or filling them with many customization options.

Demos provided (PathFinder and NeuralNet) give us a strong opinion on the capabilities of the library.

JSGL - JavaScript Graphics

Swipe JS is a lightweight (3.7kb minified) mobile slider with 1:1 touch movement (sliding content based on exact touch position).

It can display any HTML content and offers a native-like experience with features like:

  • resistant bounds (increased resistance to slide when there are no items to display next or before)
  • smart resizing on rotation as the slider resets to make sure the sliding elements are sized right
  • the size of each slide is set with the width of the container which is useful for passing different widths on responsive designs
  • detecting if you’re trying to scroll down the page or slide the content left to right

Swipe JS

Swipe is a standalone slider which doesn't rely on any JavaScript library and has few configuration options like:

  • the slide to be displayed on initial load
  • speed of transitions
  • auto slideshow to be on/off
  • and callback fired after successfully displaying a slide

Also, it has API methods for custom interactions including the display of prev-next items and getting the current position.

Fred Heusschen, a talented frontend web developer which has other resources shared at WRD, is sharing a must-bookmark one focused on image carousels.

CoolCarousels is a showcase of 20+ image sliders and carousels with each having a different look and functionality.

Cool Carousels

There are sliders with thumbnails, responsive examples, horizontal/vertical ones, lazy-loading supported sliders for displaying many images and much more.

They use jQuery as the JavaScript framework, their source codes can be seen with a click, all of them have demos and can be downloaded easily.

Spine Mobile is a JavaScript framework, built on top of SpineJS, for building mobile web apps that look and feel native.

The framework comes with specialized controllers, panel layout, hardware accelerated transitions and touch events.

Apps are developed with HTML5-CSS3 and the easiest way of building Spine Mobile apps is with Hem, Spine.app, GFX and jQuery. Also, you'll need Node.js.

It is well documented and there are open sourced examples to easily get started.

Spine Mobile

While working on a CSS file, we usually need to refresh the web page each time a new style is added or edited to see how it looks.

CSSrefresh is a JavaScript file which automizes this process by instantly applying the new styles. And, without refreshing the page.

It is a plug 'n' play solution and nothing to configure. Just insert the JavaScript file into the web pages and you are ready to go.

Optionally, there is a bookmarklet which can be simply clicked to activate CSSrefresh without inserting the JS file.

CSSrefresh

You'll remember JSMad, a pure JavaScript MP3 decoder (which was previously featured at WRD).

It came with ID3 support, works perfect in Firefox and requires "enabling Web Audio API" in Chrome.

The developers of JSMad have recently released a similar resource named ALAC.js.

It is also JavaScript library but for decoding/playing ALAC files (that are supported on iPhone, iPad, most iPods, Mac and iTunes).

Although HTML5 audio is the most compatible way to play audio in iOS devices, ALAC.js can be an alternative.

P.S. it is a port of the recently open sourced Apple Lossless decoder.

JavaScript Audio Codecs

Textualizer is a lightweight (4kb minified) jQuery plugin for creating good looking effects on text.

The plugin accepts any number of sentences (or words) and can rotate them smartly and beautifully.

jQuery Textualizer

Once a sentence is about to rotate with the other one, the letters that will be re-used are kept and move to their new locations with several effects to choose from (fadeIn, slideLeft, slideTop).

It is possible to define the duration that each item will be displayed and also the duration of the transitions. Also, functions exist to stop or pause the rotation.

AB testing is great for fine-tuning almost anything in web pages (design items, content, etc.) to find out which ones convert the best.

Instabir is a jQuery plugin for quickly implementing AB testing with a few lines of code.

It works by simply applying 2 different designs, content, etc., hiding one of them and defining these HTML elements, plugin displays only one of them randomly and records the activities into a MySQL database.

jQuery AB Testing - Instabir

There is a PHP file provided for handling the requests and recording them to the database.

Instabir also has a paid service which records all the activities itself and can present the results visually.

Uptime Robot
feed-holder
FeedBurner
  • ManageWP
  • aXmag - Flash Page Flip Magazine Software, PDF to Flash Converter
  • PSD to HTML
    PSD to HTML