[Gregoo]

Hej!

Po miesięcznej nauce HTML5, CSS3/SCSSa i lekkiego dziubnięcia JS i jQuery, właśnie opublikowałem na githubie swoją pierwszą zaprojektowaną i utworzoną responsywną stronę Click .Narazie bez podstron.

Link do repo jakby ktoś chciał zobaczyć i poczytać czego się uczyłem w tym projekcie: Click. Wiem, muszę jeszcze popracować nad dodaniem komentarzy do kodu.

I tu mam jedno pytanie jako, że ciągle się uczę:

Jak przyśpieszyć ładowanie strony?Zmniejszyć wielkość obrazków, zminimalizować kod, zmniejszyć ilość plików w head. Co jeszcze?

No i oczywiście propozycje zmian, krytykę i pull requesty na githubie też mogę przyjąć Jak narazie wiem, że trzeba zmienić tytuł na początku strony dla najmniejszych wyświetlaczy. Planuje to zrobić fittextem.js lub jedną linią @media. Dodać animację elementów za pomocą Animate.css i WOW.js No i zmienić pozycję paru obrazków na mniejszych rozdzielczościach. Nie wiem jak z wszystkimi przeglądarkami itd. dlatego jakby ktoś wiedział co zmienić, dodać odjąć-wszystko przyjmę na siebie w ramach nauki

Dzięki z góry.

#webdev #html #css #jekyll

[fenomenalnie_miotam]

@Gregoo: odblokuj pw.

[marrbacca]

@Gregoo: jeśli chodzi o prędkość ładowania to sprawdzaj YSlow (dodatek powinien być na Chrome'a i Firefoksa na pewno), a dodatkowo możesz spróbować Google Insight (dodatek na pewno do chrome'a)

[laki1]

@Gregoo: jak na pierwszą to dobra strona, na pierwszy rzut oka irytuje 'podskakiwanie' newsów przy hover.

[Gregoo]

@fenomenalnie_miotam: done

@laki1: możesz napisać jaka przeglądarka i system? Chyba, że chodzi Ci ogólnie o to przesunięcie tekstu.

@marrbacca: dzięki, sprawdzę.

[laki1]

@Gregoo: tak tak, teraz spojrzałem że to jest spowodowane przesunięciem tekstu, anyway irytujące

[Gregoo]

@laki1: Racja, popracuję nad tym.

[m.....t]

@Gregoo: możesz ładować na dzień dobry dany widok na który user wchodzi i potem ładować całą resztę.

Taka sztuczka, że user nie wie, że strona ładuje się wolno.

Masz lukę w navi, na statistics.

Powyłączaj możliwość zaznaczania elementów, które się klikają, bo to jest irytujące jak za szybko klikniesz button 2 razy to masz zaznaczenie.

coś niedobrego dzieje się też z buttonem (załącznik)

No i na koniec połączenie mapki ze stopką

[m.....t]

@mortt: i jeszcze to:

ncaught InvalidValueError: container is not a Node main.js:23

3Uncaught SyntaxError: Unexpected token )

Uncaught TypeError: Cannot read property 'top' of undefined

[m.....t]

@mortt: a i wyjeb fonty z google fonts bo to koszmarnie spowalnia ładowanie strony i często powoduje błędy

[m.....t]

@Gregoo: js jest kompletnie z dupy,

sprawdzaj sobie jslintem.

Najpierw definiujesz funkcje potem je wywołujesz, nie odwrotnie.

po co dwa tyle robisz document ready, skoro możesz raz? (mniej kodu)

[l.....k]

@Gregoo: Z jakich materiałów się uczyłeś? Strona bardzo fajna.:)

[PrawyKuba]

@Gregoo: Sam projektowałeś layout? Czy tylko go kodowałeś? Ładnie Ci to wyszło.

[Gregoo]

@mortt: Dziękuję za krytykę. Lubię jak mi tak ktoś wypunktowuje, na pewno jutro posprawdzam i postaram się ponaprawiać co będe umiał na tym etapie.

@PrawyKuba: Sam projektowałem. Photoshopa w sumie zacząłem się uczyć jakiś miesiąc wcześniej przed html, css i JSem.

@lukewieladek: Uczyłem się głównie z YT, patrzę jak ludzie piszą, nabieram jakieś nawyki, standardy. A tak to przeczytałem pare książek np: RWD-Projektowanie elastycznych witryn w html5 i css3,

[m.....t]

@Gregoo: na iPhone 5s dużo błędów , w sensie wiele elementów jest zakryte przez inne itd

[t.....0]

Not bad, ale od razu bootstrap?

[Gregoo]

@tadzik100: czytałeś opis z repo :P ? To mój pierwszy raz, chciałem spróbować ( ͡° ͜ʖ ͡°)

[Gregoo]

No i jakby ktoś jeszcze był zainteresowany tym wpisem, to aby przyspieszyć ładowanie wystarczyło użyć wyobraźni i nie stosować 10MB obrazków png :P

[bonus]

@Gregoo: Co do optymalizacji https://developers.google.com/speed/pagespeed/

Teraz pytanie ile jest w tym twojego designu i kodu ( ͡° ͜ʖ ͡°)

[Gregoo]

@bonus: Funkcję, która nadaje tło aktualnie aktywnym elementom navbara musiałem znaleźć na necie, bo nie potrafiłem jeszcze tego rozgryźć. Ale uczę się tego JSa także poprzez i takie podpatrzenie kodu. To nie jest tak, że ściągam kod wrzucam i happy, trzeba go jeszcze rozkminić;p No chyba żeby wliczyć funkcje i kod bootstrapa, oraz googlowe API jako nie moje, to tak, też podpatrzyłem w dokumentacji ;p

A tak to design, logo zrobiłem