What it means to be a Frontend Engineer in 2021 By Kelvin Gobo | Codecademy Port Harcourt Meetup | April 17, 2021

A LITTLE ABOUT ME ● Kelvin Gobo ● Frontend Engineer ● Technical Writer ● Mentor @DSCUniport ● Twitter: @slightlynerd

TABLE OF CONTENTS BRIEF HISTORY Web development and separation of roles into frontend and backend FRONTEND DEVELOPMENT (FED) IN A NUTSHELL What exactly does it mean to be a frontend developer 01 03 02 CORE FUNDAMENTALS HTML, CSS, JavaScript, HTTP 04 05 06 MORE FRONTEND! Accessibility, design eye, performance ADVANCED CONCEPTS Single page apps, progressive web apps, web app tooling GETTING STARTED How do you become a frontend engineer?

BRIEF HISTORY 01 Web development and separation of roles into frontend and backend

REVIEW OF PAST EVENTS 1989 Tim Berners-Lee invents web 1993 - 1996 2007 2000s 2010s Active development of web browsers Release of HTML5, separation of concerns: frontend, backend First iPhone release HTML, CSS, JavaScript were developed

FRONTEND DEV (FED) IN A NUTSHELL 02 What exactly does it mean to be a frontend engineer

What is FED? Frontend development is the process of putting together various design elements and assembling them together to create an experience that is intuitive and appealing to the end-user to enable them carry out their intended tasks.

Some activities you may do as a frontend engineer: 1. Bringing design to life with HTML, CSS and JavaScript. 2. Improving the user experience of a web application 3. Implementing user-centered features 4. Making the web app responsive on various devices 5. Testing/fixing bugs 6. Optimizing web app for speed and performance DUTIES OF A FRONTEND ENGINEER

CORE FUNDAMENTALS 03 HTML, CSS, JavaScript, HTTP

CORE FUNDAMENTALS HTML Hypertext Markup Language (HTML) is the markup language used by create documents on the web CSS Cascading Style Sheets (CSS) is the markup language used to layout and style HTML documents JAVASCRIPT A programming language that’s used to add interactivity to web pages HTTP Hypertext Transfer Protocol (HTTP) is the protocol used for transferring hypermedia over the web

MORE FRONTEND! 04 Accessibility, design eye, performance, responsive web design

MORE FRONTEND! A site is said to be accessible when it’s content is available and the functionality can be operated by anyone. ACCESSIBILITY Source: UX Collective MARS MERCURY VENUS JUPITER ● Person’s with a disability (sight, hearing, etc) ● Screen readers ● JS disabled/non-JS browsers

MORE FRONTEND! You should have a sense of good design and user experience AN EYE FOR DESIGN ● Layout ● Typography ● Colours ● UX

MORE FRONTEND Make it fast! Make it slick!! Make it small!!! PERFORMANCE Performance involves: ● Optimizing images ● Minifying stylesheets and scripts ● Lazy loading resources ● Using the right image formats ● Adaptive bitrate streaming for videos ● Minimizing number of requests Source: Hackernoon

MORE FRONTEND! Making your web app fits and look nice on various device’s screen size RESPONSIVE DESIGN Source: Caktus Group

ADVANCED CONCEPTS 05 Single page apps, progressive web apps, web app tooling

ADVANCED CONCEPTS SINGLE PAGE APPLICATIONS Single page applications are web applications made of a single page that relies on JavaScript to dynamically load views and handle routing Single page frameworks include Vue.js, React.js, Angular, Svelte, etc Source: Lvivity

ADVANCED CONCEPTS PROGRESSIVE WEB APPLICATIONS Progressive web applications combine the best of the web and mobile technologies to give users an engaging experience ● Fast load times ● Privacy and data integrity ● Offline support ● Access from the home screen ● Push notifications Source: Ionicframework

ADVANCED CONCEPTS WEB APPLICATION TOOLING/OPTIMIZATION Web application tooling and optimization is the process of making a web application fast and performant. This also includes the tools and services that are used. Some tools include: webpack, lighthouse, page speed insights, cloudinary, etc. Source: KeyCDN

GETTING STARTED 06 How do you become a frontend engineer?

COURSES ■ Intro to progressive web apps by Udacity ■ Frontend Engineer course by Codecademy ■ Frontend web developer by MDN RESOURCES BOOKS ■ Head First HTML and CSS by Elisabeth Robson and Eric Freeman ■ Head First JavaScript by Michael Morrison ■ HTML & CSS: Design and Build Web Sites by Jon Duckett

CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, and infographics & images by Freepik. Please keep this slide for attribution. Does anyone have any questions? Twitter: @slightlynerd slightlynerd.com THANKS