UI Interview Questions

GENERAL: Q: What is something new / something you have found interesting recently? A: Open Ended Question, looking to see what they are learning/ staying up-to-dat e with. HTML: --------Q: Name 3 of the minimum HTML elements needed for an HTML document. A: !DOCTYPE html | html | body | head | (title kind-of) Q: What is Semantic HTML? A: HTML using markup that also conveys the containing content. HTML5 has more se mantic tags than prior versions (nav | aside | article | header | footer), but u sing descriptive classes and id s could also be an example of semantic markup. Q: If you have an issue with your page, how do you debug it, what tools do you u se? A: Looking for common debugging practices like W3c validator, Firebug, Chrome De v Tools. Q: Name 4 new elements in HTML5 that were not available in previous HTML version s. A: canvas | audio | svg | header | footer | aside | article | nav | section etc CSS: -------Q: Name 3 attributes of the position property. A: static, absolute, fixed, relative, inherit. difference between a CSS reset and normalize.css A: CSS Reset removes browser default styles. Normalize.css sets a standard acros s all browsers (It does not reset them). JS: Q: Is JavaScript case sensitive? A: Yes Q: What is the difference between == and === A: == checks equality, === checks equality and type

Q: What is an AJAX request and what is a simple example of where a AJAX request would be used? A: Asynchronous JavaScript and XML. Client side process used for GET, POST etc t o get new data without having to refresh the page. jQuery: Q: What is jQuery A: A JavaScript Framework/Library that make things like DOM selection/manipulati on, AJAX, and animation, easier. Q: What programming language does jQuery use? A: JavaScript Q: Is jQuery code exicuted on the clientside, or serverside?

A: Clientside Q: How do you install/use jQuery in a project. What is the minimum setup needed to start using jQuery. A: script tag, linked to a jquery CDN or locally hosted file.

Q: Can jQuery be used to make an AJAX request? A: Yes

Q: What is the difference between require() and include() when an error is encou ntered. A: include() will raise a warning if it fails, require() will raise a fatal erro r. Bootstrap: ----------Q: What is the current major version of Bootstrap? A: 3.x.x Q: Name 3 available jQuery plugins that Bootstrap has in their Query plugin libr ary. A: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, C arousel, Affix. Q: What minimum things do you have to do in order to include Bootstrap & Boostra p JS in a project/ HTML Document. A: Add bootstrap.css/bootstrap.js link and script in the head of the HTML docume nt *bonus if bootstrap.js script included in the footer (better for page loading ). AngularJS ----------Q:What are the basic steps to unit test an AngularJS filter? (Question provided by Daniel Lamb) 1. Inject the module that contains the filter. 2. Provide any mocks that the filter relies on.

Q:What should be the maximum number of concurrent ep an eye on that number?

watches ? Bonus: How would you ke

(Question provided by Daniel Lamb) TL;DR Summary: To reduce memory consumption and improve performance it is a good idea to limit the number of watches on a page to 2,000. A utility called ng-sta ts can help track your watch count and digest cycles.

Q:What is a digest cycle in AngularJS?

(Question provided by Tome Pejoski) In each digest cycle Angular compares the old and the new version of the scope m odel values. The digest cycle is triggered automatically. We can also use $apply () if we want to trigger the digest cycle manually.

Q:Where should we implement the DOM manipulation in AngularJS? (Question provided by Tome Pejoski) In the directives. DOM Manipulations should not exist in controllers, services o r anywhere else but in directives. 3. Get an instance of the filter using $filter('yourFilterName').

What is the difference between one-way binding and two-way binding? (Question provided by Jad Salhani) One way binding implies that the scope variable in the html will be set to the f irst value its model is bound to (i.e. assigned to) Two way binding implies that the scope variable will change it s value everytime i ts model is assigned to a different value

When should you use an attribute versus an element? (Question provided by Nuno Brites) Use an element when you are creating a component that is in control of the templ ate. Use an attribute when you are decorating an existing element with new funct ionality. This topic is important so developers can understand the several ways a directiv e can be used inside a view and when to use each way.

List a few ways to improve performance in an AngularJS app. The two officially recommended methods for production are disabling debug data a nd enabling strict DI mode. The first one can be enabled through the $compileProvider: myApp.config(function ($compileProvider) { $compileProvider.debugInfoEnabled(false); }); That tweak disables appending scope to elements, making scopes inaccessible from the console. The second one can be set as a directive: The performance gain lies in the fact that the injected modules are annotated ex plicitly, hence they don t need to be discovered dynamically. You don t need to annotate yourself, just use some automated build tool and librar

y for that. Two other popular ways are: Using one-time binding where possible. Those bindings are set, e.g. in {{ ::someM odel }} interpolations by prefixing the model with two colons. In such a case, no watch is set and the model is ignored during digest. Making $httpProvider use applyAsync: myApp.config(function ($httpProvider) { $httpProvider.useApplyAsync(true); }); which executes nearby digest calls just once, using a zero timeout.

ReactJs ---------Question #1: What is React? How is it different from other JS frameworks? React is an open-source JavaScript library created by Facebook for building comp lex, interactive UIs in web and mobile applications. The key point in this answer is that React s core purpose is to build UI component s; it is often referred to as just the V (View) in an MVC architecture. Therefore it has no opinions on the other pieces of your technology stack and can be seamles sly integrated into any application. Because React is a small library focused on building UI components, it is necess arily different than a lot of other JavaScript frameworks. For example, AngularJS (1.x) approaches building an application by extending HTM L markup and injecting various constructs (e.g. Directives, Controllers, Service s) at runtime. As a result, AngularJS is very opinionated about the greater arch itecture of your application these abstractions are certainly useful in some cas es, but in many situations, they come at the cost of flexibility. By contrast, React focuses exclusively on the creation of components, and has fe w (if any) opinions about an application s architecture. This allows a developer a n incredible amount of flexibility in choosing the architecture they deem best tho ugh it also places the responsibility of choosing (or building) those parts on t he developer.

Question #2: What happens during the lifecycle of a React component? At the highest level, React components have lifecycle events that fall into thre e general categories: Initialization State/Property Updates Destruction Assert your expectations. test setState() and forceUpdate().