Nowy landing page

Czołem! Chciałbym zaprezentować nową (starą) wersję homesite mojej domeny i nie miał bym tutaj o czym pisać, gdyby nie to, że napisałem ją zupełnie od nowa. Mimo, że nie jest ona z pozoru jakoś wybitnie zaawansowana, a sam "projekt" ma mocne ponad 5 lat stażu to tym razem zawiera kilka smaczków o których myślę, że warto wspomnieć bo założenia są szczytne, a rezultat zadowalający i subtelny.

Poprzednia strona główna działała, ale nie tak jak bym od niej tego oczekiwał, kod był napisany trochę na odwal więc przepisałem na nowo to i owo bardziej smart. Poza tym miała pewien mankament w zależności od silnika przeglądarki który ją wyświetlał. Zacznijmy od założeń. Chciałem, aby niezależnie od sytuacji homesite prezentował się po prostu przyzwoicie. Zdaję sobie sprawę, że to nie są już te czasy, kiedy internet działał wolno, ale zdaję sobie sprawę, że jest sporo osób które korzystają np. z NoScript'a. Dla tego też wytypowałem trzy założenia. Strona ma wyglądać dobrze jeśli:

• nie ma w ogóle stylów
• nie ma w ogóle skryptów
• strona załaduje się poprawnie

Z czego to wynika? A no z tego, że roboty również indeksują stronę i fajnie by było, aby treść jak i ewentualne miniaturki strony generowały się poprawnie. Przyjrzyjmy się zatem.

Strona nie zawierająca styli oraz skryptów js:  

Strona zawierająca style i js:

Ok. Ale co jeśli braknie skryptów js? Wówczas różnica będzie jedynie w animacji wstępnej, tylko tyle. Poza tym responsywność - obowiązek przerzuciłem z js na css, wcześniej wykonywana była funkcja .resize() w momencie zmiany rozmiaru okna.

Dobrze, a co z problemem jeśli chodzi o silnik przeglądarki? W zależności od tego w jakiej przeglądarce strona została wyświetlona możliwy był pewien specyficzny przypadek kiedy użytkownik kliknął któryś odnośnik (np. Blog), a następnie wrócił przy pomocy nawigacji historią przeglądarki. W firefox nie było większego problemu - strona została wykonana od początku. Inne przeglądarki jak na przykład Chrome kontynuowały jej wyświetlanie co było błędem w związku z tym, że po kliknięciu wykonywana jest animacja zaniku "kwadratów" w związku z czym po powrocie nadal zostawały ukryte. Obecnie strona wykrywa to i animuje ich powrót. Po więcej szczegółów zainteresowanych zapraszam do źródła. :)