If you’re looking for work as a front end developer, or in fact if you’re looking for any kind of job, it’s always a good idea to take some time in advance to think about your answers to common interview questions.
A great resource (the best resource?) for front end developer interview questions, is the H5BP list.
These are my answers to the questions they’ve listed. Rather than read mine, I encourage you to work through their list and come up with your own answers. (I think that might be the first time, I’ve recommended that readers do not read a blog post :)
What did you learn yesterday/this week?
One of the many interesting things I learned was to use _.map instead of for loops, which reduces side effects, eg I am not creating a special variable just to be able iterate through a collection.
What excites or interests you about coding?
The ability to create something out of nothing and then nurture it and see if grow and evolve, somewhat like being a gardener, but in which you are the creator of your own plants.
What is a recent technical challenge you experienced and how did you solve it?
I am building an app where the title of the item currently being used appears in the top-level app header. However, for small screens, long titles tend to wrap and make the design look unsightly. Instead of using a bunch of media queries or JS checks for window size to manipulate the title, I simply added the following text helper from css-tricks:
[crayon-5a8f428060329163641599 inline="true" ].truncate-text
What UI, Security, Performance, SEO, Maintainability or Technology considerations do you make while building a web application or site?
I like to adhere by Kent Beck’s maxim:
Make it Work. Make it Right. Make it Fast.
In other words, I tend to focus first on just shipping something, to determine if this even is what the customer wants. Then, we can refactor and optimize and think about performance, security, etc. One constant consideration I am making, in regards to maintainability: every time some code appears more than once, that’s a flag and I usually add a Todo to the backlog to come back and make it DRY. Same thing with if I have a function that does more than one thing well, I’ll likely want to refactor that also.
Talk about your preferred development environment.
I like I nicely customized command line (eg one that displays the name of your current branch), lots of screen real estate (eg one screen for live reloading of app views and another for code), and automated testing that is running continually in the background.
Which version control systems are you familiar with?
Git and Subversion, though it’s been a while since I used the latter.
Can you describe your workflow when you create a web page?
Most likely I will have general layout template that I will use as a starting point (eg a landing page template, a detail page template.) Then, I focus on creating some solid, semantically meaningful, and well structured markup. After that, I’ll apply styles, and finally behaviors with JS. In most cases, though, it’s more iterative and less linear than this 1-2-3 approach.
If you have 5 different stylesheets, how would you best integrate them into the site?
I would import them as partials into a main stylesheets using Sass. I would also be consider refactoring the CSS in the respective stylesheets, to prevent duplicated css.
Can you describe the difference between progressive enhancement and graceful degradation?
Graceful degradation is more of a waterfall-oriented model, while Progressive Enhancement is more aligned with Agile and Iterative methods.
Graceful degradation is when you have a fancy feature, such as a tab-based layout, but which would degrade to a stacked layout for a browser that can’t support whatever is generating the tabs. In other words, it allows users with an inferior browser (or user agent) to still access app content, but with a possibly more basic UI.
Progressive enhancement is very similar, but rather than starting with the fancy feature and then adding a fall-back for people with browsers that don’t support it, you start with the very basic design, and maybe even ship that as your first release, and then progressively enhance the design as you go. So, in the above example, we may have shipped a very nicely designed page with stacked content (and anchor tag links) and then later added the tabs.
How would you optimize a website’s assets/resources?
First, I’d try to reduce the number of static assets in use overall. This might mean creating a single large sprite with all images used for the app, which can signficantly reduce page weight. It might also mean replacing PNG files with SVG files when possible. I’d also look for opportunities to re-create graphics using CSS when possible.
How many resources will a browser download from a given domain at a time?
To be honest, I don’t know the exact number, but I would say that it is going to depend on the browser, and that more modern browsers are more likely to support more concurrent downloads.
What are the exceptions?
Honestly, I don’t know.
Name 3 ways to decrease page load (perceived or actual load time).
- Reduce perceived download time: Add a some visual feedback, either a spinner or an actual progress, bar that displays during page load.
- Load static content first: Ensure that static page content loads first and then load additional assets in the background afterwards.
- Reduce the quantity of items to load: Eg combine all js files into a single file, all css files into a single file, etc), to reduce the number of requests that the browser needs to make.
If you jumped on a project and they used tabs and you used spaces, what would you do?
I’d use tabs, but I would also inquire as to why tabs were being used and check to see if there was any interest in switching to using spaces for new projects.
Describe how you would create a simple slideshow page.
- In the main page content area, add an unordered list containing slide show content.
- Add some CSS that hides all li selectors by default.
- Add some JS that show the first li selector by default.
- Add events that allow for hiding the current li selector and showing the next/previous selector.
If you could master one technology this year, what would it be?
Right now, I’m very interested in learning Relay and GraphQL.
Explain the importance of standards and standards bodies.
Standards is what allows me to use the same markup across many browsers and know with a reasonable amount of certainty that the page will render identically or similarly. It reduces the need for checking what user agent is in use and modifying the markup/code to suit. It also allow a completely new developer to come on board to a project and still be able write markup or code that is consistent with that of other developers.
What is Flash of Unstyled Content? How do you avoid FOUC?
Explain what ARIA and screenreaders are, and how to make a website accessible.
Screenreaders are what someone who is blind would use to read rather than view a page. For these users, it can be very helpful to include things like a “Jump to main content” anchor tag at the very beginning of the markup to allow them to not have to navigate through all the header content (which might contain, say, a dropdown with links to every page in the site.) Additionally, it is for these users in particular that one should be sure to always include alt tags for images and icons.
A CSS animation will likely require much less code since you are leveraging the browser’s graphics engine. However, they are really only suited for a more standard animation, such as a left-right transitions. JS animations will increase page weight, since you are providing all the code for the animation, but they are better suited for something very customized where you need a lot of control.
What does CORS stand for and what issue does it address?
Cross Origin Resource Sharing refers to when secure data is being requested from a domain other than the domain from which the content is being served. Since these types of requests can be a sign that you are being hacked, you will want to have some kind of token handshake (eg client/secret) between your domain and the other domain, to ensure they are trusted.
What does a doctype do?
The doctype, which must appears at the very begining of your markup, defines what type of markup you will be using, eg HTML5 or XHTML, etc. You can also inform robots about things like the main language in use, such as lang=”en”.
What’s the difference between standards mode and quirks mode?
To be honest, I don’t know exactly what it means but I do know it has something to do with IE and compatibility. Also, quirksmode is (was?) a legendary blog by Peter-Paul Koch.
What’s the difference between HTML and XHTML?
XHTML is a sub-set of XML and was an attempt at making markup rules more strict, such as requiring inline closing tags for br tag (ie “<br />”), but then HTML5 came along, and XML was mostly overtaken by JSON for web app data exchange, and XHTML has since also fallen out of vogue.
Are there any problems with serving pages as application/xhtml+xml?
I have no idea, but it looks scary I’d never do it, mostly because I have no idea what it would do.
How do you serve a page with content in multiple languages?
Well, first, you want to make sure your page will support all the various characters of the language, so be sure to set character encoding to utf-8 at the very beginning. You also want to inform robots of the various languages in use in the doctype. Other than that, I’d say it’s implementation and domain-specific.
What kind of things must you be wary of when design or developing for multilingual sites?
First, be sure you can support all the characters of the various languages. Second, make sure your site layout can respond to differences in the amount of real estate needed for content blocks. (Ie one language may require several lines for a certain content block, while another may just require one.) Last and definitely not least, the site layout will need to for both left and right reading directions, so if you switch from English to, say, Hebrew, you may want to flip certain components to accommodate the switch in reading direction.
What are data- attributes good for?
They’re great for passing contextual data to, for example, JS event handler.
Consider HTML5 as an open web platform. What are the building blocks of HTML5?
The main building blocks are the new tags, such as Article, Header, Nav, Section, etc. Additionally, HTML5 provides the ability for accessing more advanced browser-native UI components, such as sliders and date-pickers, as well as access to improved form validation, eg having the browser check if an email address is validly formed.
Describe the difference between a cookie, sessionStorage and localStorage.
A cookie is a piece of data that has been stored in a user’s local browser, and which can be used to personalize an app or site for users’ viewing it in that browser. sessionStorage and localStorage are ways of storing data locally, one for the current session only, the other permanently (or until deleted.)
Describe the difference between <script>, <script async> and <script defer>.
I’ve never used the async or defer variants, but I’d say they allow for either loading a script concurrently, or deferring loading of a script.
Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before </body>? Do you know any exceptions?
CSS should be loaded in the head section to so that styling can be loaded before the page body loads, else the page will appear without styling. JS should be loaded after all content has loaded, ie just before the closing body tag, so that loading of possibly large JS files does not initial page load.
What is progressive rendering?
This is when you initially load a lower resolution version of an image, and then progressively add resolution to the image, which prevents the user from just seeing no image until the entire image has loaded.
All for now, to be continued…