Excelling at Front End Development

This presentation was given at GDG Bauchi DevFest November 2018.
Bauchi is located in Northern Nigeria a beautiful and peaceful city with very few modern developments as at the time I visited the city.

Excelling at Front End Development is focused on introducing aspiring developers at Bauchi to Frontend Development. The presentation highlights different tools and technologies that help Bauchi Developers to get better as developers.

Transcript

1. Chioma James, ALC @chiomy0 Excelling at Front End Development Bauchi
2. Why do we need to get better? Bauchi
3. Modern front-end web development is in constant change. The evolution is this area has been so rapid in the past years that sometimes it’s hard to keep up with the change while maintaining focus on what needs to be done. João Ribeiro
4. We need To Get Better Because •It’s the 21st century •We must not be left out. •The Tech industry changes fast •New technology and tools always surfaces •We need better developers in Nigeria. •The future waits for no one Location
5. We hardly create. We are consumers. We consume products made by others.
6. How can we get better?
7. Improve our skills Keep learning Take up projects Collaborate with others Provide solutions to problems
8. CSS HTML JavaScript JS Essential Front End Web Developer Skills
9. What skills do we need to be better?
10. Chart Data Source Info
11. CSS Frameworks Bootstrap Foundation Bulma CSS Tools Sass Less Stylus Flex box Grid, etc.. Responsive design principles Version Control: Git/Github/Git Lab Unit testing – Jasmine/ Karma Package Managers: NPM, Bower, Yarn Task runners Automation - Grunt/Gulp JavaScript module loaders Angular.js Backbone.js React.js Vue.js jQuery Ember Backbone.js etc… JS Frameworks / Libraries Tools / Libraries ESSENTIALS IMPORTANTER
12. Use Relative CSS Units/Values • vw • vh • vmin • vmax • %, rem, em etc… They give good results when building responsive sites.
13. Accessibility (a11y)
14. Use Good Editors/ Debugging Tools Chrome Developer Tools Firefox Developer Tools Angular Extension (Augury) VSCode for Chrome VueJs (Vue Dev Extension)
17. Don’t mix tag for CSS and JavaScript files Sometimes script element blocks DOM construction. Bad: <script src="/js/jquery.min.js"></script> <link href="/css/screen.css" rel="stylesheet"> <script src="/js/main.js"></script> Good: <link href="/css/screen.css" rel="stylesheet"> <script src="/js/jquery.min.js"></script> <script src="/js/main.js"></script> Also good: <script src="/js/jquery.min.js"></script> <script src="/js/main.js"></script> <link href="/css/screen.css" rel="stylesheet">
18. Sometimes script element blocks DOM construction. Bad: <script src="/js/jquery.min.js"></script> <link href="/css/screen.css" rel="stylesheet"> <script src="/js/main.js"></script> Good: <link href="/css/screen.css" rel="stylesheet"> <script src="/js/jquery.min.js"></script> <script src="/js/main.js"></script> Also good: <script src="/js/jquery.min.js"></script> <script src="/js/main.js"></script> <link href="/css/screen.css" rel="stylesheet"> Don’t mix tag for JS Libraries and JavaScript files
19. Proprietary + Confidential Operator precedence determines the way in which operators are parsed with respect to each other. Operators with higher precedence become the operands of operators with lower precedence. Operator precedence refers to the order operators gets executed and its the source of many many bugs. Mark Zamayota Pluralsight Tutor
21. Stop that ! ALL developers need Help
22. • GDG • ALC • Devcenter • Reddit • EnginOne
23. •Udacity •Edx •Udemy •Coursera •Codecademy •Pluralsight •Frontend Masters •Khan Academy •www.w3schools.com •https://css-tricks.com/css/
24. Q&A This is a Sub-head Location
25. Chioma James @chiomy0 Location Thank you!