Intern learning objectives: Frontend

EngineeringIntern

Frontend learning objectives:

1️⃣ Learn technical qualifications:

  1. ✅ Learn and write reports about these technologies.
  2. ✅ Be able to explain: what happens in a web browser when you enter youtube.com and hit enter?
  3. ✅ Know how to create a web application from: idea -> design -> implementation -> testing.
  4. ✅ Create a high quality Pull Request for a task.
  5. ✅ Know what to expect in a coding interview, and how to successfully pass a coding interview, Silicon Valley grade.

2️⃣ Learn to work with team members effectively, read and apply all of these in everyday work:

  1. ✅ What are high quality code standards and why are they important?
  2. ✅ How to create a good PR?
  3. ✅ How to meaningfully review your team member's PR?
  4. ✅ How to collaborate effectively with team members?
  5. ✅ What is your is your input & output?

3️⃣ Combine 1️⃣ + 2️⃣ to ramp up work output volume to match a Frontend Software Engineer's (senior team member will share useful tips):

  1. 🏋️ Translate any hi-fi design (Zeplin/Figma) to React components, pixel perfect!
  2. 🏋️ Integrate business logic and user interaction to complete web app functions.
  3. 🏋️ Optimize for speed: apply all above to quickly code up any designs.

4️⃣ Pass a formal AMO's Frontend interview process, (Silicon Valley grade).

5️⃣ If you make it here, you're now a hotshot. You've become a Frontend Software Engineer, AMO (rigorous) standards. You can work as a Frontend Software Engineer, and in the meantime, continue with Backend learning to become a Fullstack Software Engineer.

6️⃣ Keep AMO's vision in mind!

Execution plan

For each ✅: learn + mini task + and write a brief report, describing in your word: what did you learn, what's the connection between the task with the knowledge you learn. How does your knowledge help you do the task better?

For each 🏋️: execute tasks and measure the time. Repeat as much as needed to a desired output velocity.

Pace yourself. Don't rush and burn. Don't lag behind. It's a marathon, not a sprint.

Be honest, proactive, humble, open minded, curious, responsible, respectful.

Progress checkup

Use this simple progression timeline to see where you are with your development:

1️⃣ Simple bug fix -> 2️⃣ UI only task (HTML + CSS) -> 3️⃣ UI + logic task (handle button, business logic, ...) -> 4️⃣ a complete feature request -> 5️⃣ a complete page -> 6️⃣ can transform any design into functional app -> 7️⃣ create a efficient React architect for an app.

Technologies, table of learnings:

  1. ✅ Git version control and coding standards
  2. ✅ HTML
  3. ✅ CSS
  4. ✅ Javascript
  5. ✅ HTTP/HTTPS protocol
  6. ✅ Internet Browser (Chrome for example)
  7. ✅ React.js
  8. ✅ Babel.js
  9. ✅ OOCSS/SASS/SCSS/LESS
  10. ✅ Tailwind/Bootstrap
  11. ✅ Webpack
  12. ✅ PageSpeed
  13. ✅ Web application development and production deployment
  14. ✅ Data structures and algorithms. This is the most important, most time-consuming, hardest knowledge to acquire. The reason this check is in the bottom is because it's a constant accumulation of knowledge on all tasks and programming.
  15. ✅ Analytical problem solving skills.
  16. ✅ Web application performance monitoring and improvement

Git version control and coding standards

  1. Follow this short tutorial to learn git: create branch, push changes, create PR
  2. Code along tutorial with git
  3. Understand more about feature branches
  4. Learn by heart: high quality code standards, PR creation guidelines and PR review guidelines. We will have periodic reviews of these items in standups. Team member who does not remember these items is 3 times is out of the team, no exception.
  5. Task: apply all above to create an example PR on github and have it reviewed + approved by a team member.

HTML

  1. What is HTML?
  2. How does HTML help to display content on a browser?
  3. What are the popular HTML tags? What are they for?
  4. Choose 5 most visited websites of your own, have a look at the website's contents, list the tags they use and map them to what contents you see.

CSS

  1. What is CSS?
  2. How does CSS help to display content on a browser?
  3. What is the most sophisticated thing you can animate on a browser with just purely CSS? Hint: it might include the sun ☀️.

Javascript

  1. What is Javascript?
  2. Do you know (almost) everything about Javascript?
  3. How does Javascript help to display/interact with contents on a browser?
  4. If you know Javascript, you're in the pilot seat to control your browser. You can command the browser to do whatever you want it to do. Give a few examples with code.

HTTP/HTTPS protocol

  1. What is client/server architecture? On your daily use, name 5 different services which are using this architecture.
  2. What is peer-to-peer architecture? Name 5 different services you know which are using this architecture.
  3. What are the different use cases/pros/cons of these 2 architectures?
  4. What is HTTP?
  5. What is HTTPS?
  6. At what layer within the OSI model does HTTP/HTTPS live?
  7. In your words, describe how this protocol works.
  8. Name popular HTTP/HTTPS: headers, methods, status codes.

Internet Browser (Chrome for example)

  1. List 5 things that a browser can do.
  2. When you enter youtube.com to your browser, what does your browser do to display the content you see? (read: how browser render a webpage)
  3. What are browser APIs? List 10 popular API categories that browsers can do.

  4. Putting all above together (only use above technologies), write the follow programs:

    • Web app webcam: use browser api to take input from your computer camera and display it on the web application. Create a toggle button where the user clicks to turn the camera on/off (on by default).
    • SESV latest: use browser Fetch api to get the latest tutorials list and display it on your web application. Create a Manual fetch button so users can click and fetch the latest content if they want to.
    • User friendly: for all user interactions above, add confirmation message to confirm that user wants to do that action, and web app's success/failure message accordingly. Change the color/shade of the button when the user hover on it to inform the user that the button is clickable.
    • Simple calculator: design and implement a simple calculator like the one on your phone.

React.js

  1. What is React.js?
  2. What is JSX?
  3. Why can't browsers understand React code?
  4. What is a component?
  5. What is a hook?
  6. What is a component life cycle?
  7. Code and explain how to control component life cycle with class component methods.
  8. Code and explain how to control component life cycle with hooks.
  9. What are the differences and similarities between hooks and class component methods to control component life cycle?
  10. How can we make browsers understand React code?

Babel.js

  1. What is Babel.js?
  2. Why do we need it in development?

OOCSS/SASS/SCSS/LESS

  1. What is OOCSS/SASS/SCSS/LESS?
  2. Why don't we use CSS instead of OOCSS/SASS/SCSS/LESS?

Tailwind/Bootstrap

  1. What is Tailwind/Bootstrap?
  2. Why do we use Tailwind/Bootstrap?
  3. What is Reactstrap?

Webpack

  1. What is Webpack?
  2. Why do we need Webpack?
  3. When you develop a FE app (you run npm start), what happens?
  4. What does Webpack do to build a production app?
  5. What are the benefits of using Webpack for production build?
  6. Read webpack dev and production config file in Frontend repo then explain in details what does that file instruct webpack to do and to achieve what.

Page Speed

  1. Go to Google Page Speed Insight
  2. Enter 3 websites and see the speed: Facebook, AMO, SESV
  3. Apply what you learnt above, create a solution to improve all pages speed to 95 and above.

Web application development and production deployment

  1. Putting it all together: how React, Babel, SASS/LESS, Tailwind/Bootstrap, Webpack help in developing and production building a web application? What advantages do they give? Can we develop web applications without them? Should we develop web applications without them? Why/why not?
  2. Have a look at a compiled React code for production deployment. Explain how browsers read these files and display the content you see? Watch this video about how React Virtual DOM works before answering the question.
  3. In a React component, when it says "mount/unmount a component", what is the equivalent act of work the browser does?

Web application performance monitoring and improvement

  1. What's the maximum hardware (RAM, CPU) does an operating system normally provide to a browser tab (Chrome's for example)? What happens if the needed resource required by the web application exceeds this limitation?
  2. How can we monitor a web application hardware resource consumption in real time?
  3. What are the possible criterias to rate a web application as "high performance" (think about user experience and resource consumption)? List them by measurable metrics preferred.
  4. Create a best practices checklist for an engineer to keep in mind while developing a web application to make sure it's "high performance".
  5. facebook.com has been pretty slow for the last 2 years. Based on what you've discovered, explain what might have happened and give suggestions to improve it.