Front-end Developer

What do they do?

• Specialised in programming user interfaces
   
• A bridge between a Designer and Back-end developer
   
• Core skills:
  • Bringing a design to life
  • Maintaining workflow management

Core

• HTML
• CSS
• JavaScript
• Browser compatibility
• Responsive design
• UI / UX

Other

• Angular
• React.js
• Vue.js
• jQuery
• Grunt / Gulp / Webpack
• Bootstrap / Foundation
• Yeoman
• Semantic UI
• Sass/SCSS
• AJAX

Back-end Developer

What do they do?

• Specialised in performance, stability, security and speed
   
• Builds everything that makes a web application function
   
• Core skills:
  • API design and development
  • Manages databases
  • Handles security and authorisation

Core

• Architecture
• Analytical
• Data(bases)
• Security

Other

• PHP
• Ruby on Rails
• Python
• Java
• MySQL / SQL(ite)
• PostgreSQL
• ASP.NET
• Node.js
• C# / C++

Full-stack Developer

What do they do?

They do both :-)

Other developers

• App Developer
   
• Software Developer/Engineer
   
• Game Developer
   
• Data Scientist
   
• Big Data Developer
   
• DevOps Developer
   
• Graphics Developer

Other Tech

Task runners / package managers

• Grunt
   
• Gulp
   
• NPM
   
• Bower
   
• Webpack

Compilers

• CodeKit
   
• Koala
   
• LiveReload
   
• Prepros
   
• Scout

Text editors (IDE)

• Atom
   
• Sublime Text
   
• Visual Studio Code
   
• WebStorm / PHPStorm / IntelliJ
   
• Brackets
   
• Vim

Version control

• Git
   
• SVN
   
• SourceTree
   
• GitKraken

API Tools

• Postman
   
• Zapier
   
• Runscope

Local dev environment

• XAMPP / MAMP
   
• Vagrant
   
• Docker

CMS

• WordPress
   
• Joomla!
   
• Drupal
   
• Magento

Keeping updated

Resources

• Official documentation
   
• Stack Overflow
   
• Online communities
   
• Friends/colleagues
   
• Tutoring/mentoring

Learning tech

• Taking online courses
   
• Reading blogs & books
   
• Contributing to open source
   
• Bootcamps
   
• Conferences/Meet-ups

Love to hate

• Another last-minute Waterfall feature
   
• Interruption
   
• Everything is a top priority
   
• Other people's bad code
   
• Documentation
   
• Requests for tech support
   
• Recruiters

New projects

Steps

• Gather information
   
• Architecture
   
• Support
   
• Performance & accessibility
   
• Organisation

Gather information

• Talk to the designer
   
• Be involved in the design process
   
• Understand the vision for the project and/or sprint
   
• Get to know your team

Architecture

• How dynamic is the application
   
• Is it a SPA or server-side rendered?
   
• Select tech stack
   
• What's the CSS process
   
• Set up code conventions

Support

• Browsers
   
• Devices
   
• Documentation

performance & accessibility

• Image formats and size
   
• Compression
   
• WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications)
   
• Reduce HTTP requests
   
• Minify

Organisation

• File structure
   
• Assets (icons, images, fonts)
   
• CSS structure (BEM, Atomic, OOCSS)
   
• Build tools
   
• Framework
   
• Back-end