Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

2bc9862c7dac608e64f0e9e3bcdeb542?s=128

Stephan Pohl

May 23, 2016
Tweet

Transcript

  1. #scd16 @klarstil Talk dirty to me #scd16 @klarstil Dirty little

    tricks for common problems in the front-end development.
  2. #scd16 @klarstil Stephan Pohl Developer Core 6+ Jahre bei shopware

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

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

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

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

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

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

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

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

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

  12. #scd16 @klarstil 1. Man kann Typographie relevante Properties auf <img>

    Elemente setzen 2. Das <img> Element ist ein "ersetztes" Element Zwei Fakten über <img> Elemente
  13. #scd16 @klarstil Nützliche Informationen zur Verfügung stellen

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

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

  16. #scd16 @klarstil #scd16 @klarstil Resultat

  17. #scd16 @klarstil Alternativ-Text ersetzen

  18. #scd16 @klarstil #scd16 @klarstil Resultat

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

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

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

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

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

    @klarstil ...und dass auf mehrere Arten
  24. #scd16 @klarstil Ausgangssituation Das Web besteht aus Content, Content beinhaltet

    Wörter und Wörter können lang, sehr lang sein.
  25. #scd16 @klarstil Erster Ansatz - Trennzeichen • Funktioniert nicht in

    Blink-basierten Browsern. • Trennzeichen sind sprachabhängig. • Browser-Support je nach Sprache eingeschränkt.
  26. #scd16 @klarstil Zweiter Ansatz - overflow-wrap • Support in jeden

    von "caniuse.com" gelisteten Browser. • Browser (IE) benötigen "word-wrap"
  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
  28. #scd16 @klarstil Quelle: https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/

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

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

    es? Jetzt!
  31. #scd16 @klarstil Quick & Dirty - Tabellen verwenden

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

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

  34. #scd16 @klarstil "Ghost"-Element Ansatz Wenn man ein "Ghost"-Element in das

    Eltern-Element setzt, kann man den gleichen Effekt erreichen!
  35. #scd16 @klarstil "Ghost"-Element Ansatz

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

  37. #scd16 @klarstil Resultat

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

  39. #scd16 @klarstil console.log on steroids #scd16 @klarstil Kleine hilfreiche Tipps

    für die Chrome DevTools Konsole.
  40. #scd16 @klarstil Spaß mit console.log()

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

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

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

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

  45. #scd16 @klarstil Live demonstration #scd16 @klarstil Theorie ist ganz nett,

    aber Praxis ist besser!
  46. #scd16 @klarstil Fragen? #scd16 @klarstil