The Front-End Checklist - A tool for meticulous developer

Transcript

1. The Front-End Checklist A tool for the meticulous developer @thedaviddias — March 2018 —
2. Hi, I’m David Dias I’m just a Front-End Developer I love code (I worked on international brands and projects) I love people (I managed several teams in different countries) I love building cool stuff (I worked on big websites, some apps and open-source projects)
3. ?
4. Your (probable) current situation
5. Front-End developers are often building websites like that…
7. - Short timelines - Unexpected feature sent by the client in the middle of the project - You forgot the date of the delivery - The last season of “Game of Thrones” - A new trainee you should manage (it’s always the fault of the new trainee) - … Mostly because:
8. Which often leads to the same result:
9. Bugs and piece of code missing (metas, alts, image optimization…)
10. It should exist another way to live as a Front-End Developer… But how?
11. Texte du titre Using a checklist!
13. But why should you use a checklist in your daily workflow?
14. - To avoid repetitive errors or omissions - To ensure the quality of your deliverables - Save your time (to go out with your loved ones for example) - A shareable document for the team - A useful document for new colleagues…
15. The Front-End Checklist
16. David Dias - Github « The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your site / HTML page to production. »
17. Based on repetitive errors or missing piece of code from beginners or advanced developers
18. HEAD HTML Webfonts CSS Images JavaScript Performance Accessibility SEO
19. README.md frontendchecklist.io (Github)
20. Technologies used
21. How to use the Front-End Checklist?
22. #1 Decide which rules your project and team need to follow
23. #2 Define the rules to check at the beginning, during, and at the end of your project
24. #3 Learn a little more about each rule
25. #4 Start to check!
27. #5 Integrate automated testing in your workflow
28. Task runner / bundler
29. #6 Validate every page before sending to QA team and to production
31. #7 Enjoy your work above all!
32. The future of the Front-End Checklist
33. V2 V1 . . . Soon
34. - More links and explanations of each point (The “Why”) - A tool for teams (realtime, account?…) - An NPM module able to test automatically each rule - …
35. (In progress) (Soon) frontendstash.top (Need rework) frontendchecklist.io
36. How to build an open-source project
37. #1 Everything starts with an idea and the will to share it to the world.
38. #2 Share your idea with your friends / colleagues before.
39. #3 Don’t wait until it’s perfect, just do it! (I’m not sponsored by Nike)
40. #4 Talk and write about it!
45. - Need to be really reactive (on Twitter, on Github, email…) - You need to be prepared to spend lot of time exchanging and correcting some bugs, accept some PR. - Keep a record of all websites, newsletters, tweets which talk about your project (you can build a Facebook fan page). - Be ready to maintain and launch new versions.
47. Projects analysis
48. That's All Folks. Questions?
49. Gracias. Thank you. Merci. Obrigado. Feedbacks on Twitter with #FrontEndChecklist