Perfection or Vanity

Stałem się niedawno posiadaczem konta w FFFFOUND! – serwisu przechowującego dla nas napotkany w Internecie design w formie obrazkowej i rekomendujący podobne grafiki. Serwis jest prosty do bólu – dodawanie nowych znalezisk to kliknięcie w bookmarklet i potem w obrazek – ale najbardziej spodobał mi się mechanizm przeskakiwania między kolejnymi wklejkami.

Skrypt JS pobiera aktualną pozycję strony i pozwala używać klawiszy j oraz k do nawigacji następny / poprzedni. Przyśpiesza to znacznie przeglądanie dodawanego do FFFFOUND designu. Największym smaczkiem jest jednak załadowanie następnej strony po przeskoczeniu ostatniego obrazka.

Tego typu pomysły są niesamowicie użyteczne, mimo swej pozornej prostoty. Na stronie głównej Joggera miałem podobny zamysł – chciałem ułatwić szybkie przeglądanie wpisów i dodałem strzałki przewijające widok. Chyba skuszę się o poszerzenie tej funkcjonalności.

Podczas tworzenia tego designu zachciało mi się uwiecznić proces zapisz-przełącz-przeładuj w serii screenshotów. Pokazują one w jaki sposób wygląda składanie strony przy pomocy CSS – podobną prezentację już kiedyś postowałem.

Jak widzicie, nie ma znaczenia to jak strona wygląda po wpisaniu HTML-a, ważne jest to co potem CSS z nim robi. Dodam jeszcze, jeśli nie byłoby to jasne: HTML nie był edytowany podczas tej prezentacji ani razu.

Przygotowując kawałek kodu JavaScript zechciałem wyraźnie zaznaczyć, że pływająca warstwa znajduje się nad resztą strony. Oczywistym wyborem był cień – wyzwanie polegało na tym, że chciałem aby był prawdziwie półprzezroczysty oraz wyglądał inaczej (IMO: lepiej). Od zawsze podobał mi się efekt Outer Glow w Photoshopie, stąd i taki zamierzałem zrobić w CSS.

Najtrudniej jest przestać wymyślać i dodawać nowe rzeczy. Mi się w końcu udało – tak więc po blisko czterech miesiącach developerki mam przyjemność zaprezentować siódmą odsłonę mojego bloga. Nowy design, nowy kod, skrypty oraz funkcjonalność. I może nawet najważniejsze – nowa nazwa, która znakomicie odzwierciedla moje podejście i ideały.

Dzisiejszego wieczora czytając angielskie teksty ponownie zdenerwowałem się na totalny bałagan panujący na stronie (niezastąpionego merytorycznie) słownika Ling.pl.

Czy oni nie mogą go oczyścić i postawić na zawartość?
Czy wszystko musi być takie brzydkie?

Tym razem jednak nie poprzestałem na pytaniach i postanowiłem coś z tym zrobić. Trzy godziny później miałem przed sobą plik UserCSS, który wywala wszystko co na stronie niepotrzebne i oczyszcza layout.

W erze Ajaksa otwieranie nowych okien za pomocą window.open() jest passé. Całkiem słusznie - po co rozpraszać użytkownika (i kazać mu czekać aż przeglądarka przetrawi rozkaz otwarcia okna), skoro przy pomocy prostego układu divów można zasłonić to co widzi na stronie warstwą overlay i na niej umieścić kolejną warstwę - okienko?

Tak działa sławny Lightbox otwierający obrazki albo Thickbox otwierający prawie wszystko. Tylko jest jedna rzecz, która mi się w tym nowym trendzie projektowania nie podoba - nadmierne wykorzystanie JavaScriptu. Nadmierne ponieważ 95% interfejsu potrzebnego do naszego efektu da się zbudować przy pomocy CSS.