Front End Developer Questions: Part 1

Today I ran across an interesting Github repository containing questions that are intended to test the skills of someone who identifies as a "Front End" developer. Since I've been working on the back end for a while now, I thought it would be a fun project to give them a shot and see how much my front end chops have atrophied. Since these answers will be off-the-cuff, I highly recommend that you take all of them with a grain of salt. Hopefully folks can help me to correct and refine any incorrect answers I have. There are a lot of questions, so I'll be looking to answer them in a series of posts.

1. What did you learn yesterday / this week?

I've been working on a little MarkDown editor this week and learned how to debounce the rate of live updates in the preview.

2. What excites or interests you about coding?

I've recently been excited about functional programming, particularly with Haskell. It's forcing me to expand my mind and think about programming in new ways.

3. What is a recent techincal challenge you experienced and how did you solve it?

One thing that comes to mind is a situation where I was faced with an abnormally large Webpack bundle. It was difficult to understand where the bloat was coming from or where to start looking. I found a Webpack Bundle Analyzer plugin that allowed me to look closely at what packages I was bundling. Once I was able to see where the bloat was, it was a matter of learning how to use "externals" in WebPack to produce a smaller bundle.

4.What UI, Security, Performance, SEO, Maintainability or Technology considerations do you make while building a web application or site?

UI: When considering UI I try to stick to the KISS principle. The fewer choices a user has to make, the better. I also believe in using animations to "sweeten" the experience, not to make every single element fancy a la Material Design.

Security: When thinking about security, I tend to start with the low hanging fruits to find simple attack vectors. Do I need to sanitize this user input before sending it to the server? Is there an XSS potential here? How am I securing my cookies / JWTs? Thinking through these simpler questions goes a long way toward preventing abuse.

SEO: We live in a world where difficult-to-index, single-page JavaScript applications are all the rage and SEO tends to be an afterthought. That said, there are likely some sections of a site or application that I'd like to be indexed. In those cases, I try to defer to static pages, or if necessary, server-side rendering of front-end components. A combination of a well-defined sitemap and robots.txt is something I always try to include in my projects.

Maintainability: It's no secret that software tends toward entropy with the rest of the universe. The Maintainability of a project can sometimes be lost in translation when working on a team with different flavors, opinions, and personalities. I like to combat this with rigorous unit testing, strict linting, and code style guides. If the entire team can be on the same page, maintainability becomes much simpler.

Techonology: Work with what you know (if what you know is the right tool for the job). The front end is changing rapidly and it can be tempting to hop onto the next bandwagon and learn the new hotness. If your goal is to learn something new, that's just fine. However, if you're looking for velocity or working on a deadline, you have to work with tools that you're comfortable with. So, when considering technology I ask myself "what are the right tools for this job?" and "which of these tools am I familiar enough with to be instantly productive?".

5. Talk about your preferred development environment.

When writing code I prefer to work in VSCode because I like how it strikes a balance between being a text editor and a full-blown IDE. Having an integrated console is a huge benefit as I spend a lot of time on the command line. It also has an excellent built-in JavaScript debugger. The Typescript integration is top-notch and It feels like I have a friend much smarter than myself helping me to write better JavaScript.

From an OS perspective, I prefer to develop on a Unix machine since the projects I write tend to be deployed to Unix machines. Having my development environment closely mirror production is of the utmost importance to me.

6. Which version control systems are you familiar with?

I'm familiar with Git and Svn and much prefer Git.

7. Can you describe your workflow when you create a web page?

Unless I'm working on the simplest of projects, I usually start by getting a working build going. In my case, this would typically involve configuring Webpack and Typescript to work in tandem. Once the build is working, I tend to write a simple component & a test for the component to get something displayed in the browser. Next I try to run the build in "watch" mode to allow for live reloading and rapid progress. Once that's working, it's a matter of TDD where I write a test, write a component, make the test pass, repeat.

8. If you have 5 different stylesheets, how would you best integrate them into the site?

The first thing I would look to do would be to optimize the 5 stylesheets. Do I need all 5? Are there some overlapping responsibilities between them? If combining them doesn't make sense, is there a library I could use to reduce the amount of custom CSS needed? Nowadays, one can require CSS modules as easily as JavaScript, so maybe I can modularize the CSS per component. If none of those approaches work, I would try to run a linter to discover if there was any unused CSS that could be removed.