Technical Test

Technical Test

html/css

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.

Semantic HTML5

The following HTML tags can be used to break your page into identified parts:

• <header>: Defines a header for a web page.
• <nav>: Defines a container for navigation links.
• <section>: Defines a section in a web page.
• <article>: This element contains the main part, containing information about the web page.
• <aside>: The <aside> content is often placed as a sidebar in a document.
• <footer>: It defines a footer for a document or a section.

JavaScript

What is a dependency injection?

DI is a pattern where, instead of creating or requiring dependencies directly inside a module, we pass them as parameters or reference.

Arrow Functions

ES6 syntactic sugar, for more concise functions.

• Arrow functions do not have an arguments binding.
• arrow functions do not have their own 'this' keyword.
• Cannot be used for constructors ('new' keyword).

architecture/design

network

short poll / long poll / web sockets

• Short polling (a.k.a. AJAX based timer):
  • Pros: simpler, not server consuming (if the time between requests is long).
  • Cons: bad if you need to be notified WHEN the server event happens with no delay.
• Long polling (a.k.a. Comet based on XHR)
  • is Half-Duplex meaning that a new request-response cycle is required each time the client wants to communicate something to the server.
  • Pros: you are notified WHEN the server event happens with no delay.
  • Cons: more complex and more server resources used.
• Web Socket
  • Full-Duplex meaning both the client and the server can send and receive messages across the channel.

performance

• FrontEnd
  • Critical Render Path
  • Optimize code
  • Progressive Web App
  • Code Splitting / Progressive Bootstrap / Lazy Load (http2 have small chunks)

• Delivery
  • minimize files
  • minimize delivery

• Backend
  • CDNs
  • Caching
  • Load balancing
  • DB Scaling
  • GZip

MEAN Stack

MEAN (MongoDB, Express.js, AngularJS (or Angular), and Node.js)

What is CRUD?

Create, Read, Update, and Delete (CRUD) for an API

REST vs GraphQL

GraphQL Advantages

No more Over- and Underfetching. In GraphQL, you specify exactly what you need. REST, requires multiple requests and API reflects UI. When UI changes, over/under fetching the API occurs.

• GraphQL can decouple frontend from backend.
• API evolution is possible without versioning.
• It is statically typed, so you do not need to define variable before using it.
• No over or under fetching of data.
• It is language and HTTP agnostic.
• Documentation of GraqphQL comes with no extra cost.
• It helps you to save bandwidth.

GraphQL Disadvantages

• GraphQL uses a single endpoint instead of following the HTTP caching.
• Adds complexity / overkill for small applications

REST Advantages

industry standard for companies deploying APIs

• Services of REST can be scaled to achieve high performance to span client demand.
• The API of REST can be served from more than one server.
• REST allows you to store frequently used information in the memory.
• REST has a uniform interface.
• Resources can be easily accessed by name.
• Database resource in an application can be quickly mapped with a REST API endpoint.
• It has a simple architecture and pattern.

REST Disadvantages

• If you have to retrieve any data from two endpoints, you need to send two separate requests to API.
• There is no way to get limited fields.

general programming

What is CI/CD?

CICD is the combined practices of continuous integration and continuous delivery or continuous deployment. CI/CD bridges the gaps between development and operation activities and teams by enforcing automation in building, testing and deployment of applications.

TDD/Unit Tests/FIRST

FIRST properties of Unit Tests. http://agileinaflash.blogspot.com/2009/02/red-green-refactor.html

• Fast: unit test must be fast - A software project will eventually have tens of thousands of unit tests, and team members need to run them all every minute or so without guilt.
• Isolated: Tests isolate failures. A good unit test has a laser-tight focus on a single effect or decision. Good tests interferes with no other tests in any way. They impose their initial state without aid from other tests. They clean up after themselves.
• Repeatable: Tests must be able to be run repeatedly without intervention.
• Self-validating: Tests are pass-fail.
• Timely: Tests are written at the right time, immediately before the code that makes the tests pass.

TDD: Red/Green/Refactor

http://agileinaflash.blogspot.com/2009/02/red-green-refactor.html

• Red: Failed test
• Green: Passed test
• Refactor: Clean up. Remove code. make into smaller units. performance.

Types of Tests

• Unit Tests - small. quick. Jest/NUnit/PHPUnit
• Integration Tests - connect components to see how they work together. Slower to write/run.
• Automation Tests - UI test/end-to-end tests. simulate user behavior. Nightmare (https://github.com/segmentio/nightmare).