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.
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