Postarzanie zdjęć przez Javascript

W dzisiejszych czasach możliwości CSS, js, samych przeglądarek i związanych z nimi dodatków – są niemal nieograniczone. Można wykonać wszystko. Kwestia poświęcenia czasu i zaprogramowania rozwiązania… albo: Odnalezienia gotowego rozwiązania w necie. Bowiem większość rzeczy, które chcesz zrobić – zostało już zrobione i wystarczy dotrzeć do takiego rozwiązania.

Tak też było ze zdjęciami, które Klient chciał mieć postarzone, i to w jednym i tym samym stylu. Mogłem zrobić makro w Photoshopie, ale po co, skoro znalazłem VintageJS – skrypt do modyfikacji zdjęć w locie.

Dostępny dla jQ, Angulara i standalone. Mnóstwo fajnych opcji, można się wtopić w zabawę na długie godziny. Możemy edytować jaskrawość, kontrast, winietę, oświetlenie, kolory (nasycenie, nakładanie, parametry rgb), szum, sepię, ramkę (różnego rodzaju). To dużo opcji. Ale są też fajne gotowce, żeby na szybko coś ogarnąć. Polecam, działa świetnie.

Clippy – narzędzie do tworzenia kształtów

Clippy to wdzięczna nazwa dla bardzo przydatnego narzędzia, które jest kreatorem wizualnym kształtów/masek generującym za pomocą polecenia css clip-path (i odpowiednich prefixów) kod kształtu. Potrzebne, używane, zapisane w ulubionych.

Fancybox pozamiatał wszystkie lightboxy

To zdarzyło się już dawno temu, ale pomyślałem że warto to mieć na blogu. Otóż jakiś (długi) czas temu porównałem kilka óczesnych rozwiązań overlayerowych dla stron www.

Dzisiaj król jest tylko jeden, a jego nazwa to Fancybox. Ten magiczny skrypcik potrafi w zasadzie wszystko co mógłby potrafić. Jest świetny.

Isotope

isotopeŚwietny mechanizm graficznego filtrowania/sortowania przedstawia sobą skrypt Isotope. Wygląda to przefajnie, a możliwości ma wiele. Jesli nie do końca kumasz o co mi chodzi (bardzo możliwe – trudno w krótkim wpisie obrazowo opisać działanie Isotope) – kliknij i sprawdź sam(a).

Sposób na linie w js – dowolnie pochyłe

Szybciutka funkcja do rysowania dowolnych linii z punktu A do punktu B :)

function linedraw(ax,ay,bx,by)
{
    if(ay>by)
    {
        bx=ax+bx;  
        ax=bx-ax;
        bx=bx-ax;
        by=ay+by;  
        ay=by-ay;  
        by=by-ay;
    }
    var calc=Math.atan((ay-by)/(bx-ax));
    calc=calc*180/Math.PI;
    var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
    document.body.innerHTML += "
<div id='line' style='height:" + length + "px;width:1px;background-color:
black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;
transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);
transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);
-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc  + "deg);
-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);
-o-transform-origin:0% 0%;'></div>"
}

Filtrowanie obrazków w locie


CanvasQuery jest biblioteką dla elementu HTML5 ‚Canvas’, która pozwala na stosowanie z jQuery. Umożliwia stosowanie różnych metod manipulacji na grafikach, przeznaczonych co prawda dla developerów gier, ale moze webdesignerzy też coś z tym zrobią… Można na przykład w locie zapodać efekt grafiki z C64 :)

Na stronie CanvasQuery znajdziemy full-wypas rozpiskę, jak stosować tą sztuczkę, gdzie stosować, oraz wdrożenia popularnych efektów.

Fajna sprawa – zerknij na demo, aby się przekonać. ;)

Pokaz animacji CSS

Wiem że zaczynam być nudny w tym temacie, ale to trzeba zobaczyć, aby wyobrazić sobie możliwości. Google opracował prostą prezentację ukazującą wszystkie podstawowe możliwości animacji i ruchu realizowanego za pomocą HTML5, CSS3 (no i JS, SVG, WebGL). I (prawie) wszystko staje się możliwe… tylko czekać na jakiś profesjonalny edytor takich animacji…

Intro na przeglądarkę – znak czasu

Pamiętacie scenowe dema? Wypas graficzny i muzyczny, mający po prostu robić wrażenie. Szczególną formą dem były tzw. intra – czyli wypas graficzny i muzyczny, zamieszczony w pliku o ograniczonej wielkości. Nawet w 1024 bajtach dało się zmieścić kilka fajnych efektów.

Piszę o tym dlatego, że pojawiło się coś, co dla mnie jest znakiem czasu. Otóż pojawiło się właśnie takie intro 1024b, ale … na przeglądarkę. Intro nie jest megaskomplikowane, ale jak na 1 kb (JEDEN KILOBAJT!) wielkości – rzuca na kolana (aby je zobaczyć – kliknij w minaiturę obok). Jednak  nie to jest najważniejsze. Najważniejsze jest to, że dziełko jest zaprogramowane w czymś, co stanowi po części „hack” na przeglądarkę – wykorzystuje jej nietypowe funkcjonalności, a po części jest kodem js.

Zmierzam do tego, że, dla mnie w sposób jasny i widoczny, przeglądarka internetowa została po raz pierwszy potraktowana jak system operacyjny, a nawet jak cały komputer. Panie i Panowie – myślę że można już pełną gęba krzyczeć, ze zdecydowanie wchodzimy w erę wirtualizacji i systemów rozproszonych. To tylko kwestia (niedługiego) czasu – a komputery (o ile to jeszcze będą komputery) nie będą miały dysków, procesorów ani kart graficznych – będą tylko interfejsem, z mocnym łączem internetowym, a utrzymanie, przetwarzanie i generowanie danych będzie się działo „gdzieś tam w sieci”.

Żyjemy w przełomowych czasach – strasznie się z tego cieszę :)

jQuery – mój następny krok

Nauka tworzenia stron większości webmasterów wygląda mniej więcej tak:

  • uczymy się podstaw HTML
  • uczymy się programować tabelki w HTML
  • uczymy się podstaw CSS
  • zarzucamy tworzenie w tabelkach, uczymy się modelu pudełkowego
  • uczymy się podstaw JS
  • uczymy się lepszej obsługi JS i DOM
  • udoskonalamy system pudełkowy – layouty wielokolumnowe itp.
  • uczymy się AJAX
  • …gdzieś po drodze powyższych uczymy się podstaw PHP i MySQL oraz uczymy się tworzenia grafiki… być może także opanowywujemy podstawową obsługę flasha…
  • i co dalej?

Umiemy bowiem w 100% zadowolić naszych Klientów. Nasze witryny zachwycają i (po odpowiedniej dozie pracy) mogą wyglądać i zachowywać się w dowolny wymyślony sposób. Właściwie nie ma granic.

Ależ granice są. Należy się rozwijać. Stagnacja to śmierć. Długo się zastanawiałem

Następnym krokiem, według mnie, powinna być nauka zaawansowanej obsługi dobrego frameworka JS/AJAX. Przejrzałem mozliwości wszystkich popularnych silników tego typu i wybór padł na jQuery. Dlaczego? Jego stosunek parametrów użyteczności, efektywności i efektowności jest po prostu najlepszy. Plus – maszyna jQuery jest naprawdę megałatwa do naumienia nawet dla osób mających tylko blade pojęcie o JS (fakt – jakieś pojęcie trzeba jednak mieć).

Uczę się jQuery namiętnie już od kilku tygodni i im więcej się uczę – tym bardziej opada mi szczęka. :) jQuery rządzi.

Tym, których przekonałem, polecam bardzo dobry kurs jQuery na Ferrante.pl, lub wpisanie jQuery w Google. Wyników będzie sporo.