Tuesday 21 January 2014
JSON EDITOR ONLINE : WEB-BASED TOOL TO VIEW, EDIT AND FORMAT JSON
JSON Editor Online is a web-based tool to view, edit, and format JSON. It shows your data side by side in a clear, editable treeview and in formatted plain text.
Features:
Features:
- View and edit JSON side by side in treeview and plain text.
- Edit, add, move, remove, and duplicate fields and values.
- Change type of values.
- Colorized values, color depends of the value type.
- Search & highlight text in the treeview.
- Undo and redo all actions.
- Load and save files and urls.
- Format and compact JSON in plain text.
DOUBLETAKE : JQUERY PLUGIN FOR RESPONSIVE IMAGES
Doubletake dynamically updates the src of your images based on the browser width. Start with a small, mobile-friendly image in your HTML. Doubletake will use a defined set of breakpoints to update image SRCs when necessary.
I’m using a couple of tools to help me resize the images on this page – a local copy of SLIR and the src.sencha.io web service. If you aren’t comfortable resizing images on the fly, you could simply host multiple copies and then set the Doubletake breakpoints to the sizes you have created.
I’m using a couple of tools to help me resize the images on this page – a local copy of SLIR and the src.sencha.io web service. If you aren’t comfortable resizing images on the fly, you could simply host multiple copies and then set the Doubletake breakpoints to the sizes you have created.
CONTROLLING HISTORY: THE HTML5 HISTORY API WITH JQUERY
Today we're going to look at a way to keep a sense of consistency on your website by maintaining the state of some elements even when the user navigates through history. We're effectively going to create history-inactive areas which remain in the same state while the rest of the document is navigable.
This technique effectively allows selective' loading of elements. Effectively, if the user clicks a link or presses the back button, instead of loading the whole page (most of which stays constant, like script and stylesheets), we will only load the stuff that changes, i.e. the content. By doing this we save load times There are two main reasons why you would want to only load certain elements when your user uses the back and forward button to navigate through history. This cuts out all the unnecessaries and creates a faster web experience.
This technique effectively allows selective' loading of elements. Effectively, if the user clicks a link or presses the back button, instead of loading the whole page (most of which stays constant, like script and stylesheets), we will only load the stuff that changes, i.e. the content. By doing this we save load times There are two main reasons why you would want to only load certain elements when your user uses the back and forward button to navigate through history. This cuts out all the unnecessaries and creates a faster web experience.
SWIPEVIEW : INFINITE CAROUSELS FOR MOBILE WEB WITH JAVASCRIPT
SwipeView is the super simple solution to endless seamlessly loopable carousels for the mobile browser. It's memory conservative as it uses only three elements at any given time, it's smooth as velvet since it takes advantage of hardware acceleration, it's bandwidth friendly with its 1.5kb minified/gzipped footprint.
HOWLER.JS : MODERN HTML5 WEB AUDIO JAVASCRIPT LIBRARY
Howler.js is a JavaScript library that works with Web Audio API by default and falls back to HTML5 Audio when not supported.
Features:
Features:
- Defaults to Web Audio API
- Falls back to HTML5 Audio
- Supports multiple file formats to support all browsers
- Automatic caching for Web Audio API
- Implements cache pool for HTML5 Audio
- Per-sound and global mute/unmute and volume control
- Playback of multiple sounds at the same time
- Easy sound sprite definition and playback
- Fade in/out sounds
- Methods can be chained
- Uses no outside libraries, just pure Javascript
- Lightweight, 7kb filesize (2kb gzipped)
SMOOTHIE CHARTS : JAVASCRIPT CHARTS FOR REALTIME STREAMING DATA
Smoothie Charts is a really small charting library designed for live streaming data. I built it to reduce the headaches I was getting from watching charts jerkily updating every second. What you’re looking at now is pretty much all it does. If you like that, then read on.
Saturday 18 January 2014
FLEXIBLEAREA.JS : JQUERY PLUGIN THAT DYNAMICALLY UPDATES TEXTAREA'S HEIGHT
A jQuery plugin that dynamically updates textarea’s height to fit the content.This plugin works for textareas with fixed width as well as for textareas with fluid width. The CSS resize property is set to “none” by this plugin, which means you will not be able to manually resize the textarea.
ICAROUSEL : JQUERY CAROUSEL PLUGIN
iCarousel is a powerful mobile-friendly and lightweight jQuery plugin that allows you to arrange a set of images in a carousel layout. The plugin also provides an easy to use API which will allow to further enhance the functionality of the carousel. Great for screenshoot slider.
Features:
Features:
- Highly Flexible and Customizable.
- Multiple instances allowed in a single HTML page.
- Works on iOS & Android devices.
- Auto slideshow with optional pause on hover.
- Easily resizable.
- Keyboard support.
- Touch support.
- 3D & 2D available.
- Customizable transition timing function. (easing)
- Fast, hardware accelerated CSS3 transitions.
- SEO friendly, content is not hidden.
- Powerful, documented API public methods, properties, callbacks.
- Each slide can have any html content(except video) and can be any size.
- Customizable scroll direction.
- Customizable X & Y spaces between slides.
- Unlimited slides support.
Friday 17 January 2014
CREATING WINDOWS-8-LIKE 3D ANIMATIONS WITH CSS3 AND JQUERY
I have recently realized that it’s been such a long time since CSS3 animations were introduced into the web, and yet I haven’t really experimented or made any demos with them before.
I’ve also been using Windows 8 for a while now (and loving it), and the first thing I thought was impressive about it, was the transitions and animations built into the dashboard, so I thought it would be really cool if my first experiment with 3D would be to duplicate the effects I saw in windows 8 into a demo of my own.
I’ve also been using Windows 8 for a while now (and loving it), and the first thing I thought was impressive about it, was the transitions and animations built into the dashboard, so I thought it would be really cool if my first experiment with 3D would be to duplicate the effects I saw in windows 8 into a demo of my own.
BUILDING A CIRCULAR NAVIGATION WITH CSS TRANSFORMS AND JAVASCRIPT
In this tutorial I'm going to show you how to create circular navigations using CSS transforms. I'm going to take you through the steps for creating these styles one by one, and explain the math (yikes!) and simple logic behind them so you get a clear understanding of the technique.
Like I mentioned, there's going to be some basic math involved, along with CSS transforms to create these styles. But don't worry, the math is really very simple and I'll be going through it step by step.
Like I mentioned, there's going to be some basic math involved, along with CSS transforms to create these styles. But don't worry, the math is really very simple and I'll be going through it step by step.
Subscribe to:
Posts (Atom)
