Comandeerowa domowa, Mój osobisty powód do wstydu Opcje

[Comandeer]

Robię to na każdym forum, na którym się zjawiam, więc tutaj też zrobię
Otóż chcę Wam przedstawić wspaniałą i jedyną w swoim rodzaju, niepowtarzalną, wymuskaną, wypielęgnowaną i dumnie przeze mnie utworzoną...
*werble*
Comandeerową domową (ta, HSTS… bo mogę)
*oklaski na stojąco, tłum szaleje; co bardziej wrażliwe panie mdleją*

Jestem dumny przede wszystkim z kodu tej strony i szybkości wczytywania (99 w PageSpeed - wszystko przez GA!). Wyglądem się nie przejmuję, bo jestem turpistą (tak, naprawdę jestem turpistą... albo po prostu mam skrajną depresję i dlatego nienawidzę piękna) i jeśli ktoś ośmieli się tenże kod skrytykować osobiście przebodę go szpadą... erm, wyjaśnię czemu się myli lub pokornie poprawię wskazaną usterkę

Zastanawiam się czy nie wprowadzić kolejnych optymalizacji jeśli chodzi o wydajność - np. zamiana DOCTYPE na małe znaki pozwoli mi oszczędzić ok. 4 bajty i dzięki temu urwę kolejne 10 ms… Trudna sprawa.

Jakby kogoś interesowała jakaż to technologia napędza tego demona, to odsyłam na GH, gdzie można znaleźć pierwowzór mojego "Jekylla", na którym obecnie to cudeńko stoi: https://github.com/Comandeer/Site-Builder

Czekam na fale hejtu konstruktywnej krytyki

[Daimos]

Szkoda, że wszystko wsadziłeś do jednej linijki i źródło jest nieczytelne. Sam nie lubię przeglądać kodu z konsoli, więc wyłączyłem po chwili, ale z tego co zauważyłem:
1. Po co dodajesz jakiś JS dla IE9 <!--[if lt IE 9]>, skoro poniżej ie10 dajesz komunikat, że zbyt stara przeglądarka?
2. Jak już starasz się wszystko idealnie robić, to dlaczego style są w kodzie html?
3. Skrypty js, jeśli można (a tu można ), lepiej zamieszczać na końcu kodu. Przyspieszysz wczytywanie.
4. Na wszystko chcesz zwracać uwagę, to dodam, że nie da się poruszać po stronie z poziomu klawiatury (WCAG).
5. &nbsp; zamiast spacji? Nie ma takiej potrzeby.
6. Martwisz się o każde 10ms, a wstawiasz jakieś własne fonty?
7. Skoro "reprezentujesz turpizm", to nie ma czym się chwalić. Nie lubisz rzeczy ładnych, to nie rób rzeczy dla ludzi, którzy tego oczekują. Zrób sobie stronę offline Spakuj ją, wstaw na serwer do pobrania, będzie jeszcze szybsza

Ten post edytował Daimos 1.09.2015, 09:30:30

[Comandeer]

ad. 1) Bo bez tego skryptu będzie rozwałka w każdym starszym IE - z tego względu jest to wstawione
ad. 2) Bo dzięki temu strona osiąga 99/100 w PageSpeed To jedno z zaleceń Google'a w sprawie prędkości: inline'ować krytyczne style. W tym wypadku arkusz jest tak mały, że należy go inline'ować w całości, bo asynchroniczne doczytywanie stylów jedynie tworzy FOUC
ad. 3) Skrypty w head blokują wczytywanie strony pod warunkiem, że ciągną synchronicznie zasoby z zewnątrz lub ciągną asyncem i są wstawione po stylach. Tutaj nie ma to miejsca, bo ga są ciągnięte asyncem przed CSS, a skrypt do obsługi czcionek jest inline. Wbrew pozorom obydwa przyspieszają wczytywanie, a nie je opóźniają: https://www.igvita.com/2014/05/20/script-in...idered-harmful/ https://www.filamentgroup.com/lab/font-loading.html → oczywiście idealnie by było GA wczytywać jako [async][defer], ale a) [defer] to za późno b ) trzeba temu zapodać jakąś konfigurację
ad. 4) Jak nie? Spokojnie da się TAB-ować po wszystkim + widać outline/style :focus dla aktualnego elementu. Jeśli chodzi Ci o jakąś ekstra nawigację strzałkami, to tutaj byłoby to armatą na muchę, bo wymuszałoby napisanie tego wszystkiego w JS
ad. 5) Zauważ, że tak są traktowane jedynie sieroty - nie wszystkie spacje są niełamliwe (bo nie miałoby to sensu)
ad. 6) Czcionki są wczytywane w taki sposób, że dla usera jest to de fato niezauważalne Polecam spojrzeć do podlinkowanego artku Filament Group
ad. 7) Tu na swoją obronę rzeknę tak: strona porneLa też nie jest ładna

[mrc]

Mnie osobiście wydaje się, że to nie turpizm. Nie każda słaba strona reprezentuje ten kierunek

Jeżeli chcesz kogoś zachęcić do swojej osoby tą stroną, to polecam zmienić szatę graficzną oraz język w którym się wypowiadasz. Czytałem wiele tekstów różnych artystów, wiele wypowiedzi. Twój sposób wypowiadania się nawet w kilku procentach nie przypomina tego ich.

[Comandeer]

@mrc szlag, przejrzałeś mnie Ale jak na razie raczej tego upiększać nie będę - może później przerzucę się na coś lekkiego z MD.

Co do języka: nigdy nie miała być ta strona stroną artystyczną. Ona po prostu… miała być W chwili obecnej robi raczej za odsyłacz do GitHuba i poligon eksperymentalny do zabaw z frontem.

[Daimos]

Bo bez tego skryptu będzie rozwałka w każdym starszym IE - z tego względu jest to wstawione

ale załączasz go tylko dla starych ie, czy się mylę?

Skrypty w head blokują wczytywanie strony pod warunkiem, że ciągną synchronicznie zasoby z zewnątrz lub ciągną asyncem i są wstawione po stylach

dziwne, mi się zdawało, że przeglądarki pobierają skrypt js w miejscu, gdzie go znajdują i na ten czas wstrzymują pobieranie reszty, jeżeli jest inaczej, proszę o źródła (inne niż czyjeś blogi), bo widać żyłem w błędzie.

Co do pozostałych rzeczy już nie piszę, ale już wiem, dlaczego zamieściłeś tu stronę

[Pyton_000]

https://css-tricks.com/thinking-async/

[Comandeer]

ale załączasz go tylko dla starych ie, czy się mylę?

Tak, tylko dla IE < 9.

proszę o źródła (inne niż czyjeś blogi)

Akurat to był blog człowieka, który bardzo blisko współpracuje z Blink team, jak i innymi vendorami, bo jest szefem grupy roboczej W3C od wydajności przeglądarek - nie sądzę zatem żeby się mylił. Poza tym: źródło jest bardzo prosto znaleźć. Otwierasz zakładkę network w dev tools i odświeżasz stronę

No i samo dorzucenie [async] powoduje, że skrypt jest ciągnięty natychmiast i odpalany w tle, bez blokowania - więc to, co piszesz działa tylko dla "tradycyjnie" dołączanych skryptów. To też można sprawdzić w zakładce network jak nie wierzysz Grigorikowi

[lukasz1985]

Patrząc na całokształt twojej pracy wydaje mi się, że żyjesz w jakiejś paranoi na punkcie wydajności ładowania witryn, i z tego co widzę, nie tylko ty. Walczysz o milisekundy które praktycznie niczego nie są w stanie zmienić w życiu użytkownika, a przy mechanizmach cacheowania wszelkich zasobów to już naprawdę uważam, że jest bez sensu.

Z doświadczenia wiem jedno - perfekcjonizm się mści. Z jednej strony coś podkręcisz, a z drugiej coś cieknie. Więc lepiej otwórz szeroko oczy, bo być może nie jest tak różowo, jak ci się wydaje.

Muszę jednak powiedzieć, że popieram twojego hate'a na Angulara (kur*ica mnie strzela jak widzę obtrusive HTML i sam fakt parsowania dodatkowej składni) .
Jednak ja w ogóle nienawidzę Googla - nie tylko za to.

Na twoim miejscu, jeśli tego jeszcze nie zrobiłeś zająłbym sie innymi językami - poszedł w stronę np. Javy a potem native (C/C++/ASM), pouczył algorytmiki, wzorców projektowych, struktur danych. Ja poszedłem tą droga, co uświadomiło mi jak cholernie ograniczony i biedny jest JS.

[Comandeer]

Mechanizmy cache'owania przyspieszają bardzo dużo, ale jeszcze zostaje sama kwestia parsowania tego i konstrukcji DOM. Odpowiedzią na większość bolączek byłoby HTTP/2, ale cóż.

Tak, wiem, że akurat moja domowa wygląda jak przypadek ekstremalny, ale o to w niej chodziło - o wyciśnięcie maksimum soków. Traktuję ją głównie jako poligon eksperymentalny. A całkowicie różowo to nigdy nie będzie, bo akurat w webdevie best practices zmieniają się w ciągu mrugnięcia okiem

Czy ja wiem czy ten JS jest taki biedny i ograniczony? W porównaniu do takiego C++ zapewne, ale dla kogoś, kto siedzi głównie w Sieci to jedyny "prawdziwy" język. Javy raczej nie tknę, bo do mnie nigdy nie przemawiała, już szybciej C/C++. Chociaż najbardziej mnie korci Go, w ostateczności Rust. I pewnie niedługo przytulę coś z tej dwójki.

[lukasz1985]

Dla mnie JS to też kiedyś był jedyny "prawdziwy" język
Jeszcze wypowiem się na temat najlepszych praktyk w webdev... niestety ale coraz bardziej prowadzą one do kalectwa umysłowego.
Namiastkę tego masz choćby w takim Angularze, natomiast w takim Node.js to powoli do operacji dodawania trzeba będzie przesyłać callback, żeby dostać wynik.
Nie tak to się kiedyś robiło jednak przypuszczam, że nie zetknąłeś się jeszcze ze współbieżnością.
No ale Twój wybór.

PS. Go i Rusta osobiście nie zniese.

[mrc]

Sam wychowałem się na C/C++. Może nie znam go na tyle zaawansowanie, żeby pogadać o współbieżności, ale fakt - tam można wszystko. Chyba jako jeden z niewielu języków nie upraszcza mega wszystkiego tworząc z programistów debili.

[com]

sztuką by było jakbyś zrobił coś ładnego i przy tym było zoptymalizowane, a nie stronę która nie ma czym się nawet pochwalić, bo stronę mająca parę regułek w css i trochę html to nie problem zrobić żeby zyskała ona 100% w page speeda To nawet uzyskasz używjac bootstrapa jak sie postarasz, a on wcale lekki aż tak nie jest

dist w repo ? , brak wiki to jak ma ktoś z tego skorzystać

Ten post edytował com 5.09.2015, 18:25:17

[KsaR]

Hm.

+ szybkie ładowanie,
+ https,
+ ciekawy efekt klikniecia w menu linku, nie widzialem jeszcze takiego mimo prostoty, ale zarazem za dobry do reszty strony,
- linki sa dziwne (a konkretniej ten border),
Jak np. Sie kliknie cos co spamisz linkami, (jak "o mnie") to nie wyglada tam to na linki..
Ale zarazem gdy juz wiesz ze to link to niby czytelniej.
+ tez fajny efekt tego klikniecia comandeera co sie grafika podmienia na chwile.
- ta stopka troche tak dziwnie wyglada, to biale tlo całe. Nie wiem czy kasacja (radiusa?) cos zmieni ale chyba lepiej tlo takie jak reszta strony.
- "<![endif]--><style>@font-face{font-" ten caly styl to chyba lepiej do oddzielnego pliku bo transwer marnuje :P, z 60% strony zajmuje. Chyba (w np. Projekty).

Jakby zsumowac + i - to masz niby 1 ale ja bym dal 4/5, bez minusow to 5/5:P..

[Comandeer]

Czasami dist w repo się przydaje, a przynajmniej nie szkodzi. Przynajmniej możesz sobie zobaczyć co uzyskasz po zastosowaniu tego narzędzia Co do wiki - czy to nie przesada? IMO całość jest na tyle prosta, że da się ją ogarnąć z samego kodu; zwłaszcza, że de facto jedyny plik, w którym trzeba coś zmienić (config.js) ma odpowiednie komentarze.

Co do Page Speeda - akurat nim się wgl nie przejmowałem robiąc tą stronę. Wydajność była moim najmniejszym zmartwieniem.

@KsaR w osobnym pliku CSS blokuje rendering na czas downloadu. A że HTTP/2 nie ma, to CSS w kodzie HTML działa o wiele szybciej. Przy tak małej stronie okazało się dodatkowo, że nie ma sensu oddzielać stylów krytycznych od reszty, bo reszta doczytywana asyncem powodowała jedynie FOUC

Ten post edytował Comandeer 5.09.2015, 18:44:50

[com]

Co uzyskam to chyba wiem, to tak jakbyś w php wpakowywał vendora do repo(czy node_modules). Ok dist możesz wrzucić ale do jakiegoś demo. Ale jak ja chce z czegoś skorzystać to myślisz, że chce mi się zaglądać do kodu i szukać co miałeś na myśli tworząc to narzędzie.

Co do Page Speeda - akurat nim się wgl nie przejmowałem robiąc tą stronę. Wydajność była moim najmniejszym zmartwieniem.

Dobra, ale

Jestem dumny przede wszystkim z kodu tej strony i szybkości wczytywania (99 w PageSpeed - wszystko przez GA!). Wyglądem się nie przejmuję, bo jestem turpistą (tak, naprawdę jestem turpistą... albo po prostu mam skrajną depresję i dlatego nienawidzę piękna) i jeśli ktoś ośmieli się tenże kod skrytykować osobiście przebodę go szpadą... erm, wyjaśnię czemu się myli wink.gif lub pokornie poprawię wskazaną usterkę

Przyszedłeś tu z tą strona do działu ocen, wiec skoro nie po to, to w takim razie co mieliśmy tam ocenić, poklepać po ramieniu i powiedzieć, że tak tak pięknie Tomku?

Z tym dist to chodzi o to że to jest itak zminifikowane, wiec nic mi to nie powie

[Comandeer]

Co uzyskam to chyba wiem, to tak jakbyś w php wpakowywał vendora do repo(czy node_modules). Ok dist możesz wrzucić ale do jakiegoś demo. Ale jak ja chce z czegoś skorzystać to myślisz, że chce mi się zaglądać do kodu i szukać co miałeś na myśli tworząc to narzędzie.

Pewnie nie. Z tym, że to powstało głównie jako mechanizm dla mojej strony domowej, a przy okazji rzuciłem to też na GH. No i to jednak nie to samo, co vendor, bo to są zasoby zewnętrzne będące zależnościami. Tutaj dist jest po prostu gotowym produktem. No i przecież to jest demo: przykładowa statyczna strona wygenerowana przez to narzędzie.

Przyszedłeś tu z tą strona do działu ocen, wiec skoro nie po to, to w takim razie co mieliśmy tam ocenić, poklepać po ramieniu i powiedzieć, że tak tak pięknie Tomku?

A widzisz, żeby ktoś tutaj mnie klepał? Poza tym nie wiem czemu stwierdzenie, że PageSpeed było moim najmniejszym priorytetem zaprowadziło Cię do takiego wniosku. Tak, strona jest ostro zoptymalizowana pod PageSpeed, bo - jak już napisałem to jakieś 5 razy w tym temacie - służy mi za poligon doświadczalny. Więc PS też w końcu se testowałem, łącznie z łączeniem inline stylów z wczytywaniem przez CSP. Ale akurat wydajność naprawdę jest ostatnią rzeczą, jaka mnie obchodziła przy pisaniu tej strony. Większą frajdę sprawiła mi zabawa z semantyką HTML5 i microdata.

Z tym dist to chodzi o to że to jest itak zminifikowane, wiec nic mi to nie powie

Powie - że wynik będzie zminifikowany

[com]

Dobra ok, niech tak będzie.

Dobrze, ale w takim razie co my mamy ocenić w tym skoro sam piszesz, że to w zasadzie tylko Twój eksperyment naukowy jest.

Powie - że wynik będzie zminifikowany

To wiem i bez dista

[Comandeer]

Myślałem, że wywiąże się dyskusja na temat semantyki.

[solificati]

Rusta osobiście nie zniese.

Dostęp do pamięci, współbieżnych prymitywów, w obu przypadkach bezpieczne środowisko, opcjonalny GC i dziesiątki innych porządków względem C++. Faktycznie, nie idzie tego znieść.