Ćwiczenia

Blueprint is a CSS framework designed to cut down on your CSS development time.

— Joshua Clayton

BlueprintCSS

1. Przygotować stronę ilustrującą możliwości frameworka Blueprint. Zacząć od ściągnięcia repozytorium Blueprint z Githuba.

Użyć narzędzia compress.rb do wygenerowania własnych wersji arkuszy CSS. Przeczytać: Blueprint's compress.rb: A Walkthrough.

2. Zainstalować rozszerzenie do Firefoksa: Dust-Me Selectors. Korzystając z tego rozszerzenia, oczyścić arkusz CSS z nieużywanych selektorów.

3. Zwalidować HTML i CSS.

4. Zainstalować rozszerzenia do przeglądarki Firefox:

Użyć Yslow do oceny strony przygotowanej w 1.

Każde rozwiązanie opisać w jblogu pod tytułem blueprint-css.

[wesołe kontakty]

Wesołe kontakty

Moje kontakty

1. Generujemy szablon aplikacji Rails o nazwie kontakty. Aplikacja kontakty powinna umożliwiać wpisywanie, edycję kontaktów: imię, nazwisko, email, www, adres, itp.

Użyć YSLow do oceny wygenerowanych stron. Zapisać wyniki w jblogu.

2. Install any HTML theme/template into your Rails app: „But how do we install theme template to our Rails apps? I don’t know. It sucks. And it takes more time than it should. Here’s my idea – a tool to install any HTML template into your Rails app. To treat any HTML template as if it was a «Ruby on Rails HTML Template». So I’ve started to try and make any «HTML Template» into a «Ruby on Rails Template» with the helper app install_theme.

Have you ever even bothered to Google for “rails html template”?

— Dr Nic

Wyszukać w sieci darmowy szablon, albo przygotować go samemu. Zainstalować za go pomocą programu install_theme.

Krótki przewodnik po install_theme napisała Karolina Steinborn, Szablony HTML dla Rails.

3. Dodać gravatary do aplikacji (użyć migracji). Skorzystać z jakiegoś gemu lub jakiejś wtyczki, na przykład Ruby on Rails Gravatar Plugin.

Albo zamiast wtyczki skorzystać z pomysłu przedstawionego w Railscasts #182. W tym screencaście, R. Bates pokazuje jak dodać do aplikacji zgrabny interfejs umożliwiający przycinanie obrazków przed umieszczeniem ich w bazie danych. Dodać taką funkcjonalność do budowanej aplikacji.

4. Wersja 3.5 Firefoxa obsługuje W3C Geolocation API. Korzystając jedengo z gemów polecanych na stronie The Ruby Toolbox

We send down exactly one .js and one .css file. If you are sending down more than one of each of these to the browser, you have a performance problem. Fix it with asset packager.

— Pivotal Labs

5. Skompresować static assets za pomocą wtyczki Asset Packager: „JavaScript and CSS Asset Compression for Production Rails Apps.” Używamy YSLow do oceny strony korzystającej z tej wtyczki. Zapisać wyniki w jblogu.

Opisać swoje doświadczenia z pkt. 1–4 w jblogu pod tytułem pierwsze-koty-za-ploty.

5. Cytat: „Compass is a Stylesheet Authoring Environment that makes your website design simpler to implement and easier to maintain.” Przeczytać do czego można użyć tego narzędzia.

[Martin Fowler]

Often when you come across something new it can be a good idea to overuse it in order to find out it's boundaries. This is a quite reasonable learning strategy. It's also why people always tend to overuse new technologies or techniques in the early days. People often criticize this but it's a natural part of learning. If you don't push something beyond its boundary of usefulness how do you find where that boundary is? The important thing is to do so in a relatively controlled environment so you can fix things when you find the boundary. (After all until we tried it I thought XML would be a good syntax for build files.)

- Martin Fowler

Dodajemy tagowanie

Do aplikacji Kontakty dodać możliwośc dodawania tagów, na przykład takich: praca, rodzina, znajomi, przypadkowi znajomi, uczelnia, wojsko, pizzeria itp.

JSON, XML

1. Faker.js — generate massive amounts of fake data in Node.js and the browser.

Korzystając z Faker.js umieścić przykłądowe dane w bazie aplikacji Rails. To samo, ale dane umieścić w seed.rb, a same dane zapisać w bazie:

rake db:seed

2. Przeczytać Ruby Libxml Tutorial - Reader API i skorzystać.

Redis

Cytat, Redweb: A Web Interface for Redis: „In my opinion, Redis is a superb option for a number of different use cases (web bookmarks/tags, working with data locally, and much more).”

Sprawdzamy, czy tak jest. Zaczynamy od instalacji RedisaRedweb.

1. Aplikacja „Bookmarks”. Inne przykłady:

2. Node.JS + Redis + Pygments: Snip.

Stylizacja Leniwca

1. Do strony z wynikami wyszukiwania dodać paginację. Skorzystać z gemu mislav-will-paginate.

2. Do wyszukiwarki dodać select-menu z listą języków obsługiwanych przez gem Ultraviolet (uv -l syntaxes). Zmodyfikować kod leniwca.local, tak aby było możliwe wyszukiwanie fragmentów kodu z wybranego języka. Wskazówka: objerzeć screencast Advanced Search Form Uwaga: na liście języków umieścić „Wszystkie języki”, „Języki skryptowe“ i „Języki kompilowane”.

3. Wpisać listę wszystkich języków do tabelki languages. Do select-menu pobrać tę listę z tej tabelki.

4. Dodać „full text search”. Wykorzystać gem xapit albo thinking-sphinx. Przykład korzystający thinking-sphinx można obejrzeć na screencaście R. Batesa, Thinking Sphinx.

5. Użyć innego ORM, np. Datamapper (przykład).

Z życia leniwców

A code snippet tool, intended for localhost usage. Add the following:

Photo Album

1. Extremely Simple Photo Album in Rails

Links