abclinuxu.cz AbcLinuxu.cz itbiz.cz ITBiz.cz HDmag.cz HDmag.cz abcprace.cz AbcPráce.cz
AbcLinuxu hledá autory!
Inzerujte na AbcPráce.cz od 950 Kč
Rozšířené hledání
×

dnes 00:44 | Pozvánky

V sobotu 21. října 2017 se na půdě Elektrotechnické fakulty ČVUT v Praze uskuteční RT-Summit – setkání vývojářů linuxového jádra a uživatelů jeho real-time verze označované jako preempt-rt.

… více »
Pavel Píša | Komentářů: 1
včera 23:44 | Bezpečnostní upozornění

V Linuxu byla nalezena bezpečnostní chyba CVE-2017-15265 zneužitelná k lokální eskalaci práv. Jedná se o chybu v části ALSA (Advanced Linux Sound Architecture).

Ladislav Hagara | Komentářů: 1
včera 22:44 | Komunita

Greg Kroah-Hartman informuje na svém blogu, že do zdrojových kódu linuxového jádra bylo přidáno (commit) prohlášení Linux Kernel Enforcement Statement. Zdrojové kódy Linuxu jsou k dispozici pod licencí GPL-2.0. Prohlášení přidává ustanovení z GPL-3.0. Cílem je chránit Linux před patentovými trolly, viz například problém s bývalým vedoucím týmu Netfilter Patrickem McHardym. Více v často kladených otázkách (FAQ).

Ladislav Hagara | Komentářů: 3
včera 22:04 | Pozvánky

Rádi bychom vás pozvali na přednášku o frameworku Avocado. Jedná se o testovací framework další generace, inspirovaný Autotestem a moderními vývojovými nástroji, jako je třeba git. Přednáška se bude konat 23. října od 17 hodin na FEL ČVUT (Karlovo náměstí, budova E, auditorium K9 – KN:E 301). Více informací na Facebooku.

… více »
mjedlick | Komentářů: 0
včera 21:44 | Bezpečnostní upozornění

Nový útok na WPA2 se nazývá KRACK a postihuje prakticky všechna Wi-Fi zařízení / operační systémy. Využívá manipulace s úvodním handshake. Chyba by měla být softwarově opravitelná, je nutné nainstalovat záplaty operačních systémů a aktualizovat firmware zařízení (až budou). Mezitím je doporučeno používat HTTPS a VPN jako další stupeň ochrany.

Václav HFechs Švirga | Komentářů: 2
15.10. 00:11 | Zajímavý projekt

Server Hackaday představuje projekt RainMan 2.0, aneb jak naučit Raspberry Pi 3 s kamerovým modulem pomocí Pythonu a knihovny pro rozpoznávání obrazu OpenCV hrát karetní hru Blackjack. Ukázka rozpoznávání karet na YouTube. Zdrojové kódy jsou k dispozici na GitHubu.

Ladislav Hagara | Komentářů: 0
14.10. 15:11 | IT novinky

Online obchod s počítačovými hrami a elektronickými knihami Humble Bundle byl koupen společností IGN. Dle oficiálních prohlášení by měl Humble Bundle dále fungovat stejně jako dosud.

Ladislav Hagara | Komentářů: 8
14.10. 06:00 | Zajímavý článek

Brendan Gregg již v roce 2008 upozornil (YouTube), že na pevné disky se nemá křičet, že jim to nedělá dobře. Plotny disku se mohou rozkmitat a tím se mohou prodloužit časy odezvy pevného disku. V září letošního roku proběhla v Buenos Aires konference věnovaná počítačové bezpečnosti ekoparty. Alfredo Ortega zde demonstroval (YouTube, pdf), že díky tomu lze pevný disk použít také jako nekvalitní mikrofon. Stačí přesně měřit časy odezvy

… více »
Ladislav Hagara | Komentářů: 8
13.10. 14:33 | Komunita

Společnost SUSE natočila a na YouTube zveřejnila dva nové videoklipy: 25 Years - SUSE Music Video (7 Years parody) a Linus Said - Music Parody (Momma Said).

Ladislav Hagara | Komentářů: 6
13.10. 12:55 | Zajímavý projekt

Autoři stránky Open Source Game Clones se snaží na jednom místě shromažďovat informace o open source klonech proprietárních počítačových her. Přidat další hry nebo návrhy na zlepšení lze na GitHubu. Na stránce Open Source Text Games jsou shromažďovány informace o open source textových hrách. Opět lze k vylepšení nebo doplnění stránky použít GitHub.

Ladislav Hagara | Komentářů: 1
Těžíte nějakou kryptoměnu?
 (6%)
 (2%)
 (15%)
 (76%)
Celkem 717 hlasů
 Komentářů: 24, poslední 27.9. 08:30
    Rozcestník

    Ako sa píše moderný web

    14.6.2015 19:30 | Přečteno: 5683× | Web | Výběrový blog | poslední úprava: 14.6.2015 19:26

    Už pomerne dlho pracujem ako webový vývojár. Svoje osobné projekty mám zvyčajne riešené minimalisticky s pár riadkami JS a pár pravidlami CSS. Mladší weboví vývojári ma zrejme považujú už za technologického dinosaura. Tento blog píšem aby som dokázal, že tiež dokážem písať moderný web :-P

    HTML5

    Každý moderný web dnes musí používať HTML5. HTML5 je najlepšie definovaný štandard na svete. Perfektne zrozumiteľný, logický ... Veľkou výhodou je, že tagy už nie je nutné uzatvárať:

    <p> Odstavec
    <p> druhý odstavec

    Platí len ak za p nasleduje niektorý z týchto tagov: address, article, aside, blockquote, dir, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, menu, nav, ol, p, pre, section, table, ul.

    Pre fanúšikov xml syntaxe: áno stále je možné uzatvárať tagy. Teda platí pre vybrané tagy, niektoré ako napr script sa nedajú zapisovať ako <script src="" /> čo je logické.

    HTML5 je tak dokonalé, že v hlavičke už nepotrebuje ani verziu.

    CSS3

    Moderný web sa nezaobíde bez CSS3. V dobách dinosaurov (CSS2) predsa nebolo možné bez tabuliek vytvoriť layout a všetky tie haranaté jednofarebné plochy.

    Pomocou CSS 3 sa dajú napr. vytvoriť hranaté alebo zaoblené farebné štvorce, to je skvelé, nie? Stačí použiť flex box. A samozrejme prefixovať prefixovať prefixovať:

    button {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    
      -ms-border-radius: 3px;
      -moz-border-radius: 3px;
      -o-border-radius: 3px;
      -webkit-border-radius: 3px;
      -khtml-border-radius: 3px;
      -apple-border-radius: 3px;
      -rim-border-radius: 3px;
      border-radius: 3px;
    }

    CSS sa samozrejme nepíše od základov, ale použije sa nejaký framework (napr. bootstrap). Nevadí, že stačí pár pravidiel, pripojenie na internet je v súčasnosti rýchle, procesory tak isto, takže tých 3000 nepoužitých pravidiel vôvec nevadí.

    Layout pomocou CSS frameworkov je omnoho sémantickejší a prehľadnejší než tabuľkový layout. Ukážka:

    Starý layout:
    
    <table>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    
    
    Moderný neporovnateľne lepší layout s dokonalým oddelením obsahu od prezentácie:
    
    <div class="container">
      <div class="row">
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
      </div>
      <div class="row">
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
      </div>
    </div>
    

    Pri použití CSS frameworku začne väčšina nástrojov na analýzu stránok kričať, že CSS blokuje vykresľovanie (v skutočnosti sa CSS načítava na pozadí, ale to je implementačný detail). V takom prípade je podľa googlu odporúčaný postup načítať web s malým inline CSS a zvyšok dotiahnuť pomocou javascriptu:

    <script>
      var cb = function() {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = 'small.css';
        var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
      };
      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(cb);
      else window.addEventListener('load', cb);
    </script>
    

    Web sa bude takmer okamžite tváriť ako načítaný, všetky nástroje budú spokojné. Nevadí, že užívateľ najskôr uvidí holé html bez CSS. Tak isto nevadí, že sa CSS začne načítavať až po načítaní celého webu namiesto toho aby sa sťahovalo paralelne. Keď Google PageSpeed Insights tvrdí, sa má načítať javascriptom tak to tak má byť. Google sa predsa nemýli.

    Fonty

    Všetky systémové fonty sú nekompletné a zle čitateľné. Preto sa na každom modernom web musia používať webové fonty. V ideálnom prípade tak 12 rôznych fontov (2 druhy písma, každé light, medium, bold, light/italic, medium/italic, bold/italic a každý aspoň v 5 rôznych formátoch, teda dokopy asi 60 súborov).

    Aby to išlo pekne rýchlo (lebo kým sa nenačítajú fonty zostáva na webe prázdne miesto) z fontov sa vyhádžu zbytočné znaky ako napr Č, Ď, Ľ ... Samozrejme vyhodiť sa musia aj všetky informácie o hintingu a rôzne ďalšie metadáta ktoré výrazne zhoršujú čitateľnosť.

    Skripty

    V dobách dinosaurov mali všetky prehliadače jednotný interpret js. Preto bolo možné javascript písať tak aby fungoval na všetkých možných browseroch aj bez frameworku. Dnes už browsery tak jednotné nie sú a preto je potrebné používať knižnice ako napr. JQuery 2. Okrem kompatibility prináša aj množstvo užitočných funkcií ktoré vanilla js nemá (napr. efektívne získanie elementov pomocou CSS selektorov, animácie ...).

    Do moderného webu sa musí vložiť veľké množstvo skriptov. Na každú malú animáciu, tooltip ... na všetko nejaký skript. Občas sú skripty závislé na konkrétnej verzii jQuery. To však nevadí, s AMD môžme do webu vložiť toľko verzií jQuery naraz bez toho aby medzi sebou kolidovali.

    Priemerná veľkosť webovej stránky nám v roku 2014 dosiahla 1600kB, takže skriptov môžme do takejto veľkosti napchať dosť.

    Sledovanie používateľov

    Používatelia sa musia sledovať, proste musia. Poriadna webová stránka musí mať facebook, twitter, rôzne analyticsy ... Ako ukážku tu dám napr. zoznam rôznych sledovacích kódov na telegraph.co.uk:

    [x+1]
    Adap.tv
    Adobe TagManager
    Advertising.com
    Audience Science
    Criteo
    Disqus
    DoubleClick
    DoubleClick Floodlight
    Effective Measure
    Facebook Social Plugins
    Google Adsense
    Google Analytics
    InSkin Media
    Krux Digital
    Media Optimizer (Adobe)
    NetRatings SiteCensus
    Omniture (Adobe Analytics)
    Optimizely
    Outbrain
    Parse.ly
    Polar Mobile
    Quantcast
    Qubit Opentag
    ScoreCard Research Beacon
    Twitter Button
    Visual Revenue
    VisualDNA
    WebTrends

    Popupy

    Kedysi dávno v dobách dinosaurov sa robili popupy pomocou window.open. Žiaľ prehliadače sa naučili túto skvelú funkciu blokovať. Ak by sa niekomu popupy nepáčili tak tento text vás presvedčí. Obzvlášť zaujímavé sú komentáre. Takže prečítané? Fajn, som rád, že všetci pochopili, že je správne zobrazovať používateľom popupy.

    Je super, že vďaka všetkým tým skvelým opatreniam ako napr. načítavanie css pomocou javascriptu sa stanú popupy neblokovateľné.


    Dúfam, že po tomto blogu už nebude mať nikto pochybnosti o tom, že ešte nepatrím ešte do starého železa a viem ako robiť moderné weby ;-)

           

    Hodnocení: 96 %

            špatnédobré        

    Obrázky

    Ako sa píše moderný web, obrázek 1

    Tiskni Sdílej: Linkuj Jaggni to Vybrali.sme.sk Google Del.icio.us Facebook

    Komentáře

    Vložit další komentář

    14.6.2015 20:03 Andrtalec | skóre: 15 | Trnava
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    A toto všetko pod kapotou nech slúži pekným zrozumiteľným webom, ktoré nezaťažujú pozerača nejakým textom.
    SomaFM commercial-free internet radio
    14.6.2015 20:26 pavelk
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Přemýšlím, jestli jsi to myslel vážně nebo jako ironii.
    mirec avatar 14.6.2015 20:41 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    To som nečakal že som to až tak zle napísal. Samozrejme, že je to myslené ironicky. Možno to chcelo viacej smajlíkov.
    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    14.6.2015 23:59 coder
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    jQuery a priama manipulacia s DOMom v roku 2015? odporucam upriamit pozornost na React a virtual dom, Flux, Immutable.JS, Flow... skus babel, ktory umoznuje pisat isomorfne appky v ECMA Scripte 6-7 uz dnes. A tiez by stalo za to vyskusat css preprocessory (Stylus)
    mirec avatar 15.6.2015 07:05 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web

    Som rád, že bol spomenutý react a nie bloatware angular. Čo sa týka preprocesorov zvyknem odporúčať skôr sass / scss. Referenčná implementácia je síce v ruby, ale libsass je v C++ a ide pekne rýchlo.

    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    14.6.2015 20:41 kotrcka | skóre: 23 | blog: Onééé 2 | Praha
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    dakujem. chystam sa pisat web a je dobre mat take zaklady niekde zhrnute. mozem poslat prispevok v modernej mene, napriklad dogecoine?
    You son of a bit.. coin
    mirec avatar 14.6.2015 20:45 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Ja mám dogecoimov dosť, ale majiteľom portálu by sa možno oplatilo dať zopár na odblšenie portálu :)
    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    Jendа avatar 14.6.2015 20:51 Jendа | skóre: 74 | blog: Výlevníček | JO70FB
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Modernosti: bez JS se nezobrazí ani obsah (např. některé blogy na Blogspot nebo kde), čím dál tím větší móda používat pro hlavní dlouhý text šedé tenké písmo na bílém pozadí.
    16.6.2015 04:54 Kvakor
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    K první modernosti prý u někteých webů pomůže vydávat se za Googlebota nebo podobného webcrawlera, ale osobně jsem to nikdy nezkoušel. No a na tu druhou modernost stačí mít buď nějaký nástroj na modifikování CSS, případně něco, co barvy učiní "příčetnými" (jako doplňky typu Readability) nebo je vypne úplně (to umí třeba Web Developer pro FF).
    14.6.2015 21:29 chrono
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Každý normálny vývojár dnes vie, ako sa používa Scss/Less, takže nemá problém s tým, že má 3000 nepoužitých pravidiel v Bootstrap (na napr. pri Bootstrap nie je problém priamo na ich stránkach, vygenerovať css súbor, v ktorom budú len potrebné veci).

    Mimochodom naozaj ešte niekto vytvára css bez Scss/Less? Ja napr. Scss používam len na to, aby som nemusel, pri zmene nejakej farby, hľadať, kde všade som ju použil a na vytváranie odvodených farieb (funkcia, ktorá mi generuje odvodenú farbu, zároveň kontroluje kontrast vygenerovanej farby).
    mirec avatar 14.6.2015 21:54 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Áno da sa vyklikať napr. len grid. Napriek tomu u väčšiny bootstrapových webov vidím full. Ja osobne ak používam nejaký framework tak foundation (len v SCSS includnutý grid).
    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    Václav 15.6.2015 05:03 Václav "Darm" Novák | skóre: 26 | blog: Darmovy_kecy | Bechyně / Praha
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Takže stejně jako u desktopového software, za vším hledej lenost. Zrovna si (jako naprostý amatér) píšu první rozsáhlejší aplikaci v Rails a bootstrap používám full. Díky tomuhle článku ho nakonec, až budu vědět co použít a co ne, ořežu :)
    Cross my heart and hope to fly, stick a cupcake in my eye!
    mirec avatar 15.6.2015 12:45 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web

    U začiatočníkov je to normálne. Ja som tiež natočil tutoriál ako zbúchať blog za 15 minút a použil som pri tom bootstrap lebo to bolo najrýchlejšie riešenie ;-)

    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    Václav 15.6.2015 18:52 Václav "Darm" Novák | skóre: 26 | blog: Darmovy_kecy | Bechyně / Praha
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Já ještě přemýšlel nad Foundation. Každopádně… Musím říct že když si vzpomenu na své experimenty v PHP před patnácti lety lety a srovnám to s možnostmi co mám k dispozici teď… SASS, HAML, pořádný MCV framework v jazyku co mi narozdíl od PHP sedne… Kdysi jsem webařinu zavrhoval jako něco co bych dělat nechtěl. Teď mě tvorba toho webu dokonce baví :)
    Cross my heart and hope to fly, stick a cupcake in my eye!
    14.6.2015 22:31 Michal Karas | skóre: 45 | blog: /dev/random
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    V takom prípade je podľa googlu odporúčaný postup načítať web s malým inline CSS a zvyšok dotiahnuť pomocou javascriptu.
    Aha, tím by se asi dalo vysvětlit, proč se mi hromada "moderních" webů po povolení JS v NoScriptu přenačte s jiným fontem.

    Jinak ještě k těm fontům jsi zapomněl zmínit, že používat dneska obrázky je taky pěkně oldschool, když může mít člověk vlastní font a v něm "unést" libovolný Unicode znak pro svou potřebu. Tady se asi pro změnu na nějaký obsah vs. forma moc nehraje.
    14.6.2015 23:08 chrono
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Naozaj nejaké písmo obsahujúce obrázky mení náhodné znaky? (pretože vždy som si myslel, že všetci na také niečo používajú Unicode Private Use Area).
    Josef Kufner avatar 14.6.2015 23:37 Josef Kufner | skóre: 67
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Přesně tak. Ty fonty (FontAwesome určitě) to tak mají.

    Navíc i samotné Unicode má v sobě kopec obrázků a většina fontů je opravdu v sobě má.

    Například ✂✓✗✈✉✎❄✻❀❃➀➋➤➳➿❤❕ ①⑴⒈⒜Ⓐⓐ⓵ ☀☁☂☃☄☏☕☺☼☢♙♕♞♜♥⚐⚓⚔⚖⛂⛔⛑⛵⛲⛭ ⌨⏏⏳⏰⏱⏲⏭⏚⍿⍾ ↺⇲▒▜╭╒╓┌┮╆▧◍◒◙⫷⫸⩩⩨⩶⬪⬩⬧⬣⬢ Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ Ⅺ Ⅻ
    Hello world ! Segmentation fault (core dumped)
    Jendа avatar 14.6.2015 23:42 Jendа | skóre: 74 | blog: Výlevníček | JO70FB
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Třeba mapy.cz nebo czc.cz to dělají. Dělají to vlastně skoro všichni. A mně se nepovedlo Firefox nastavit aby to fungovalo, takže místo ikon vidím hovadiny.
    Josef Kufner avatar 14.6.2015 23:43 Josef Kufner | skóre: 67
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    V defaultní konfiguraci to funguje. Stačí jí moc nezmršit ;-)
    Hello world ! Segmentation fault (core dumped)
    Jendа avatar 15.6.2015 00:39 Jendа | skóre: 74 | blog: Výlevníček | JO70FB
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    V defaultní konfiguraci fungují custom ikony, ale taky funguje, že si stránka nastaví Times, švabach nebo Comic Sans. Nastavit to tak, aby fungovaly ikony a současně se stránka nemohla rozhodnout, že použije nějaké nečitelné písmo, se mi nepovedlo. (ono to asi ani z principu moc nejde, maximálně zkoušet uhádnout, co je ikona a co text)
    coder avatar 15.6.2015 01:23 coder | skóre: 4 | blog: lINUKS
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Asi tě bude zajímat tenhle uživatelský styl: Disallow web page fonts, except FontAwesome et al
    Jen si tam budeš muset v průběhu života ručně přidávat desítky retardovaných fontů.
    Jendа avatar 15.6.2015 02:12 Jendа | skóre: 74 | blog: Výlevníček | JO70FB
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    14.6.2015 23:10 Bill Gates
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Taky delam tabulky pomoci divu, nekdy pouziju i ul a li .. nicmene ten rozdil udelat tabulku z divu a nebo postaru z table tr td ... tohle mi prijde uhozene. V cem je vlastne dnes problem s table, tr, td, kdyz z divu delame pomoci stylu totez a navic je to co se kodu tyce delsi ? Diky za objasneni. Nejak jsem ten odpor k tabulkam nepochopil. Drive to smysl melo kvuli renderovani, ze prohlizec cekal nez se nacte tabulka cela, coz brzdilo. Nejsem si jist jestli to dnesni renderovaci jadra nedelaji lepe.

    table => div style="display: table"
    tr => div style="display: table-row"
    td => div style="display: table-cell"

    V cem je to lepsi?
    Josef Kufner avatar 14.6.2015 23:42 Josef Kufner | skóre: 67
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Oba ty příklady v článku jsou blbě. Smutné je, že ten druhý je často používaný.

    HTML5 na toto přináší kopec tagů, jako je <section>, <header>, <footer>, <nav> a další. CSS je dost mocné na to, aby ty šílené konstrukce nebyly většinou potřeba, ale většina kodérů to neumí používat.
    Hello world ! Segmentation fault (core dumped)
    mirec avatar 15.6.2015 06:57 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web

    Oni sú blbé naschval. V každom prípade s tým druhým sa stretávam každú chvíľu. Prišlo mi vtipné ako sa všetci bili za to, že treba oddeliť obsah od formy (teda nedávať konkrétny layout do html) a zrazu tu prídu frameworky ktoré robia v HTML rovnaký bordel ako tabuľky. Samozrejme aspoň sémanticky je to iné, div nemá žiaden sémantický význam na rozdiel od table.

    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    pavlix avatar 15.6.2015 07:55 pavlix | skóre: 54 | blog: pavlix
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Mně se nejvíc líbilo, jak všichni chtěli dělat sémantický web a rendrovat ho pomocí CSS, nejlépe CSS2 a ještě k tomu v době, kdy žádný browser nerenderoval správně. Dost jsem si s tím ve své době hrál.

    Dneska si udržuju (teď spíše neudržuju) akorát svůj minimalistický web, který funguje mimojiné i jako hromosvod na debily (lidi si ho vybírají jako cíl kritiky, posměchu nebo nabídek webařských prací).

    V době největšího honu na čarodějnice tabulkový layout jsem si důkladně ověřil, že jsou tabulky stokrát schopnější než CSS layout a hlavně jsem zjistil, že Microsoft na jednu stranu špatně interpretoval standard pro box layout, ale na druhou stranu byla ta jeho interpretace lepší než originál. A všecho je to způsobeno tím, že si ve W3C honili ego nad sémantikou, zatímco ignorovali základní potřeby webů s layoutem.

    A to ještě všechno šlo nějak ochcat, kromě formulářů, které jediné měly výchozí šířku včetně výplně nikoliv elastickou přes celou šířku, ale danou tím, jak se vývojář browseru vyspal. A vzhledem k tomu, že šířka (width) nešla ani specifikovat vzorcem ve stylu (100% − padding), sloužil javascript hlavně k opravě všech nesmyslů ve standardech a prohlížečích.
    Josef Kufner avatar 15.6.2015 11:11 Josef Kufner | skóre: 67
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Jo, tabulky mají mnoho výhod oproti CSS2. Vlastně CSS layouty jsou použitelné až od doby, kdy v nich začaly fungovat tabulky :-D

    Co se problémů s box modelem týče, W3C to udělalo Microsoftu na truc. IE a Netscape se oba shodly na "špatném" box modelu, pak přišlo W3C, standardizovalo jiný boxmodel, Netscape to respektoval a IE ne. A na další dekádu bylo o zábavu postaráno. Dnes už máme CSS vlastnost box-sizing, takže si to lze nastavit, jak se to zrovna hodí. Btw, HTML5 je úspěšné hlavně kvůli tomu, že s ním W3C nemá nic společného (narozdíl od XHTML).
    Hello world ! Segmentation fault (core dumped)
    pavlix avatar 15.6.2015 13:28 pavlix | skóre: 54 | blog: pavlix
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    To mi chceš říct, že W3C byli takoví kreténi, že úmyslně standardizovali ve své podstatě chybný a špatně použitelný box model v době, kdy se implementace shodovaly na modelu, který funguje? A pak se roky hustilo do lidí, jak je Microsoft špatný, protože nerespektuje standardy? Jestli je to tak, tak je největší problém webu to, že nebyla W3C včas rozpuštěna.
    15.6.2015 19:03 abc123
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    V tomhle hezkém článku se o tom píše podrobně.
    15.6.2015 21:47 webař
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    webylon? achjo
    Josef Kufner avatar 15.6.2015 23:32 Josef Kufner | skóre: 67
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Přesně tak.

    In 1996, CSS introduced margin, border and padding for many more elements. It adopted a definition width in relation to content, border, margin and padding similar to that for a table cell. This has since become known as the W3C box model.

    At the time, very few browser vendors implemented the W3C box model to the letter. The two major browsers at the time, Netscape 4.0 and Internet Explorer 4.0 both defined width and height as the distance from border to border. This has been referred to as the traditional or the Internet Explorer box model.

    Hello world ! Segmentation fault (core dumped)
    pavlix avatar 16.6.2015 07:00 pavlix | skóre: 54 | blog: pavlix
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Tak to mě opravdu rozesmutnělo, zvlášť když jsem se sám účastnil toho hanění Microsoftu kvůli nedodržování standardů. Tím neříkám, že bych chtěl Microsoft hájit, ale v tomhle konkrétním případě by snad šlo W3C označit za to větší zlo.
    Josef Kufner avatar 15.6.2015 11:16 Josef Kufner | skóre: 67
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Ono totiž mnoho lidí nechápe, že změnou syntaxe nezmění sémantiku. Stejný problém je i v šablonách na straně serveru, kde je ze stejného důvodu často zavrhováno PHP jako šablonovací jazyk a prosazují se různé podivné syntaxe s chlupatýma závorkama (ne že by neměly opodstatnění, ale ta argumentace je zcestná).

    Škoda je, že CSS nemá nějaký mechanismus, který by přiřazoval styl podle sémantického významu. Často by se jedna vrstva mapování navíc hodila, neboť pokud se třídy přiřazují sémanticky, selectory ve stylech docela nakynou.
    Hello world ! Segmentation fault (core dumped)
    14.6.2015 23:45 chrono
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Rozdiel je v tom, že tie div elementy sa pri úzkej obrazovke môžu zoradiť pod seba.
    Josef Kufner avatar 15.6.2015 00:49 Josef Kufner | skóre: 67
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    To ta tabulka taky, pokud je vhodně nastylovaná.
    Hello world ! Segmentation fault (core dumped)
    finc avatar 15.6.2015 07:59 finc | skóre: 8 | blog: Finc | Kolín
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Mohl bys uvest priklad, jak udelas to, aby se nektere sloupce tabulky "spravne" posunuly dolu? To jako na td element dam "float"? Nerozsype se nahodou ta tabulka? :)
    Kdo Vam dal pravo ty lidi urazet? A kdo ti dal pravo cumet z okna, ty kr.vo!
    Josef Kufner avatar 15.6.2015 11:21 Josef Kufner | skóre: 67
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    table, thead, tfoot, tbody, tr, th, td {
        display: block;
    }
    … A z tabulky je pár odstavců. Dál můžeš stylovat dle libosti stejně, jako by to byly divy.
    Hello world ! Segmentation fault (core dumped)
    15.6.2015 12:39 chrono
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Čiže pri tabuľke je normálne použiť display a urobiť z tých elementov niečo iné, ako tabuľku, ale pri div sa to urobiť nesmie?
    Josef Kufner avatar 15.6.2015 23:37 Josef Kufner | skóre: 67
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Nikde netvrdím, že to je takto správně. Jen ukazuji, že to jde. Slušný markup vypadá úplně jinak (to jsem zmiňoval na začátku).
    Hello world ! Segmentation fault (core dumped)
    mirec avatar 15.6.2015 12:41 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web

    Nie všetky takéto triky fungujú. Nedávno som sa k niečomu snažil pomocou CSS ohnúť django admin a vo firefoxe to malo poriadne problémy. IE radšej ani nebudem spomínať ;-) Na zopár škaredých bugov s renderovaním tabuliek som narazil aj vo webkite, neviem teraz či sú už opravené, keď som na to pozeral tak v bugzille boli zaznamenané chyby.

    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    16.6.2015 05:10 Kvakor
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Nejak jsem ten odpor k tabulkam nepochopil.
    Prvně to bylo "Nepoužívejte tabulky na layout!", protože staré prohlížeče neuměly dynamicky překreslovat stránku během načítání, což ve spojení s pomalým připojením způsobovalo to, že uživatel čučel do čisté stránky, dokud se nenačetl celý obsah (tedy, ono těch problémů s layoutem pomocí tabulek bylo trochu víc, ale tento je asi ten nejdůležitější). No a někteří to pochopili jako "Tabulky jsou Zlo! ZLO!!!" a ve své snaze být papežštější než papež přestali tabulky používat úplně, včetně případů, kdy jejich použití je vhodné a naprosto logické.

    Osobně se domnívám, že existuje velmi jednoduché pravidlo, kdy použít tabulku, a to tehdy, pokud by mělo smysl, aby uživatel přislušná data označil a nakopíroval si je do svého Oblíbeného Tabulkového Procesoru (TM).
    finc avatar 15.6.2015 08:13 finc | skóre: 8 | blog: Finc | Kolín
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Chapu, ze je to cele ironie, ale na druhou stranu tyhle nove pristupy prave umoznuji z webu vymackat maximum. Navic nevim jak ty, ale ze by se mi chtelo nejak zdlouhave ladit to, aby web byl responzivni se mi tedy nechce. Bootstrap je skvely pomocnik, protoze diky tomu i "lama" muze vytvorit validni web, ktery nebude slozen s humusu jako table-tr-td-table....

    Navic vizualizace pomoci font-awesome ci glyphicons preci umoznuji s obrazkem pracovat jako s fontem. Nevim nakolik jsi webovy vyvojar, ale ja osobne tenhle zpusob dost preferuji, protoze si muzu odpustit spoustu trablu :)

    A samotne jQuery? Prijde mi, ze se stalo modou na jQuery hrozne nadavat, ale samotny selector v jQuery je tak mocna vec, ze nakonec i ti zariti odpurci po nem proste sahnou. Osobne jsem si nevsiml, ze bych nekdy musel silene hackovat nekolik verzi jQuery.

    Jak uz zde nekdo zminil, pomoci LESS ci SASS mam moznost si vybrat jen to, co opravdu chci.

    S cim osobne urcite souhlasim je AngularJS vs ReactJS. A to z nekolika duvodu:
    • Angular je vymysl Googlu a ten ho nema problem kdykoli zastavit, stejne jako to delal v minulosti s jinymi projekty. Staci se podivat, kde je dneska Dart (ano, Dart proste umira)
    • Google Angular ani jednou nepouzil v produkci
    • Angular verze 1.x je naprosto rozdilna od toho jak bude vypadat verze 2.x
    • Angular vsadil na HTML a DOM, coz je sice pro webare dobre, ale na druhou stranu ho to take dost omezuje
    Dalo by se najit asi spoustu dalsich veci, ale tohle mi prijde jako dostatek argumentu k tomu, abych si Angular dost rozmyslel :)

    Jinak tvorba webu se v poslednich letech dost zmenila a je to jen dobre. Tenhle trend je sice pouze o abstrakci nad puvodnim navrhem, ale diky te abstrakci odpada spoustu zbytecnosti a clovek se muze zamerit na to dulezite. Webove prohlizece jsou na takove urovni, ze i moloch bootstrap+jquery+angular+XXpluginu neznamena, ze by web byl pomaly ci nepouzitelny. Tyhle casy jsou davno pryc :)
    Kdo Vam dal pravo ty lidi urazet? A kdo ti dal pravo cumet z okna, ty kr.vo!
    mirec avatar 15.6.2015 08:38 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Bootstrap je skvely pomocnik, protoze diky tomu i "lama" muze vytvorit validni web

    Mne vadí keď je tam pár tisíc nepoužitých pravidiel. Ak niekto ide na web bootstrapu, zvolí custom build, vyberie si len grid nič zásadné proti tomu nemám. Vadí mi však, že ľudia sú už tak leniví, že tam hodia celý bootstrap a všetky elementy pracne preštýlujú pričom by im skutočne stačil grid.

    Navic vizualizace pomoci font-awesome ci glyphicons preci umoznuji s obrazkem pracovat jako s fontem.

    V niečom je to dobré, v niečom nie. Na telefóne mi napr. z default konfiguráciou väčšinu webových fontov zobrazuje ako štvorčeky a ak tam nie je text musím si domyslieť na čo klikám. Kým je to len ako doplňujúca ikona k tlačidlu nevadí mi to.

    A samotne jQuery? Prijde mi, ze se stalo modou na jQuery hrozne nadavat, ale samotny selector v jQuery je tak mocna vec, ze nakonec i ti zariti odpurci po nem proste sahnou. Osobne jsem si nevsiml, ze bych nekdy musel silene hackovat nekolik verzi jQuery.

    Na pracovné veci jQuery používam, na osobné nie. jQuery nemám rád, je plné antipatternov, neskutočne pomalé a katastrofálne sa ladí. Dostávam však hotovú šablóny s javascriptom takže nemám moc na výber.

    Za seba spomeniem pár vecí ktoré mi na jQuery zásadne vadia:

    • $('#neexistujuciprvok').plugin() nevyhodí chybu (viem, je to filozofia jQuery, nevyhovuje mi to, radšej new Plugin(_.id('neexistujuciprvok')))
    • eventy sa príšerne ladia, jQuery pri .on neregistruje funkciu ale registruje niekde svoj kód aby to dispatchoval a je pekne ťažké nájsť samotného pôvodcu eventu
    • .on je v niektorých prípadoch hrozne neefektívne (kvôli dispatchom, ale neplatí vždy, treba na to dávať pozor)
    • katastrofálna práca s dátovými typmi, ako príklad uvediem $.get, alebo $(..).data() ktoré v prípade, že premenná začína na znak '[', alebo '{' vrátia JSON. Môžte si skutočne vyskúšať vrátiť z webovej aplikácie plain text a $.get ho automaticky parsuje ako JSON. Tak isto <div data-premenna="{}"> parsuje ako JSON čo je často nebezpečné
    • kopa ďalších malých drobností ktoré robí implicitne a so správnym vstupom spôsobia pád aplikácie, neskutočne ma to vytáča

    Čo sa týka angularu vadí mi viacej vecí. Asi najviac ma vytáčalo, že nemá žiaden fallback pre browsery bez js (unobtrusive js). Nie že by to v dnešnej dobe až tak vadilo, ale ak ten web má prechádzať google musí sa mu servírovať statický obsah. Oficiálne riešenie od googlu: nainštalovať na webserver webkit browser, automaticky prechádzať web a ukladať statické súbory. Fakt super. React aspoň ráta s nejakým fallbackom, takže nemusím sa starať zvlášť o službu ktorá je tam len kvôli indexácii webu.

    Webove prohlizece jsou na takove urovni, ze i moloch bootstrap+jquery+angular+XXpluginu neznamena, ze by web byl pomaly ci nepouzitelny.

    Na googlackych produktoch sa mi dosť často stáva, že vďaka ich asynchrónnej inicializácii mám web načítaný tak za 5s. Teda tvári sa tak. Ďalších 25s čakám až môžem na niečo kliknúť. Ak je na nejakých elementoch href="#" tak je to celkom super lebo môžem naň kliknúť aj keď ešte nie je načítaný web a nič sa nestane. Ak je tam skutočný odkaz tak mi otvorí nejaký web a ja musím stlačiť späť a počkať až sa to znovu natiahne. Najlepšie na tom je, že netuším či sú všetky skripty natiahnuté lebo sa načítavajú asynchrónne (takže ani v hlavične tabu nevidieť načítavanie).

    K samotnej použiteľnosti .. neviem ako je to v česku. Kde sa pohybujem ja ide internet väčšinou do 20kB/s. Čoraz častejšie narážam na weby ktoré sa načítavajú 5-10 minút.

    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    finc avatar 16.6.2015 08:25 finc | skóre: 8 | blog: Finc | Kolín
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Ze je Bootstrap moloch vime asi vsichni. Nicmene, mas nejake statistiky, o kolik se web "zpomali", pokud necham cely bootstrap? Nicmene souhlas, ze je urcite vyhodnejsi si zachovat pouze to, co skutecne potrebuji. A pokud je to jen trochu mozne, tak at je toho co nejvice. Duvodem uz je samotny fakt, ze bych se casem stejne dostal do faze, kdy budu psat neco, co uz v tom Bootstrapu davno je.

    Co se tyce font-awesome, tak se priznam, ze tuhle chybu jsem nezaznamenal. Testovali jsme aplikace i na mobilnim zarizeni a nic takoveho se nam v defaultnim nastaveni nestalo. Jakym prohlizecem jsi web oteviral?

    jQuery ma asi milion chyb. Je pomaly, protoze ... DOM :)) Nicmene, pokud se nekdo upnul k html, tak asi moc jinou volbu nema. Spoustu veci, vcetne eventu lze nahradit prave zminovanym Reactem. Ono vubec jQuery v takovem pripade neni potreba. Pokud se teda clovek nedostane do faze, kdy potrebuje vyuzit pluginy, ktere jsou prave jQuery. Holt se stale jedna o nejrozsirenejsi platformu a v budoucnu se to zatim asi moc nezmeni. I weby s Angularem s nim v drtive vetsine pripadu pocitaji.

    Startup webu, hlavne tech angularovskych je skutecne problem. To je take jeden z argumentu, proc je Angular jen hloupa moda :)

    Nevim jak ostatni, ale rychlost 20kB/s je spise historii, ne? I kdyz chapu, ze jsou situace, kdy je clovek rad i za tuto rychlost. Nicmene tyhle nove javascriptove aplikace (s REST backendem) jsou proste trend a kdyby se prilis ohybali vuci vnejsim vlivum, jako je rychlost internetu, tak z toho opet vznikne kockopes. Stejne jako navrhy pred nimi :)

    Jedna vec, ktera tady asi nebyla brana v potaz je to, ze pokud se podari co nejvice prosadit HTTP/2, tak to pro takovyto druh aplikaci bude jen vyhra. Binarni protokol, HTTP push, paralelni nacitani, apod. Ne nadarmo je spoluautorem i Roy Fielding, coz je ten chlapik, co napsal dizertacni praci, ze ktere vznikl ten dnesni buzzword REST :))

    S Javascriptem se do budoucna pocitat musi, zatim nic lepsiho nikdo nevymyslel. Sice tady byly pokusy jako Google Dart, ale proste ostatni to ignoruji. Zejmena Microsoft proste toto akceptovat nebude. Je to ta dan za to, ze webove technologie nejsou zavisle prostredi. Neumim si predstavit situaci, kdy by se treba Facebookovsky React dostal do faze, kdy ho Microsoft bude podporovat. Nebo treba, ze by Facebook podporoval Angular :)

    Kazdopadne ja mam javascript rad a i kdyz jsem v nem videl uz hodne prasackeho kodu, tak to neni chybou jazyka, ale pouze tech, kteri ten jazyk vyuzili. Javascript neni Java ci C#, coz si spoustu lidi holt nechce priznat :)
    Kdo Vam dal pravo ty lidi urazet? A kdo ti dal pravo cumet z okna, ty kr.vo!
    mirec avatar 16.6.2015 08:36 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Jakym prohlizecem jsi web oteviral?

    Safari. Ale mám iphone 3G takže podporu fontov tam mám slabú (myslím, že len SVG).

    Pokud se teda clovek nedostane do faze, kdy potrebuje vyuzit pluginy, ktere jsou prave jQuery.

    Toto ma tak trochu štve, lebo všetci píšu pre jQuery aj keď v súčasnosti už browsery podporujú pekne hračky ako selectory, aj forEach funguje dobre ... nevidím dôvod kvôli nejakému malému efektu tam dávať celé jQuery.

    Startup webu, hlavne tech angularovskych je skutecne problem.

    Štart je ešte v pohode keď tá aplikácia aspoň funguje. Ako užívateľovi sa mi často stávalo, že ten kto písal angular aplikáciu niečo nemal ošetrené a v istom momente prestala reagovať na udalosti. Teda v istom momente = asi po 10s používania :D Takže f5 a zase si počkať až to celé natiahne ...

    Nevim jak ostatni, ale rychlost 20kB/s je spise historii, ne?

    Vyššie rýchlosti sú v mestách. Ja som na Slovensku. Je to celkom hornatá krajina. Ak chytím 20kB tak som celkom rád. Tu v horách by musel byť vysielač na každom kopci čo je trochu ťažko realizovateľné.

    Kazdopadne ja mam javascript rad a i kdyz jsem v nem videl uz hodne prasackeho kodu, tak to neni chybou jazyka, ale pouze tech, kteri ten jazyk vyuzili.

    S týmto neviem či môžem súhlasiť. Čo je to prasácky kód? Keď sa snažím písať objektovo? Keď dedičnosť riešim prekopírovaním property? JS nemá definovaný žiaden coding štandard, takže všetci píšu hlava nehlava, nikto nevie poriadne vysvetliť na čo je prototypová dedičnosť dobrá ...

    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    16.6.2015 09:51 Radek Miček | skóre: 23 | blog: radekm_blog
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    S Javascriptem se do budoucna pocitat musi, zatim nic lepsiho nikdo nevymyslel.
    Lepších jazyků je celá řada, JavaScript totiž patří mezi ty horší jazyky. Osobně bych upřednostnil, kdyby prohlížeče podporovali například LLVM IR.
    oryctolagus avatar 18.6.2015 17:09 oryctolagus | skóre: 29 | blog: Untitled
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Osobně bych upřednostnil, kdyby prohlížeče podporovali například LLVM IR.
    WebAssembly
    Existuje 10 druhů lidí: Ti, co nerozumí binární soustavě, ti, co ano, a ti, kteří znají i balancovanou ternární.
    18.6.2015 19:33 Radek Miček | skóre: 23 | blog: radekm_blog
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Pěkné, ale v instrukční sadě momentálně chybí goto (LLVM má br). Kompilátory tedy budou muset přeložit goto na nějaké jiné konstrukce – například na while s vnořeným switchem nebo implementovat relooper jako má Emscripten.
    oryctolagus avatar 18.6.2015 22:36 oryctolagus | skóre: 29 | blog: Untitled
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Viz Why not just use LLVM bitcode as a binary format? Hlavní problém je zřejmě v tom, že LLVM IR není protable.

    Proč nemají goto, nevim, asi protože v high-level jazycích většinou není. Kromě toho koukáš na naprostý prototyp, finální standard se imho bude ještě dost lišit...
    Existuje 10 druhů lidí: Ti, co nerozumí binární soustavě, ti, co ano, a ti, kteří znají i balancovanou ternární.
    19.6.2015 09:25 Radek Miček | skóre: 23 | blog: radekm_blog
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Proč nemají goto, nevim
    Hádám, že proto, aby se to snadno přeložilo do JS nebo asm.js.
    v high-level jazycích většinou není
    To ano, ale některé jiné konstrukce z high-level jazyků se překládají na kód s goto – například pattern matching.
    Kromě toho koukáš na naprostý prototyp, finální standard se imho bude ještě dost lišit
    To je pravda, přidat goto v budoucnu zvažují jako možnost.
    oryctolagus avatar 16.6.2015 12:43 oryctolagus | skóre: 29 | blog: Untitled
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Mne vadí keď je tam pár tisíc nepoužitých pravidiel. Ak niekto ide na web bootstrapu, zvolí custom build, vyberie si len grid nič zásadné proti tomu nemám. Vadí mi však, že ľudia sú už tak leniví, že tam hodia celý bootstrap a všetky elementy pracne preštýlujú pričom by im skutočne stačil grid.
    Když už musim dělat něco pro web, používám PureCSS, většinou to stačí a grids má imho lepší než bootstrap.
    Existuje 10 druhů lidí: Ti, co nerozumí binární soustavě, ti, co ano, a ti, kteří znají i balancovanou ternární.
    17.6.2015 11:01 chrono
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    PureCSS má možnosti pre grid viac-menej rovnaké ako Bootsrap, jediný rozdiel je, že má stĺpcov viac (a teda prípadne oveľa viac nepoužitých pravidiel). ;)
    mirec avatar 17.6.2015 11:21 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web

    Rozumnejšie by bolo keby to bolo spracované nejakým CSS preprocesorom a vygenerovalo by sa ich len toľko koľko je potrebných.

    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    finc avatar 17.6.2015 19:05 finc | skóre: 8 | blog: Finc | Kolín
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Ale tech sloupcu nemusi byt 12. To je jen cislo, podle ktereho muzu fyzicky rozdelit bloky. Ve finale muzu mit v jednom radku 2 sloupce nebo klidne 400. Funguje tam zanoreni, takze v kazdem bloku mam opet tech 12 sloupcu.

    Jinak proc, je to zrovna 12 a ne 5 ci 100 je asi jasne. 12 lze delit na poloviny, ctvrtiny ci tretiny :)
    Kdo Vam dal pravo ty lidi urazet? A kdo ti dal pravo cumet z okna, ty kr.vo!
    15.6.2015 16:12 ET
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    a ja mel za to, ze nejdulezitejsi je obsah...
    ⧠ A = 0 avatar 15.6.2015 16:46 ⧠ A = 0 | skóre: 8 | blog: Technokratovo_zrcadlo | Helsinki
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Kdy žiješ?
    Nevolte zmrdy.
    finc avatar 16.6.2015 08:27 finc | skóre: 8 | blog: Finc | Kolín
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Pokud pises webovou aplikaci, dejme tomu na spravu dat z databaze, tak obsahem je preci dana databaze a ne text, ktery si tam pripises. Web ma dnes dve zakladni vyuziti. A to jako informacni medium a jako platforma pro aplikace. V nekterych pripadech se muzou prekryvat, v nekterych nikoli.
    Kdo Vam dal pravo ty lidi urazet? A kdo ti dal pravo cumet z okna, ty kr.vo!
    rADOn avatar 15.6.2015 17:28 rADOn | skóre: 44 | blog: bloK | Praha
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Chapu, ze je to cele ironie, ale na druhou stranu tyhle nove pristupy prave umoznuji z webu vymackat maximum.
    Me teda "moderni" web moc maximalni nepripada. Jenom se veci ktery driv delal browser presunuji do javascriptu, protoze autori webu jsou prece mnohem chytrejsi a lip vedi jak delat UI.
    "2^24 comments ought to be enough for anyone" -- CmdrTaco
    15.6.2015 20:03 Radek Miček | skóre: 23 | blog: radekm_blog
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Jenom se veci ktery driv delal browser presunuji do javascriptu
    Teď se do JavaScriptu přesouvá ledacos. Za chvíli bude internetový prohlížeč poskytovat víc funkcionality než operační systém.
    mirec avatar 15.6.2015 21:01 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Samozrejme, hlavne zbavili používateľov tej zbytočnej histórie a tlačidla späť. Ved načo keď používateľ môže nekonečne scrollovať a keď na niečo klikne môže začať znova.
    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    pavlix avatar 15.6.2015 22:19 pavlix | skóre: 54 | blog: pavlix
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    A hlavně se nesmí implementovat vyhledávání. To už by se uživatel choval divně a stálo by to přinejmenším za hlídání tajnou policií.
    Jendа avatar 15.6.2015 22:48 Jendа | skóre: 74 | blog: Výlevníček | JO70FB
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Existuje na to rovnák na vohejbák.
    mirec avatar 16.6.2015 07:09 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web

    Existuje, sám som ho pár krát implementoval. Myslel som skôr toto.

    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    16.6.2015 05:24 Kvakor
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Webove prohlizece jsou na takove urovni, ze i moloch bootstrap+jquery+angular+XXpluginu neznamena, ze by web byl pomaly ci nepouzitelny. Tyhle casy jsou davno pryc :)
    Na desktopu možná, ale dnes leze dost velká část uživatelů na web ze zařízení, které rozhodně nemají výkonu nazbyt a pokud ano, tak je draze vykoupen zkrázením provozní doby při běhu na baterie. Použít takovýto obludný moloch na stránku, kterou by jako čisté HTML zobrazil snad i lepší jednočip, je jako vzít si na kopání brambor bagr (a u některých webů by to bylo spíš důlní rypadlo :-) ).
    finc avatar 16.6.2015 08:57 finc | skóre: 8 | blog: Finc | Kolín
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Opět jsou dve pohledy na web. Jedna je, ze tvorim verejnuu website, u ktere pocitam s tim, ze k ni pristupuje mnoho lidi pres mobilni zarizeni skrz mobilni data. V takovem pripade budu resit datovou velikost.

    V pripade druhem, kdy tvorim webovou aplikaci, ke ktere se nejvice pripojuji lide z intranetu ci stolnich PC, protoze se jedna o slozitejsi aplikaci, tak resim spise efektivitu vyvoje a uzivatelske prostredi.
    Kdo Vam dal pravo ty lidi urazet? A kdo ti dal pravo cumet z okna, ty kr.vo!
    rADOn avatar 16.6.2015 13:25 rADOn | skóre: 44 | blog: bloK | Praha
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Jo, jenze vetsina dnesnich webaru by nepochopila co to je "uzivatelske prostredi" ani kdyby je jedno prejelo autobusem. Ty tvoje dva pohledy jsou jen zpusob jak si pohodlne zduvodnit vymysleni (a placeni!) narovnavaku na ohejbak.
    "2^24 comments ought to be enough for anyone" -- CmdrTaco
    finc avatar 16.6.2015 13:45 finc | skóre: 8 | blog: Finc | Kolín
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Mozna mas pravdu. Mozna vsichni plati za neco, co bys udelal lepe, efektivneji, levneji a rychleji. Nam ostatnim staci fakt, ze vyvoj webu se meni a meni se k lepsimu :)
    Kdo Vam dal pravo ty lidi urazet? A kdo ti dal pravo cumet z okna, ty kr.vo!
    mirec avatar 16.6.2015 15:04 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web

    Myslím, že budeme mať problém aj s definíciou lepšieho ;) Dnes som napr. hľadal chybu v kóde a objavil som tam použitie značiek spam. Kedysi by na to validátor niečo vypísal, lenže HTML5 ;)

    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    finc avatar 16.6.2015 15:36 finc | skóre: 8 | blog: Finc | Kolín
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Za to muze HTML5? Tag spam je validni? To preci nema co delat s html5 ci starsi verzi. Stale je vydana specifikace, ktera jasne urcuje, ktere tagy a ktere atributy jsou validni. U html jen prislo navic k tomu, ze lze pouzivat atribut data-*, kde za hvezdicku si clovek mohl dosadit cokoli. Pokud nekdo pouziva jine tagy ci atributy, tak k tomu asi nelze co rict... Samozrejme existuji frameworky, jako zminovany Angular, ktery do tagu cpe svoje atributy, ale nakolik je to spravny pristup, tot otazka. Me osobne se tenhle pristup prici...
    Kdo Vam dal pravo ty lidi urazet? A kdo ti dal pravo cumet z okna, ty kr.vo!
    mirec avatar 16.6.2015 15:42 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web

    OK beriem späť, teraz som to revalidoval a HTML parser sa správa trochu inak než som čakal. Keď som opravil ostatné chyby tak spam už zobrazuje ako chybu.

    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    rADOn avatar 16.6.2015 15:08 rADOn | skóre: 44 | blog: bloK | Praha
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    K lepsimu? Pred deseti lety jsem mohl mit v prohlizeci libovolne mnozstvi tabu, stranky se renderovaly rychleji, fungovalo skalovani, web se dal pouzivat na libovolnem zarizene vcetne treba brailovych terminalu, fungovaly klavesove zkratky… Dnes se povazuje za uspech kdyz funguje zpatecni tlacitko. Technologie se mozna zlepsuji, ale ten "lepsi" web jsem prilis nezaznamenal.
    "2^24 comments ought to be enough for anyone" -- CmdrTaco
    oryctolagus avatar 16.6.2015 15:33 oryctolagus | skóre: 29 | blog: Untitled
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Blbost, to je akorát nostalgie.

    Stránky se psaly prasácky vždycky. Pamatuju se okolo roku 2005 na některý weby - zejména asijské MMORPG tím byly proslulé - většinu webu tvořily obrázky, hlavní nadpis + grafika byly ve flashi, na stránce bylo ještě několik dalších flashů a celé to bylo optimalizováno pro IE a rozlišení 1024×768 (tj. v ostatních browserech nefungovaly náhodně různé věci). V porovnání s nějakým blbým Bootstrapem byla ta stránka mnohem větší a to ještě na tehdejším připojení. Místo JS animací jsi tam měl animovaný gify - to bylo fakt o hodně lepší.

    A to nezmiňuji takové věci jako frames (které mimochodem kurvily tlačítko zpět kolikrát víc než dnešní JS), Java applets, VBScript a poobné technologie, které jsou naštěstí dávno pryč.

    Jasněže dneska umožňují technologie prasit weby, ale tak to bylo vždycky. Dnes máme imho lepší možnosti, jak se s tím vyrovnat. Když si ve vlaku při průjezdu Pardubicema nebo nějakou takovou p*delí zapnu tethering a dává to 500 kB/s, tak mě nějakej Bootstrap nebo jQuery absolutně nezajímaj.
    Existuje 10 druhů lidí: Ti, co nerozumí binární soustavě, ti, co ano, a ti, kteří znají i balancovanou ternární.
    finc avatar 16.6.2015 15:47 finc | skóre: 8 | blog: Finc | Kolín
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    A co se tyce onech tabu.

    Tak napriklad Chrome je povazovano za zrout pameti. A je to pravda, jenze...

    Jsou dva pristupy:

    1. Bud tedy budu setrit pamet, zpomalim renderovani, zpomalim javascript, zmensim cache a budu uzivatele prudit.

    2. Budu pocitat s tim, ze pamet je dnes tak levna zalezitost, ze radeji budu ukousavat vic a uzivateli prinesu rychlejsi prostredi.

    ...

    Je to asi jako se bavit, proc lide nepisi v asembleru? Vsak je to rychlejsi nez Java :)) Myslim, ze je treba trosku slezt ze stromu a podivat se co je za rok.

    Osobne si pamatuju doby, kdy 1MB RAM stala pres tisic korun. A dnes? Jestli mi Chrome "spapa" 1GB nebo 5GB je mi uplne jedno. Pamet temer nic nestoji...
    Kdo Vam dal pravo ty lidi urazet? A kdo ti dal pravo cumet z okna, ty kr.vo!
    mirec avatar 16.6.2015 15:54 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web

    Hmm čo také úžasné robia webové aplikácie že sú tak náročné na výkon?

    Pamätám si časy keď sa js intepretoval 100x pomalšie ako dnes. Pamätám si časy keď som mal 10x slabší stroj.

    Otvorím si napr http://ckeditor.com/builder. V stĺpci Available plugins napíšem "aaaa" a čakám 10s až mi vyhodí, že môjmu vyhľadávaniu zodpovedá 0 pluginov (zatiaľ CPU na 100%). Vyhľadávanie v necelých 150 položkách! To už ide tak pomalý, že by som mohol očami prejsť a vybrať tie položky a budem približne rovnako rýchly.

    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    finc avatar 16.6.2015 16:24 finc | skóre: 8 | blog: Finc | Kolín
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Zkousel jsem ten web, ktery jsi poslal a za prve necekam 10 vterin, cca 1 vterinu a za druhe mam pocit, ze krome toho leveho okna to filtruje i v pravem. Nicmene to vyhledavani mohlo byt o mnoho rychlejsi, protoze tam nedochazi k zadnemu volani na server, ale vse se zpracovava na klientske strane.

    Vyzkousej vyhledavani treba zde: http://jrowny.github.io/react-absolute-grid/demo/

    Provede mnohem vice operaci a rychlostne je to nekde jinde :)
    Kdo Vam dal pravo ty lidi urazet? A kdo ti dal pravo cumet z okna, ty kr.vo!
    mirec avatar 16.6.2015 16:30 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web

    OK, mám možno starý stroj, o to nejde. Chcel som tým povedať, že väčšina ľudí píše ako prasce. Ó tom, že sa to dá napísať dobre ma netreba presviedčať, ja sa tou prácou živím.

    Vyvíjať sa dá dnes omnoho lepšie než pred 10 rokmi, nástroje sú neporovnateľne lepšie, podpora prehliadačov o ktorej sa nám ani nesnívalo ak nie je potrebné optimalizovať pre IE6. Napriek tomu si ľudia nedajú ani trochu námahy optimalizovať.

    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    Václav 16.6.2015 16:32 Václav "Darm" Novák | skóre: 26 | blog: Darmovy_kecy | Bechyně / Praha
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Napsal jsem aaaa, okamžitě mi to vyfiltrovalo těch 0 pluginů a load stoupl na okamžik z 7% na 13% CPU. Firefox, Core 2 Duo T8100, 4GB RAM.
    Cross my heart and hope to fly, stick a cupcake in my eye!
    mirec avatar 16.6.2015 16:37 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web

    Dobre, trochu preháňam, 1.2s na znak. Core(TM)2 Duo CPU T5250, firefox. Mimochodom v tom super vyhľadávaní nefunguje ani paste ;) Čakal by som že zaregistrujú aspoň oninput.

    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    Václav 16.6.2015 16:48 Václav "Darm" Novák | skóre: 26 | blog: Darmovy_kecy | Bechyně / Praha
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Je fakt že každý stisk klávesy způsobí lehčí zadrhnutí, trochu otravné. Ale paste mi funguje… Fakt zvláštní :D Každopádně to není zrovna ukázka příjemně fungujícího rozhraní. Mimochodem, ještě jednou díky za blog. Člověk se i z diskuze dozví zajímavé věci. Třeba o react.js bych vůbec nevěděl.
    Cross my heart and hope to fly, stick a cupcake in my eye!
    mirec avatar 16.6.2015 17:00 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web

    Paste klávesovou skratkou funguje, ale myšítkom alebo cez kontextové menu nie keďže majú registrované len onkeyup. Chápem, že niekto registruje onkeyup kvôli kompatibilite, ale v súčasnosti by sa už malo registrovať hlavne oninput, ktoré rieši všetky možné spôsoby zadávania textu.

    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    mirec avatar 16.6.2015 15:36 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web

    Aj dnes môžem otvoriť koľko chcem tabov. Kým je to číslo menšie než 5.

    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    finc avatar 16.6.2015 15:42 finc | skóre: 8 | blog: Finc | Kolín
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Promin, ale tohle nejsou argumenty, to je jen nesmyslne tlachani. Vubec neni pravda, ze drive by web fungoval lepe. Prave naopak: java aplety, flash, nevalidni html, frames, apod.

    Zkus si prosim nastudovat nejake novejsi veci, mozna zmenis nazor. Mozna ne, ale alespon budes vedet vice o novych pristupech.

    Ta "tuna" javascriptu, o ktere se zde nekdo zminoval, ma totiz hlavni efekt a to je v tom, ze diky tomu UI funguje pomoci AJAXu, coz prave onen web dost zrychluje.

    Jinak dalsi blbosti, typu: tlacitko zpet.... Staci se podivat na jednoduchy example treba od AngularJS, kde je krasne ukazano, ze prave ono tlacitko zpet funguje a pocita se s nim. Nikoli, ze autor webu zprasi javascript a napise: "nepouzivejte tlacitko zpet". Tyhle casy jsou uz diky bohu pryc.

    Takze znovu: Je skvele, ze se vyvoj webu posunul a to spravnym smerem :))
    Kdo Vam dal pravo ty lidi urazet? A kdo ti dal pravo cumet z okna, ty kr.vo!
    mirec avatar 16.6.2015 15:46 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web

    Niekedy funguje, niekedy nie. Upravoval som po bývalom kolegovi angular aplikáciu a fungovalo to ... no niekedy áno niekedy nie. Pri kliknutí na niečo kým niečo iné nebolo načítané spôsobovalo krásny race condition, takže sa celá aplikácia rozletela. Vlastne stačilo 2x stlačiť späť pred tým než sa stihol načítať obsah a celé sa to rozpadlo.

    Toľko k výhodám. Samozrejme angular mal aj svoje temné stránky napr. nefungujúce otvorenie na novej karte a podobne.

    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    finc avatar 16.6.2015 15:49 finc | skóre: 8 | blog: Finc | Kolín
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Chapu, nekdy se veci "poserou" behem procesu :)

    Nicmene v zakladu se s tlacitkem zpet pocita, takze pokud je v aplikaci nefunkcni, tak je to problem autora aplikace. Je to to same, jako kdyby desktop aplikaci nebylo mozne ukoncit :))
    Kdo Vam dal pravo ty lidi urazet? A kdo ti dal pravo cumet z okna, ty kr.vo!
    rADOn avatar 17.6.2015 12:37 rADOn | skóre: 44 | blog: bloK | Praha
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Promin, ale to neni tlachani, to je popis - subjektivniho - faktu. Kdyby se mi web pouzival lip nez driv tak nemam duvod si stezovat ne?

    Ano, flash, ramce a podobny hruzy byly problem vzdycky. Ale taky vzdycky platilo ze lidi co se k tomu uchyluji jsou amateri a jejich dila jsou prasarny. Zatimco dneska tyhle prasata jsou "vyvojari" pokud prasi v angularu. To co popisujes jako "reseni" zpatecniho cudliku nazorne ukazuje kde cokl zakopany: dnesni "webovi" "vyvojari" vubec nechapou zakladni principy na jakych byl web postaven, pocinaje oddelenim prezentacni vrstvy.
    Ta "tuna" javascriptu, o ktere se zde nekdo zminoval, ma totiz hlavni efekt a to je v tom, ze diky tomu UI funguje pomoci AJAXu, coz prave onen web dost zrychluje.
    S tim jsem ted udelal zajimavou zkusenost - procitam si nejaky historicky dokumenty na webu NASA na ktery evidentne nikdo nesah od vynalezu Mosaicu - a je to skvely. Da se to bez problemu cist na mobilu v metru: stranky se stihaj dotahnout behem cekani ve stanici, nezere to baterky ani pamet, necha se to pohodlne ovladat z displeje… Zadny ajaxovy web mi nefungoval tak dobre. Tak kde je ten spravny smer?
    "2^24 comments ought to be enough for anyone" -- CmdrTaco
    16.6.2015 18:46 #Tom
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Díky, moc pěkný článek. :-)

    Správně napsaný web by měl mít oddělený obsah od formy. Třeba tak, že server sestaví XML dokument s obsahem a pomocí XSLT šablony jej převede na (X)HTML stránku (klidně s celou tou moderní kupou hnoje, je-li to nutné), PDF dokument, TeXový zdroják nebo něco úplně jiného.
    vlastikroot avatar 17.6.2015 20:41 vlastikroot | skóre: 24 | blog: vlastikovo | Milevsko
    Rozbalit Rozbalit vše Re: Ako sa píše moderný web
    Taky bych mohl psat web v brainfucku, ktery by se prelozil v javascriptu a renderoval celou stranku do webgl.
    Sg1-game | We will destroys the Christian's legion ... and the cross, will be inverted | IP 80.188.182.6

    Založit nové vláknoNahoru

    ISSN 1214-1267   www.czech-server.cz
    © 1999-2015 Nitemedia s. r. o. Všechna práva vyhrazena.