Transit is a super-smooth CSS transitions & transformations for jQuery. You can make transition on any CSS property. They will happen much smoother than if you were to use jQuery’s default .animate(). You can easily translate, rotate, scale, skew and etc.
Transit degrades older browsers by simply not doing the transformations (rotate, scale, etc) while still doing standard CSS (opacity, marginLeft, etc) without any animation. Delays and durations will be ignored. It is released under MIT License.
Requirements: jQuery Framework
Demo: http://ricostacruz.com/jquery.transit/
License: MIT License
When I started out on this app I was only really just interested in seeing if the web platform had really evolved to a point where an app like the hugely popular Instagram app could be built using just HTML, JavaScript and CSS. As it turns out we can in fact do exactly that. This article walks you through the technologies that make this possible and shows how it is entirely feasible today to build interoperable web applications that provide a great user experience no matter what brand of browser the user is running.
If you happen to be one of the two or so people who have not heard about Instagram then you might be pleased to hear that it is a hugely popular photo sharing and social networking service that allows you to take pictures, apply interesting digital filters on them and share them with the world to see. The service got so popular that it was acquired by Facebook for a bag full of cash and stock in April of 2012.
InstaFuzz is the name of the app I put together and while I don’t expect to be acquired by Facebook or anybody else for a billion green it does however make the case that an app such as this one can be built using only standards compliant web technologies such as Canvas, File API, Drag/Drop, Web Workers, ES5 and CSS3 andstill manage to runwell on modern browsers such as Internet Explorer 10,Google Chrome and Firefox. And you could easily use the code to build a Windows Store app too.
About the app
If you’d like to take a look at the app, then here’s where it is hosted at:
http://blogorama.nerdworks.in/arbit/InstaFuzz/
As soon as you load it up, you’re presented with a screen that looks like this:
The idea is that you can load up a photograph into the app either by clicking on the big red “Add†button on the bottom left hand corner or drag and drop an image file into the blackish/blue area on the right. Once you do that you get something that looks like this: Read the rest of this entry »
In the early days of internet the bulletin boards were rife with debate and conversation. Interactions were meaningful and the discussions had validity. After the latest trend of social websites these kinds of discussions have all but vanished. Today the conversations are littered with memes, funny pictures, viral videos, and trolling responses.
Moot is a radically different discussion platform, unencumbered by the weight of unnecessary features and distractions. It places the conversation back to the forefront. Clean user interface, persistent content and deep integration into the site will allow a more natural and meaningful discussion to take place. People will focus on topics they care about. You can add conversations to any site with a few lines of HTML. Gorgeous discussions, yours for free.
Requirements: –
Demo: https://moot.it/
License: License Free
Verlet-js is a simple Verlet integration physics engine written in javascript by Sub Protocol. Particles, distance constraints, and angular constraints are all supported by verlet-js. From these primitives it is possible to construct just about anything you can imagine.
You can a high level object used within the scene (ball, bridge, cloth and etc. You can also links particles together so they can interact with each other. You may use verlet-js under the terms of the very permissive MIT License.
Requirements: JavaScript Framework
Demo: http://subprotocol.com/verlet-js/
License: MIT License
The jQuery.mmenu-plugin is a jQuery plugin for creating slick, app look-alike sliding menus for you mobile website with only one line of javascript. The jQuery.mmenu-plugin provides a few options for customizing your menu. The default option values can be overridden by passing new values to the method.
After the plugin has been fired, a series of custom events are available for the menu. All custom events are bound to the .mmenu-namespace. The jQuery.mmenu-plugin was built using the jQuery-library, it is dual licensed under the MIT and GPL licenses.
Requirements: jQuery Framework
Demo: http://mmenu.frebsite.nl/
License: MIT, GPL License
Today we have 24 Flat Style Icons designed by super-talented Jan Dvořák. The PSD includes all 24 icons which are fully layered for easy customisation. They look very nice. Flat design is very popular recently, that you will find Flat Design jQuery Mobile Theme, Flat Design Style UI Kit, and Flat Design Websites for Inspirations we have mentioned some time ago.
Requirements: –
Demo: http://www.premiumpixels.com/freebies/24-flat-icons-psd/
License: License Free
Tutorialzine has shared a tutorial: Mini AJAX File Upload Form, which tell us how to create an AJAX file upload form, that will let visitors upload files from their browsers with drag/drop or by selecting them individually.
For the purpose, we will combine the powerful jQuery File Upload plugin with the neat jQuery Knob to present a slick CSS3/JS driven interface. Currently, the files are simply moved to the uploads folder, but you can extend it by adding authentication or creating records in your database.
Requirements: jQuery Framework
Demo: http://demo.tutorialzine.com/2013/05/mini-ajax-file-upload-form/
License: License Free
Today I’d like to talk about picture manipulation in HTML5, using pure Javascript.
The Test Case
The test application is simple. On the left a picture to manipulate and on the right the updated result (a sepia tone effect is applied):
The page itself is simple and is described as follow:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>PictureWorker</title>
<link href="default.css" rel="stylesheet" />
</head>
<body id="root">
<div id="sourceDiv">
<img id="source" src="mop.jpg" />
</div>
<div id="targetDiv">
<canvas id="target"></canvas>
</div>
<div id="log"></div>
</body>
</html>
The overall process to apply a sepia tone effect requires you to compute a new RGB value for every pixel of the existing source picture, and then render it on the <canvas> tag with id=”target”. Below are the formulae we use to create the new RGB values from the existing RGB values of a pixel:
finalRed= (red * 0.393) + (green * 0.769) + (blue * 0.189);
finalGreen = (red * 0.349) + (green * 0.686) + (blue * 0.168);
finalBlue= (red * 0.272) + (green * 0.534) + (blue * 0.131);
To make it a bit more realistic, I’ve added a bit of randomness to my sepia formulae. I create a noise value which ranges from 0.5 to 1, which determines the degree to which my final pixel output matches the RGB value calculated via the formulae above, versus the degree to which it retains it’s original RGB values.
Read the rest of this entry »
Ghost is an Open Source application which allows you to write and publish your own blog, giving you the tools to make it easy and even fun to do. It’s simple, elegant, and designed so that you can spend less time messing with making your blog work – and more time blogging.
Ghost has an incredibly simple concept for writing. You write in Markdown on the left, and you see an immediate preview of exactly what your post will look like in rendered HTML on the right. Ghost has a Revolutionary Dashboard, which grabs all the important data about your blog and pulls it into one place. No more clicking through tens of browser tabs to view your traffic, social media subscriptions, content performance or news feeds. If you want to try Ghost, please support them and help us bring this application to everyone by backing Ghost on KickStarter.
Requirements: –
Demo: http://tryghost.org
License: License Free
Would you like a Responsive and Touch-Friendly Audio Player? Osvaldas Valutis has built a jQuery plugin that replaces <audio> element with a little of custom HTML code. By adding some CSS you get a whole new player which looks the way you want and has the same functionality as the default player. There is no direct way to style the element. But the HTML5 DOM has methods, properties, and events for the element and thus makes it quite easily manipulable.
It has been tested on the latest Safari, Chrome, Firefox, Opera both Mac and Windows versions. The player works well on Internet Explorer 9, 10 and gracefully degrades to mini mode on earlier versions. It also works on iOS 6, Windows Phone 7 and Android 4.2 default browsers. However, the earlier Android versions does not support “audio” nor “embed” elements, so the player won’t work there at all.
Requirements: jQuery Framework
Demo: http://osvaldas.info/examples/audio-player-responsive…
License: License Free
