{"id":8734,"date":"2022-07-20T10:17:02","date_gmt":"2022-07-20T17:17:02","guid":{"rendered":"https:\/\/coderpad.io\/?p=8734"},"modified":"2023-05-28T14:43:02","modified_gmt":"2023-05-28T21:43:02","slug":"two-technical-questions-to-ask-your-intermediate-front-end-candidates","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/interviewing\/two-technical-questions-to-ask-your-intermediate-front-end-candidates\/","title":{"rendered":"Two Technical Questions to Ask Your Intermediate Front-End Engineering Candidates"},"content":{"rendered":"\n<p>An intermediate engineer \u2013 aka \u201can engineer\u201d \u2013 is usually the most common development role you\u2019re hiring for. Building an excellent interview experience for this career level is therefore extremely important to your hiring process.<\/p>\n\n\n\n<p>One of the leading <a href=\"https:\/\/coderpad.io\/blog\/interviewing\/5-tips-for-interviewing-frontend\/\">interviewing best practices<\/a> we recommend is to develop questions that accurately assess skills and match the candidate\u2019s experience level \u2013 but what does that look like for an intermediate front-end developer?<\/p>\n\n\n\n<p>Intermediate engineers already know the basics of software development, so asking them to write a run-of-the-mill sorting algorithm would be a big waste of time. You want to focus on getting your intermediate developers to demonstrate that they can work with your particular business logic and engineering priorities.<\/p>\n\n\n\n<p>In the front end, you can often assess their ability to carry out business logic by challenging them to build a ubiquitous UI feature that would be a common task on your team.&nbsp;<\/p>\n\n\n\n<p>For example, drop-down menus and navigation bars are regularly used but often taken for granted. This makes them good skill sets to assess for intermediate engineers to show that they understand the underlying styling and logic encompassed by these UI concepts.<\/p>\n\n\n\n<p>Good intermediate questions will also have multiple facets \u2013 like CSS styling and business logic \u2013 that the candidate can focus on during the interview. Which facet the candidate focuses on can be an important signal for their strengths and where their development priorities lie.<\/p>\n\n\n\n<p>With that in mind, here are three questions we\u2019ve seen used successfully in intermediate front-end engineer interviews.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 The questions below are written with React in mind, as that is our primary framework at CoderPad. However, you can easily tailor them to suit your own non-React frameworks like Angular or Vue.<\/p>\n<\/blockquote>\n\n\n<aside class=\"\n    cta-banner\n     cta-banner--bg-green      cta-banner--has-media \"\ndata-block-name=\"cta-banner\">\n    <div class=\"inner\">\n        <div class=\"content\">\n                            <h2 class=\"headline\">Ready to start interviewing?<\/h2>\n            \n                            <div class=\"cta-buttons\">\n                                    <a href=\"\/sales\/\" class=\"button  js-cta--get-a-demo\"  data-ga-category=\"CTA\" data-ga-label=\"Ready to start interviewing?|Get a demo\">Get a demo<\/a>\n                                <\/div>\n                    <\/div>\n                    <div class=\"media\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"238\" height=\"146\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/illustration-of-two-people-chatting-in-app-windows.png\" class=\"attachment-large size-large\" alt=\"\" \/>\n            <\/div>\n            <\/div>\n<\/aside>\n\n\n\n<h2 class=\"wp-block-heading\">Tabs User Interface<\/h2>\n\n\n\n<p>In this example, we ask the candidate to recreate a tabbed UI interface, much like the browser tabs you have at the top of your screen right now. The candidate has to do this from scratch without using a component library.&nbsp;<\/p>\n\n\n\n<p>This challenge shows you how a candidate would work through the complexities of creating a fully-functional tab feature. Since it\u2019s an open-ended challenge, you don\u2019t necessarily need stringent success criteria. Some things to look for \u2013 and talk about with the candidate \u2013 might include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>How does the candidate approach the component\u2019s API?<\/li>\n\n\n\n<li>Do they pass the provided data structure to a \u201cTabs\u201d component, or do they take a more expressive approach?<\/li>\n\n\n\n<li>Do they use React children or props for tab labels and contents?<\/li>\n\n\n\n<li>How do they maintain the state of the active tab?<\/li>\n\n\n\n<li>Do they use conditional rendering to hide the inactive tab contents? Or do they use CSS?<\/li>\n\n\n\n<li>Do they consider how the tabbed UI flows into the rest of the UI? Is it full height\/width? Does it just fill its parent container?<\/li>\n\n\n\n<li>Do they consider how to handle tabs with very long labels?<\/li>\n<\/ul>\n\n\n\n<p>If we have candidates complete this challenge especially quickly, we\u2019ll also give them additional tab-related challenges. We ask them to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Maintain the active tab state between page loads.<\/li>\n\n\n\n<li>Use CSS transitions to fade the tab contents in and out when a new tab is selected.<\/li>\n\n\n\n<li>Build dynamic tabs: an additional tab to create a new tab with blank contents.<\/li>\n\n\n\n<li>Have the tabs handle the case where there are more tabs than horizontal space.<\/li>\n\n\n\n<li>Add the ability for the tabs to be vertical instead of horizontal.<\/li>\n<\/ul>\n\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=218843&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Select menu<\/h2>\n\n\n\n<p>This is another challenge that asks a candidate to recreate a common UI experience \u2013 the select menu. Like the previous Tab UI challenge, the candidate cannot use the native select component.&nbsp;<\/p>\n\n\n\n<p>While a beautiful menu design is appreciated, most companies want to primarily assess candidates on their ability to create an intuitive API that other developers on the team would easily be able to implement.&nbsp;<\/p>\n\n\n\n<p>You can also use this challenge to look at how they handle common UI pain points of select menus \u2013 like element overlap and menu population \u2013 and use this as a discussion point to see how they reason through obstacles.<\/p>\n\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=221368&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Other interviewing resources<\/h2>\n\n\n\n<p>Selecting the right question for intermediate developer candidates is just one part of setting up an excellent interview operation.<\/p>\n\n\n\n<p>Just like with <a href=\"https:\/\/coderpad.io\/blog\/interviewing\/3-great-technical-questions-for-junior-front-end-candidates\/\">junior engineering candidates<\/a>, you also have to consider how to <a href=\"https:\/\/coderpad.io\/interview-front-end-developers\/\">prepare for the interview<\/a>, the best way to give candidates feedback, how you\u2019re going to prevent potential cheating, and more.<\/p>\n\n\n\n<p>We cover interviewing pro tips and best practices extensively in the <a href=\"https:\/\/coderpad.io\/blog\/interviewing\/\"><em>Interviewing <\/em>section of our blog<\/a>. Here are also a few we recommend to get you started:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/coderpad.io\/blog\/interviewing\/5-tips-for-interviewing-frontend\/\">How to Run Front-End Developer Interviews That Don\u2019t Suck<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/coderpad.io\/blog\/interviewing\/the-1-best-anti-cheat-interview-question-ever\/\">The #1 Best Anti-Cheat Interview Question Ever<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/coderpad.io\/blog\/interviewing\/a-holistic-guide-to-diversity-and-inclusion-in-the-technical-hiring-process\/\">A Holistic Guide to Diversity and Inclusion in the Technical Hiring Process<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Intermediate engineers already know the basics of software development, so asking them to write a run-of-the-mill sorting algorithm would be a big waste of time. You want to focus on getting your intermediate developers to demonstrate that they can work with your particular business logic and engineering priorities. Conduct better intermediate front-end interviews with these two technical questions.<\/p>\n","protected":false},"author":1,"featured_media":8867,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[12],"tags":[],"persona":[],"blog-programming-language":[],"keyword-cluster":[],"class_list":["post-8734","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-interviewing"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/8734","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/comments?post=8734"}],"version-history":[{"count":29,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/8734\/revisions"}],"predecessor-version":[{"id":34326,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/8734\/revisions\/34326"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media\/8867"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=8734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/categories?post=8734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/tags?post=8734"},{"taxonomy":"persona","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/persona?post=8734"},{"taxonomy":"blog-programming-language","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/blog-programming-language?post=8734"},{"taxonomy":"keyword-cluster","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/keyword-cluster?post=8734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}