<Mazipan />

Cover Open Interview with mazipan

Open Interview with mazipan

Available in other languages:

This article will reveal some of my secret (*not really secret) questions I will ask to the candidate that applying for Frontend Engineer. Iโ€™ve been become an Inteviewer for many interview sessions when I was in a full-time job for some e-commerce companies in Indonesia.

โœ๏ธ Quick Q&A

  • โ” Will I always ask all the questions in this article?: Can be yes, or no. Depend on the situation. One question can be followed up with other questions to make it clearer. As an interviewer, I just prepare my own sets of questions that can be randomly asked when needed. So you may donโ€™t need to be able to answer all the questions.

  • โ” Why not include the answers?: Because I donโ€™t like a text-book explanation. I will capture how understand you are with the topics, usually by asking some use cases or adding follow up questions. So do not just memorize the answer, understand it, so you can explain it with your own words.

๐Ÿง‘โ€๐Ÿซ Common Interview Processes for Software Engineer

Before we start with listing down the questions, itโ€™s better for us to understand the common processes or workflows that commonly being adopted by many tech companies.

If you are Indonesian citizen, you can watch the video from Gogo about the interview process for software engineer. But if you are not understand the Indonesian language, you can just direct to the slides presentation here.

The processes are vary one to another, but in general it will be quite the same. Some companies will split it into different and multiple interview session, while the others may doing a single interview session that cover all the things.

๐Ÿ’ป Live Coding

This part usually will be executed first. Also by me. For frontend position, I will usually doing a live coding for these two topics:

  • โญ•๏ธ HTML & CSS: Asking to create some basic layouting, just to make sure the candidate at least can coding the HTML and CSS in raw.
  • โญ•๏ธ Data Structure / JavaScript: Itโ€™s common live coding to solving some data structure related questions.

You can check the video from Gogo for Interview Coding (In Indonesian Language) and Sample mock interview. You can also get the slides here

๐Ÿ“ My common questions

Here the list of questions those I may asked when doing an Interview session:

๐ŸŒ Web Fundamental

  • ๐ŸŸฉ Explain and spot the difference about load a JavaScript file via HTML by only using <script> tag, and with <script async> tag, and with the <script defer> tag!
  • ๐ŸŸฉ Explain about attribute rel=noopener and/or rel=noreferrer that usually included in the a tag (<a href="..." rel="noopener noreferrer">)!
  • ๐ŸŸฉ Can you give me some examples of Semantic HTML Tag as a replacement for an ordinary div tag?
  • ๐ŸŸฉ Explain the difference of Cookie, Local Storage and Session Storage! When we should use it? Explain the trade-off when using each of them!
  • ๐ŸŸฉ What is prefetch? What is preload? Give an example or use case when we should use it? When we should avoid to use it?
  • ๐ŸŸฉ How to make the Browser caching the static resources (Image, JS, CSS, etc) have been requested before?
  • ๐ŸŸฉ What is CDN? What is the role of CDN in term of serving our website? Why and when we should use CDN? What type of resources those better to be served via CDN?
  • ๐ŸŸฉ How if you are being asked to create HTML layout but have a very different design for the Mobile and Desktop? What is the approach or strategy?
  • ๐ŸŸฉ Explain about CORS (Cross-Origin Resource Sharing)! When and why it happens? How we solve the problem?

๐ŸŸก JS Fundamental

  • ๐ŸŸฉ Whatโ€™s difference of .forEach and .map?
  • ๐ŸŸฉ Whatโ€™s difference of debounce and throttle? Can you elaborate your answer by explaining the use case of debounce and throttle?
  • ๐ŸŸฉ Explain about Closure in JavaScript.

โš›๏ธ Frameworks (React)

  • ๐ŸŸฉ Explain about semantic versioning!
  • ๐ŸŸฉ Spot the difference of dependencies, devDependencies and peerDependencies in the package.json!
  • ๐ŸŸฉ Explain Rule of Hooks in React.js!
  • ๐ŸŸฉ Explain the Array Dependencies in the useEffect!
  • ๐ŸŸฉ Explain about Server-Side Render, Client-Side Render and Static Site Generated! When we should use it? Whatโ€™s the trade-off from each options?
  • ๐ŸŸฉ Explain the difference of Rest API and GraphQL! Tell me the pros and cons! When we should use Rest API? When we should use GraphQL instead?
  • ๐ŸŸฉ How to create a lazy load in the image component without 3rd party library?
  • ๐ŸŸฉ Whatโ€™s the minimum things you can do as a Frontend Engineer to support the SEO of your site?
  • ๐ŸŸฉ How do you test your project?

๐Ÿ’ซ Web Performance

  • ๐ŸŸฉ Explain about Core Web Vitals!
  • ๐ŸŸฉ Explain the difference of Data Field dan Data Lab in the context of web performance!
  • ๐ŸŸฉ What things can decrease the CLS (Cumulative Layout Shift) score? How to increase the score?
  • ๐ŸŸฉ What things can decrease the LCP (Largest Contentful Paint) score? How to increase the score?
  • ๐ŸŸฉ How to monitor the web performance? Do you use the RUM (Realtime User Monitoring)?

๐Ÿ’… System Design

  • ๐ŸŸฉ How to improve the time consumed by th engineer in fisnihing the task, from development to the production?
  • ๐ŸŸฉ How to design the application that showing the Live Comments from the users?

๐Ÿ’Œ Personal tips

Different interviewer may have different set of questions, but at least this can be your own benchmark and for you to prepare your self before the interview session. If you still stuck when trying to explain things in this article, maybe you still need to read more references.

If needed, write it down your answers and manage it word by word so it will be easier to understand. You can gain more confidence when mastering the things that being asked and you already prepare for that.

Know the text-book answer maybe not enough, prepare for the following up questions also, understand the use cases, and the trade-offs.

๐Ÿคบ So, when we do an interview?

Cover photo from Tima Miroshnichenko on Pexels

๐ŸŒŸ Thank you for reading
Loading comments...