Why I Keep Failing My Frontend Interviews + DOM Manipulation
Tags: webdev, javascript, frontend, interview
Published: 2020-05-05 17:02:27

<p>In the world of web development, pure Javascript remains king. If you came into web development only using jQuery, stop it. Now.</p>

<p>Better yet, any framework or library for that matter. <strong>PURE JavaScript is KING!</strong></p>

![JavaScript is King](https://dev-to-uploads.s3.amazonaws.com/i/x8f73jz86onmkfqkdwyl.png)

<p>Learning + <i>PRACTICING</i> the necessary foundations of JavaScript is critical in your frontend development career, especially if you want to pursue a career in this field.</p>

<p>I've gone through several dozens of interviews, each one having failed because I couldn't complete the code (and sucked at problem-solving, granted I didn't know how even to approach some of these problems).</p>

<p>But, a skill that most wouldn't outright tell you is this: </p>

<p><strong>interviewing is test-taking</strong></p>

<p>Do you remember your finals in college? Or a pop quiz that came out of nowhere that was worth 50% of your grade? Think of all that put together and add in the professor/instructor watching you do it all under 15 minutes.</p>

<p>I was horrible with test-taking. But that's the unfortunate reality.</p>

<p>Another option is to approach interviewing as if you're coding alongside a friend/co-worker. Doing this will lessen the interview anxieties that will hopefully lead to your success.</p>

<p><blockquote>Learn and develop the skills as to what precisely the interviewer might be looking after.</blockquote></p>

<p>For instance, if you're interviewing for a frontend position, learn all things, everything frontend. Learn how the web works, what "HTTP" requests are, how APIs work, DOM manipulation, etc.</p>

<p>And for the love of God, take your time with each of the questions given to you. You're not some kind of hacker trying to break a security wall before the F.B.I. breaks in your door. You're changing a box on a webpage.</p>

<hr>

<p>Below, you'll find a complete (possible) solution to the problems I had to solve. </p>

<p><i>You don't need to read them.</i></p>

<p>In summary, I was unprepared to solve each of these seemingly simple Frontend JavaScript and HTML/CSS problems. I also had major test-taking anxiety that froze me up several times throughout each of the interviews.</p>


<h1>Center this shit</h1>
{% codepen https://codepen.io/jonathanraxa/pen/MWaJdrB default-tab=js,result %}
<p>
    This one job interview that I'm glad I didn't pass. The position was full remote and eventually laid off over half their staff a few months after I had interviewed.
</p>
<p>
    Everything went well up until the last portion of the coding test where I had to work with JavaScript and implement basic DOM manipulation.
</p>
<p>
    In shot, make sure you know how to do basic Vanilla JS DOM manipulation. I'm talking things like "documment.getElementById" or "document.getQuerySelector".
</p>


<h1>Let's Move These Damn Boxes</h1>
{% codepen https://codepen.io/jonathanraxa/pen/ExVmbXq default-tab=js,result %}

<p><strong>Goal</strong>: Move the first box to the right without moving the other two boxes.</p>
<p>The most difficult part about this question was, how do we get a single div tag to overlap and move <i>over</i> the other div nodes? It's easy to determine that now, just use translate-transform.</p>
<p>The answer could have been all done in CSS. Unfortunately, I didn't have the knowledge of translate - transform property. This was something I didn't bother to completely understand since I wanted to move on from it to learn other seemingly, more inportant CSS concepts.</p>
<p>I really, really wanted this job. I love the company that I was interviewing for. </p>
<p>Moral of the story, learn and understand EVERYTHING to be a master of your craft. This is a non-negotiable. In this case, know everything there is to know about your CSS. I work with CSS every day
    for my job, yet this concept was a bit unknown to me because I never took the time to stop and learn what <i>exactly</i> I was doing to make specific styles work - CSS isn't magic.
</p>
    

<h1>Stupid Stoplight</h1>
{% codepen https://codepen.io/jonathanraxa/pen/qBOmVVd default-tab=js,result %}

<p>This was my first technical interview. For someone who has never been in one, I was overwhelmed with nervousness and excitement. Based on the job description, this is easy peasy!</p>
<p>For the most part, things seemed to be going well. I made decent styles and had a seemingly good grasp on the React coding concept.</p>
<p>Then came the ending</p>


<h1>Your Dog Days Are Over</h1>
{% codepen https://codepen.io/jonathanraxa/pen/vYNmWax default-tab=js,result %}

<p>I hadn't interviewed for a few months prior ot this coding interview. Based on the job description, this seemed like yet another interview I could pass with flying colors.</p>
<p>Once again, overthinking mixed with sheer nervousness and interview anxiety got the best of me. I ended up never finishing the exercise despite how easy it was with all the past interview 
    experience I had.
</p>
<p>This was the closest I was to getting past the second round. His feedback was that he wanted to see a higher "score" on my coding test. At the very least, I guess I know that these interviewers
    are grading me with some kind of point system.
</p>


<h1>For The Love of God, Make This Responsive!</h1>
{% codepen https://codepen.io/jonathanraxa/pen/dyYWZgO default-tab=js,result %}

<blockquote>It's been 15 minutes, you haven't coded anything...It's not looking good.</blockquote>

<p>These weren't his exact words, but it wasn't far from them. Hearing this wasn't as painful as it seemed. In fact, I was relieved that he was upfront with me 
    about not wanting to move forward with me.
</p>
<p>The main problem with this interview was that I was utterly nervous. When a seemingly simple question is thrown my way, I get nervous, especially
    since I haven't interviewed in a while. This was the first interview I had since revamping my interivew application.
</p>



<h1>Change The Freakin' Grid!</h1>
{% codepen https://codepen.io/jonathanraxa/pen/bGVWYZj default-tab=js,result %}

<p>This was my last interview. Long story short I didn't pass. I couldn't think straight with the time I had left and everything that I thought I knew was thrown out the door.
    The interviewer made suggestions for me that I didn't understand and it left me feeling lost towards the end of the interview. Moral of the story once again, PREPARE your ass off and LISTEN 
    to whatever cues are coming from your interviewer.
</p>