Interview Questions about Front-end Job Application, Part 1

Getting ready for an interview is often a stressful thing to do. When you decide you want to apply for a job, usually, you don’t have a lot of time on your hands because the job listings are open for a relatively short period of time. Therefore, you need to prepare smartly and choose the important and relevant information to focus on. In order to help you get ready for your next big front-end interview, here are the most important questions to concentrate on and sample answers to help you get the job.

This first part contains all the general questions you might get asked in your interview. Go through the answers and comment bellow if you need some more clarification or maybe to discuss some of the answers.

General Questions

1. What is HTTP and what is the difference between HTTP and HTTPS?
2. What does CORS stand for and what issue does it address?
3. Why use a CDN?
4. What UI, Security, Performance, SEO, Maintainability or Technology considerations do you make while building a web application or site?
5. Talk about your preferred development environment.
6. Which version control systems are you familiar with?
7. Can you describe your workflow when you create a web page?
8. If you have 5 different stylesheets, how would you best integrate them into the site?
9. Can you describe the difference between progressive enhancement and graceful degradation?
10. How would you optimize a website’s assets/resources?
11. How many resources will a browser download from a given domain at a time?
12. Name 3 ways to decrease page load (perceived or actual load time).
13. If you jumped on a project and they used tabs and you used spaces, what would you do?
14. Describe how you would create a simple slideshow page.
15. If you could master one technology this year, what would it be?
16. Explain the importance of standards and standards bodies.
17. What is Flash of Unstyled Content? How do you avoid FOUC?
18. Explain what ARIA and screenreaders are, and how to make a website accessible.
19. Explain some of the pros and cons of CSS animations versus JavaScript animations.
20. Favourite created part of any website — masterpiece.

And read all the answers below:

1. What is HTTP and what is the difference between HTTP and HTTPS?

The Hypertext Transfer Protocol (HTTP) is an application-level protocol for distributed, collaborative, hypermedia information systems. HTTP is a TCP/IP based communication protocol, which is used to deliver data (HTML files, image files, query results etc) on the World Wide Web. The default port is TCP 80, but other ports can be used. It provides a standardized way for computers to communicate with each other. HTTP specification specifies how clients request data will be constructed and sent to the server, and how servers respond to these requests.

There are following three basic features which makes HTTP a simple but powerful protocol:

· HTTP is connectionless

· HTTP is media independent

· HTTP is stateless

There are two types of HTTP requests:

GET: GET represents a specific resource. Should not have and side effert like insert/update because they may be requested by robots. GET use url the send data. AJAX GET in IE will be cached, so to ensure data updates, beter add a timestamp

POST: represent actions on resources, like insert/update/delete. They usually sent from HTML form. Large data could be sent by POST. Data is send along with HTTP header, instead of data of GET in the URL.

Status Codes

With URLs and verbs, the client can initiate requests to the server. In return, the server responds with status codes and message payloads. The status code is important and tells the client how to interpret the server response. The HTTP spec defines certain number ranges for specific types of responses:

· 1xx: Informational Messages

· 2xx: Successful

· 3xx: Redirection

· 4xx: Client Error

· 5xx: Server Error

Hypertext Transfer Protocol Secure (HTTPS) is an extension of the Hypertext Transfer Protocol (HTTP). It is used for secure communication over a computer network, and is widely used on the Internet.

2. What does CORS stand for and what issue does it address?

CORS is a W3C spec that allows cross-domain communication from the browser. By building on top of the XMLHttpRequest object, CORS allows developers to work with the same idioms as same-domain requests.

3. Why use a CDN ?

A CDN (content delivery network) is a way to deliver content from your website or mobile application to people more quickly and efficiently, based on their geographic location. A CDN is made up of a network of servers (“points of presence,” or POPs) in locations all over the world.

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

In terms of UI, as I’m mostly doing small POCs (proof of concepts), I try to keep things as simple as possible. If I need things to look nice quickly, I’ll use Bootstrap.

In terms of security, it really depends. Almost all of my work is client-side.

I follow all on-page SEO rules when creating a page.

Maintainability — I suppose this falls into basic things I’ve been aware of since I started my career. Proper documentation, clean code, source control to help keep track of what’s changed, using a bug tracker to help manage requests versus email, etc.

5. Talk about your preferred development environment.

iMac, Virtual Box, Vagrant, Homestead, Sublime text editor for HTML, CSS and Javascript files, GIT for version control, Asana for task management, Dropbox/Drive for sharing files, Skype/Slack for communication, Photoshop for editing images.

6. Which version control systems are you familiar with?

GIT — It is faster for cloning and taking all repo.

With GIT you can work offline, you can commit stuff on your local repository event if you don’t have an Internet connection to the repository.

In GIT, common practice is to create a different branch for every new future that you are doing, as creating branches is done in a very quick way and you can also merge the branch into your local environment.

GIT makes auto merge very easy, if you have commited the same code in the local repo, when you get all the changes, GIT will make auto merge of the conflicted changes.

GitHub is a web-based hosting service for version control using Git.

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

First, I have a “starter template” with file structure and I have setup bower that loads the libraries that I need to start the web, I setup SASS and Gulp and start working on the project. I’m using Asana for organizing tasks during the development. There is much more, but these are the basics. And this is my own approach, so it doesn’t mean that it is the best one. You can describe what works for you best and explain the strategy you use.

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

We can combine multiple CSS files with sass, then we can minify them.

Combine multiple CSS files:

@import “filename.scss”;

@import “filename-2.scss”;

9. Can you describe the difference between progressive enhancement and graceful degradation?

Progressive enhancement is a strategy for web design that emphasizes core webpage content first. This strategy then progressively adds more nuanced and technically rigorous layers of presentation and features on top of the content as the end-users browser/internet connection allow.

Graceful degradation is the ability of a computer, machine, electronic system or network to maintain limited functionality even when a large portion of it has been destroyed or rendered inoperative. The purpose of graceful degradation is to prevent catastrophic failure.

10. How would you optimize a website’s assets/resources?

Minify the CSS and JS into one file separately. Compress and optimize the images.

Load the resources from the CDN location.

Or even better way is to use task automation tool like GulpJS and do all the optimization with executing one command.

11. How many resources will a browser download from a given domain at a time?

IE7 allowed only two concurrent connections per host. But most browsers today allow more than that. IE8 allows 6 concurrent connections, Chrome allows 6, and Firefox allows 8.

What are the exceptions?

The limits are per domain, so in theory, you could use a wildcard DNS where *.foo.com points to the same IP address

12. Name 3 ways to decrease page load time (perceived or actual load time)

• Minify HTML, CSS, Javascript
• Compress Images
• Eliminate render-blocking JavaScript and CSS in above-the-fold content
• Minimize HTTP requests
• Use CDN to load your resources
• Enable compression — Most web servers can compress files in Gzip format before sending them for download, either by calling a third-party module or using built-in routines. Compression reduces the bandwidth of your pages, thereby reducing HTTP response. You do this with a tool called Gzip.

13. If you jumped on a project and they used tabs and you used spaces, what would you do?

I will follow the pattern of the project and I will use tabs.

14. Describe how you would create a simple slideshow page.

I have simple starter template (html code and file structure) for creating web pages, I will start from there and use bootstrap carousel. Next I will optimize the pictures, host the project and start testing on all browsers.

15. If you could master one technology this year, what would it be?

React JS.

16. Explain the importance of standards and standards bodies.

Web standards are rules and guidelines established by the World Wide Web Consortium (W3C) developed to promote consistency in the design code which makes up a web page. Without getting technical, simply it’s the guideline for the mark-up language which determines how a web page. displays in a visitor’s browser window.

• Achieve a More Stable Web
• Reduce Development and Maintenance Time
• Allow Backward Compatibility and Validation
• Increase Search Engine Success
• Graceful Degradation Now, and in the Future
• Common Knowledge
• Standard bodies are: HTML, XML, CSS, DOM, ECMAScript

17. What is Flash of Unstyled Content? How do you avoid FOUC?

A flash of unstyled content (FOUC, also flash of unstyled text or FOUT) is an instance where a web page appears briefly with the browser’s default styles prior to loading an external CSS stylesheet, due to the web browser engine rendering the page before all information is retrieved.

How to avoid FOUC:

• Hide all or part of the web page until all styles and JavaScript are finished by applying a class name “js” as the selector that hides all content within a container that has an id=”fouc”. The “fouc” element is unhidden using a JavaScript getElementById function setting the display value to “block” level.
• Load the CSS classes at first. Add CSS class with display: none to the html element and then remove when the page is load.

18. Explain what ARIA and screenreaders are, and how to make a website accessible.

Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities. For example, ARIA enables accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more.

ARIA is a set of special accessibility attributes which can be added to any markup, but is especially suited to HTML.

Screen reader is a software application which analyzes the user interface and the associated content from an operating system or an application, such as a web browser, and provides its output via the text-to-speech synthesizer or a refreshable Braille display.

19. Explain some of the pros and cons for CSS animations versus JavaScript animations.

Use CSS when you have smaller, self-contained states for UI elements. CSS transitions and animations are ideal for bringing a navigation menu in from the side or showing a tooltip. You may end up using JavaScript to control the states, but the animations themselves will be in your CSS.

Use JavaScript when you need significant control over your animations. The Web Animations API is the standards-based approach, available today in Chrome and Opera. This provides real objects, ideal for complex object-oriented applications. JavaScript is also useful when you need to stop, pause, slow down, or reverse.

20. Favourite created part of any website — masterpiece

Share your own favourite masterpiece.

For me, personally, comprising all these notes have been the factor X that prompt me a job or made we confident enough to showcase my abilities.

Stay tuned for more notes and interview questions with HTML and CSS as the main topics.