Front End Questions
What is the difference between "display" and visibility" in CSS?
"display: none" hides the element and doesn't take up any space, since whatever was in that place on the browser is removed and the next visible content is reformatted upwards. It can be set to none, block, inline. "visibility: hidden;" hides an element but will take up the same space. There will be an empty space where the content lives, but the page will not be reformatted.
What are ul and ol elements?
"ul" is an unordered list that is bulleted, "ol" is an ordered list by number.
How do you capture the first time the HTML document is ready to be manipulated? How many times does it fire?
$(document).ready() OR $(document).ready(handler) OR $(handler), and it only first once.
What is the concept behind Angular's digest cycle?
$digest cycle is where the watches are fired. It starts as a result of a call to $scope.$digest(), when the $digest cycle starts, it fires each of the watchers which check f the current value of the scope model is different from the last calculated value. If yes, the corresponding listener function executes.
What is the difference between $emit and $broadcast?
$emit dispatches events upward in the scope hierarchy. It is more focused and defined to a certain scope. $broadcast dispatches them downwards and is more general.
How are promises used in Angular?
$http module exposes an API for making HTTP requests that returns promises
What method on the scope object will listen to events?
$on is used to watch for events, $watch is used to watch variables on the scope
What angular module communicates with a REST API?
$resource or $http
What CSS rule would make an element with the "appear" class fade in when added to the DOM? .appear.ng-enter{transition:1.5s linear all; opacity:0;}
.appear.ng-enter.ng.-enter-active{opacity:1;}
What is the difference between: function Person() { } var person = Person() var person = new Person()
1. Declares a function but doesn't execute it, names it. 2. Declares a variable, invokes a function and sets the value of person to the return of the function, refers to the function.. 3. Creates a new instance of an object based on the Person function so the variable is now an Object, not a string or number.
What are the advantages of using JavaScript?
1. Lightweight, can be executed on browser without having to communicate on server. 2. Versatile, object-oriented, imperative, functional, and used on both front/back ends. 3. Sleek, smooth "desktop like experience" within browser. 4. Rich interfaces, can enhance UI/UX. 5. Prototypal inheritance, objects can inherit from other objects.
What are new media elements in HTML?
<audio> (defines sound/music content, <embed> (containers for external apps like plugins), <source> (defines sources for <video> and <audio>), <track> (defines tracks for <video> and <audio>, <video> (defines video or movie content)
What are the new Form Elements introduced in HTML5?
<datalist> element specifies a list of pre-defined options for an <input> element <keygen> element provides a secure way to authenticate users <output> element represents the result of a calculation
What are the basic elements that exist in HTML pages between <html> tags?
<head> and <body>
What's the difference between <script>, <script async> and <script defer>?
<script> is normal execution, the default behavior where HTML code parses when script is executing. <script defer> is deferred execution, delaying script execution until HTML parser is finished. Positive effect is that the DOM will be available for your script, but not every browser supports it. <script async> HTML parsing may continue and script will be executed as soon as it's ready.
What is the difference between == and ===?
== checks the value, === checks the value and type
How do you exit a loop before its normal loop cycle completes?
A "break" stops the loop at a certain point but doesn't exit the function. The "return" keyword exits the function. The "continue" keyword skips past the current iteration in the loop but doesn't exit the function.
What is a good method for adding a custom header to HTTP requests?
A $http request interceptor
What is the difference between a GET and a POST?
A GET requests data from a specified resource. A POST submits data to be processed from a specified resource.
What is an "if" statement?
A conditional statement that uses if-then-else logic. If true or if false, do x, else do something else or nothing
What are collections in .NET?
A container with multiple elements. For example list<T> or dictionary<T, K>. Collections don't necessarily have a key, but they do have an index.
What are breakpoints?
A debugging tool that stops at the point in code so you can inspect if certain lines were hit and what values they have at various points.
What is Bootstrap?
A free collection of tools for creating websites and web apps, containing HTML and CSS based design templates for typography, forms, buttons, navigation, and other interface components.
What is the difference between function declaration and function expression?
A function declaration defines a named variable without requiring variable assignment. They are standalone constructs and can't be nested within non-function blocks. They must start with "function" and the name is visible within its scope and the scope of its parent. They can be moved or "hoisted" to the top of their scope, and there is Context so they are not subject to "return" unreachability from Statements. They are accessible within an IFFE A function expression defines a function as a part of a larger expression syntax (a variable assignment). They can be named or anonymous and must not start with "function". The function name is not visible outside its scope. Variable declarations can get hoisted but their assignment expressions don't. They are more versatile than function declarations that only exist as a "statement" in isolation.
What are closures?
A function having access to the parent scope even after the parent function has closed. A closure is the local variable for a function, kept alive after the function has returned. Closures store references to the outer function's variables but don't store the actual value. Private variables are made possible with closures. They have access to variables in their own scope, parent function scope, and global namespace.
What are <hr/> tags?
A horizontal rule, a line on the page like a ruler line to signify a thematic break in the page content.
How would you describe a module?
A module is the mother of your app and a container for the different parts of your app. It is a collection of services, directives, controllers, filters, and config information.
What is a modal window?
A popup window in your browser. You have to click out of it to go back to your webpage. It should go at the top of your HTML to load the page faster.
What are promises?
A promise represents the result of an asynchronous operation. It is in one of three states: 1. Pending - the initial state of a promise. 2. Fulfilled - the state of a promise representing a successful operation. 3. Rejected - the state of a promise representing a failed operation. Once a promise is fulfilled, it is immutable (unchangeable)
If you want to wait for some asynchronous data to be retrieved and available to the controller immediately when switching a route, what functionality should you use?
A resolve PROMISE
What is a cookie? Are they browser specific?
A small text file placed on your hard drive by a Web Page Server as an identification card. Various information can be stored like information you've given or pages visited to keep tract of your movements in the site, help resume where you left off, remember your registered login (authentication), theme selection, preferences, and customization functions. It is how the web server know who you are across different web requests. They are browser specific and won't work if you switch out browsers.
What is dependency injection and why is it useful?
A software design pattern that deals with how components get hold of their dependencies - decouples so they are not bound, inversion of control, a pouring in functionality instead of being called upon. It is useful because of code reusability and prevention of redundancy, and it removes the responsibility of locating the dependency from the component. The dependency is simply handed to the component. Dependency inversion principle: high level modules should not depend on low level modules, both should depend upon abstractions. Abstractions should not depend on details, details should depend on abstractions. Inversion of Control principle means we are changing the control from the normal way.
What is a switch/case statement?
A statement that can have multiple execution paths unlike an "if else". For each case, something will execute.
What is Micro Templating? When and why would you use this?
A template engine that embeds JS, it generates HTML form your JS objects (i.e. {{someObject.someProperty "mustache" syntax)
What is NaN?
A value that is "not a number" - from an operation that couldn't be performed because operands were non-numeric. NaN's type is still a number, and NaN compared to anything, even itself, is false. You can use the .isNan() function to test it, or better is value !== value, which is only true if value is NaN.
What is a strongly typed view?
A view bound to a view model. You can only reference one view model per view and define it by saying @model at the top and declaring the namespace of that model.
What is AJAX? Why and when would you use it?
AJAX is Asynchronous JavaScript and XML, a technique for creating fast and dynamic web pages. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes, meaning it's possible to update parts of the web page without reloading the whole page.
How would you include a JavaScript file into your web page?
Add it to the bottom of the page before </body>
What is a closure?
An inner function that has access to the variables in the outer (enclosing) scope chain. Three scopes: variable in its own scope, variables in the enclosing function's scope, and global variables".
What are directives in Angular?
Angular's way of interacting with the DOM. Attribute directives are used as attributes to add functionality to HTML elements. Element directives contain HTML templates that get rendered to the DOM, allowing the creation of custom HTML components with embedded JavaScript.
How do you horizontally center a div? Vertically?
Apply "margin: 0px auto" to the div for horizontally. Apply "display: table-cell; vertical align: middle" to the outer div for vertically.
What is a doctype? What is the one for HTML5?
At the top of the HTML file, it specifies the version of the markup language you are using. <!DOCTYPE html>
What are data-* attributes good for?
Attribute decorator that for passing or storing extra information on standard, semantic HTML elements.
Explain the purpose of the following headers: Cache-Control, Cookie, Content-Type
Cache-control: cache has to do with storage. It tells your web browser a page is good for a few days, but sometimes with a dynamic page, we want a new copy all the time Cookie: user settings, authentication, user information, stored on your hard drive Content-Type: format like JSON or XML
What are call, apply, and bind methods?
Call and apply is for using it right then and there, you and bind is when you want to use something later on. .call() calls a function with a given "this" value and arguments provided individually. myFx.call(null, "first params", "second params") .apply() is similar to .call) but requires you to specify the passed arguments to the function as arrays. myFx.apply(null, ["first params", "second params"]) .bind() allows you to determine what the value of this would be. It returns an exact copy of the function, creating a new function that has it's "this" keyword set to the provided value. var fxbound = myFx.bind(null, "first params", "second params")
What do you use to debug JavaScript?
Chrome Developer Tools
What's the difference between classical inheritance and protypal inheritance?
Classical inheritance = constructor instantiance an instance via "new" so it inherits properties from a parent class. Protypal inheritance = created by cloning an existing object that serves like a prototype (Object.create()) and can benefit from selective inheritance from many different objects.
What are the two phases every module goes through?
Configuration phase and run phase
How do you maintain state in the web application? (4 ways)
Cookies, URL, query string, variables passed back and forth State can be maintained on the server by keeping static variables/member(retaining value across different page requests to allow different requests at different times to have access to the same data/value). We can put things in cache and use the concept of a session to allow you to store information specific to the user in memory. The Application itself, has a dictionary to hold data that survives across different requests
What is a directive?
Directives are markers on a DOM element (attribute, element, comment, or CSS class) that tell AngularJS's HTML compiler to attach a specified behavior to that DOM element or transform it and its children.
What is the DOM?
Document Object Model, a programming interface for HTML/XML documents, defining the logical structure of documents and the way a document is accessed and manipulated. Allows programs and scripts to dynamically access and update the content, structure, and style of a document.
What is $rootScope and how does it differ from $scope?
Each Angular application has only one root scope but may have several child scopes.
Under which circumstances will Angular request the same template twice from the server?
Either for ng-repeating while requesting for the same template, or Angular caches all templates
What is an "em" tag?
Emphasized text or italic.
Why use ng-click over addEventListener?
EventListeners run outside the context of the Angular framework and is unaware of the events that would be triggered as a result. ngClick ensures that angular runs a digest cycle, which in turn will update the DOM.
What is the relationship between providers and services, factories, etc.
Factories are a singleton that are instantiated once. Services have to be instantiated/renewed. Providers are the only service you can pass into your .config() function to provide module-wide configuration for your service object.
Do all angular apps need to have at least one directive?
False
What is the "this" keyword?
It refers to the object from which it was called.
What doesn't 0.1 + 0.2 = 0.3 in JavaScript?
Floating point values
What are different kinds of loops in JavaScript?
For loop, while loop (potentially executes one as long as conditions are met), do while (executes one, then evaluates the condition).
When should you use HTML tables?
For reporting true grid-like data, but it's unresponsive since HTML tables don't allow columns to stack.
How do you restart your website?
Go into IIS, or clean and rebuild.
If you were to encounter a Resource Not Found error/page, what would you do to resolve it?
Go to the controller, make sure the route is correct, make sure the view controller returns a view, make sure it's executing the correct HTTP request method and parameters are correct.
What is the relationship between HTML, CSS, and JavaScript?
HTML is used for structuring content (foundation), CSS is used for visual styling (decoration), JavaScript interacts with and manipulates the HTML (functionality).
What do HTML and CSS stand for?
HyperText Markup Language and Cascading Style Sheets.
What does "this" refer to in JavaScript?
It refers to the element that it was clicked upon, jQuery executes a function in the context of that element, what is owned by THIS vm.
What's an IIFE and the structure of one?
Immediately invoked function expression, a JS function that runs as soon as it is defined. (function foo(){ })();
Where can you define where an HTML form sends its data?
In the action attribute of the form <form action="demo_form.asp" method="get">
What does a 500 response code mean?
Internal Error
What is "use strict"?
It catches errors, throwing exceptions. It prevents "unsafe" actions and disables confusing features. The purpose is that code should be executed in strict mode where you can't use undeclared variables. Makes debugging easier, you can't define "this" as null or undefined, no accidental global variables, disallows duplicate property names or parameter values.
What does the $location service do?
It makes the browser's URL available to the app, and helps with routing to push a path.
What is authorization and at what level does it happen in a .NET MVC application. How does one implement this?
It means you must be logged in to access a method. It happens in the method signature or on top of the entire controller (add [Authorize] to your method signature). You can use a filter or attribute.
What does $scope.$watch do?
It registers watches and takes two arguments. The first is a value on the scope, and the second is a function invoked whenever the value changes.
What is the z-index property?
It specifies the stack order of an element. A greater stack order is in front of elements with a lower stack order. It only works on positioned elements (static, absolute, relative, fixed, initial, inherit).
What is "clear" in CSS used for?
It specifies where other floating elements are not allowed to create separation (it's like a blank div). Float is like a pull-right or pull-left used on buttons.
What is Web.Config used for?
It stores passwords, account information, connection strings, and settings
What's different between JavaScript and C#?
JavaScript is a non-typed scripting language, and C# is strongly typed.
What is knockout?
Knockout.js is a JavaScript library that uses HTML data binding using a MVVM design pattern. It's quick and easy to update the UI or manipulate the DOM.
What are the disadvantages of using JavaScript?
Main weakness is security, also ubiquity and versatility that leaves room for quirks and inconsistent performance.
To have the inputs of an HTML form send its data to the server, what should you be sure to do?
Make sure it has a name attribute
What are the components of MVC?
Model is the properties of data. View is the display or UI logic/business rules. Controller passes the model to the view. This creates a separation of concern so you can test the areas separately (modularity) - things have a particular task and the task is well defined and specific
How many attributes can an HTML element have? How many ID attributes can an element have? Do they require an ID attribute?
Multiple, one ID but not necessary
Do all tags require a closing tag? Which don't?
No, <br/>, <col/>, <hr/>, <img/>, <input/>, <link/>, etc. do not require end tags.
Can ngBind have multiple {{ }} expressions?
No, it's not like ngBindTemplate, because ngBind will overwrite itself
How many layout files can a view be associated with at one time and how many can your application have? Can layout files be strongly typed?
One layout file per view, many layout files per application, Layout files can be strongly typed
How can you improve performance if an ng-repeat iterates over a large number of objects?
Pagination
What is Razor?
Razor is a parsing engine for your view, the C# language for views.
When you encounter an error what are the steps you take to resolve the error?
Read the error message, insert a breakpoint in the browser, take steps based on where the error is.
What different types of scope are there?
Scope: False (directive uses parent scope) Scope: True (Directive gets new scope, inherited from parent) Scope: {} (Directive gets a new isolated scope)
What are the possible values for the POSITION attribute?
Relative, absolute, fixed, static, initial, inherit
What is a RESTful Web Service?
Representational State Transfer (lightweight, easy to maintain, scalable) based on the HTTP protocol and use HTTP methods that are stateless, use intuitive URIs (uniform resource identifiers), and transfer XML/JSON data between server and client.
What does a 404 response code mean?
Resource not found, router or web server can't find the URL it's searching for.
What is scope in Angular?
Scope refers to the application model, the glue between the application controller and the view. Scopes are arranged in hierarchical structure and impersonate the DOM structure, watching expressions and propogating events.
What are the correct parameters in the order of the link function and when should you use it?
Scope, element, attributes, controller, transclude (SEACT) for ng-Directives that want to modify the DOM use link to register DOM listeners as well as update the DOM. Passing the controller as the 4th parameter lets the link function communicate back to the controller. The controller is used as a ViewModel. The DOM manipulation is inside the link function.
What do you do if your web page is taking too long to download?
See if you have a "Get" that is loading and see if it's taking too long with a breakpoint, check your network path, check you scripts, how many images/how much data you're trying to load.
What are arrays?
Series of items with an index beginning at 0, a collection of elements
How do you make sure you include files on all web pages?
Shared Layout or put it in the shared folder
What online resources do you use for programming?
Stack overflow, google, documentation, bootstrap, w3schools
What is a 200 response code?
Successful or "OK"
What is the string builder?
The String object is unchangeable. Every time you use a method in the System.String class, you create a new string object and if you need to perform repeated modifications to a string, the new allocation of space required is costly. The System.Text.Stringbuilder class can be used to modify a string wihtout creating a new object (boosting performance when concatenating strings together). String builder creates an array of characters and adds to it. It is static, and when it runs out of slots, creates a bigger array that takes existing strings and shoves it inside. Efficient because it creates one object at a time a adding to one array, which increases memory.
What is lazy loading?
The design pattern commonly used to defer initialization on an object until it is needed. This contributes to efficiency in the applications operation so that things that are needed load first and others load later.
The controller parameter of the link function corresponds to which property of the directive definition object?
The require property, it can take an array argument if multiple controllers are required and by requiring another directive, you inject its controller as the fourth element to the linking function.
What is responsive design? What are the pros and cons of this technique?
The website design and development responds to user's behavior and environment based on screen size, platform, and orientation. This consists of a mix of flexible grids and layouts. Cons would be that content might never show up on a mobile client and be a waste of bandwidth.
What are regular expressions and when would you use them?
They are a tool for quickly and efficiently parsing text that is driven through a syntax of pattern queries. They are typically used for validating strings from form inputs.
What are connection strings?
They are a way to connect to the database from your application.
What are factories in Angular and how do they differ from services?
They are singleton objects (meaning, no matter how many times you inject them into your application, they always point to the same reference) that can be used to encapsulate business logic and injected into controllers, directives, and other factories. The difference is in the way they are injected: services are "newed" (myService = new MyServiceFunction()) whereas factories are simply invoked (myFactory = MyFactoryFunction()) Factories have more flexibility that the object could return a function, constructor, or any values, whereas the service has to be instantiated as an object constructor
Where can you find cookies? How does your browser manage cookies across the sites you visit?
They can be seen in your developer tools or by downloading a cookie chrome extension to manage and view. You can manage cookies at the domain.
What are HTTP headers?
They contain cookies, data, a URL, and HTTP request method. (Also authorization)
What are CSS media queries?
They power responsive design. It queries your media to apply rules based on which device/(viewport) you are working with.
What is transclusion and its purpose?
Transclusion is the process of extracting a collection of DOM elements and copying them to another part while maintaining their connection. It is used to insert the original contents of a directive's element into a specified place in the template of the directive. The transcluded content has access to the properties on the scope from which it was taken. The purpose is to allow the consumer of a directive to specify some of the HTML content of the directive.
What does error handling code look like?
Try catch statements, if else statements, nullable types
What is a Null Reference Exception?
Trying to refer to something that isn't there or a reference to an object that is null or does not exist. To prevent it, write if (object != null { })
What's the difference between one-way data flow and two-way binding?
Two way binding - changes to UI and model occur asynchronously, a change on one end reflects on the other. One way = only one way, and any changes to UI is not reflected in the model until they're synced.
Whats the difference between a variable that is null, undefined, or undeclared?
Undefined means a variable has been declared but not assigned a value. Null is an assignment value as a representation of no value. Undeclared doesn't used the var keyword.
What's a URL?
Universal Resource Locator
How do you keep a div to a maximum height of 100px and hide all other content?
Use css to target the div class, setting "max-height: 100px; overflow: hidden;"
What are span tags and when would you use them?
Use it when you have an inline block of text that you want to be able to call out and style with CSS (<span> doesn't break)
How can you see the ng-repeat directive on a collection with duplicate elements?
Use track by name/id/index, and select distinct
What does it mean to exercise defensive programming?
Use validation and error handling code, safeguard against dumb users
What are the different parts of a connection string?
User Id, Password, Database, Server (You can have multiple DBs at a server)
What is inline styling?
Using the style attribute in an HTML tag, which you should never do
What are global variables?
Variables that are available through the length of the code and have no scope.
What's an anonymous function?
When a function isn't named so it can't be called upon by invoking the variable.
How does the $digest cycle work?
When called, Angular goes through all of the watchers registered in the current scope and child scopes and if the watched value has changed since the last digest cycle, the watcher's listener function gets called (dirty checking).
Should you wrap div element in an anchor?
Yes, for HTML5 for <a> elements as long as there is no interactive content within.
Can a function call itself?
Yes, it's called recursion. It's dangerous because you need a condition that allows you to break out of the function, otherwise you will be stuck in an infinite loop.
Can you cancel the action of a submit button? What is its default action compared to a regular button?
Yes, use event.preventDafault(). A "submit" button will submit the form and take you to the top of the page, a regular button will only do what it's wired up to do.
Can you change the orientation of this elements?
Yes, with "list-style-type: none" and "display: inline"
Where do you include your JS files and CSS files on an HTML page?
You put JS files at the bottom of the page so the HTML elements get a chance to load and render before the JS files slow down the page loading because parser has to stop and execute it before executing the HTML. CSS go in a separate file, referenced in the head tag before the body starts so styles are loaded already.
What is a global regex?
[ ] is a character set, \W is "non-word" and \w is "word", / / mark the beginning and end of a regular expression, g is a global search.
How do you declare an Angular module without dependencies?
angular.module('myModule, []);
How do you change the color of a font in CSS.
color: hexcode (i.e. #f45234)
What would a proper value for an ng-show attribute when an ng-model is required? What CSS class will be set on the form element with a validation error?
formName.inputName.$invalid ng-invalid
If jQuery is not available to Angular, which library is used? What is it and what are its limitations?
jQLite - a tiny, API compatible subset of jQuery that allows AngularJS to manipulate the DOM in a cross-browser compatible way. It only implements the most commonly needed functionality with the goal of having a very small footprint.
What is jQuery?
jQuery is a concise and fast JavaScript library that simplifies event handling, HTML document traversing, AJAX interactions and animation for speedy website development.
What's the difference between a cookie, sessionStorage, and localStorage?
localStorage and sessionStorage are WebStorages and features of HTML5. localStorage stores information as long as the user doesn't delete them; you can maintain state. sessionStorage stores information as long as the session before the user closes the tab/browser. Cookies are usually a fallback for frameworks, supported by older browsers. They hold up to 2MB of data and pass from page to page.
What directive implements true two-way data-binding?
ngModel
What directive do you use with routing to display a template (ngRoute)? Which method of the $routeProvider will configure a new route?
ngView directive is used to display HTML templates or view in the specific routes. .when will configure a new route. .when('/view1', { templateUrl: 'view1.html', controller: 'FirstController' }
How do you declare a variable in JavaScript? Is it required?
var, and you don't have to declare var.