ugrás a tartalomhoz

Hogyan csináljunk valamit rosszul? Az OTP oldala

Hidvégi Gábor · Dec. 1. (P), 22.51
(A végén a fejlesztőkről nem fogok szépeket írni, ha valaki ezt nem szereti, ne olvasson tovább.)

Valamelyik este kitaláltam, hogy megnézem az OTP-s egyenlegemet, a kedvenc böngészőmben, az Opera 12-ben van is hozzá gyorsbillentyűm. Meghívása után egy fehér képernyő fogadott, és nem történt semmi. Na, gondoltam, a srácok megint alkottak, így átmentem Chrome-ba, és ott mindjárt működött az oldal.

Az mindjárt feltűnt, hogy a honlap elég sokat tölt fehér háttérrel, majd utána "bevilágosodik". Valószínűleg a látogató lenyűgözése volt a céljuk, és semmi mással nem foglalkoztak. Egy kevésbé acélos hardveren az oldalak 6-10 másodperc alatt töltődnek be, addig az üres képernyőt bámuljuk. Ennek több oka is van, a készítője hozzá nem értésén felül a nagy mennyiségű adat és javascript feldolgozása sokáig tart. A megjelenítéshez valamilyen érthetetlen oknál fogva a vue.js-t használják, ugyanis az oldal nagyrészt statikus információkkal van teli.

Mobilon (4G) még lassabb, mert nagyjából másfél megabájtot kell letölteni, abba nem is gondolok bele, hogy vidéken, ahol rosszabb a lefedettség, mennyit kell várni rá.

Később visszatértem, hogy megnézzem a működés okát, és kiderült, navigáláskor mindig ez történik, azaz minden új oldal teljes betöltése után jelenik meg a tartalom. Ezt úgy oldották meg, hogy a <body> elemre tettek egy opacity: 0;-t, majd a tartalom betöltésekor hozzáadnak egy css osztálynevet, ami ezt animálja nulláról egyre.

Azon felül, hogy a látogatóikat idegesítik, elképzelhetőnek tartom, hogy a keresők sem értékelik a tartalom ilyen formán való elrejtését, ezért én máshogy oldottam volna meg a problémát.

Hogyan lehet másképp?

Először is a dizájnernek vagy projektmenedzsernek nem hagytam volna, hogy ilyen ostoba, bevilágosodós ötlettel jöjjön, mert nem létezik rá igazán jó megoldás. Ha sok (külső) forrással dolgozunk, akkor az oldal betöltésének sebessége teljesen kiszámíthatatlan, lassú, még akkor is, ha a saját tartalom jórészt gyorstárból jön. Ha ő (ti. a menedzser) mégis vállalja a felelősséget, akkor a legtöbbet úgy lehet javítani, ha a külső elemeket (pl. google analytics) a HTML kód végére tesszük, de lehetőleg csak saját magunk által kiszolgált és minél kevesebb tartalommal dolgozunk.

Lássuk a konkrét esetet! A <body> elemre tett opacity: 0; helyett dinamikusan, javascripttel adnám hozzá egy osztályban ezt az effektet, így az oldal javascript nélkül is használható maradna, és attól sem kéne félnem, hogy a keresők büntetni fognak. A bevilágosodást egy css animációval oldották meg egy külön css fájlban:
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

html.wf-active .fadeIn {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: both;
}
Ezt el lehetett volna intézni két sorral is, mint később látszik.

Ráadásul nyilván egy css fájl kéne lennie a többivel, így egy kérést meg lehet mindjárt spórolni. Az oldalon található betűtípusok betöltését javascripttel végzik, ami teljesen érthetetlen, hisz ezt statikusan sokkal célszerűbb és gyorsabb elvégezni, erre a Fontsquirrelnek van egy nagyszerűen használható eszköze.

Igénytelenség

A HTML kódot tovább nézegetve a végén egy ilyen tájékoztató feliratot találunk, ami az Internet Explorereken jelenik meg a tízes verzióig bezárólag: "Ez a böngésző sajnos nem tudja megjeleníteni a honlapunkat.". Az oldalt átnéztem másik böngészőben, és semmi olyat nem láttam rajta, amit akár egy huszonöt éves browser ne tudna: vannak rajta képek, szöveg, lehet rajta kattintgatni, azaz semmi extra. Úgyhogy ezt inkább úgy kéne átfogalmazni, hogy "Idióták vagyunk, sajnáljuk!".

Teljesen egyértelmű, hogy aki ezt az egészet elkövette, annak fogalma sem volt arról, hogy mit csinál és annak milyen következményei vannak. Az valószínű, hogy valamilyen nagyteljesítményű PC-vel próbálta csak ki az eredményt, gyengébb vason vagy mobilon pedig nem.

Az oldal működése nem konzekvens, a netbank belépésénél például a belépő doboz helyén eredetileg kontakt információk vannak, az oldal "bevilágosodása" után ezt lecserélik a loginre. Ez csak "modern" böngészőn működik, az Opera 12-esen nem, pedig a hozzá nem értésen és a trehányságon kívül ebben semmi sem akadályozza meg a készítőket.

Itt nem az a baj, hogy valaki ennyire vacak kódot adott ki a keze közül, hanem az, hogy nem volt senki, akinek ez feltűnt, se a projektmenedzsernek, se az informatikai osztálynak. Sem Csányi Sándornak, hogy a többi bank oldala összehasonlíthatatlanul gyorsabb (most az Erstéét néztem meg, hasít, mint a villám - bár nekik az internetbankjuk tetűlassú).

Az OTP esete nem egyedi, hasonló megoldással találkoztam ugyanaznap a Lattepanda oldalán, csak ott az oldal "bevilágosodása" után tölti be a képeket, ami különös igénytelenségről tesz tanúbizonyságot, ráadásul amíg nyitva van, a processzor(oka)t folyamatosan 100%-on hajtja, akkor is, ha nem csinálunk semmit.

De az internet tele van hasonló, rosszabbnál rosszabb megoldásokkal a net. Ha egy hozzáértő megnézi, elég gyorsan kiderül, hogy az adott feladatot minden szempontból jobban meg lehetett volna oldani sokkal kevesebb munkával, és úgy, hogy bármelyik böngészőn működjön. Véleményem szerint a fejlesztők 99,9%-a öntudatlanul "gombokat nyomogat", copy-paste-el, így, ha találkozom valakivel, aki azt mondja, hogy ő webbel foglalkozik, az a fejemben arra fordítódik át, hogy "egy dilettáns, tehetségtelen hülye vagyok, nem tudom, mit csinálok, és nem is érdekel". De mindenkinek megadom az esélyt, hogy bebizonyítsa, tévedek.

Meggyőződésem, hogy az esetek több mint kilencven százalékában egy átlagos weboldal tökéletesen működne egy húsz éves hardveren és húsz éves böngészőn, a tapasztalataim ezt mutatják.

Saját kód

Negyed óra alatt összedobtam egy vázat, amiben azt az elképzelésemet bizonyítom, hogy az OTP problémáját mennyire egyszerű megoldani egy két évtizedes böngészőn is. Nyilván lehetett volna még sokkal szebben megoldani, itt ez nem volt célom:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="content-language" content="hu" />
  <title>Átlátszóság</title>
<style type="text/css">
.feher {
  opacity: 0;
  filter: alpha(opacity=0);
}
.vilagosit {
  opacity: 1;
  transition: opacity 1s;
}
</style>
</head>
<body>
<script type="text/javascript">
var i = 0, body = document.body;
body.onload = vilagosit;
body.className = 'feher';

function vilagosit() {
  i++;
  body.style.filter = 'alpha(opacity=' + i * 10 + ')';
  body.style.opacity = i / 10;
  if (i < 10) {
    setTimeout(vilagosit, 10);
  }
}
function indit() {
  //ha a böngészővel lehet animálni
  if (body.style.animationName !== undefined) {
    body.className += ' vilagosit';
  }
  //régi böngészőkben
  else {
    setTimeout(vilagosit, 10);
  }
}
</script>
  szöveg
</body>
</html>
Így kikapcsolt javascripttel (keresők) is ugyanúgy olvasható lesz a szöveg. Kell ehhez vue meg jquery? Nem. Akkor az OTP-nél miért használnak?
 
1

Ez egy átalakulási folyamat eleje, nemcsak otp, full web

Sanyiii · Dec. 7. (Cs), 23.50
Ahogy elnézem, te egy átalakulási folyamat elejét láthattad. A kezdőlap már vue-s, a többi oldal meg régi jquery + spagetti cucc. Ha tetszik neked, ha nem, a web át fog alakulni, egy ideje alakulgat is már, a "régimódi" server side template-elgetünk című megoldások (vele együtt a php és társai) is ki fognak halni. Egyébként a vue-t is lehet pre-renderelni szerver oldalon (akár csak a két nagy testvért, react és angular), hogy a keresőket etessék, csak még itt nem járhatnak a fejlesztőik. Az opera 12-t meg dobd ki, minek használsz még régi cuccot? Visszatérve, mivel az átalakulás elején vagyunk, nagyon-nagyon kevés hozzáértő ember van. Tehát az eredmények egyelőre ilyesfélék.
2

Miért gondolod, hogy a PHP és

BlaZe · Dec. 8. (P), 00.27
Miért gondolod, hogy a PHP és társai (mik a társai?) ki fognak halni? Nem lesz szükség backendre?
3

Átalakulás

Hidvégi Gábor · Dec. 8. (P), 12.39
Semmi gond nem lenne az átalakulással, ha a tisztelt programozók tudnának programozni, és értenék is azt, amit csinálnak.

Majdnem húsz éve foglalkozom webfejlesztéssel, ebből az utóbbi tizenegy évben egy olyan rendszert készítettem, amiben kliensoldalon dinamikus adatmegjelenítést művelünk. Elég sokmindent kipróbáltam már, bár most a kód nagyjából 2-10-szer gyorsabb, mint a React, Vue és társaik, mérete 70 kilobájt (a kliensen), a méréseim alapján arra jutottam, hogy ha szerveroldalon statikusan állítjuk elő a tartalmat, akkor
  • nagyjából fele-kétharmada lesz a renderelési idő az eddigieknek,
  • a kliensoldali kód 10 kilobájt körülire apad,
  • jóval rugalmasabban tudjuk a sablonokat cserélgetni, az oldalak működését megváltoztatni,
  • mobilon kevesebb lesz a fogyasztás.


A React, Angular és társaik már a kitalálásuk pillanatában elavultak voltak.

Az Opera 12 nagyon jó tesztelésre, mert viszonylag modern, egyszálú és lassú.
4

Opera...

Pepita · Dec. 10. (V), 12.56
Az Opera 12 nagyon jó tesztelésre, mert viszonylag modern, egyszálú és lassú.
Lehet egy picit mégis újabb verzió kellene, hogy a felhasználóidhoz közelebbi böngészőn tesztelj.

Version: 49.0.2725.47 - Opera is up to date
Ma up to date.

A React, Angular és társaik már a kitalálásuk pillanatában elavultak voltak.
Hát ez így nagyon nem igaz, inkább a Te szemszögedből nézve én azt mondanám, hogy alkalmatlanok voltak arra, hogy a Te tervezési mintádat megvalósíthasd velük. Megjegyzem, hogy láttam már olyan helyen és úgy használni React-ot is, ahol és ahogyan tök felesleges vagy rossz, de ez minden új és régi technológiára igaz, hogy nem spanyolviasz, és lehet rosszul is használni.

Az összesen 70 kB javascript egyébként dicséretes, főleg téged ismerve feltételezem, hogy "cserébe" sem eszi meg a procit és / vagy stack-et, RAM - ot.
De ettől még nem lehet mindent megvalósítani 70 kB pure javascriptel... Illetve lehet, hogy lehet ( :-) ), de nincs aki meg tudná fizetni.
7

Lehet egy picit mégis újabb

Hidvégi Gábor · Dec. 10. (V), 14.24
Lehet egy picit mégis újabb verzió kellene, hogy a felhasználóidhoz közelebbi böngészőn tesztelj.
Ha Opera 12-n tesztelek, az kizárja, hogy megnézzem a legújabb Chrome-on, Firefoxon?

Hát ez így nagyon nem igaz, inkább a Te szemszögedből nézve én azt mondanám, hogy alkalmatlanok voltak arra, hogy a Te tervezési mintádat megvalósíthasd velük.
Tévedsz, mert a saját tervezési mintámat meg tudtam mindkettővel valósítani – ettől függetlenül elavult ötlet az egész brancs.

De ettől még nem lehet mindent megvalósítani 70 kB pure javascriptel... Illetve lehet, hogy lehet ( :-) ), de nincs aki meg tudná fizetni.
Ha belegondolsz, mennyi idő lefejleszteni 70k-t és mennyi 700-at (ez a React aktuális mérete), mennyi hibalehetőség van az elsőben és mennyi a másodikban és így tovább.
13

Na csak belemegyünk :)

Pepita · szerda, 14.56
Ha Opera 12-n tesztelek, az kizárja, hogy megnézzem a legújabb Chrome-on, Firefoxon?
Te csak ezt a böngészőt írtad, úgyhogy ezzel foglalkoztam.
Egyébként pedig enyhén szólva érthetetlen számomra, hogy mi haszna lehet annak, hogy egy böngészőnek a jelenleginél 37 főverzióval előbbi változatával "tesztelsz". Azzal mit lehet kideríteni? Azon kívül nem sokat, hogy mi nem fog működni egy olyan böngészőben, amit a felhasználók közül egyetlen egy sem használ. Nem túl nagy eredmény..

ettől függetlenül elavult ötlet az egész brancs
Ezt állítja egyetlen Hídvégi Gábor, ezen kívül fejlesztők ezrei (jól) használják és meg vannak velük elégedve. Vajon kinek lehet igaza? Nyilván vannak olyanok is, akik rosszul használják, esetleg arra, amire nem is jók, de rossz kódot mindenféle keretrendszer nélkül is lehet írni.

Ha belegondolsz, mennyi idő lefejleszteni 70k-t és mennyi 700-at
Nem gondolok bele. Azért sem, mert a kód mennyiségét önmagában viszonyítani az elkészítési időhöz elég nagy butaság. Minél jobb kódminőségre törekszel, annál több ideig fogsz gondolkozni egyetlen sor kódon. Annál többször fogsz rajta változtatni, mielőtt azt mondanád, hogy "kész".
700 k rossz kódot simán elő lehet állítani annyi idő alatt, mint 70 k jót. Ez viszont távolról sem azt jelenti, hogy ha valami 700 k, az csak rossz lehet, és azt sem, hogy a 70 k biztosan jó...

Nagyon szereted kisarkítani az árnyaltabb dolgokat, ezért nem sikerül sok technológiát jónak elfogadnod.

SZERK
Azt, hogy mennyibe kerül az adott fejlesztés, nem befolyásolja, hogy pl a React-ot havi hány emberórában fejlesztik, mert azt nem fizetteted ki az ügyfeleddel. Az viszont sokat nyom a latba, hogy a Te céged mennyi munkaóra alatt tudja hozni az adott feladatot.
XY feature fejlesztésére teszel ajánlatot, Z összegért.
Megrendelik.
Munkaóra XY feature React-al megvalósítva: 100.
Munkaóra pure javascriptel: 250.

Mikor keresel rajta jobban?
Van olyan ügyfél, aki kifizet 2.5 x annyit ugyanazért?
Szerinted érdekli az ügyfeledet, mi az a React és hogy használod-e?
Szerinted érdekli, hogy hány kB?

Ez csak egy példa volt, de remélem így már érted, hogy miért is használnak annyian valamilyen fw-öt, library-t.
5

Miben?

Pepita · Dec. 10. (V), 13.09
a "régimódi" server side template-elgetünk című megoldások (vele együtt a php és társai) is ki fognak halni.
Miben / mitől is fognak kihalni?
Valóban, van egy irányvonal, ami a vastagabb db és vastagabb kliens irányába megy vékonyodó szerver oldali alkalmazásréteggel, de
- Ezt nem mindenki tudja - akarja követni
- Van jópár dolog, amit semmi esetre sem tudsz kliensre vinni
- Egyre többen jönnek rá, hogy a vastag kliens mennyire könnyen "kiszórja" a "két hetesnél régebbi" telefonnal látogatókat...

Emiatt, és az általad is említett pre-renderelés miatt egyáltalán nincs a kihalás szélén sem a php, sem semmilyen szerveroldali megoldás. Nyilván egyre kevesebb új projektnél kerül már látótérbe pl a Smarty (ha egyáltalán még használja valaki), de ez még nem jelenti azt, hogy rossz dolog szerveroldalon kész html-t gyártani.

Ha tetszik neked, ha nem, a web át fog alakulni
A magam részéről nekem tetszik, hogy a web folyamatosan alakul. Kicsit "bátor" dolog szerintem ezt egyetlen jelenlegi alakulásnak vélni, pláne a PHP "halálával" számolni. Pl. nekem kimondottan tetszik, ahogy 7.0.x - 7.1.x verziókkal mekkora nagyot lépett a valódi OOP felé, így már simán adok rá esélyt, hogy még az én életemben szigorúan típusos verziója is lesz. :)
6

Pár kérdés

Pepita · Dec. 10. (V), 13.42
Megint rendesen fikázod "a másik fejlesztőt", ami abból a szempontból kicsit visszás, hogy azért böngészőből nagyon sok dolgot nem látsz, amivel neki számolni - együtt élni kell(ett).
Azon felül, hogy a látogatóikat idegesítik, elképzelhetőnek tartom, hogy a keresők sem értékelik a tartalom ilyen formán való elrejtését
Megnézted guglibotként és/vagy más kereső "szemével", vagy az alapján állítod, amit a böngésződben láttál?

ostoba, bevilágosodós ötlettel jöjjön
A designer dolga az, hogy kitalálja mi teszi eladhatóvá a terméket. Nem a Te dolgod.
nem létezik rá igazán jó megoldás
A Te dolgod az, hogy megvalósítsd az álmát és ne nyafogj (bocsi). Egy dolog, ha nem értesz egyet vele, de mindenki a saját szerepkörében legyen jó elsőként, és attól, hogy neked nincs a kisujjadban a megvalósítás, még nem feltétlenül ostoba az ötlet.

az Internet Explorereken jelenik meg a tízes verzióig bezárólag: "Ez a böngésző sajnos nem tudja megjeleníteni a honlapunkat."
Maga a Microsoft sem támogatja az IE-t, ott van helyette az Edge. Te meddig akarod még támogatni?

most az Erstéét néztem meg, hasít, mint a villám
Nézd meg a cib-et.. :-D

Véleményem szerint a fejlesztők 99,9%-a öntudatlanul "gombokat nyomogat", copy-paste-el
Nahát, asszem ezzel a mondattal sikerült pár új barátot szerezned... :)
Gábor, ott van a baj, hogy pont Te vagy az, aki ha meglát - meghall egy új technológiát, rögtön vészharangot kongatsz és fikázod. Így az "öntudatlan" jelző, hát...

Meggyőződésem, hogy az esetek több mint kilencven százalékában egy átlagos weboldal tökéletesen működne egy húsz éves hardveren és húsz éves böngészőn, a tapasztalataim ezt mutatják.
Amik alapján ezt lemérted, megszámoltad, ott hány százalékban láttad a mögötte húzódó backendet?

azt az elképzelésemet bizonyítom, hogy az OTP problémáját mennyire egyszerű megoldani egy két évtizedes böngészőn is
Kiemeltél 1 vagy 2 problémát, ezeket megoldottad egyszerűen. Ne haragudj, de ezzel távolról sem bizonyítottad be azt, hogy minden problémájukra ilyen egyszerű a megoldás.

Akkor az OTP-nél miért használnak?
Mert (ők) gyorsabban és hatékonyabban tudnak vele dolgozni.
Te miért nem használsz html5-öt, pedig ez elfogadott szabvány, szemben az általad kritizált eszközöktől.
Mert az IE x.régi nem ismeri?? Ez szabvány, amelyik böngésző nem ismeri, az ma már nem felel meg.

SZERK
Még1 kérdés: az indit() függvényedet mi és hol hívja meg a kódodban? Lehet csak én vagyok vak, de nem találom. (Most tekintsünk el a sok globális változótól..)
8

Megnézted guglibotként

Hidvégi Gábor · Dec. 10. (V), 14.58
Megnézted guglibotként és/vagy más kereső "szemével", vagy az alapján állítod, amit a böngésződben láttál?
Nem tudom, hogy a Google/egyéb keresők mit mi alapján rangsorolnak. Csak annyit, amit linkeltem is, hogy nézik az egyes szövegek színét, és ha olvashatatlan, akkor hátrébb teszik az oldalt a találati listában.

»ostoba, bevilágosodós ötlettel jöjjön«

A designer dolga az, hogy kitalálja mi teszi eladhatóvá a terméket. Nem a Te dolgod.
Leírtam, hogy miért ostoba az ötlet, de a kedvedért megismétlem: az oldal mindaddig fehér, amíg be nem töltött minden erőforrást és le nem futott minden script. Ez egy 1 GHz-es, 4 magos mobilon 8-10 másodperceket jelent.

Ezért ostoba az ötlet, és ezért írtam, hogy nem lehet rá jó megoldást találni.

Maga a Microsoft sem támogatja az IE-t, ott van helyette az Edge. Te meddig akarod még támogatni?
"Elfelejtetted" tovább idézni, ahol leírtam, hogy semmi olyan nincs az oldalon, amit akár egy 25 éves böngésző ne tudna. Akkor miért használnak olyan technológiát, ami csak a legújabbakon megy?

Gábor, ott van a baj, hogy pont Te vagy az, aki ha meglát - meghall egy új technológiát, rögtön vészharangot kongatsz és fikázod. Így az "öntudatlan" jelző, hát...
Az excéged demó oldalán végeztem méréseket, ahol, ugye, a legmodernebb technológiáka használtátok, az egyik művelet nálatok több mint egy másodperc (1000 ms) volt, az nálam 33ms az elavult vackommal.

Kiemeltél 1 vagy 2 problémát, ezeket megoldottad egyszerűen. Ne haragudj, de ezzel távolról sem bizonyítottad be azt, hogy minden problémájukra ilyen egyszerű a megoldás.
Mégis hogy képzeled? Csináljam meg magam jól a teljes OTP weboldalát? Egyébként pedig biztos vagyok benne, hogy minden problémájukra ilyen egyszerű a megoldás.

Te miért nem használsz html5-öt, pedig ez elfogadott szabvány, szemben az általad kritizált eszközöktől.
Mert az IE x.régi nem ismeri?? Ez szabvány, amelyik böngésző nem ismeri, az ma már nem felel meg.
A kérdésedre a választ évekkel ezelőtt kifejtettem a Modern böngészők miatt nem fejlődik a web című írásomban. Amíg egy problémát hatékonyan meg tudok oldani olyan eszközökkel, ami minden böngészőben működik, addig nem választok olyat, ami csak bizonyos browserekben működik.

Amíg te az utóbbi tíz évben azzal voltál elfoglalva, hogy megtanuld a HTML5 helyes használatát, én azt kutattam, hogyan tudom az általam készített webes szolgáltatások kimenetét a felhasználókhoz a leghatékonyabban és a leggyorsabban eljuttatni, mindezt úgy, hogy hatékonyan kereshetőek legyenek az adatok. Tehát te kidobtál az életedből tíz évet, nekem ennyi előnyöm van veled szemben.

+1

Jogos az észrevétel, át fogom írni, mert most semmi sem használja a függvényt.
9

Habár Pepitának válaszoltál,

smokey · hétfő, 11.41
Habár Pepitának válaszoltál, nem tudok megjegyzés nélkül hagyni egy pontot:

Amíg te az utóbbi tíz évben azzal voltál elfoglalva, hogy megtanuld a HTML5 helyes használatát, én azt kutattam, hogyan tudom az általam készített webes szolgáltatások kimenetét a felhasználókhoz a leghatékonyabban és a leggyorsabban eljuttatni, mindezt úgy, hogy hatékonyan kereshetőek legyenek az adatok. Tehát te kidobtál az életedből tíz évet, nekem ennyi előnyöm van veled szemben.


Olyan problémán dolgoztál 10 évig, amin sokan mások is. Még mindig nem értem, hogy miért nem bírod feldolgozni azokat a közhelyeket, hogy a "kevesebb néha több", "elég lesz a jó is, nem kell a tökéletes".

Attól, mert te valamit X féle képpen oldasz meg, attól nem biztos, hogy a másé szar. Írd le, hogy a tiéd miben más, mitől jobb, szentelj sok órát az életedből, hogy bizonygasd, hogy a másé tényleg szar, de NE oltsd az olyan emebereket, amilyen te is voltál. Kezdő! Mert nyílván egy profi nem csinál gané munkát, de egy kezdő vezetője tesz azért, hogy belőle is profi legyen!

Őszintén véleményem, hogy a szakmát nem az ássa alá, aki próbálkozik és hibázik, hanem az aki nem hajlandó benézni dolgok mögé, és 1 órás kutatás után véleményt alkotni arról, amit nem ismer.
10

Még mindig nem értem, hogy

Hidvégi Gábor · hétfő, 13.11
Még mindig nem értem, hogy miért nem bírod feldolgozni azokat a közhelyeket, hogy a "kevesebb néha több", "elég lesz a jó is, nem kell a tökéletes".
Azt hiszem, félreérthető voltam. A saját kódom (70k) ~ tizede a React-ének (600k), a sebessége 2x-10x-szerese, tökéletesen működik az utóbbi ~ húsz év összes böngészőjén. És most ezt fejlesztem tovább, hogy még kisebb és még jobb legyen, teljesen szabvány eszközökkel.

NE oltsd az olyan emebereket, amilyen te is voltál. Kezdő!
OTP, Magyarország és a környező országok legnagyobb bankja, a vezetője itthon a leggazdagabb ember. Ez a cég kezdőket alkalmaz a saját honlapjának fejlesztéséhez? A legtöbb ügyféllel rendelkező bank?

Nemrég volt róla szó, hogy egy junior is nettó többszázezer forintot keres. Ezért a munkáért valaki pénzt kap? Komolyan gondolják, hogy 4G-s mobilhálózaton tíz másodperceket kell várnom olyan oldalak betöltéséért, amin van pár kilobájtnyi szöveg meg néhány kép?

Tényleg az én mércém van túl magasan? Mondd meg, kérlek, őszintén!

És akkor menjünk tovább: ha a frontendet ilyen kezdők készítik, akkor mi van a backenden? Mi garantálja, hogy oda minőségi szakembereket vettek fel? Ezek után mi alapján gondoljam azt, hogy biztonságban van az OTP-nél a pénzem?

Remélem, érthető a problémám.
11

Azt hiszem, félreérthető

smokey · hétfő, 13.47
Azt hiszem, félreérthető voltam. A saját kódom (70k) ~ tizede a React-ének (600k), a sebessége 2x-10x-szerese, tökéletesen működik az utóbbi ~ húsz év összes böngészőjén. És most ezt fejlesztem tovább, hogy még kisebb és még jobb legyen, teljesen szabvány eszközökkel.


Hagyd már ezt a saját kódot... Egy sort nem látott belőle rajtad és a közvetlen veled dolgozókon kívül senki. Lehet abban is van kétszer annyi kivetni való, mint a Reactban...

Tényleg az én mércém van túl magasan? Mondd meg, kérlek, őszintén!


Nem. Nem az a gond, hogy van mérce, és hogy az milyen magasan van. Beskatujáztad saját magad, amiből nem is akarsz kitörni, és nem vagy hajlandó megérteni mások álláspontját.

És akkor menjünk tovább: ha a frontendet ilyen kezdők készítik, akkor mi van a backenden? Mi garantálja, hogy oda minőségi szakembereket vettek fel? Ezek után mi alapján gondoljam azt, hogy biztonságban van az OTP-nél a pénzem?


Ha a felhasználóknak problémát okoz az oldal használata, akkor jelzik; jobb esetben ezt a jelzést nem várja meg a fejlesztő csapat, hanem mérések alapján optimalizálnak. Hiba esetén meg le kell vonni a tanulságot. Hibázott? Lehet. Majd legközelebb másképp csinálja.

Tudtommal az informatikai rendszer hibája miatt még nem loptak pénzt az OTP-ből.

Remélem, érthető a problémám.


Én értem a problémád. Ez az egész azért lett probléma, mert azt csináltál belőle. Másik irányból, költői kérésekkel: biztos, hogy ez probléma? nem lehet, hogy csak a te problémád? Ne ott tartsd a pénzed. Vidd máshova.
12

Amint jövőre publikus lesz a

Hidvégi Gábor · hétfő, 15.43
Amint jövőre publikus lesz a vállalkozásunk, meg tudod nézni, addig kénytelen vagy elhinni, hogy bizony úgy van, ahogy állítom.

Beskatujáztad saját magad, amiből nem is akarsz kitörni, és nem vagy hajlandó megérteni mások álláspontját.
Milyen álláspontra célzol?

Tudtommal az informatikai rendszer hibája miatt még nem loptak pénzt az OTP-ből.
Szerinted bárki, főleg egy bank nyilvánosságra fogja hozni, hogy betörtek hozzájuk? Te vinnéd olyan helyre a pénzed, ahova betörtek? Ha nem publikálnak a betörést, akkor biztosan nem is volt?

nem lehet, hogy csak a te problémád? Ne ott tartsd a pénzed. Vidd máshova.
Az ország legnagyobb bankjának van a legnagyobb szórása az ügyfelek között, a nem foltozott P3 Windows XP-től a legújabb Core i9-ig, a butatelefontól az iPhone X-ig bármelyiken nézhetik az oldalukat. Ma már ott tartunk, hogy rövid időn belül a lekötött betétek negatívan fognak kamatozni, így minden egyes elvesztett ügyfél fáj mind a bankoknak, mind pedig az összes többi vállalkozásnak.

Mivel pont ugyanannyi erőfeszítés olyan rossz kódot csinálni, mint ami az OTP oldalán van, mint jó kódot írni, elég nagyvonalúan égetik a pénzt a menedzserek.

Tényleg elfogadható szerinted, hogy kezdők kísérletezgessenek az OTP oldalán?
16

Amint jövőre publikus lesz a

smokey · szerda, 23.21
Amint jövőre publikus lesz a vállalkozásunk, meg tudod nézni, addig kénytelen vagy elhinni, hogy bizony úgy van, ahogy állítom.


Oké.

Milyen álláspontra célzol?


Nem mindenki akarja feltalálni a kereket és az egyéb alkatrészeket. Valaki 10 év alatt összeépít egy jó autót működő alkatrészekből, valaki pedig magának és a haverjának 10 éven keresztül 1 darab kereket alumínium kockából, reszelővel. Mi értjük, hogy te az utóbbi vagy.

Szerinted bárki, főleg egy bank nyilvánosságra fogja hozni, hogy betörtek hozzájuk? Te vinnéd olyan helyre a pénzed, ahova betörtek? Ha nem publikálnak a betörést, akkor biztosan nem is volt?


Tegyük fel, hogy volt. Változtat ez valamin? Ha X bankhoz betörtek, akkor bemennek az Y-hoz is.

Az ország legnagyobb bankjának van a legnagyobb szórása az ügyfelek között, a nem foltozott P3 Windows XP-től a legújabb Core i9-ig, a butatelefontól az iPhone X-ig bármelyiken nézhetik az oldalukat.


Jhahh. Így van. Viszont az emberek nagy százaléka halad a korral, a maradékra meg igaz a megszoksz, vagy megszöksz. Ha nincs innováció, akkor csak toporogsz egy helyben. Arra költöd a pénzt, hogy foltozd a 15 éves technológiádat, amiről tudod, hogy egyszer úgyis megy a kukába, vagy arra, hogy szinten tartod magad, és mersz hibázni?

Tényleg elfogadható szerinted, hogy kezdők kísérletezgessenek az OTP oldalán?


Egy frontenden? El. Tanulópénz mindenkinek. Egyébként nehéz volt, de sikerült elengednem azt, hogy ahova önszántamból regisztrálok, ott én is csak egy user vagyok, és pont nem érdekel, hogy mit hogyan csináltak meg. Persze tök jó röhögni néha, és jó látni, hogy más projecten is emberek dolgoznak, de nem űzök sportot abból, hogy ha nincs más dolgom, akkor keresek valamit, amit tudok fikázni. Nyilvánosan.
19

Viszont az emberek nagy

Hidvégi Gábor · csütörtök, 10.04
Viszont az emberek nagy százaléka halad a korral, a maradékra meg igaz a megszoksz, vagy megszöksz. Ha nincs innováció, akkor csak toporogsz egy helyben. Arra költöd a pénzt, hogy foltozd a 15 éves technológiádat, amiről tudod, hogy egyszer úgyis megy a kukába, vagy arra, hogy szinten tartod magad, és mersz hibázni?
A témaindítóban hoztam egy példát, amiben a parancsok átsorrendezésével elértem azt, hogy több böngészőn is elérhető az oldal tartalma, valamint kikapcsolt javascripttel is, azaz zéró munkával több ügyfél tudja használni a website-ot. Ezért írtam azt korábban, hogy az OTP oldalán semmi olyan nincs, amit egy huszonöt éves böngésző ne tudna megcsinálni.

Amíg a HTML a web nyelve, addig az alapelemek nem mennek a kukába. Amíg alapelemekkel meg lehet csinálni mindent, miért válasszon az ember olyat, amiknek más a neve, de a szerepe ugyanaz?

»Tényleg elfogadható szerinted, hogy kezdők kísérletezgessenek az OTP oldalán?«

Egy frontenden? El.
Akkor mondok egy példát: tegyük fel, hogy van egy százmillió forint éves forgalmú weboldal, aminek a frontendjét te készítetted. Egyszer csak kiderül, hogy a rajta lévő scriptek és stílusok átrendezése, negyed órás munka után egy százalékkal több látogató tudja használni a szolgáltatást. A megrendelő odamegy hozzád, és azt mondja: "Drága Szmokikám, a te trehányságod miatt a tavalyi évben egy százaléknyi, azaz egymillió forint veszteségem volt, amiért te vagy a felelős. A következő két hónapban ezért nem kapsz fizetést."

Ennyit a kísérletezgetésről.
21

elértem azt, hogy több

smokey · csütörtök, 23.20
elértem azt, hogy több böngészőn is elérhető az oldal tartalma, valamint kikapcsolt javascripttel is, azaz zéró munkával több ügyfél tudja használni a website-ot


Könyörgöm, hol érdekli a usert, hogy hogyan működik az oldal, amit használ? JS-el vagy anélkül.. nem tök mindegy?

Akkor mondok egy példát: tegyük fel, hogy van egy százmillió forint éves forgalmú weboldal, aminek a frontendjét te készítetted. Egyszer csak kiderül, hogy a rajta lévő scriptek és stílusok átrendezése, negyed órás munka után egy százalékkal több látogató tudja használni a szolgáltatást. A megrendelő odamegy hozzád, és azt mondja: "Drága Szmokikám, a te trehányságod miatt a tavalyi évben egy százaléknyi, azaz egymillió forint veszteségem volt, amiért te vagy a felelős. A következő két hónapban ezért nem kapsz fizetést."


Ez vagy te. Mert te inkább visszakeresed a múltban azt a hibát, amivel már nem tudsz mit kezdeni csak, hogy elővehess bárkit. Én tudod mit mondok? Azt, hogy hm. ez igen, szép volt, hogy ilyen rövid idő alatt ekkorát tudott fejlődni az oldalunk. Negyed órányi munka, és plusz milyen sok user! Csak így tovább! Tessék, pénz, oklevél, bármi.

Nem tudom, hogy vezető, vagy-e, vagy sem, de, hogy nem lennék a beosztottaid helyébe, az tuti :). Fontos, hogy meglegyen a hiba, sőt az oka is. De ezt ne az ember ellen fordítsd, hanem a termék javára. Vond le a tanulságot, és vedd észre, hogy máskor hogyan csinálod másképp, hogy jobb legyen.
17

És akkor menjünk tovább: ha a

BlaZe · csütörtök, 08.39
És akkor menjünk tovább: ha a frontendet ilyen kezdők készítik, akkor mi van a backenden? Mi garantálja, hogy oda minőségi szakembereket vettek fel? Ezek után mi alapján gondoljam azt, hogy biztonságban van az OTP-nél a pénzem?
Egyrészt nincs semmi összefüggés, másrészt a portál front-end kódbázisa nem feltétlenül auditált, míg a pénzt kezelő backend rendszereik biztos azok, és nagyobb senioritást is igényelnek.

Emellett userként ez az oldal nem annyira rossz. Inkább töltsön be és jelenjen meg utána, mint össze-vissza ugráljon töltés közben, tableten tappintva tökmás oldalakra vigyen mint szeretném, csak mert változott közben a tartalom. Az OTP oldala szerintem funkcionálisan jó, mégha sokáig is töltődik. Ha rosszat akarsz látni, próbálj meg egy laptopot konfigurálni a Dell oldalán :)
18

Junp

Hidvégi Gábor · csütörtök, 09.32
(Tableten, mobilon) ez akkor fordul elő, ha lassú a netkapcsolat, és nincsenek megadva az adott elem méretei. Erre kiváló példa még az edigital oldala, ami nemcsak ugrál, hanem lassan is tölt be, egészen pontosan a scriptek miatt meghal a browser, de közben lejönnek a képek és a hirdetések, és elkezd ugrálni az oldal.

Én ezt a problémát úgy szoktam megoldani, hogy mindig beállítom az adott kép, iframe stb. szélességét és magasságát, így a böngésző tud vele számolni. Az én kezeim közül még nem került ki olyan oldal, ami ugrál.

Így már betöltődés közben, az első másodperctől lehet használni a site-ot.
22

Egy banknál azért a frontend

sly · péntek, 08.49
Egy banknál azért a frontend se utolsó szempont. Elég ha rosszul ír ki egy számot.
23

Persze hogy nem, de a

BlaZe · péntek, 11.53
Persze hogy nem, de a komplexitása nem összehasonlítható egy pénzt kezelő backend rendszerével. Főleg nem egy CMS frontend esetében, amiből HG következtetéseket próbál levonni. Ez NEM egy banki rendszer, nem is az OTP fejleszti. A pénzt kezelő banki rendszereket viszont bankok, vagy specializált csapatok fejlesztik. A CMS-eket meg az azokban szaki cégek. Hogy a banki rendszerek minőségét és működését valaki meg tudja ismerni, jópár évet le kell húzni bankoknál. Van ilyen is, olyan is. És vannak olyan munkát erősen befolyásoló körülmények, amit banknál soha nem dolgozva az ember számításba se venne. Meg nem is tud a létezésükről...
15

Ennyi elég

Pepita · szerda, 15.48
Írd le, hogy a tiéd miben más, mitől jobb
Ennyi. Pont.
Felesleges bizonygatni, hogy a másé szar, mert ha valóban az, akkor kikopik hamar. Attól viszont, hogy egyetlen Hídvégi Gábor állítja, még nem lesz valami valóban szar.
14

Nem igazán érted

Pepita · szerda, 15.45
Nem tudom, hogy a Google/egyéb keresők mit mi alapján rangsorolnak
De, jót linkeltél, a kérdés inkább arra vonatkozott (ha nem volt elég érthető, akkor bocsi), hogy legalább useragent szintjén próbáltad azt "mondani" az oldalnak, hogy te egy keresőrobot vagy? Csak mert előfordulhat, hogy az általad sérelmezett "csili-vilit" nem is mutatják meg botoknak... Vagy ha a "láthatatlan" színt is js pakolja fel, akkor is kérdéses, hogy azt mennyire értelmezi egy kereső.

Nyilván ha Te mondod a designerre, hogy ostoba, és többször is, akkor biztosan igaz. :) Szerintem inkább nem értesz valamit, amit kitalált, kiragadtál egy dolgot, amibe bele tudsz kötni - és mindezek tetejébe még az is lehet, hogy az adott cucc nincs teljesen kész, ez a világosodó csili-vili egy majdani nagyobb cucc része, ami miatt így önmagában nem nyújt különösebb élményt.

semmi olyan nincs az oldalon, amit akár egy 25 éves böngésző ne tudna
Most még. Vagy nem vetted észre, és még kiscsillió oka van annak, hogy nem 25 éves böngészőkre fejlesztünk. Ok, Te vagy a kivétel, mert Te ilyen nosztalgikus vagy, én elfogadom, de kérlek Te is fogadd el, hogy ezzel a véleményeddel egyedül vagy a világban.

Az excéged demó oldalán végeztem méréseket
Anno erről beszéltünk is, és miután a Te kódod semmilyen kapcsolatba nem került a backend-del, semmi logikai dolgot sem tudott megvalósítani abból, amit 1000 ms-nek mértél. Az említett alkalmazásban nem pusztán html stringeket kell adott helyre betenni...
Tekintve, hogy egyrészt nincs mód arra, hogy a Te frontended kommunikáljon azzal a backenddel, másrészt pedig ennek hiányában semmi érdemlegeset nem tudsz összehasonlítani, szerintem ezt a példát hagyjuk lezárva.

legmodernebb technológiák
Szerintem az még legalább fél év, hogy valóban modern lehessen, amikor teszteltél, akkor 5 féle frontend technológia volt jelen az alkalmazásban, és talán volt is olyan oldal, ahol egyszerre... :) Szóval az egységesítés folyamatban van, de sok idő.

Csináljam meg magam jól a teljes OTP weboldalát?
Igen. Amennyiben egyedül szerinted rossz, akkor más nem is tudja jól csinálni..

Amíg egy problémát hatékonyan meg tudok oldani olyan eszközökkel, ami minden böngészőben működik, addig nem választok olyat, ami csak bizonyos browserekben működik.

1. Fogadjunk, hogy keresek én neked böngészőt, ami nincs benne abban, amit "minden böngésző" néven említesz. :) (Inkább ne fogadjunk, mert nincs elég időm rá, de akár "írok egyet")
2. Hatékonyság. Ehhez hozzá tartozik ugye a SEO is? Nos, akkor duplán jobb lenne a <div class="menu"> helyett elkezdeni használni a <nav> tag-et, mert rövidebb, kevesebb kód, és a keresők is többre értékelik. Ez csak egy példa a sok közül, mindegyik html5 tag-nek hasonló fontossága van. Arra pedig nem ad pontot egyik kereső sem, hogy IE6-ban is látható-e az oldal. :)

Amíg te az utóbbi tíz évben azzal voltál elfoglalva, hogy megtanuld a HTML5 helyes használatát
Azzal együtt, hogy inkább backendes vagyok, nem tartott egy évig sem megszokni.

én azt kutattam, hogyan tudom az általam készített webes szolgáltatások kimenetét a felhasználókhoz a leghatékonyabban és a leggyorsabban eljuttatni
Akkor Te egy feltaláló vagy, esetleg ha lesz publikálva a http-t kiváltó módszered, vagy a html-hidvegi szabványod, és bevezetésre is kerül, akkor erre is fogok időt áldozni, hogy megtanuljam használni.

Tehát te kidobtál az életedből tíz évet, nekem ennyi előnyöm van veled szemben.
Én semennyit nem dobtam ki az életemből, ez így elég nagy butaság, és azt sem hinném, hogy előnyöd lenne. Kíváncsi lennék, hogy egy mai állás pályázatakor mennyi előnyt jelentene számodra, ha a skillek közé beírod, hogy "a html5 megtanulása helyett azt kutattam, hogyan lehet 25 éves böngészők számára is kezelhető tartalmat előállítani". Mellette ott egy másik önéletrajz, amin a skillek között csak ilyen gagyi rövidítések szerepelnek, mint pl "html5, css3". Szerinted ez előnyös lehet neked?...

Szerintem ne állíts olyat, hogy "ki mennyit dobott ki az életéből", vagy legalább erősen feltételes módban, mert ez már - már sértő. Én eddig nem hülyéztelek le azért, mert a józan ész határain túlra is szeretnél mindent optimalizálni, hogy a ma használatban lévő eszközök helyett a 25 évvel ezelőttieken (is) működjön. Pedig (lévén egyedül van a véleményed sok másikkal szemben) inkább felfogható hülyeségként a te álláspontod. Azzal pedig, hogy bárki bármit megtanul, nem dob el időt, hanem felhasznál. Ráadásul ha a munkáját érintő új szabványt, akkor kimondottan hasznosan használta fel.
20

Én nem értem?

Hidvégi Gábor · csütörtök, 16.08
a kérdés inkább arra vonatkozott (ha nem volt elég érthető, akkor bocsi), hogy legalább useragent szintjén próbáltad azt "mondani" az oldalnak, hogy te egy keresőrobot vagy? Csak mert előfordulhat, hogy az általad sérelmezett "csili-vilit" nem is mutatják meg botoknak...
A Google bünteti az álcázást.

Nyilván ha Te mondod a designerre, hogy ostoba, és többször is, akkor biztosan igaz. :) Szerintem inkább nem értesz valamit, amit kitalált, kiragadtál egy dolgot, amibe bele tudsz kötni
Kifejtettem, hogy miért rossz elgondolás: mivel az oldal csak akkor jelenik meg, amikor minden tartalom betöltődött, ez az idő függ a net és a processzor sebességétől. Miért kell rosszul járnia annak a vidéki felhasználónak, akinél nincs 4G?

Az OTP honlapja egy információs oldal, azaz a lényeg a szövegen van, a képek csak dekorációs célokat szolgálnak. Ha nem töltődnek be, akkor is használható a site.

mindezek tetejébe még az is lehet, hogy az adott cucc nincs teljesen kész
Félkész dolog kerül ki a webre?

»semmi olyan nincs az oldalon, amit akár egy 25 éves böngésző ne tudna«
Most még. Vagy nem vetted észre, és még kiscsillió oka van annak, hogy nem 25 éves böngészőkre fejlesztünk. Ok, Te vagy a kivétel, mert Te ilyen nosztalgikus vagy
Utálom a mellébeszélést, Pepita! Itt az OTP oldaláról van szó, amelyen vannak szövegek, képek és linkek. Ha ezt nem tudja valaki úgy megoldani, hogy minden böngészőn maradéktalanul olvasható legyen a tartalom, ott nem velem van a gond. Ez nem nosztalgia kérdése.

Tekintve, hogy egyrészt nincs mód arra, hogy a Te frontended kommunikáljon azzal a backenddel, másrészt pedig ennek hiányában semmi érdemlegeset nem tudsz összehasonlítani
Azóta már továbbfejlesztettem a kódot, és bizony, képes kommunikálni a backenddel. 33 helyett most 40 lett a Teendő szerkesztése popup megjelenési ideje ; )

Hatékonyság. Ehhez hozzá tartozik ugye a SEO is? Nos, akkor duplán jobb lenne a <div class="menu"> helyett elkezdeni használni a <nav> tag-et, mert rövidebb, kevesebb kód, és a keresők is többre értékelik. Ez csak egy példa a sok közül, mindegyik html5 tag-nek hasonló fontossága van.
Szerinted csak a <nav> tag-et értelmezik navigációs elemként a keresők? Milyen alternatívái vannak? A keresési képletben milyen szorzója van a <nav> elemnek? Mire használják a keresők a <nav> elemet? Milyen fontossága van a html5 tag-eknek? Tudnál esetleg konkrétumokat is mondani?

a józan ész határain túlra is szeretnél mindent optimalizálni, hogy a ma használatban lévő eszközök helyett a 25 évvel ezelőttieken (is) működjön
Az, hogy huszonöt éves böngészőkön is működnek az általam készített weboldalak és szolgáltatások, az nem ok, hanem következéménye a munkamódszeremnek. Az OTP oldala egy nulla technológiai szempontból, semmilyen különleges nincs rajta; amivel én dolgozom, az ezerszer összetettebb - és mégis működik a legrégebbi böngészőn, mert tudom, hogy hogyan kell jól csinálni.