How to prepare for a front end interview

Since beginning of my front end career I have taken hundreds of interview and attended interviews more than that. I prepared my way for the interviews I have attended as a candidate.

There was no one to guide and no one even was there to tell me the way how should I prepare myself.

Thought my ideas will help you crack your next interview.

Front end interview now a days is a more robust process instead of a simple question answer session.

Interviewer starts testing your abilities from end to end app development. Like

• Do you know the design process
• Do you know about basic Object Oriented JavaScript
• Do you know about certain framework
• Do you know about unit testing
• Do you know about Agile SCRUM development
• Do you know about server side integrations
• Do you know server side coding
• Do you know about APIs and integration process
• Do you know about the databases
• Do you know about web security
• Do you know about Accessibility

All of these are key areas for a front end developer to get him self ready for interview process.

Now a days many companies use online live tools for coding exercises like hackerrank, coderbyte, etc.

Make yourself ready by practicing the online tools as much as possible.

Companies give you a fixed time of one hour or so to complete an online test before they proceed to next levels of interview.

Many companies now has personality interview process before the HR round.

The best way to crack the personality interview round is be prepared about how you keep yourself up to date with the technology. Areas you should focus in personality interview round are

1. How you keep up with technology

2. What do you do when you are free

3. What change do you bring to the world on a daily basis

4. How you motivate people around you

5. How you mingle with your colleagues at work

6. How much you participate during hackathon

7. What is your contribution to the mankind

8. What motivates you

9. Your dreams and Your ambitions

If you are able to win the interviewer, you will never wait for other offer.

My way of Front End Interview Process

When I interview candidates then I start simple from concepts. Then I give some problem to solve. After that I get into advanced level based on experience.

Lets see what all areas I cover when I take an interview on React Front End development.

I cover areas like

• HTML 5
• Object Oriented Javascript from basics
• Basics of CSS and Preprocessors
• React/Angular
• Unit testing
• Accessibility
• Design Patterns
• Framework basics
• ES6 and TS
• Trends in Front End Development

The process of interview goes something like below. Introducing myself as the ambassador of my company. 

Then, Initially candidate is being asked to explain about himself, his personal and professional experience.

Then probe him to explain a particular scenario from his experience. This helps us understand whether he is real or fake.

Asking basics about the areas he already worked on. This makes him comfortable and builds a rapport.

Once he is comfortable, I start with JavaScript from basics to Object Oriented. Slowly I move to Design Patterns and deeper.

Then step in to other areas of front end development.

In the process I check if the candidate is good enough in answering the questions.

If he is lagging, I give him small cases to solve and write some logic.

In the process I verify the candidate in the areas like problem solving, logical, analytical, team leading capability, especially communication and much more.

Finally I give him a concept to come up with a complete development environment setup case study to verify if he is ready to expand from his boundaries.

Ui architect roles and responsibilities

Hey There,

As UI developers, all of us need to go up in the ladder. After having experience we must reach a level of architect. Every true developer think to become an architect one day.

Lets see what we need to become an architect.

Key Responsibilities of an UI Architect

• Design, develop, configure and optimize applications that are secure, efficient and operationally stable to meet business requirements

• Should be able to make technology choices and decisions

• Manages own work to meet schedule and communicates regularly on progress

• Team-based development experience and familiarity with source code tools/process, bug tracking, code reviews, and other common development activities

• Identify process gaps and provide solutions

• Participate in design and code reviews

• Create proof of concept technology analysis and pilots

• Conduct internal presentations and training to peer groups

• Participate in pre-sales activities

• Participate in setup activities for required environment setup.

• Deploy code build in testing environment

• Conduct peer review during design, coding and testing.

• Complete documentation as per the scope.

• Prepare guidelines and checklists (coding checklist, performance checklist etc) for development and testing activities.

• Fill the performance, development and coding checklist/(s).

• Develop the unit test cases.

• Incorporate changes as per feedback.

• Highlight any potential risks to the Leads

Technical Competencies Required

Experience working on web technology set. This includes HTML, CSS, DHTML, XHTML, AJAX, DO, Native JavaScript, JavaScript libraries like JQuery, Prototype.js, Ext.js, DOJO,

Must have experience in implementing web projects with a JavaScript MVC framework like MVC- BackboneJs, Angular.js, EmberJs, Knockout.js etc.

Experience in working with Server Side JavaScripting (NodeJS)

Strong Command over Object Oriented Concepts and Object Driven development with experience in server side MVC frameworks like Struts etc.

Experience & Understanding on Measuring Web App Performance parameters and implementing Code Optimization techniques.

Understanding of JS based templating engines like Mustache.js, Underscore.js, Embedded.js, Handlebars.js, etc

Experience in HTML5 (web sockets, local storage, SVG etc.), CSS3, Responsive Web Design, JQuery mobile, SEO, node.js, WebKit and W3C standards for mobile web technologies, RESTful services and Content Delivery Networks

Experience in defining and implementing engineering processes like unit test strategy definition, coding standard aligned with W3C standards, performance evaluation, code debugging and usage of unit test frameworks with tools like Google Dev Tools, QUnit, continuous integration and deployment best practices

Experience in building internet & enterprise scale web & mobile web applications driven by selection of appropriate technologies leading to responsive & scalable applications

Experience in building tools/frameworks/solution accelerators around web technologies supporting increased productivity, efficiency and quick bootstrapping of projects

Able to analyze emerging technologies and trends in web technologies and create new offerings, solution accelerators & frameworks around them

Get ready and get going.

Closure Example

Example of a closure

var scoreCounter = (function() {
  var score = 0;
  return {
    incrementBy: function(a) {
      score+=a;
    },
    decrementBy: function(b) {
      score-=b;
    },
    getValue: function() {
      return score;
    }
  };   
})();

console.log(scoreCounter.getValue()); // logs 0scoreCounter.incrementBy(10);
scoreCounter.incrementBy(5);
console.log(scoreCounter.getValue()); // logs 15scoreCounter.decrementBy(2);
console.log(scoreCounter.getValue()); // logs 13

Javascript Interview Questions

1. How do you define a String?
2. What are the string methods available?
3. What is the difference between substring and substr? substring extraction:String.slice( begin [, end ] ) String.substring( from [, to ] ) String.substr( start [, length ] )
4. How do you convert a string into a number?
5. How do you write an array? What is a 2 dimensional array?
6. How do you remove an item in the middle of an array?
7. var a = function() { return 20; }
    function a() { return 10; }

    What is the output for
    console.log(a);  //
    console.log(a());  //
8. What are the ways of defining an object in javascript?
9. How do you define a point on any window or a canvas?
10. How do you get the distance between two points?
11. How do you stop a loop? How do you skip one step in a loop?
12. What are the data types available in javascript?
13. What is encapsulation ?
14. How do you handle errors in javascript?
15. How many ways are there to debug javascript code?  console.log, breakpoints, debugger
16. What is variable hoisting? // declare the variables any where, js will take the declarations to top
17. What is use strict; ?
18. Does javascript allow you to delete a variable, a function or an object?
19. How do you define a readonly property for an object?
      var obj = {};
      Object.defineProperty(obj, "x", {value:0, writable:false});
20. What is closure in javascript?
21. Which is faster = = or  = = = ?
22. How do you start javascript execution after the content is loaded? defer='true' works only for external js
23. Can u create a copy of an object? no
24. What is the difference between call and apply?
25. What is a closure?
26. Can a global variable be used by multiple js files?


Closure Example
var scoreToAdd = 50;
var addScore=(function(){
     var score = 0;
     return function() { return score+scoreToAdd; };
} )();

addScore();

27. what is the output for below
      function a() {
            return
                    {
                        'a': 100
                     }
      }

      a();

28.  var a=[1,2,3,4,'satya',5,7,8,9];
a.reduce(function(a,b) {return a+b},1);

Some more interview questions are here
http://www.tutorialspoint.com/javascript/javascript_interview_questions.htm

https://www.toptal.com/javascript/interview-questions