QUERY TRANSIT SUPER-SMOOTH CSS3 TRANSFORMATIONS AND TRANSITIONS

jQuery Transit is a small (~2kb gzipped) plugin that makes use of CSS3 transformations and transitions to animate website elements. Its syntax is very similar to well known jQuery.animate so you wont have problems migrating to Transit. It does support all modern browsers and degrades older by simply not doing transformation although you may fallback to standard jQuery.animate Continue reading “QUERY TRANSIT SUPER-SMOOTH CSS3 TRANSFORMATIONS AND TRANSITIONS”

AMAZING JAVASCRIPT JQUERY SLIDERS FOR YOUR WEBSITE

Carousel/sliders are everywhere on the web starting with blogs and portfolios and finishing on ecommerce solution. Some of us love them and cherish the ability to show multiple items inside one predefined container, others hate them for being similar to advertisements and introducing confusion among users. Nonetheless sliders are on a significant amount of websites and are here to stay. In this post I would like to present javascript jquery sliders which in accordance to DRY principle you might want to use in your project.

Continue reading “AMAZING JAVASCRIPT JQUERY SLIDERS FOR YOUR WEBSITE”

HOW TO: CENTER IMAGES HORIZONTALY AND VERTICALY WITH JQUERY

The problem we’re going to solve today is centering an image horizontally and vertically inside of a container. This won’t be just a simple centering  of elements but we’re going to write a script that will resize the photo to fill up the container and keep it’s aspect ratio preserved.

Continue reading “HOW TO: CENTER IMAGES HORIZONTALY AND VERTICALY WITH JQUERY”

TOP 5 INTERACTIVE JAVASCRIPT TUTORIALS YOU MAY HAVE MISSED

Starting your adventure with frontend development for Web might be a little discouraging when you notice that there are so many technologies involved in it. You need to know HTML, CSS and be aware of many differences between how browsers will render it. Then youll start introducing interactivity to your application and youll notice you need a tool, a language that is available on every modern browser, you need JavaScript!

But where to start? Do you need a book? Maybe youll search on the Internet? Those are the most common questions to ask. This article is the answer! Ive found or been introduced to some of the most intriguing and amazing interactive learning tools for JavaScript available on the Web. They are carefully chosen just for you to search no more.

Continue reading “TOP 5 INTERACTIVE JAVASCRIPT TUTORIALS YOU MAY HAVE MISSED”

JAVASCRIPT LIBRARIES THAT MAKE PINTEREST-LIKE GRID LAYOUT POSSIBLE.

Few weeks ago I have been taking part in my friends project The Daily Interactive whose intention was to create new kind of source of news for Polish readers on how social media influence the world. My job was to consult and prepare frontend for this project so Ive spent countless hours on viewing modern news magazines and papers in search of some unusual ways to present content in form of a grid..

At that time I was enchanted by amazing functionality and grid that was presented to users by Pinterest and it was the exact thing I needed. The next step was to develop that kind of fluid, gap-free grid. “Wait” I thought “Dont reinvent the wheel”. During my search Ive found a few amazing JavaScript solutions to my problem that I proudly present in this post. Check them out!

Continue reading “JAVASCRIPT LIBRARIES THAT MAKE PINTEREST-LIKE GRID LAYOUT POSSIBLE.”

JAVASCRIPT LIBRARIES THAT WILL HELP YOU WITH PARALLAX SCROLLING

Looking at what designers and webmaster are achieving with today’s technologies gives me this fear that what I know today will be outdated tomorrow. In this rapidly changing world of the Web everything what happens here seems to be mirroring something else. Have you seen the new design introduced by MySpace? No? Take a look, it’s really an astonishing design [http://vimeo.com/50071857] which makes use of horizontal scrolling, but I have this feeling that I’ve seen this already. Wasn’t it Windows 8 Metro UI? Another concept that seems to be still very popular on the Web is called “parallax scrolling”. I admire those people who transformed this simple idea into some amazing websites and after few hours of experiments I have to admit it’s not easy. I’ve gathered some amazing libraries that will ease your work at build astonishing parallaxed project. But first things first.

Continue reading “JAVASCRIPT LIBRARIES THAT WILL HELP YOU WITH PARALLAX SCROLLING”

TOP 5 FREE JAVASCRIPT CHART LIBRARIES

So you have a great idea for a web application or you want to visualize some data for your future blog post and you need chart library. After all how hard can it be to find good one. You start googling and your confused by the variety of other choices you have to make. Maybe you should buy a library or should I use a free one? Are there any free and good ones? Of course there are.

In this post you will find 5 stunning JavaScript chart libraries that make use of  either HTML5 canvas tag or SVG/VML and they need nothing but modern browser. What were the criteria for accepting libraries:

  • free – I mean really free. No watermarks, no hidden payments no functionality restriction and of course Open Source licenses preferred
  • recently updated – you can find many JavaScript chart libraries that are available on the Web but if you get a closer look youll notice that many of them are not actively developed. In this case the criteria was a commit into repository in the last six months
  • complete solution/multiple kinds of chart – of course you can choose one library for that kind of chart and the other for another kind but this brings a lot of trouble. Firstly its hard to keep all your charts look consistent. You could modify some code and make all used charts look similar but why bother. Remember the 80/20 also known as Pareto’s Principle? In this case making all charts look&feel consistent will take you hell a lot of time.
  • No flash dependency – after all this HTM5 buzz on the Web and the state of current browser HTML5 compatibility I think that its a good practice not to make your users install or update anything. Of course theres this IE case but all presented libraries have fallback for IE.

So lets explore the amazing world of JavaScript chart libraries. Continue reading “TOP 5 FREE JAVASCRIPT CHART LIBRARIES”