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
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 make Pinterest-like grid layout possible.
Few weeks ago I have been taking part in my friend’s 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 I’ve 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 – “Don’t reinvent the wheel”. During my search I’ve found a few amazing JavaScript solutions to my problem that I proudly present in this post. Check them out! Continue reading
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. Continue reading
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 you’ll start introducing interactivity to your application and you’ll notice you need a tool, a language that is available on every modern browser, you need JavaScript! Continue reading
Replace select boxes with Select2
Select2 is a jQuery replacement for select boxes. It supports searching, remote data sets, infinite scrolling of results and it’s look and feel is based on Chosen library. Continue reading
User friendly select boxes with jQuery plugin – Chosen
Chosen is jQuery plugin rendering sleek and user friendly select boxes. It was developed to replace over-screen-height select boxes which users have to scroll to find item they were looking for. It’s compatible with modern browsers and has a legacy support for IE8. But wait, because Chosen replaces normal select boxes you don’t have to worry that users with older browsers won’t have access to them. Continue reading
Kartograph – simple and lightweight framework for creating vector maps.
Kartograph is a new simple and lightweight framework for building beautiful, interactive vector maps without Google Maps or any other mapping service. Framework was built with the needs of designers and data journalists in mind. Continue reading
jQuery Vector Map
JQVMap is a jQuery plugin that renders Maps with Scalable Vector Graphics (SVG) for modern browsers with legacy support via VML for IE. Project is based on jVectorMap.
Homepage: http://jqvmap.com/
jVectorMap drawing maps made easy
jVectorMap is a JavaScript library for drawing vector maps on your site. It makes use of SVG and VML for IE and allows for various interactions with maps.
Homepage: http://jvectormap.com/
Backbone.js giving structure to your JavaScript application
Backbone.js does not focus on either DOM manipulation like jQuery or making JavaScript more C-like but plays along by giving structure to application providing model, view and allowing simple binding between those two. It’s not a true Model View Controller model but it’s not Backbones imperfection but rather advantage. Thanks to its implementation framework allows to separate the model (data) of your application from the way it should be displayed (View) encouraging template reuse and proper application architecture. Continue reading
jQuery 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 won’t 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
Dynamo.js the easy way to enrich your content
Dynamo.js is a small jQuery based library that enriches your content by switching defined part of text with another one.It was written by Jordan Scales and can be found on GitHub. Dynamo.js cycles through web developer defined bits of text applying neat and appealing effects to draw user attention or emphasize specific content.
A dead-simple way to generate dynamic bits of HTML and add subtle effects to your content.
Zepto – minimalist JavaScript library for modern browsers
Zepto is JavaScript library for modern browsers with partial jQuery-compatible API which idea is to be small (~5-10kb) , concise, modular framework so web developers can make application happen faster. Watch out because Zepto does not support old browsers. Continue reading
Redactor – clean and beautiful wysiwyg editor
Redactor is Open Source (dual licensed MIT or GPL licensed under Creative Commons Attribution-NonCommercial 3.0 since May 29, 2012) text editor based on jQuery and tested on all major browser. With its functionalities and neat design Redaktor may be the tool you need in your project. Continue reading →
