Presentation from "tech-talk-teach' meet ups series. In this presentation I present 7 bad CSS\JS practices and how to avoid it via tools\automation or just being careful.

1. Seven deadly
front-end
sins

2. Hello!
I am Ran Bar-Zik
I am here because I hate front end. Let’s make it suck less!
You can find me at @barzik (twitter), or LinkedIn, or Facebook
OR at my site: internet-israel.com

3. 1.
Lust for !important

4. .video-container iframe,
.video-container object,
.video-container embed {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}

5. Use stylelint

6. Node.js module that does static
code analysis on CSS, LESS or
SASS!

7. How to use stylelint
✣ Install with `npm install -g stylelint`
✣ Create .stylelintrc file with your rules
(you can extend)
✣ Run it with
stylelint sinful.css --config
.stylelint.rc

9. 2.
Gluttony for no minification

11. Use
PREPROCESS

12. SEVERAL TOOLS
Example for
preprocessors:
https://autoprefixer.gi
thub.io/
Example for uglify
https://cssminifier.co
m/

13. Use uglifiers

14. 3.
Greed - not to use library

16. Use css
libraries

17. Ynet
https://github.com/IdanCo/bootstrap4demo
Examples?

18. 4.
SLOTH - Not writing reusable
components

20. Use components
No, you don’t have to use react or
angular to do that.

21. Native components
https://codepen.io/barzik/pen/WOeZwy
Examples?

22. 5.
Wrath - browser detection

24. Use feature detection

25. examples?
1. Heard about CSS media queries?
2. Heard about JS media query?
https://developer.mozilla.org/en-
US/docs/Web/API/Window/matchMe
dia
3. It can be used on all browsers!
4. Demo:
https://codepen.io/svinkle/pen/owmg
y?page=1&

26. 6.
Envy - image usage for icons

28. You have simple icons? Use
those techniques:
Web Fonts
Implement web
fonts
CSS drawings
Use Plain old CSS to
draw images. Wrap
it up in mixins.
SVG
You can use even
this.

29. 7.
Pride - does not sanitise html
from server

31. Do test to see vulnerability
AngularReactVue
have it from the box
You can use sanitise.js
https://github.com/gb
irke/Sanitize.js
or use
createTextNode

32. That’s it!
Repent now to save your soul!

33. Join us in our next meetup at
Herzliya!

34. Or just meet me at my next lecture:

35. Thanks!
Any questions?
You can find me at @barzik & internet-israel.com