Kodérský advetní kalendář

Připravili jsme pro vás, kodérský Adventní kalendář s krátkými kodérskými tipy.

V 99% nedělejte hover na boxy, které nejsou klikatelné

1

Zlepšete svého grafika(y)

2

Myslete na rychlostní optimalizaci

3

Jestli máš Windows, tak je nejvyšší čas napsat Ježíškovi o MAC

4

Pokud používáš float: left; a width: 100%; odnese tě čert

5

Obrázky, které nesouvisejí s obsahem vkládejte přes CSS

7

Responsive ti nikdy nebude fungovat bez <meta name="viewport" />

8

Nestylujte stránky jako celek, ale jako jednotlivé komponenty

9

Stylujte prvky od class a nestylujte jednotlivé tagy

10

Bacha na zapomenuté console.log, tvoje IE7

11

Používejte Bootstrap, Foundation apod. s rozvahou (né vždy se to hodí)

12

Stylus forever!

13

Žádný odkaz na webu nesmí vést na tutéž stránku

14

Pokud je to možné používej ikonkové fonty

15

Pozor na čárku na konci objektu

16

Nastavuj rozměry u obrázků atributy nebo používej Grunt

17

Nezapomínej na tiskový styl

18

Vždy začni kódovat obecnou typografií

19

Nekóduj pixel perfekt bude to pak vypadat Super

20

Nezapomínej na hover efekty

21

Klient má vždycky pravdu

22

Nejvyšší čas vypnout počítač a koupit dárky

23

Štastné a veselé Vánoce přejí SuperKodéři

24
Sdílet článek:

Tomáš Krejčí Autor: Tomáš Krejčí
tomas.krejci@superkoderi.cz Twitter Kippt LinkedIn LastFM

Komentáře

  • Avatar

    1. dookie 01. 12. 2013 v 12:25

    Hláška „Ani firebug ti čokoládku nenajde“ je nejlepší :-D

  • Avatar

    2. ChRIS 05. 12. 2013 v 10:35

    Trochu mě od vás překvapil tip „Jestli máš Windows, tak je nejvyšší čas napsat Ježíškovi o MAC“. Jak tedy vy kodéři testujete/opti­malizujete své šablony pro prohlížeč Internet Explorer řekněme 8+? Máte virtualizovaný Windows?

  • Avatar

    3. Tomáš Hejč - SuperKodér | 05. 12. 2013 v 10:53

    Ahoj, jednak máme virtualizovaný Windows u sebe + máme samostatný počítač s Windows, kde máme instalované všechny verze IE od 6 – 10 na různých verzích Windows, který slouží pro testování.

  • Avatar

    4. Michal Matuška - SuperKodér | 05. 12. 2013 v 11:00

    Ahoj,
    Ještě doplním Toma.
    Na tom windows stroji máme už i IE 11 a ještě starší verze ostatních browserů.
    Také někdy používáme BrowserStack kde testujeme po reportu od klienta nějaké speciální kombinace platforem a starších verzí browserů.

  • Avatar

    5. dookie 13. 12. 2013 v 12:56

    Ahoj, můžu poprosit o vysvětlení doporučení \„Stylujte prvky od class a nestylujte jednotlivé tagy\“, co je tím myšleno?

  • Avatar

    6. Tomáš Krejčí - SuperKodér | 13. 12. 2013 v 16:31

    Ahoj,
    je lepší stylovat elementy od class než od atributů ze dvou důvodů (které mě teď jako první napadly). První je, že např. ve výpise produktů, pokud u nadpisu máš classu .title (např. .crossroad .title), tak ji můžeš jednoduše změnit skrz sémantiku z h2 na h3. A druhý důvod je obecné stylování např. spanů, které pokud nebudeš stylovat od classy, tak se může jednoduše stát, že se ti span objeví v textu z redakčního systému a pak se ti samozřejmě nastyluje i tento span.

    Jeden z mála příkladů, kdy bych styloval jednotlivé tagy bez class, tak to je když počítám, že si uživatel může v textu v redakčním systému přidat jen element bez class a ten chci, aby vždy vypadal jinak. Protože přidávat classy v wysiwygu je opruz :)

  • Avatar

    7. Daniel Střelec 15. 12. 2013 v 11:27

    Jaktože u 24ky nemáte dvojokénko? Na double čokoládku jsem se vždycky těšil jak malej! Tak nezbývá než doufat, že to bude aspoň velká čokoládka :D.

  • Avatar

    8. Jirka 17. 12. 2013 v 16:57

    Z jakeho duvodu nesmi zadny odkaz na webu vest na tutez stranku? V cem je konkretne problem?

  • Avatar

    9. Marek Zeman 18. 12. 2013 v 09:41

    Tak jsem si to pročetl a musím uznat, že k 18. (dnes) jsem až na Stylus a duplikaci odkazy snad ve všem s vámi. Jen místo Stylusu mám radši SCSS a ohledně duplicitních odkazů bych udělal výjimku jen u footer menu. Pokud někdo použije footer menu tak se většinou část duplikuje z header menu. Také jen podotknu, že u obrázků nastavovat HTML rozměry se mi moc nelíbí kvůli responsive. Pokud se má pak obrázek zmenšovat tak mu stejně musím dát width a height na auto. Kdybych nechal jen max-width 100% tak se výška bude deformovat.

    Díky moc za kalendář! Fakt paráda :)

  • Avatar

    10. Michal Matuška - SuperKodér | 18. 12. 2013 v 10:17

    ad odkaz na stejnou stránku
    Technický problém není v ničem. Pouze je to antiuživatelské. Lepší je uživatele upozornit na to, že již na stránce je než ho nechat dostat se do smyčky :)

    ad stylus
    Podle mě Marku děláš do budoucna velkou chybu. Kolem Stylusu se teď díky gruntu ohromě zvedla komunita a troufnu si říct, že již dnes je dál než jakýkoliv jiný preprocesor. A ta syntaxe je naprosto boží – bez závorek, bez středníku, bez dvojteček. Pouze tabulátor a jedeš.

    ad HTML rozměry
    Ano máš pravdu, u responsivu se to musí zhodit. Dělám to, ale přes media max-width a usnadním tak desktopovým prohlížečům renderování – méně reflow.

  • Avatar

    11. Tomáš Hejč - SuperKodér | 18. 12. 2013 v 10:26

    Dane, díky za tvůj komentář, který vyvolal v kanclu velmi živou debatu na téma kdo z nás měl v adventním kalendáři 24. větší čokoládku nebo dvojokýnko :-)

    Jinak mohu slíbit, že 24. bude čokoládka s DÁRKEM. Proto si nezapomeň okénko otevřít. (Dárek budeme rozdávat pouze na Štědrý den. Těšte se)

  • Avatar

    12. Daniel Střelec 18. 12. 2013 v 11:22

    Tomáš Hejč: díky za odpověď, kdysi bylo dvojokénko běžné…až teď mně napadlo, že dneska se všude šetří, tak možná už dvojokénko vynechali :). Každopádně se na 24 s dárkem těším a okénka si otevírám pravidelně, příjemná nostalgie a ještě se člověk poučí – díky Superkodérům za skvělý dárek!






Využijte formátování Texy!

SuperKodéři se mění na SUPERKODERS. Už jsme spustili prozatímní jednoduchou stránku, která vám nové Superkodéry představí.

Přejít na nový web Zůstat na současném webu