Fullstack interview questions Flashcards
Explain equality in JavaScript
Strict comparison (e.g., ===) checks for exact value equality including type
Abstract comparison (e.g. ==) checks for value equality ignoring the type
e.g.
1===’1’ //returns false
1==’1’ //returns true
Explain meta tags in HTML
- Contain information about character encoding, description, title of the document etc.
- Not displayed on the page but intended for the browser
- Always passed as name/value pairs
- Always go inside head tag of the HTML page
Explain the three main ways to apply CSS styles to a web page
- inline style
- style HTML tag
- external stylesheet
What is CSS?
CSS stands for Cascading Style Sheets. CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
CSS was intended to allow web professionals to separate the content and structure of a website’s code from the visual design.
What is Git?
A version control system that tracks project progess
What is Node.js?
Node.js = Runtime Environment + JavaScript Library
What is SQL injection?
An attacker provides malicious SQL statements through the application. Injection attacks stem from a lack of strict separation between program instructions (i.e., code) and user-provided (or external) input.
What is Scope in JavaScript?
A collection of variables as well as the rules for how those variables are accessed by name. Only code inside that function can access that function’s scoped variables.
What is meant by Continuous Integration?
Continuous Integration (CI) is a development practice that requires developers to integrate code into a shared repository several times a day. Each check-in is then verified by an automated build, allowing teams to detect problems early.
What is npm?
Node Package Manager - online repositories for node.js packages/modules and Command line utility to install packages, do version management and dependency management
Describe floats and how they work
Float is a CSS positioning property. Floated elements remain a part of the flow of the web page. This is distinctly different than page elements that use absolute positioning, which are removed from the flow of the webpage.
Describe what User Interface (UI) Design does mean for you?
User Interface (UI) design is the design of software or websites with the focus on the user’s experience and interaction. Good design puts emphasis on goals and completing tasks, and good UI design never draws more attention to itself than enforcing user goals.
Explain Null and Undefined in JavaScript
undefined - something hasn’t been initialized
null - something is currently unavailable
[think difference between blank and n/a on a form]
Explain event bubbling and how one may prevent it
Event bubbling is when clicking on a child element one may exhibit the handler of the parent activating.
One way to prevent event bubbling is using event.stopPropagation() or event.cancelBubble on IE < 9.
Explain the CSS “box model” and the layout components that it consists of
Content - The content of the box, where text and images appear
Padding - A transparent area surrounding the content (i.e., the amount of space between the border and the content)
Border - A border surrounding the padding (if any) and content
Margin - A transparent area surrounding the border (i.e., the amount of space between the border and any neighboring elements)
Given a string, reverse each word in the sentence
function reverseBySeparator(string, separator) {
return string.split(separator).reverse().join(separator);
}
- string.split(separator)
- .reverse( )
- .join(separator)
Have you played around with the new CSS Flexbox or Grid specs?
Yes. Flexbox is mainly meant for 1-dimensional layouts while Grid is meant for 2-dimensional layouts.
Flexbox solves many common problems in CSS, such as vertical centering of elements within a container, sticky footer, etc. Bootstrap and Bulma are based on Flexbox, and it is probably the recommended way to create layouts these days. Have tried Flexbox before but ran into some browser incompatibility issues (Safari) in using flex-grow, and I had to rewrite my code using inline-blocks and math to calculate the widths in percentages, it wasn’t a nice experience.
Grid is by far the most intuitive approach for creating grid-based layouts (it better be!) but browser support is not wide at the moment.
How Can I Get Indexed Better by Search Engines?
place the following two statements in the part of your documents:
Both may contain up to 1022 characters. If a keyword is used more than 7 times, the keywords tag will be ignored altogether. Also, you cannot put markup (other than entities) in the description or keywords list.
How does the Centralized Workflow work?
The Centralized Workflow uses a central repository to serve as the single point-of-entry for all changes to the project. The default development branch is called master and all changes are committed into this branch.
Developers start by cloning the central repository. In their own local copies of the project, they edit files and commit changes. These new commits are stored locally.
To publish changes to the official project, developers push their local master branch to the central repository. Before the developer can publish their feature, they need to fetch the updated central commits and rebase their changes on top of them.
Compared to other workflows, the Centralized Workflow has no defined pull request or forking patterns.
What does use strict do?
The use strict literal is entered at the top of a JavaScript program or at the top of a function and it helps you write safer JavaScript code by throwing an error if a global variable is created by mistake.
What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
Bootstrap - Slow release cycle. Bootstrap 4 has been in alpha for almost 2 years. Add a spinner button component, as it is widely used.
What is Cross Site Scripting (XSS)?
By using Cross Site Scripting (XSS) technique, users executed malicious scripts (also called payloads) unintentionally by clicking on untrusted links and hence, these scripts pass cookies information to attackers.
What is DOM (Document Object Model) and how is it linked to CSS?
The Document Object Model (DOM) is a cross-platform and language-independent application programming interface that treats an HTML, XHTML, or XML document as a tree structure wherein each node is an object representing a part of the document.
With the Document Object Model, programmers can create and build documents, navigate their structure, and add, modify, or delete elements and content. The DOM specifies interfaces which may be used to manage XML or HTML documents.
When a browser displays a document, it must combine the document’s content with its style information. The browser converts HTML and CSS into the DOM (Document Object Model). The DOM represents the document in the computer’s memory. It combines the document’s content with its style.
What is Sass?
Sass or Syntactically Awesome StyleSheets is a CSS preprocessor that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly.
A CSS preprocessor is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS.
What is a Polyfill?
A polyfill is essentially the specific code (or plugin) that would allow you to have some specific functionality that you expect in current or “modern” browsers to also work in other browsers that do not have the support for that functionality built in.
Polyfills are not part of the HTML5 standard
Polyfilling is not limited to Javascript
What is global installation of dependencies?
Globally installed packages/dependencies are stored in /npm directory. Then they can be used in CLI (Command Line Interface) function of any node.js but can not be imported using require() in Node application directly. To install a Node project globally use -g flag.
What is impersonation?
Impersonation means that some specific users (usually Admins) could get an access to other user’s data.
What is the difference between <span> and <div>?</div></span>
<div> is a block element
<span> is inline element
- it’s illegal to place a block element inside an inline element
- while div can have a p tag, and a p tag can have a span, it is not possible for span to have a div or p tag inside.</span></div>
You need to update your local repos. What git commands will you use?
1) git fetch origin
2) git pull origin master
Could you explain the Gitflow workflow?
Main - production ready branch
Hotfix - maintenance or “hotfix” branches are used to quickly patch production releases
Develop - the branch to which all feature branches are merged and where all tests are performed
Feature - each new feature should reside in its own branch, which can be pushed to the develop branch
Describe Closure concept in JavaScript as best as you could
If you declare a function within another function, then the local variables can remain accessible after returning from the function you called.
Explain the difference between undefined and not defined in JavaScript
undefined - returns when a variable that is declared but not defined
not defined - the variable was never declared in the first place
What is a cookie?
- Limited storage space 4096 bytes / ~4 kb
- Only allow to store data as strings
- Stored data is sent back to server on every HTTP request such as HTML, CSS, Images etc.
- Can store only 20 cookies per domain
- In total 300 cookies are allowed on a site
- Setting HTTP only flag will prevent accessing cookies via javascript
- Can set expiration duration for auto deletion (can be set either from server or client)
What is Session Storage
- Storage space is 5 mb / ~5120 kb
- Storage space may vary a little based on the browser
- Only allow to store data as strings
- Data is available per window or tab
- Once window or tab is closed stored data is deleted
- Data will be only available on same origin
What is local storage?
- Storage space is 5 mb / ~5120 kb
- Storage space may vary a little based on the browser
- Only allow to store data as strings
- Data will be only available on same origin
- Data is persistant (until explicitly deleted)
- API is similar to session storage
Given two strings, return true if they are anagrams of one another
function isAnagram(first, second) {
var a = first.toLowerCase();
var b = second.toLowerCase();
a = a.split(“”).sort().join(“”);
b = b.split(“”).sort().join(“”);
return a === b;
}
How to compare two objects in JavaScript?
Two non-primitive values, like objects (including function and array) held by reference, so both == and === comparisons will simply check whether the references match, not anything about the underlying values.
For example, arrays are by default coerced to strings by simply joining all the values with commas (,) in between. So two arrays with the same contents would not be == equal:
var a = [1,2,3]; var b = [1,2,3]; var c = "1,2,3";
a == c; // true
b == c; // true
a == b; // false
How to create a zebra striped table with CSS?
tr:nth-child(even) {
background-color: #f2f2f2
}
What do you know about serverless model?
Serverless refers to a model where the existence of servers is hidden from developers. It means you no longer have to deal with capacity, deployments, scaling and fault tolerance and OS. It will essentially reducing maintenance efforts and allow developers to quickly focus on developing codes.
What is CSS preprocessor and why to user one?
A CSS preprocessor is a program that lets you generate CSS from the preprocessor’s own unique syntax. There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don’t exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain.
Here are a few of the most popular CSS preprocessors:
- SASS (SCSS)
- LESS
- Stylus
- PostCSS
What is ClickJacking?
ClickJacking is an attack that fools users into thinking they are clicking on one thing when they are actually clicking on another. The attack is possible thanks to HTML frames (iframes).
Its other name, user interface (UI) redressing, better describes what is going on. Users think they are using a web page’s normal UI, but in fact there is a hidden UI in control; in other words, the UI has been redressed. When users click something they think is safe, the hidden UI performs a different action.
What is a Grid System in CSS?
A grid system is a structure that allows for content to be stacked both vertically and horizontally in a consistent and easily manageable fashion. Grid systems include two key components: rows and columns.
Some Grid Systems:
Simple Grid Pure Flexbox Grid Bootstrap Foundation
What is the purpose of cache busting and how can you achieve it?
Browsers have a cache to temporarily store files on websites so they don’t need to be re-downloaded again when switching between pages or reloading the same page. The server is set up to send headers that tell the browser to store the file for a given amount of time. This greatly increases website speed and preserves bandwidth.
However, it can cause problems when the website has been changed by developers because the user’s cache still references old files. This can either leave them with old functionality or break a website if the cached CSS and JavaScript files are referencing elements that no longer exist, have moved or have been renamed.
Cache busting is the process of forcing the browser to download the new files. This is done by naming the file something different to the old file.
A common technique to force the browser to re-download the file is to append a query string to the end of the file.
src=”js/script.js” => src=”js/script.js?v=2”
The browser considers it a different file but prevents the need to change the file name.
What will be the output of the following code?
var y = 1;
if (function f() {}) {
y += typeof f;
}
console.log(y);
1undefined
