{"id":3099,"date":"2021-10-19T08:45:47","date_gmt":"2021-10-19T15:45:47","guid":{"rendered":"https:\/\/coderpad.io\/?page_id=3099"},"modified":"2023-05-28T14:32:57","modified_gmt":"2023-05-28T21:32:57","slug":"improve-front-end-coding-interviews-with-mockups","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/interviewing\/improve-front-end-coding-interviews-with-mockups\/","title":{"rendered":"Improve Front-End Coding Interviews with Mockups"},"content":{"rendered":"\n<style>\n.the-content figcaption {\n    opacity: 0.8;\n    font-size: 0.8rem;\n    text-align: center;\n    margin-bottom: 1rem;\n    margin-top: 0.5rem;\n}\n<\/style>\n\n\n\n<p>As we\u2019ve talked about before: <a href=\"https:\/\/coderpad.io\/blog\/interviewing\/5-tips-for-interviewing-frontend\/\">Interviewing a front-end programming candidate is tough<\/a>. There are so many niches within the moniker \u201cfront-end\u201d that could include anything from managing global state to creating pixel-perfect UI implementations.<\/p>\n\n\n\n<p>Regardless of the differences between candidates\u2019 skills, one thing still persists: Their work impacts the user experience. This experience, while powered by code, is driven by the app\u2019s requirements and interactions a user faces.<\/p>\n\n\n\n<p>We all know algorithmic interview questions for front-end roles aren\u2019t representative of day-to-day development, so let\u2019s change that. Let\u2019s start using actual application mockups in interviews.<\/p>\n\n\n\n<p>How would that shift the dynamic of an interview? What benefits would you gain from doing so? Let\u2019s explore those questions with some examples.<\/p>\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\">UI<\/h2>\n\n\n\n<p>The UI is the primary method of interaction most users will interact with your product. While <a href=\"https:\/\/coderpad.io\/blog\/development\/introduction-to-web-accessibility-a11y\/\">every tool should support sightless interaction<\/a> making sure your app has consistent visuals adds a level of polish many will enjoy.<\/p>\n\n\n\n<p>While many developers are capable of building rudimentary styles out, many can be lost on the nuances of implementing real-world UIs in code.<\/p>\n\n\n\n<p>Take the following examples:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616ee164cd77d.png\" width=\"298\" height=\"643\"><\/td><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616ee16521b5f.png\" width=\"299\" height=\"646\"><\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">Thanks to <a href=\"https:\/\/www.figma.com\/community\/file\/858089300797114102\/Shrine\" target=\"_blank\" rel=\"noopener\">the Figma Community for this mockup<\/a><\/figcaption><\/figure>\n\n\n\n<p>While these screenshots come from a <a href=\"https:\/\/material.io\/design\/material-studies\/shrine.html\" target=\"_blank\" rel=\"noopener\">demo application via the Material Design team<\/a>, this is highly representative of the level of customization many expect to see in their apps today.<\/p>\n\n\n\n<p>This app has a corner with straight edges taken out of the bottom and a triangle on the left side of the top nav. It\u2019s a nice effect, but to implement this is surprisingly difficult with something like CSS.&nbsp;<\/p>\n\n\n\n<p>While there\u2019s always <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/clip-path\" target=\"_blank\" rel=\"noopener\"><code>clip-path<\/code><\/a>, how do you then add a drop shadow like the one shown above? (hint, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/filter-function\/drop-shadow()\" target=\"_blank\" rel=\"noopener\">it\u2019s not box-shadow<\/a>, seeing as <a href=\"https:\/\/css-tricks.com\/using-box-shadows-and-clip-path-together\/\" target=\"_blank\" rel=\"noopener\">those properties don\u2019t work together<\/a>).<\/p>\n\n\n\n<p>Even with simpler aspects of the UI, it\u2019s good to understand a developer\u2019s thinking process. Ask 10 different developers how they\u2019d implement that top bar of icons and they might give you a dozen different answers.<\/p>\n\n\n\n<p>Some might choose to implement them as individual <code>absolute<\/code> positioned items, others might use <code>flex<\/code> to add a spacer between each icon.<\/p>\n\n\n\n<p>And that\u2019s okay to have different answers to that question!<\/p>\n\n\n\n<p>The point of most interview questions shouldn\u2019t be to get \u201ccorrect\u201d answers, but rather to gauge a candidate\u2019s ability to think through a problem and why they would make a particular decision.<\/p>\n\n\n\n<p>After all, we know that when it comes to engineering, the answer to most programming questions is \u201cit depends\u201d.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Repo Organization<\/h2>\n\n\n\n<p>Many technical interviews today are short and focus on function implementation minutia. This contrasts to the real world, where codebase maintainability is often decided at a macro scale, not a micro function-level one.<\/p>\n\n\n\n<p>When I join a company for the first time, my ability to quickly scan through a codebase comes down to the decisions made during componentization and&nbsp;<\/p>\n\n\n\n<p>For example, let\u2019s take the following mockups into consideration:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616ee1655a4f6.png\" alt=\"A Figma mockup for a design course app\"\/><figcaption class=\"wp-element-caption\">Thanks to <a href=\"https:\/\/www.figma.com\/community\/file\/833515051385038928\/contra-wireframe-kit\" target=\"_blank\" rel=\"noopener\">the Figma Community for this mockup<\/a><\/figcaption><\/figure>\n\n\n\n<p>This app clearly follows a trend of keeping things highly contrasted with a large outlined style.&nbsp;<\/p>\n\n\n\n<p>This is great for accessibility and, in my opinion, looks great. But consistency like this can\u2019t be done with designs alone; code has to power the show, and the more places that use one-off hard-coded values, the less likely you are to maintain the eutopia your mockups promise.<\/p>\n\n\n\n<p>Given this, it can be important to understand how a candidate approaches application code organization.<\/p>\n\n\n\n<p>How are border radii kept consistent with one another? Is it a variable of some kind? Where are those variables stored? Are they alongside only other style variables or lumped together with every other global variable?<\/p>\n\n\n\n<p>Further, what about those icons in the footer? What file format are they stored in and what folder do they belong to? The component directory? A folder containing every icon in the app?<\/p>\n\n\n\n<p>Likewise, where are these components stored? Are they in a feature-specific folder or&nbsp;<\/p>\n\n\n\n<p>Once again, none of these questions have straightforward answers. However, you\u2019re able to glean a lot about how an engineer views their workflow and interop with others on the team. You can also use these questions as a jumping-off point for other questions. If they suggest keeping files in feature folders, ask their thoughts about routing and how to distinguish between page state and component state.<\/p>\n\n\n\n<p>Not all of these questions are show-stoppers for every organization, either. While I personally care a fair bit about style variable storage, I rarely care much about where in the filesystem a candidate stores their components. Take these questions and suit them to your company\u2019s requirements and priorities.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Application Logic<\/h2>\n\n\n\n<p>When I have conversations with non-developers and describe my work in React apps, I tend to avoid using the word \u201cwebsite\u201d unless pressed on it.&nbsp;<\/p>\n\n\n\n<p>This is because the general public has a misconception that websites do not require complex application logic. This is far from the truth.<\/p>\n\n\n\n<p>While low-interactivity sites do exist, they\u2019re not the type of work I find myself doing most often in web development. I\u2019m usually building application logic to help control user flow and application logic.<\/p>\n\n\n\n<p>This is not to say that low-interactivity websites with minimal application logic are not skilled work, simply that application logic is a different skillset from those. We should be making sure that if we\u2019re looking for said skillset we\u2019re assessing it properly in our interviews.<\/p>\n\n\n\n<p>Take this screenshot for example:<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616ee166d0180.png\" alt=\"\" width=\"840\" height=\"506\"\/><figcaption class=\"wp-element-caption\">Thanks to <a href=\"https:\/\/www.figma.com\/community\/file\/888726891176991741\/E-comm-App-Kit\" target=\"_blank\" rel=\"noopener\">the Figma community for this mockup<\/a><\/figcaption><\/figure>\n\n\n\n<p>This site has a cart that shows both the current number of items in your cart as well as the accumulative cost of those items.<\/p>\n\n\n\n<p>How would you add that functionality to every page in the app? Would you use a reducer pattern? Would you use dependency injection with a root provider? Would you use the same system to store global data as page data? Why or why not?<\/p>\n\n\n\n<p>Likewise, there\u2019s plenty of logical complexity elsewhere in the interface that most users will not be privy to. One such example might be translations, also known as i18n.<\/p>\n\n\n\n<p>While simply i18n can be trivial to add, once you start growing to add more and more components, making sure that updates are included in specific builds, and adding in A\/B testing the complexity can massively bloat!&nbsp;<\/p>\n\n\n\n<p>These questions can drastically impact your site\u2019s returns &#8211; we all know how influential well-crafted copy can be, and it\u2019s important to see an app work for as many people as possible.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Accessibility<\/h2>\n\n\n\n<p>Speaking of making your app available for as many people as possible, accessibility is about just that! In addition to the financial and moral drivings to make sure you\u2019re accessible to all, Many e-commerce companies have a legal requirement to comply with various laws surrounding this topic.<\/p>\n\n\n\n<p><a href=\"https:\/\/coderpad.io\/blog\/development\/introduction-to-web-accessibility-a11y\/\">While we\u2019ve talked before about what accessibility includes and some of the nuances involved<\/a>, there\u2019s so much more to the story.<\/p>\n\n\n\n<p>Here are some things you can do to make sure a candidate is following good accessibility guidelines:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Make sure a candidate is using semantic elements<\/li>\n\n\n\n<li>Try using their solution with only a keyboard<\/li>\n\n\n\n<li>Check if a candidate\u2019s solution works with screen-readers<\/li>\n<\/ul>\n\n\n\n<p>Make sure your accessibility focus is mentioned in preparation for the interview and time-budget it into your candidates\u2019 expectations. If unaware of these requirements, a candidate might opt to spend time on a project on other aspects of the project.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Do It<\/h2>\n\n\n\n<p>\u201cOkay, I\u2019m convinced, this seems like the better way to go with our UI engineering interviews. That said, this seems complicated to set up and difficult to maintain\u201d<\/p>\n\n\n\n<p>Totally understandable fears. Here\u2019s the good news: It can be easier than you might think.<\/p>\n\n\n\n<p>Let\u2019s start with the big one: How to get the designs.<\/p>\n\n\n\n<p>After all, we get it: interviews can take up a lot of accumulative work hours. Adding designers to the fray seems like another group that needs to set aside time for preparation.<\/p>\n\n\n\n<p>There are a few solutions to this problem:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Use existing designs<\/strong><\/li>\n<\/ol>\n\n\n\n<p>Your app got to where it is somehow, and you can\u2019t get much more real-world than your current production app.<br><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li><strong>Less pixels, more wireframes<\/strong><strong><br><\/strong><\/li>\n<\/ol>\n\n\n\n<p>While some of what we\u2019ve talked about today benefit greatly from fully ranged mockups &#8211; assets and all &#8211; not everything does. You can usually get by with minimal wireframes for application logic conversations<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616ee16858ff8.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Thanks to <a href=\"https:\/\/www.figma.com\/community\/file\/848318135747364351\" target=\"_blank\" rel=\"noopener\">the Figma community for the wireframe<\/a><\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li><strong>Meet Designers Where They Are<\/strong><br><\/li>\n<\/ol>\n\n\n\n<p>If you\u2019ve ever spoken with well-organized designers, you\u2019ll know how meticulous their setups can be. Just as we have components in our code, so too do designers. Design tokens act as variables; they\u2019ve got the works.<\/p>\n\n\n\n<p>This is all to say: A designer\u2019s work is complex and nuanced and it\u2019s as much a burden to pull a designer out of their workflow as it is an engineer.&nbsp;<\/p>\n\n\n\n<p>This introduces a snag when adding designs to your interview process. There has to be some communication between the designer and the engineering interviewer to get them into the interview.<\/p>\n\n\n\n<p>Many will simply export their mockups to raster images and upload them to other services, but to do this loses fidelity and adds additional complexity via an export step. This export step can cause havoc by needing to juggle multiple images during an interview &#8211; a process that often has a lot of moving parts already.<\/p>\n\n\n\n<p>Not only that, but remembering where specific assets are stored and which version is correct is complex enough without having to add another place to store those assets. Where are unique designs for interviews meant to be stored in your design tool? Where do they go once exported?<\/p>\n\n\n\n<p>Here\u2019s the good news: There are tools to solve this.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.figma.com\/\" target=\"_blank\" rel=\"noopener\">Figma<\/a> is an industry-leading design tool that <a href=\"https:\/\/www.figma.com\/customers\/\" target=\"_blank\" rel=\"noopener\">tons of huge companies use<\/a>. They\u2019ve recently launched <a href=\"https:\/\/www.figma.com\/figjam\/\" target=\"_blank\" rel=\"noopener\">FigJam, a whiteboarding tool that allows you to easily import and utilize your designs<\/a> straight from a Figma design file.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616ee16902d7c.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Here\u2019s the better news: You can conduct your coding interviews without having to leave FigJam.<\/p>\n\n\n\n<p><a href=\"https:\/\/coderpad.io\/blog\/product-updates\/figjam-coderpad-a-more-visual-way-to-interview\/\">Now you can launch a CoderPad interview from within a FigJam instance without switching tabs.<\/a> You can see mockups while writing code in your pad, use FigJam to add sticky notes clarifying expected demo behavior, and even draw system diagrams right alongside the code.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616ee16b0d628.png\" alt=\"A UI mockup next to the CoderPad Widget in FigJam\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>While not all front-end work pertains directly to the UI, we hope we were able to show how mockups can improve your front-end interviews.<\/p>\n\n\n\n<p><a href=\"https:\/\/coderpad.io\/interview-front-end-developers\/\">Front-end interviews<\/a> aren\u2019t the only ones that can benefit from better visuals in an interview, either. <a href=\"https:\/\/coderpad.io\/blog\/interviewing\/leverage-visuals-in-back-end-engineering-hiring\/\" data-type=\"URL\" data-id=\"https:\/\/coderpad.io\/blog\/interviewing\/leverage-visuals-in-back-end-engineering-hiring\/\">Back-end interviews can be made more representative of a candidate\u2019s skill using mockups and other visuals as well<\/a>.<\/p>\n\n\n\n<p>Regardless of the type of interview you\u2019re conducting, we wish you the best of luck finding a candidate that fits your company. Happy hiring!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We all know algorithmic interview questions for front-end roles aren\u2019t representative of day-to-day development, so let\u2019s change that. Let\u2019s start using actual application mockups in interviews.<\/p>\n","protected":false},"author":1,"featured_media":3354,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[12],"tags":[],"persona":[],"blog-programming-language":[],"keyword-cluster":[],"class_list":["post-3099","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\/3099","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=3099"}],"version-history":[{"count":13,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/3099\/revisions"}],"predecessor-version":[{"id":34315,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/3099\/revisions\/34315"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media\/3354"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=3099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/categories?post=3099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/tags?post=3099"},{"taxonomy":"persona","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/persona?post=3099"},{"taxonomy":"blog-programming-language","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/blog-programming-language?post=3099"},{"taxonomy":"keyword-cluster","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/keyword-cluster?post=3099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}