Tools to develop fast and with efficiency

A presentation about tools used in the Front-End side that can help in a 24h hackathon as it is for the webcup challenge.

That presentation was done during #webcup Bootcamp 2017 in Mauritius (http://www.webcup.fr/)

Transcript

1. Tools to develop websites fast and with efficiency @thedaviddias & @WebCupMu #WebCupMu 13th may 2017
2. David Dias @thedaviddias Front-End Architect / Manager
3. You will want to take some notes...
4. Don't be afraid!
5. 5 IDEA RESEARCH DEVELOP DESIGN TESTING DEPLOY ENJOY Rodmap to build a website
6. Planning is everything!
7. Content Navigation Design Code Criterias for the WebCup 2017
8. - Who I am and what is my need (me / client)? - Who is my target and what they need? - How I want my project to be differenciated? - What I want to show more? 
 (put in the video what is the most important) - ...
9. Prepare your environment
10. Days before the run...
11. Checklist before the WebCup... 1. Check access to the Github repo 2. List of team's emails (gmail prefered) 3. Skype, Slack group created 4. Check versions soft, npm... 5. Update all softwares (check trial end date) Get some rest! PLAN!
12. For the developer...
13. Boilerplate Starter kit How to Showcase Tutorial medium.com Beginner Workflow
14. Before starting coding 1. Clone your existing Github repository 2. Create .gitignore 3. Create .editorconfig 4. Yarn init or NPM init 5. Create your architecture 6. Create gulpfile (+ install dep) OR
16. $ npm install -g yo $ yo angular
17. $ npm install $ npm dev (serve, build, test...) $ yarn install $ yarn add
18. For the designer...
21. Choose the right tools
22. Start with paper!
23. Jeff Pelletier / On Medium
24. For the developer...
25. Choose your browser
27. Choose your Text Editor
29. Install your extensions • Emmet • Auto close Tag • Snippets • Color picker • EditorConfig • Suggestions • Beautify • Syntax highlight • ... -> Show recommanded Extensions
30. Version control management
32. Prepros
33. Private repository
35. Work on develop and push on master when stable * See Git-Flow
36. Commit by bunch regularly!
37. Process automation Package manager
40. Process automation Task runner / bundler
41. $ npm install -g gulp $ npm install gulp --save-dev
42. Templating
43. Pre / Post processor
44. For the project manager...
47. For the designer...
49. Web design gravit.io * Remember trial versions exist
50. Developers
52. Choose the right technologies
53. CSS Frameworks
54. UI Frameworks uikit zurb foundation
55. JS Frameworks
56. Frameworks / library
57. Respect the standards and test quality of your code!
58. Standards testing tools
60. Ressources
65. Recap
66. - Plan, planning is everything 
 (execution is another... think :) - Ask you the right questions - Choose your tools, technologies before the WebCup - Don't invest too much time on small tasks (automate) - Develop, test, commit, develop, test, commit - Respect the standards!
67. Before the end...
68. - Push on master and check on the remote server
 (update the FTP if not automatic deployment) - Export your database on the remote server - 1 hour before the end, render the video
 (respect the format and dimensions) - Be happy... and go to sleep!
69. That's All Folks. Questions?
70. Thank you. Merci. Obrigado. Feedbacks and photos on Twitter with #thedaviddias & #WebCupMu and on Facebook Pages