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

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

OpenKeyval

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

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

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

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


BookBlock

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

v


Happy

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

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 #8 – Ninja, TaffyDB, CSSFontStack, piecon, simpleWeather, Annotator, SiteCake

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

Ninja

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


TaffyDB

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

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


piecon

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

piecon – A library for generating favicon progress pie charts


simpleWeather

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


Annotator

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


SiteCake

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 #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


Speakke

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  Last.fm. 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?

TRIPLE PANEL IMAGE SLIDER


Wordsmith

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.


Peerbind

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


MobileCartly

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


BBSearch

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.

$('#search-input-1').bbsearch({
  url: 'https://api.github.com/legacy/repos/search/#bbsearch-query#?callback=?&'
, itemTemplate: '<p>[@<%= owner %>] <a href="<%= url %>"><%= name %></a></p>'
, resultsElement: $('#results-1')
, parse: function(response) { return response.data.repositories; }
});

MDMagick

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.

$('.css-selector').mdmagick();

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


Bootswatch

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.


Document-Bootstrap

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.


DownloadBuilder

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

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.


FileDrop

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]

Roundup #2 – Circle Hover, AuthManager, HTML5 File Upload, CSSComb, HubSearch, canvas-charts, Motown

Roundup #2Circle Hover

Serwis Codrops jak zawsze dostarcza nam ciekawych artykułów. Tym razem jest to tutorial o tym, jak stworzyć ciekawe efekty :hover w formie kółek z wykorzystaniem animacji CSS oraz przejść 3D w CSS3.


AuthManager - Open Source User Authentication & Management

AuthManager

Jest to bilbioteka Open Source dla PHP. W oparciu o bazę MySQL pozwala ona na autentykację oraz zarządzanie użytkownikami, wykorzystując przy tym możliwości jakie daje nam integracja z serwisami społecznościowymi, takimi jak Facebook. Jest to narzędzie bardzo podobne do innej biblioteki dla PHP, jaką jest HybridAuth.

  • Protect your content with just few lines of code.
  • Login via Facebook Connect.
  • Spam protection using reCAPTCHA.
  • Google Analytics integration.
  • User access logs.
  • Email Templates.
  • Translation ready. Can be translated in any language.

Create a HTML5 Drag & Drop File Uploader with jQuery

HTML5 File Upload

Kolejny tutorial. Serwis InsertHTML opublikował poradnik, który pokazuje nam jak za pomocą HTML5, jQuery i kilku linijek w PHP możemy zbudować upload plików wykorzystujący technikę Drag & Drop oraz Local Storage z HTML5.


Greatest tool for sorting CSS properties in specific order

CSSComb

Jestem pewien, że każda osoba, która związana jest z pisaniem styli w CSS doceni to narzędzie. W Internecie jest wiele podobnych, darmowych serwisów, które są w stanie uporządkować nieco nasz arkusz styli. Żaden jednak nie potrafi zrobić tego w określonym porządku i wedle określonych zasad, które sami jesteśmy stanie stworzyć. To podejście stara się zmienić serwis CSSComb, który pozwala na sortowanie i robienie porządku w naszym ‘styles.css’ wedle określonej kolejności, którą definiujemy w prosty sposób przed samym użyciem narzędzia.


HubSearch is a GitHub search interface built with Bootstrap, Underscore, jQuery

HubSearch

Jest to niezależny interfejs dla GitHuba zbudowany przy użyciu między innymi Backbone, Underscore i jQuery. Pozwala na przeszukiwanie repozytoriów pod kątem konkretnego języka i słów kluczowych.


canvas-charts

Biblioteka JavaScript, która – wykorzystując HTML5 Canvas API – pozwala na budowanie wykresów. Typy tworzonych grafów to nic innego jak dodatkowe pluginy, które możemy dołączyć do interfejsu renderowania w naszym kodzie.


Motown

Kolejna biblioteka, dająca tym razem możliwość tworzenia interfejsów opartych o Metro, które pojawi się nam jesienią razem z najnowszym Windows 8. Całość zbudowana została przy użyciu  HTML, CSS i JavaScript.


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

Jak to zbudowałem, czyli blog od podstaw

WordPress, Reverie, motyw, wtyczkaNo i tak. Tym razem także skorzystałem z najbardziej popularnego narzędzia do tworzenia blogów. Nie jest to mój pierwszy raz z WordPress’em, a w zasadzie jest to CMS, którego używam odkąd pamiętam. Posiada wszystko czego potrzebuję i daje się łatwo skonfigurować. Jest łatwo rozszerzalny o masę różnego rodzaju wtyczek. Posiada ogromną społeczność, która pracuje nad tym, by właśnie WordPress był jeszcze lepszy.

Szablon

To co możecie zobaczyć tutaj gołym okiem, a mam na myśli większość wyglądu bloga, to nic innego jak gotowy framework, którego użyłem, by nie robić tego samemu od nowa. Ponieważ po co tworzyć coś zupełnie od zera, jeśli ktoś daje nam to w prezencie. Prawda? :)

Motyw, który wykorzystałem to Reverie. Jest to nowoczesny, a zarazem bardzo “lekki” szablon, który wykorzystuje możliwości HTML5, CSS3 oraz technikę “responsive design”. Jego możliwości dopasowywania się do konkretnej rozdzielczości urządzenia, na którym wyświetlany jest blog, możecie zobaczyć poprzez zmianę wielkości okna przeglądarki. Framework jest także bardzo prosty i na tyle dobrze napisany, że zmiany wyglądu, a co za tym idzie – kodu – nie stanowią żadnego problemu. Nawet favicona pasuje do pierwszej litery mojego nazwiska :)

Wtyczki

A więc po kolei.

  • About Me 3000 Jest to widget, który prezentuje moją sylwetkę z prawej strony. Proste, a znacznie przyspiesza formatowanie.
  • Akismet – Jest to wtyczka, która pozwala zachować porządek w komentarzach i nie dopuszczać do pojawiania się tam spamu oraz niechcianych treści.
  • All in One SEO Pack – Bardzo rozbudowana wtyczka, a tak naprawdę “kombajn” pozwalający wspomagać pozycjonowanie bloga.
  • Contextual Related Posts – Wtyczka, która pozwala na “wyciągnięcie” – na podstawie analizy treści, tagów, kategorii – podobnych wpisów do czytanego oraz wyświetlenie ich w liście pod treścią posta.
  • Disqus Comment SystemJeżeli ktoś czyta inne blogi to Disqus’a nie trzeba takim osobom przedstawiać. Jest to system komentarzy pozwalający na dużo więcej niż standardowy formularz WordPress’a.
  • Excerpt Editor Prosty edytor treści, która pojawi się na stronie głównej zamiast całości kontentu posta.
  • Google Analytics for WordPress – Pozwala na podpięcie konta Google Analytics, z którego możemy wybrać kod śledzący dla naszej strony. Dołącza także automatycznie niezbędny kod do źródła bloga.
  • Google XML Sitemaps – Generator map strony w formacie XML. Taka wygenerowana mapa wspiera działanie botów indeksujących.
  • Image Zoom – Jak sama nazwa skazuje – jest to plugin pozwalający na dołączenie modalnego box’a, który wyświetla się po kliknięciu w obrazek, zamiast przenosić do adresu obrazka.
  • Jetpack by WordPress.com – Zbiór dodatkowych narzędzi, które pozwalają wspomóc nieco działanie WordPress’a oraz wykorzystać wtyczki zbudowane na jednym kodzie.
  • Newsletter – System do obsługi newslettera. Jest to ten sam widget z prawej strony, który pozwala Wam się zapisać do subskrypcji nowych postów. Polecam :)
  • Open Graph –  Plugin pozwalający automatycznie dodawać meta tagi powiązane z protokołem Facebook’a. Bardzo przydatne narzędzie dla osób, które promują swoje wpisy właśnie w tym serwisie.
  • Primary Feedburner – Wtyczka pozwalająca zintegrować system Feed RSS z serwisem firmy Google – Feedburner.
  • SEO Smart Links + – Narzędzie to samo przeszukuje treści wpisów w poszukiwaniu słów, które można by zamienić na odnośnik do kategorii, tagów oraz innych zdefiniowanych elementów, które powiązane mogą być z innymi treściami na blogu.
  • Simple Social Buttons – Są to po prostu przyciski serwisów społecznościowych (Facebook Like, Twitter Share, Google+ Button) i pozwalające na dzielenie się treścią wpisów z innymi. Dostępne pod każdym tytułem wpisu.
  • Smart Youtube PRO – Wtyczka pozwalająca w banalny sposób na dodawanie filmów z serwisu YouTube do naszych wpisów. Wystarczy zamienić we wklejanym do wpisu adresie do filmiku początek: http na httpv.
  • SyntaxHighlighter Evolved – Wtyczka, która pozwala kolorować składnię języków programowania w wyświetlanych wpisach. Jako, że pisałem, że będzie się tutaj pojawiać czasami nieco kodu, jest to dla mnie niezbędne narzędzie.
  • SyntaxHighlighter TinyMCE Button – Obsługa wspomnianej wyżej wtyczki w domyślnym edytorze wpisów dla WordPress’a – TinyMCE.
  • upPrev – Pozwala na wyświetlenie poprzedniego wpisu w prawym, dolnym rogu okna przeglądarki. Box pojawia się, gdy tylko przeskrolujemy stronę mniej więcej do połowy.
  • W3 Total Cache – Wtyczka do obsługi mechanizmu cache w przeglądarce. Jako, że korzystam z hostingu współdzielonego, a nie z serwera dedykowanego, gdzie sam mógłbym doinstalować sobie wszelkie potrzebne narzędzia – rola wtyczki jest nieco ograniczona, ale mimo to pozwala ona nieco przyspieszyć ładowanie się strony.
  • Wordpress Comment Bubble Plugin – Wizualna prezentacja liczby komentarzy na stronie głównej bloga.
  • WP-PageNavi – Wtyczka pozwalająca na zamianę domyślnego systemu paginacji na dużo ładniejszy i bardziej przystępny dla użytkownika. Jej działanie będziecie mogli zobaczyć jak tylko pojawi się tutaj nieco więcej wpisów.
  • WP Smush.it – Biblioteka do skalowania obrazków dodawanych na bloga. Pozwala znacznie zmniejszyć objętość, zachowując przy tym jakość prezentowanych obrazków.

Zdjęcia

Jako źródło wszelakich zdjęć, obrazków służy mi serwis PhotoPin. Posiada on prosty interfejs, a hasło głosi: free photos for bloggers. Czego chcieć więcej..

Podsumowanie

Nazbierało się tego trochę, a dochodzą do tego jeszcze tak zwane “własne pola”, których obsługę zdefiniowałem w kodzie motywu. Jeżeli uważacie, że czegoś mi tu jeszcze brakuje, coś wymaga poprawy albo powinienem coś zmienić, dajcie znać w komentarzach. Dzięki :)