Roundup #10 – OpenKeyval, Socialist, Reveal, SwipeView, BookBlock, Happy, jsDraw2DX

Roundup #10 - OpenKeyval, Socialist, Reveal, SwipeView, BookBlock, Happy, jsDraw2DX


OpenKeyval is a completely open key-value data store, exposed as a drop-dead simple web service. The goal is to make this a very easy way to persist data in web applications.

OpenKeyval – Instant & Web-Based Database For Any Project


Socialist is a jQuery social plugin that creates a social stream (or social „wall”) from multiple social media feeds in one place. Use it to pull content from Facebook pages, Twitter, LinkedIn, YouTube and other social. networks..

Socialist – A jQuery social media plugin


reveal.js is a framework for easily creating beautiful presentations using HTML. You’ll need a browser with support for CSS 3D transforms to see it in its full glory.

The Beautiful HTML Presentation Framework


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.

SwipeView – Infinite Carousels For Mobile Web


A jQuery plugin that will create a booklet-like component that let’s you navigate through its items by flipping the pages.



Yes, there a million form validation plugins already – but I like this approach and the good news is, if you don’t, you have other options. In fact, if you want something really full-featured for jQuery. Use this one. Personally I wanted something really lightweight and extendable (because it’s hard to be happy when you’re bloated).

Lightweight jQuery Form Validation Plugin: Happy.js


jsDraw2DX is a standalone JavaScript library for creating any type of interactive graphics with SVG (and VML for old IE browsers).

Besides the ability to generate all basic shapes like line, rectangle, polygon, circle, ellipse, arc, etc., the library can draw curves, beziers (any degree), function plots, images and decorated text.

SVG Graphics Library For JavaScript: jsDraw2DX

[1], [2], [3], [4]

Roundup #9 – gridster, Avgrund Modal, Sequence, BigScreen, D3 Charts, Toast, SlabText

Roundup #9 - gridster, Avgrund Modal, Sequence, D3 Charts, Toast, SlabText


This is it, the mythical drag-and-drop multi-column grid has arrived. Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better.

gridster.js – a jQuery plugin for building intuitive draggable layouts

Avgrund Modal

Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations.

Avgrund Modal


Sequence is the jQuery slider plugin with infinite style. It provides the complete functionality for a website slider without forcing you to use a set theme. In fact, Sequence has no in-built theme, leaving you complete creative control to build a unique slider using only CSS3 — no jQuery knowledge required!

Sequence.js – The jQuery slider plugin with infinite style


BigScreen makes it easy to use full screen on your site or in your app. It smoothes out browser inconsistencies and bugs, especially if the element you’re working with is inside of an <iframe>. It will also intelligently fall back to the older video full screen API if the element contains a <video> and the older API is available.

Full Screen Mode for Images & Videos in Web Apps

D3 Charts

In this tutorial we will introduce some basics of D3.js and create an infographic with multiple area charts along with a context tool to zoom and pan the data.



Toast is a CSS framework as simple as it can be, but no simpler. A twelve column responsive grid makes layouts a breeze, and with box-sizing you can add padding and borders to the grid, without breaking a single thing.

Toast – A simple responsive CSS framework


SlabText is a jQuery plugin for producing big, bold and responsive headlines. Put simply, the script splits headlines into rows before resizing each row to fill the available horizontal space.

jQuery Plugin for Producing Bold Responsive Headlines

[1], [2], [3], [4]

Roundup #8 – Ninja, TaffyDB, CSSFontStack, piecon, simpleWeather, Annotator, SiteCake

Roundup #8 - Ninja, TaffyDB, CSSFontStack, piecon, simpleWeather, Annotator, SiteCake


Ninja is a fully featured content authoring tool for creative professionals who need to deploy HTML5 web applications for desktop or mobile, and want to create content in a visual way.

Ninja – An authoring tool for HTML5 content and apps


How you ever noticed how JavaScript object literals look a lot like records? And that if you wrap a group of them up in an array you have something that looks a lot like a database table? TaffyDB is a libary to bring powerful database funtionality to that concept and rapidly improve the way you work with data inside of JavaScript.

Bringing Database Features into JavaScript Applications


CSSFontStack is a simple, one-page website which lists all the web-safe fonts. The website also allows us to copy the font-family CSS property for each font with a click.

A Complete List Of Web-Safe CSS Font Stacks


A tiny JavaScript library for dynamically generating progress pie charts in your favicons.

piecon – A library for generating favicon progress pie charts


A simple jQuery plugin to display the weather information for any location. The data is pulled from the public Yahoo! Weather feed via the YQL API.

Get Any Weather Information With jQuery: simpleWeather


The Annotator is an open-source JavaScript library and tool that can be added to any webpage to make it annotatable.

Annotations can have comments, tags, users and more. Morever, the Annotator is designed for easy extensibility so its a cinch to add a new feature or behaviour.

Annotator – An annotation JavaScript library


If you are looking for a simpler alternative or don’t prefer to empower your customers with so many features, SiteCake is a very good option.

SiteCake is an open source PHP CMS application which allows site admin to edit a website while browsing it.

SiteCake – Simple-Yet-Beautiful And Open Source CMS For Small Websites

[1], [2], [3]

Roundup #7 – PDF Sketch Sheets, Prism, CSS3Ps, Unfolding 3D Thumbinals, Deployd, blackCalculator

Roundup #7 - PDF Sketch Sheets, Prism, CSS3Ps, Unfolding 3D Thumbinals, blackCalculator

PDF Sketch Sheets

Quickly design awesome website wireframes and mockups on our Sneakpeekit Browser©. We provide a large sketch sheets collection with many different canvasses, grids and PSD grid templates. Any sketch sheet is a ready-to-print A4 PDF template. We have included PSD Photoshop grid templates too for quickly converting your sketch in a graphic mockup.

PDF Sketch Sheets For Creating Wireframes


Prism is a new lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s a spin-off from Dabblet and is tested there daily by thousands.

Prism – A lightweight, extensible syntax highlighter


CSS3Ps – free cloud based Photoshop plugin that converts your layers to CSS3.

Convert Your Photoshop Layers into CSS3 Styles

Unfolding 3D Thumbinals

A 3D thumbnail view concept for image slideshows: the current image gets opened up and a thumbnail view unfolds in 3d.



Deployd is a platform that makes building complex backends simple. Build APIs for web and mobile apps in minutes instead of days. Unlike working with a traditional backend, there’s no boilerplate, or configuration. Deployd works right out of the box. The best part is that you can run it however and wherever you want – it’s free and open source.

Build APIs for web and mobile apps in minutes instead of days


blackCalculator is a jQuery plugin for create a calculator. It supports CSS customization, easy translation, two options of calculators, cross-browser, allow and disallow keyboard!

blackCalculator – A customizable jQuery calculator

[1], [2], [3], [4], [5]

Roundup #6 – Screenqueri, JZoopraxiscope, Meny, BigVideo, Really Simple Slideshow, jQuery Picture, Infinity, lorem, oriDomi

Roundup #6 - Screenqueri, JZoopraxiscope, Meny, BigVideo, Really Simple Slideshow, jQuery Picture, Infinity, lorem, oriDomi

Screenqueri is a Pixel Perfect Tool to test your Responsive Design / Media Queries. Select from Pre-defined Screen Resolutions OR Drag Screen Handles To Go With Your Custom Screen Resolutions. – A responsive design testing tool


JZoopraxiscope is a jQuery plugin for making animations from static images inspired in Eadweard Muybridge’s Zoopraxiscope.

JZoopraxiscope – A jQuery plugin for making animations from static images


A three dimensional and space efficient menu concept created with JavaScript and CSS3.

Meny – A CSS 3D fold-in menu concept


BigVideo.js – The jQuery Plugin for Big Background Video.

Showing Big Background Video with BigVideo.js

Really Simple Slideshow

Really Simple Slideshow is a jQuery plugin for creating image slideshows. Images are loaded dynamically as each one is required, allowing for larger slideshows without having to pre-load lots of images.

Really Simple Slideshow: A Flexible Slider Plugin

jQuery Picture

jQuery Picture is a tiny (2kb) plugin to add support for responsive images to your layouts. It supports both figure elements with some custom data attributes and the new proposed picture format. This plugin will be made redundant when the format is approved and implemented by browsers. Lets hope that happens soon but in the meantime this plugin will be kept up to date with latest developments.

jQuery Picture – A Plugin For Responsive Images


Infinity is a UITableView for the web: it speeds up scrolling through long lists and keeps your infinite feeds smooth and stable for your users. It is small, battle-tested, and highly performant. The code is hosted on Github, and distributed under the BSD License. The annotated source is available, as are demos both with Infinity turned off and on.



Text generator that works with Node and browsers, and it includes optional jQuery plugin support.


Small script with optional jQuery support that creates an effect on images and web fonts that looks like folding paper, by using CSS 3D transforms.

[1], [2], [3], [4]

Roundup #5 – Responsive Google Map, Speakke, 3D jQuery Image Slider, Wordsmith, Peerbind, MobileCartly

Roundup #5 - Responsive Google Map, Speakke, 3D jQuery Image Slider

Responsive Google Map

Responsywne mapy od Google, przygotowane dla ekranu Retina w najnowszym iPadzie 3, to tutorial od serwisu Webdesigntuts+. Wykorzystując możliwości HTML5 i CSS3 jesteśmy w stanie stworzyć świetnie wyglądające mapy i zaprezentować je na naszej stronie. Niezwykle przydatna rzecz dla stron mobilnych, budowanych w oparciu o responsive design. Dodatkowo – dzięki meta tagom w nagłówku naszego dokumentu HTML5 dostajemy także wsparcie dla ekranów Retina.

Responsive, Retinafied Google Maps Images


To naprawdę świetnie wyglądający player audio. Po raz kolejny wykorzystano tutaj możliwości HTML5, a pewnie będzie tak tylko częściej, w związku, że od wczoraj Flash nie jest już wspierany na platformie Android (Huraa!). Trochę CSS, kilka linii JavaScript i trochę własnych ustawień i możemy osadzić na swojej stronie pełnoprawny odtwarzacz plików audio. Poza tym – wsparcie dla wielu przeglądarek, możliwość tworzenia playlist oraz integracji z Chcecie czegoś więcej?

Speakker: A Crossbrowser Audio Solution with HTML5

3D jQuery Image Slider

No i mamy kolejny ciekawy tutorial od serwisu Codrops. Tym razem jest to trzyczęściowy panel 3D, na którym prezentować możemy nasze obrazki, a zarazem osadzić możliwość ich przewijania. Całość prezentuje się bardzo efektownie. Zresztą – nie spotkałem jeszcze się na tym serwisie ze słabej jakości treścią. Myślę, że takie rozwiązanie przyda się grafikom oraz ludziom chcącym urozmaicić jakoś swoje portfolio, a może nawet i CV. Skorzystalibyście z takiego rozwiązania?



Biblioteka jQuery, która pozwala tagować słowa na naszej stronie i pobierać ich definicje z zewnętrznego serwera. Całość prosta i intuicyjna w obsłudze. Demo rozwiązania zaprezentował sam autor na swojej stronie.


To kolejny projekt wykorzystujący bibliotekę jQuery. Pozwala na przypisywanie zdarzeń konkretnym elementom lub strukturom na naszej stronie. Obsługuje zdarzenia już wbudowane, ale pozwala tworzyć także własne oraz definiować sposób ich działania. Demonstrację działania oraz dokumentację znaleźć można na stronie oficjalnej.

Peerbind: Share Events with All Visitors on Same Page


Jest to projekt e-Commerce mający umożliwić sprzedaż naszych produktów na urządzeniach mobilnych, na platformach takich jak iPhone, Android, Blackberry, czy Windows Mobile. Jako źródło danych przyjmuje dokumenty CSV, więc dane możemy budować przy pomocy zwykłego Open Office, czy Google Docs.

Open Source Mobile E-Commerce App: MobileCartly

[1], [2], [3], [4]

Roundup #4 – Metro UI CSS, Smart Time Ago, Royal Slider, BBSearch, MDMagick, Bootswatch, Document-Bootstrap, DownloadBuilder, Strapdown, FileDrop

Roundup #4 - Metro UI CSS, Smart Time Ago, Royal Slider, BBSearch, MDMagick, Document-Bootstrap, DownloadBuilder, Strapdown

Nazbierało się trochę tego przez ostatnie dwa dni. Staram się i tak wybierać tylko niektóre i co ciekawsze projekty, bo nie byłbym w stanie opisać tutaj wszystkiego. Zapraszam do lektury kolejnego Roundup.

Metro UI CSS

Framework Metro UI CSS, który stworzony został przez jednego z twórców interfejsu Metro dla nadchodzącego Windows 8. Jest to zbiór klas CSS i elementów UI, które pozwalają zbudować genialnie wyglądający interfejs w oparciu o Metro. Posiada wsparcie dla przeglądarek: IE 9+, Chrome, Opera, Safari oraz Firefox.

Metro UI CSS – A set of styles to create a site similar to the Windows 8 Metro UI

Smart Time Ago

Dodatek do jQuery, który wykorzystując znacznik <time> z  HTML5 i funkcję JavaScript do pokazania nam ilości minionego czasu od danej daty i godziny.

 <time class="timeago" datetime="2012-07-18T07:51:50Z">about 8 hours ago</time>

Smart Time Ago – A jQuery Plugin For Relative Timestamps

Royal Slider

Jedno z wielu narzędzi do pokazu slajdów. Zbudowane w oparciu o CSS3, HTML5 oraz samą bibliotekę jQuery. Potrafi obsłużyć praktycznie każdy element na stronie – od zwykłych obrazków, po treść w formie HTML i filmiki wideo. Oprócz tego, że Royal Slider jest bardzo rozbudowany i posiada bardzo dużo ciekawych opcji, to na dodatek prezentuje się bardzo efektownie. Poza tym – wykorzystuje technikę responsive, a więc Royal Slider może być użyty do budowy wersji mobilnych stron.

Royal Slider – A Powerful, Professional And Responsive jQuery Slider


Narzędzie zbudowane w oparciu o JavaScript. Powoduje zamianę elementu <input> na interaktywne pole do automatycznego wyszukiwania oraz zwracania wyników na bazie Backbone.

Współpracuje także z JSONP API, takimi jak Github, czy Twitter. Przykładowe wykorzystanie można zobaczyć na stronie autora.

  url: ''
, itemTemplate: '<p>[@<%= owner %>] <a href="<%= url %>"><%= name %></a></p>'
, resultsElement: $('#results-1')
, parse: function(response) { return; }


Bardzo proste i łatwe w integracji narzędzie, zbudowane przez tego samego autora, który stworzył wyżej wspomiane BBSearch. Pozwala na przekształcenie elementów takich jak <input>, czy <textarea> w interaktywny edytor WYSIWYG treści HTML w oparciu o Markdown, który znamy chociażby z Github’a.


Autor na swojej stronie prezentuje przykładowe wykorzystanie MDMagick i muszę stwierdzić, że prezentuje się ono bardzo ciekawie.


Katalog darmowych szablonów do Twitter Bootstrap. Możemy dzięki temu zaoszczędzić sporo czasu na tworzenie własnego wyglądu i skorzystać z już gotowej paczki. Całość prezentuje się naprawdę dobrze.


Kolejny ciekawy projekt, który wykorzystując JavaScript, bibliotekę jQuery i ponownie Twitter Bootstrap daje nam tak zwany Boilerplate do tworzenia prostych i przyjemnych dla oka stron, gdzie opisywać możemy swoje projekty. Jest to skierowane głównie do deweloperów, takich jak autorzy tych wszystkich projektów, które tutaj prezentuję. Pozwala im to zaoszczędzić sporo czasu na tworzeniu takich dokumentów od nowa. Jest to też alternatwa dla Github Pages.


Projekt wykorzystujący HTML 5 File System API do łączenia wielu plików w jeden. Mam tutaj na myśli łączenie wielu plików CSS czy JavaScript. Wpiera także łączenie plików hostowanych bezpośrednio na Github’ie. Zapytania Ajax/JSONP trzymane są w cache przy użyciu sessionStorage.


Strapdown.js – Creating elegant Markdown documents couldn’t be simpler

To kolejny projekt wykorzystujący Markdown do budowania prostych stron do opisu projektów. Jest to bardzo podobne narzędzie do Document-Bootstrap i na dodatek wykorzystujące Bootswatch, które także wspomniane zostało wyżej.


Cross-Browser Drag ‘n’ Drop File Uploader: FileDrop

Bardzo „lekka” biblioteka JavaScript do tak zwanego Drag ‚n’ Drop jeśli chodzi o uploader plików w przeglądarce. Jak sam autor przyznaje – nie wymaga wsparcia żadnych frameworków JavaScript. Wspiera za to szereg przeglądarek: Firefox 3.6, Internet Explorer 6, Google Chrome 7, SRWare Iron 4, Apple Safari 5 and Opera 11.61.

[1], [2], [3]

Nowa wersja jQuery – 1.8.0

jQuery v1.8.0

Chyba nikomu nie muszę przedstawiać, czym jest biblioteka jQuery. Pomyślcie sobie jednak, że miałoby jej nagle zabraknąć. Na szczęście tak się nie stanie, a na dodatek biblioteka ta jest ciągle mocno rozwijana. 9 sierpnia pojawiła się jej nowa wersja, oznaczona numerkiem 1.8.0.

Wraz z kolejną wersją zapowiadano znaczne zmniejszenie rozmiaru całości, a to za sprawą usunięcia zbędnego kodu, który nagromadził się w toku ewolucji. Wynik udało się jednak poprawić tylko nieznacznie. jQuery jest teraz mniejsze o 2,3KB.

Poza tym – jak przystało na nową wersję – poprawiono także szybkość i stabilność działania. Jeżeli dokłada się ciągle to nowe funkcjonalności, to nie dziwi fakt, że za każdym razem jest co optymalizować i poprawiać.

Usunięto także 160 błędów wykrytych w poprzedniej wersji.

Dużo ciekawiej przedstawiają się za to wprowadzone nowości.

Poprawa działania silnika selektorów

Ulepszony silnik jest w stanie wędrować po drzewie DOM nieco szybciej i nieco szybciej też odnajdywać dla nas selektory. Ma to z pewnością niebagatelny wpływ na szybkość działania całej strony. Co ciekawe – silnik dalej posiada wsparcie dla IE6 / IE7.

Przebudowane animacje

Całość została uproszczona po stronie użycia dostępnych metod. Większość zmian dotyczy części kodu odpowiedzialnego bezpośrednio za animacje. W nowej wersji dano nam także możliwość użycia callback (funkcja zwrotna), które informować nas będą o postępie animacji. Dokumentacja całości ma dopiero powstać, ale już teraz mamy do dyspozycji jej szkic, gdzie przedstawione są wszystkie nowinki i nowe możliwości.

Automatyczne prefiksy CSS

Obecnie każdy z silników przeglądarek ma własne prefiksy poprzedzające funkcjonalności CSS3 (Firefox -moz-, WebKit -webkit-, Internet Explorer -ms-, Opera -o-). Dla wszystkich tych, którzy używają selektorów bezpośrednio w kodzie jQuery, a które muszą być poprzedzone takimi prefiksami, przygotowano ich automatyczną obsługę. Wystarczy teraz napisać coś takiego:

.css("user-select", "none");

by dla Chrome / Safari dodało nam to -webkit-user-select, czy dla Firefox -moz-user-select.

Wszystkie informacje na temat nowo wydanej wersji możecie przeczytać na oficjalnym blogu jQuery.