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]