Frontend Technical Interview Questions
Have you ever used a grid system, and if so, what do you prefer?
(answer specific to individual answering this question) I personally have used multiple grid systems. I personally prefer using the Materialize framework grid, as well as the grid system that comes with Neat.
What is the difference between a class and ID?
An ID is unique to one element, whereas a class can be used on multiple elements.
The MVC pattern is used throughout many different frameworks in many different languages. Why do you think it's considered so useful?
Client-side JavaScript MVCs offer tools to write code that scales more efficiently. While they take more time to learn than jQuery, they provide simpler code, fewer bugs, and better overall performance
Discuss how to communicate between the modules of your Angular application.
Data down, actions up. All of our data lives at the top of our component tree and we pass whatever bits the child components need downwards. Child components can load other child components and pass them the information they need, and on and on. However, actions will start at the bottom of the tree and notify the top of the tree whenever data needs to be changed and the display will react accordingly.
What is prototyping and why would you incorporate it into your workflow?
Prototyping is for design exploration and time saving purposes. To make sure UI designers don't waste their time designing and redesigning specific user interactions, prototypes are used to create mockups of how design elements will be used. Prototypes allow UI designers to identify any potential issues that might come in conflict with what the UX designer or architect has intended.
What is the difference between relative and fixed units of measurement in CSS? Can you give examples of each?
Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums. Examples: em, rem, vh, vw The absolute length units are fixed and a length expressed in any of these will appear as exactly that size. Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout. Examples: pt, px, cm, mm.
What is responsive design?
Responsive Web design is the approach that suggests that design and development should respond to the user's behavior and environment based on screen size, platform and orientation.
What is Sass? How does it differ from plain CSS? What benefits does it offer?
Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS). Sass is beneficial because it allows for better project organization, variables, mixins, functions, and other things that regular CSS does not allow.
What is Semantic HTML?
Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages and web applications rather than merely to define its presentation or look. Semantic HTML is processed by traditional web browsers as well as by many other user agents. Examples: <article>, <aside>, <details>, <footer>, <header>,<main>, <mark>, <nav>, <section>, <summary>, <time>
What is the Aesthetic-Usability Effect?
This is a phenomenon that states that a good-looking design will always be perceived as more usable than one that is less appealing, even though that might not be the case.
What is two-way binding, and when should it be utilized?
Two-way binding is what allows us to view and modify data in real time. We symbolize this simultaneous input and output by using both parentheses and square brackets.
Why is TypeScript considered a compiled language?
TypeScript is a compiled language which helps us to write cleaner JavaScript. It is a superset of JavaScript that compiles to plain JavaScript which runs in any browser, any OS, and it is open source. It is essentially JavaScript plus some extra tools that help keep complex programs less error prone, more organized and more maintainable.
Do we still need floats for layout if we're using a grid system? What about media queries? Why or why not?
We generally should not have to use floats or media queries if we are using a grid system. However, there can be some exceptions if a designer wants a specific thing to happen at a certain breakpoint.
Why is it important to keep back-end and front-end logic separate?
We want our code in separate files because user interface and business logics have separate purposes.
What package managers are you familiar with?
npm, Bower
In terms of an MVC, what is a component?
A component is a piece of the user interface. Components are represented by a custom HTML element, like <user-profile>. Data is passed in using attributes, like <user-profile name="Diane" job="Teacher">. The component renders some sort of HTML, like <p>Diane is a teacher.</p>. When the value of an attribute changes, the component automatically updates the user interface, so <user-profile name="John" job="Teacher"> automatically updates the UI to <p>John is a teacher.</p>. This way we can use the one component to represent a large set of data, such as a large group of users. Components usually have some sort of interactivity, too; perhaps our user-profile component displays contact information about a set of users, but hovering over the user-profile component would display a photo.
What is a promise? What does it do? When would we use one?
A promise is an object representing an operation that hasn't been finished yet. A promise has three states: pending, fulfilled, and rejected. Pending is the object's initial state representing that the operation has not been finished yet. A promise is fulfilled when the operation has successfully completed - rejected means that the operation failed for some reason. Promises work well when you have multiple asynchronous operations that depend on each other.
Describe the type of project you might utilize the Angular framework for.
A to do list, or an application for a retail store
What is a viewport unit, and why would we use them?
A viewport unit relatives directly to the size of the user's browser window. Examples of viewport units are: vw, vh, vmin, vmax
What is wireframing and why is it important?
A wireframe is ultimately a visualization tool or blueprint to present stages, steps, functions, structure and content of a web page, site or screen. Wireframes are intended to be simple and basic, lacking such design elements as typography, color or graphics, because the number one purpose for wireframes is to represent functionality.
What is the difference between display: block, display: inline and display: inline-block?
An inline element has no line break before or after it, and it tolerates HTML elements next to it. A block element has some whitespace above and below it and does not tolerate any HTML elements next to it. An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.
What does it mean when we say JavaScript can be "asynchronous"?
Asynchronicity refers to the way that JavaScript code can be executed out of order.
What is AJAX?
Asynchronous JavaScript And XML". AJAX is a technique which allows you to make web requests without a page reload.
What is Atomic Design?
Atomic Design was created to design interfaces that focus on designing elements and their combinations, rather than designing web pages one by one. This is a basic explanation of what this methodology was created for. Knowing all five of its components should give your prospective designer some golden bonus points. Atoms: These are the smallest and most basic building blocks. These are applied to web interfaces as labels, input fields, text boxes, buttons, etc. They can also contain color, palettes, fonts, etc. Molecules: When atoms are combined, we get molecules: groups of atoms, bonded together that are the smallest fundamental units of a compound. Molecules can take on their own properties, too. Organisms: Organisms are formed by using molecules as our building blocks. When molecules are joined together, it becomes a relatively complex and distinct section of an interfaces that has been created: an organism. Templates: This stage should already make sense to clients. Understandably, templates are mostly groups of organisms put together to form pages. This is the stage that allows us to see things, such as layouts, coming together. Pages: This is used as specific instances of templates to give a precise understanding of what the final output will look like. Pages ultimately become the highest level of fidelity, which allows UX and UI designers, together, to test the effectiveness of the design system.
What does it mean when something is a compiled language?
Compiling basically means to convert and assemble our code into a different form, usually something that is less human readable. We use a compiler to convert our .ts files (for TypeScript) into regular .js files that our browser can understand.
What is ECMAScript? How does it relate to web development?
ECMAScript (or ES) is a trademarked scripting-language specification standardized by Ecma International in ECMA-262 and ISO/IEC 16262. It was based on JavaScript, which now tracks ECMAScript. It is commonly used for client-side scripting on the World Wide Web and is increasingly being used for writing server applications and services using Node.js. Other implementations of ECMAScript include JScript and ActionScript.
What does the Router do with the information from the URL? (Ember)
Ember router always maps the URL to a route handler first. That is, Ember seeks an entry on the Router that matches the current URL, and loads the route handler that corresponds to that route. Essentially, the format and information in the URL determine which area of the site to load.
What is an asset pipeline?
Essentially, an asset pipeline is a manner of preparing development files for the browser. It will optimize and compile our project by completing the following tasks: Taking multiple JavaScript files and concatenating them (copy/paste them together in a single file). Next, we'll add features like checking our code for syntax errors when it concatenates, so that we're less likely to ship bugs. After that, we'll use our pipeline to robustly manage external dependencies like jQuery.
What is the purpose of build automation tools like Gulp? What benefits do they provide, and how do they streamline the development process?
Gulp will be in charge of optimizing our code and packaging it up in a format that the browser can understand. While it is an npm package itself, it will also be in charge of using all the other npm packages that we will download later.
Do you think mobile-first design is effective, and why?
In this practice, designing starts from the smallest anticipated screen size and only then follow with enhancement on larger screen sizes. This approach saves time and increases a designer's efficiency; when the design process starts with a large screen, designers tend to get into difficulty later trying to place elements onto smaller screens.
What is the MVC pattern?
MVC stands for Model-View-Controller and refers to a pattern where data, processing and display duties are divided into models, views and controllers.
What is MVP?
MVP means Minimum Viable Product. A MVP means creating and designing a basic version of a product that early adopters can use or buy. The main goal is to bring the product to the market as soon as possible without any non-essential features.
What is a module? What purpose does it serve?
Modular "containers" of code assigned to specific names (or "namespaces"). They can be exported, then called upon for use in other code.
What is the purpose of using a package manager in a project?
Package managers simplify installing and updating project dependencies, which are libraries that it uses. Separation of Power: Front-end developers have one file for their dependencies, and the back-end team has a different file for theirs. This can prevent version conflicts and disorganization. Optimization: Some packages depend on specific versions of other packages. Sometimes two packages require different versions of the same dependency. npm installs each package's dependencies separately. If each of our backend modules has its own version of a package, they are independent and there is no conflict. Each package can have its own node_modules folder, and this is convenient but it can lead to complex paths and lots of files. Bower makes sure that each package is installed only once, even if it is used by multiple packages. This makes sense since we can't use jQuery-1.12.0 at the same time as jQuery-2.2.0 in the browser. Language Independence: Bower does not have to be used with Node. For example, Bower can also be used as a package manager in Ruby on Rails or AngularJS.
Explain the box model.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. Content - The content of the box, where text and images appear Padding - Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent The box model allows us to add a border around elements, and to define space between elements.
Describe floats.
The float property specifies whether or not a box (an element) should float. Note: Absolutely positioned elements ignores the float property! Note: Elements after a floating element will flow around it. To avoid this, use the clear property or the clearfix hack
Explain the CSS position property.
The position property specifies the type of positioning method used for an element (static, relative, absolute or fixed). Static: Default value. Elements render in order, as they appear in the document flow Relative: The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position Absolute: The element is positioned relative to its first positioned (not static) ancestor element Fixed: The element is positioned relative to the browser window Initial: Sets this property to its default value. Inherit: Inherits this property from its parent element.
What is the Route Handler responsible for? What 'triggers' it into action, and what action does it then perform?
The route handler has two primary responsibilities: It renders a template. It loads model information that is made available to that template. The route handler is triggered by the router.
What is the difference between a Route Handler and the Router? How do they interact?
The router maps the URL to a route handler. The route handle renders a template and loads model information.
Why would you use a CSS preprocessor?
With Sass and other preprocessors you can write with some special syntax (declaring variables, nesting syntax, mathematical operations, etc) and that is compiled to CSS. A CSS preprocessor helps you to speed up development, maintains and ensures best practices, and also confirms concatenation, compression, etc.
What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
reset.css removes all default styles while normalize.css keeps some necessary styling.
