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 #3 – WP-Flex, BrandColors, Derby MVC, trunk8, DbNinja

Roundup #3 - WP-Flex, BrandColors, Derby MVC, trunk8, DbNinja

WP-Flex

W ostatnim czasie pojawia się sporo tego typu szablonów do WordPressa. Mam tutaj na myśli możliwość dopasowywania się do aktualnego rozmiaru okna przeglądarki, poprzez wykorzystanie techniki “responsive design”. Jest to naprawdę bardzo przyjemna droga do prezentacji treści we właściwy sposób na urządzeniach mobilnych oraz desktopach.

WP-Flex – A blank and responsive boilerplate for WordPress


BrandColors

Jest to tak naprawdę katalog, który w swojej pracy docenią szczególnie osoby, które projektują grafikę. Kolekcja zawiera bowiem dokładne dane odnośnie kolorystyki używanej przez wiodące marki i serwisy na rynku.

BrandColors – A Gallery Of Major Brand Color Codes To Get Inspired


Derby MVC

Nie mylić z bazą danych o takiej samej nazwie! Derby MVC to lekki framework oparty o wzorzec MVC i Node.js, który pozwala na budowanie aplikacji działających w czasie rzeczywistym. Interakcja pomiędzy użytkownikami przebiega natychmiastowo, więc możliwe jest tworzenie na przykład narzędzi do pracy nad projektami bezpośrednio w przeglądarce. Myślę też, że tego typu frameworki to przyszłość jeśli chodzi o aplikacje w przeglądarce. Wszystko za sprawą mechanizmów push, które są w stanie wysyłać informacje od serwera do klienta i dynamiczne odświeżanie widoku.

Build Realtime & Collaborative Apps with Derby MVC


trunk8

Jest to rozszerzenie do biblioteki jQuery, a które pozwala – jak sama nazwa wskazuje – na manipulację długością wyświetlanego tekstu. Proste i wygodne w obsłudze narzędzie, które pozwoli zaoszczędzić nieco czasu podczas tworzenia podobnej funkcjonalności na naszej stronie.

trunk8 – A text truncation extension to jQuery


DbNinja

Jest to odpowiednik znanego pewnie wszystkim phpMyAdmin. DbNinja napisane zostało przy użyciu PHP i służy do administracji bazą danych MySQL bezpośrednio z okna przeglądarki. Całość prezentuje się bardzo dobrze i wygląda nieco na odświeżoną wersję wspomnianego phpMyAdmin. Przypomina trochę aplikację na PC, niżeli klienta webowego. Sam używam desktopowego narzędzia jakim jest HeidiSQL – polecam! Naprawdę bardzo ułatwia i przyspiesza pracę.

DbNinja – Web-Based MySQL Manager App With A Desktop-Like Interface


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