Working with Legacy projects

Talk presented at McrFRED on 31/03/2016 looking at some tips to bring legacy projects into your current workflow

Transcript

1. working with legacy projects bringing legacy into your current workflow @_branny
2. 10 top tips
3. about ME
4. @_branny head of frontend development @computerlovers
5. over websites 150 over brands 100 years
6. 50% less than greenfield
7. 99% more than legacy
8. 10 top tips
9. empathy there’s probably a good reason
10. empathy
11. empathy • don’t be a dick what the F#@k !!! don’t worry… ie6!! ahh i see makes sense
12. empathy • don’t be a dick • Understand • look at the history • help the next person to not be a dick
13. plan share it, stick to it
14. plan • screen.css • screen-new.css • screen-new-new.css • screen-new-new-2016.css
15. plan • have a plan • share your plan • stick to it
16. blocks Identify, extract, test, repeat
17. blocks • pick a section • break it down • do one thing at a time • test test test
18. structure re-structure
19. structure screen.css ie.css browser main.js
20. structure screen.css ie.css browser component component component component component component HTML main.js CSS javascript
21. structure • identify • extract • test
22. re-factor never mix with re-structure
23. re-factor • identify & rename
24. specificity reduce it as much as you can
25. specificity css is programmatically interpreted
26. specificity • kill qualifiers • swap out IDs
27. specificity introducing bem
28. specificity when reducing specificity start with the most shallow selector and work up
29. standards introduce them, share them, use them
30. standards • educate & share • don’t dictate personal preference • keep it simple • break it down
31. automate As much as possible
32. automate
33. automate • don’t get lazy • don’t over complicate
34. automate • lint • visual regression testing
35. styleguides your projects dna
36. styleguides
37. styleguides • colours • typography • buttons • grid system • components
38. the future get ready to disrupt your workflow
39. the future HTTP/2
40. the future screen.css ie.css browser component component component component component component HTML main.js CSS javascript browser component component component component component component HTML CSS javascript
41. the future screen.css 1x file compressed = 4kb component 35x file compressed = 18kb http/2 both = 7 seconds http/1 single file = 7 seconds http/1 multi file = 23 seconds gprs
42. the future • http/2 won’t break your current site • http/2 can improve performance • HTTP/2 could impact • my top 10 tips will help you.
43. 10 top tips recap 1. empathy 2. plan 3. blocks 4. structure 5. re-factor 6. specificity 7. standards 8. automate 9. styleguides 10. The future
44. thank you @_branny