Talk dirty to me - Dirty little tricks for common problems in the front-end development

In this talk I'll go through common problems in the daily front-end development and will show off little nifty techniques to solve them. You know how it works: you're working on an awesome feature for your storefront and you're facing a problem and have no idea how to solve it. Don't waste your time and spend hours trying to find a workaround that probably will never deployed to production. The walks you through the techniques and workarounds I found out the hard way over the last 5 years of front-end development. The talks covers every topic which is common - HTML links can't be nested or how to get all form data without iterating over every field in the form.

Transcript

1. #scd16
   @klarstil
   Talk dirty to me
   #scd16
   @klarstil
   Dirty little tricks for common problems in the front-end development.
   

   View Slide

2. #scd16
   @klarstil
   Stephan Pohl
   Developer Core
   6+ Jahre bei shopware AG
   @klarstil
   

   View Slide

3. #scd16
   @klarstil
   Man kann Links in einen anderen Link verschachteln
   #scd16
   @klarstil
   

   View Slide

4. #scd16
   @klarstil
   HTML Source:
   ...wie der Browser Parser es erfasst:
   

   View Slide

5. #scd16
   @klarstil
   HTML Source:
   ...wie der Browser Parser es erfasst:
   

   View Slide

6. #scd16
   @klarstil
   HTML Source:
   ...wie der Browser Parser es erfasst:
   

   View Slide

7. #scd16
   @klarstil
   Quelle: http://kizu.ru/en/fun/nested-links/
   

   View Slide

8. #scd16
   @klarstil #scd16
   @klarstil
   Was sagt die W3C?
   

   View Slide

9. #scd16
   @klarstil #scd16
   @klarstil
   Was sagt die W3C?
   

   View Slide

10. #scd16
    @klarstil #scd16
    @klarstil
    Was sagt die W3C?
    

    View Slide

11. #scd16
    @klarstil
    Man kann defekte -Elemente formatieren
    #scd16
    @klarstil
    

    View Slide

12. #scd16
    @klarstil
    1. Man kann Typographie relevante Properties auf Elemente setzen
    2. Das Element ist ein "ersetztes" Element
    Zwei Fakten über Elemente
    

    View Slide

13. #scd16
    @klarstil
    Nützliche Informationen zur Verfügung stellen
    

    View Slide

14. #scd16
    @klarstil
    Nützliche Informationen zur Verfügung stellen
    

    View Slide

15. #scd16
    @klarstil
    Nützliche Informationen zur Verfügung stellen
    

    View Slide

16. #scd16
    @klarstil #scd16
    @klarstil
    Resultat
    

    View Slide

17. #scd16
    @klarstil
    Alternativ-Text ersetzen
    

    View Slide

18. #scd16
    @klarstil #scd16
    @klarstil
    Resultat
    

    View Slide

19. #scd16
    @klarstil
    Quelle: https://bitsofco.de/styling-broken-images/
    

    View Slide

20. #scd16
    @klarstil
    CSS kann mit sehr langen Wörtern umgehen
    #scd16
    @klarstil
    

    View Slide

21. #scd16
    @klarstil
    CSS kann mit sehr langen Wörtern umgehen
    #scd16
    @klarstil
    ...und dass auf mehrere Arten
    

    View Slide

22. #scd16
    @klarstil
    CSS kann mit sehr langen Wörtern umgehen
    #scd16
    @klarstil
    ...und dass auf mehrere Arten
    

    View Slide

23. #scd16
    @klarstil
    CSS kann mit sehr langen Wörtern umgehen
    #scd16
    @klarstil
    ...und dass auf mehrere Arten
    

    View Slide

24. #scd16
    @klarstil
    Ausgangssituation
    Das Web besteht aus Content, Content beinhaltet Wörter und Wörter können lang, sehr lang sein.
    

    View Slide

25. #scd16
    @klarstil
    Erster Ansatz - Trennzeichen
    • Funktioniert nicht in Blink-basierten Browsern.
    • Trennzeichen sind sprachabhängig.
    • Browser-Support je nach Sprache eingeschränkt.
    

    View Slide

26. #scd16
    @klarstil
    Zweiter Ansatz - overflow-wrap
    • Support in jeden von "caniuse.com" gelisteten
    Browser.
    • Browser (IE) benötigen "word-wrap"
    

    View Slide

27. #scd16
    @klarstil
    Dritter Ansatz - truncate
    • Support in jeden von "caniuse.com" gelisteten
    Browser.
    • Wörter / Sätze werden nach einer Zeile gekürzt
    • Wörter werden nicht sinnig getrennt
    

    View Slide

28. #scd16
    @klarstil
    Quelle: https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/
    

    View Slide

29. #scd16
    @klarstil
    Elemente mit unbekannter Höhe & Breite zentrieren
    #scd16
    @klarstil
    

    View Slide

30. #scd16
    @klarstil
    Ausgangssituation
    Was wissen wir? Nichts! Wann wissen wir es? Jetzt!
    

    View Slide

31. #scd16
    @klarstil
    Quick & Dirty - Tabellen verwenden
    

    View Slide

32. #scd16
    @klarstil
    Quick & Dirty - Tabellen verwenden
    

    View Slide

33. #scd16
    @klarstil
    ...etwas besser...
    

    View Slide

34. #scd16
    @klarstil
    "Ghost"-Element Ansatz
    Wenn man ein "Ghost"-Element in das Eltern-Element setzt, kann man den gleichen Effekt erreichen!
    

    View Slide

35. #scd16
    @klarstil
    "Ghost"-Element Ansatz
    

    View Slide

36. #scd16
    @klarstil
    "Ghost"-Element Ansatz
    

    View Slide

37. #scd16
    @klarstil
    Resultat
    

    View Slide

38. #scd16
    @klarstil
    Quelle: https://css-tricks.com/centering-in-the-unknown/
    

    View Slide

39. #scd16
    @klarstil
    console.log on steroids
    #scd16
    @klarstil
    Kleine hilfreiche Tipps für die Chrome DevTools Konsole.
    

    View Slide

40. #scd16
    @klarstil
    Spaß mit console.log()
    

    View Slide

41. #scd16
    @klarstil
    Spaß mit console.log()
    

    View Slide

42. #scd16
    @klarstil
    Spaß mit console.log()
    

    View Slide

43. #scd16
    @klarstil
    Spaß mit console.log()
    

    View Slide

44. #scd16
    @klarstil
    Spaß mit console.log()
    

    View Slide

45. #scd16
    @klarstil
    Live demonstration
    #scd16
    @klarstil
    Theorie ist ganz nett, aber Praxis ist besser!
    

    View Slide

46. #scd16
    @klarstil
    Fragen?
    #scd16
    @klarstil
    

    View Slide