Vani Ananthuni
developer|designer
pen-631321_960_720.jpg

Blog

Interview Experience with Google (Technical Solutions Engineer)

Its a positive experience. I haven’t received the offer and I’m in process of interviewing. 

So I’ve been applying for jobs since past 3 months or so. I’ve applied to like 20-30 jobs on Google. I’ve received response for Web Solutions Engineer(WSE). 

I’ve applied for two positions with the WSE title (different teams - ads and technical services) on August 9th 2016. On August 17th, I’ve received an email from HR asking to schedule phone call through Google Calendar. I got all psyched about receiving a response from GOOGLE! I took a little time (2 minutes) to compose a message and scheduled the call for next day. 

1st Phone Call: HR called up and started the conversation about the job description. And then I was asked a few popular interview questions. Tell me about yourself. Why Google? Talk about your work experience. Are you willing to relocate? When will you be available for work? Whats your visa status? etc and asked when I’d be available for Google Hangout technical interview. Then I have received an email about the hangout schedule. Dated on 24th August. Also the HR sent me a lot of review material to prepare for the interview. Most of it was books like CLRS and Cracking the coding interview. Other resources are Eulers Project and TopCoder and Google resources(this page has all the resources for algorithms). I’ve also been given some topics that I should brush up with (Coding/Algorithms, APIs/System Design, Web Tech/Networking, depending on your experience: Databases/SQL).

Preparation: I was down with flu so I didn’t really start preparation until 21st August. I again spent entire day of 23rd in dreaming about working at Google. Most of my preparation was reviewing HTTP, TCP/IP, Googling popular interview questions, basics of MySQL, and a little bit of JS. I researched a lot about the interviewer over his LinkedIn, Twitter, GitHub etc. (that helped me through the interview)

Hangout Call:(1 hour) I connected to the hangout call 2 minutes into the scheduled time. I cannot discuss questions because of NDA policy.  The interviewer (B) started with let me tell you about myself and then asked my to tell him about me. The next question is about my work experience and project. After this, B opened up a Google doc and asked me to start coding. B said I can use any language. Question was simple but a bit tricky, involving strings and numbers. I solved it using brute force method. The next question was to solve above question without converting everything inside the function. I didnt have to code for this. I explained everything clearly and he said he’d do the same. ( Suggestion: talk about all possible ways and explain every step of your program, talk about testing, talk about what’s going on in your head. Ask the question clearly - know your inputs and outputs, ask if you can do so n so etc.) Then B was like okay cool I’ve got some questions for you. The questions were like what would you do to implement so and so ( a lot of these kind of questions). Be sure to explain all possible  situations and all possible solutions and problems involved with this solution and try to use real world examples. In most cases, I was able to connect the questions to google products and problems involved. B said he’s done with these questions and said we’d have to go back into google doc and started typing out an SQL table. I was asked a simple query with a tiny trick involved. I explained it and told him we’d have so and so problem with this so he asked for a solution and luckily in could think of one. So he said he’s done with the interview. I took 15 minutes to talk to him about the job, work environment and a few questions that I had about Google Maps.  He answered happily and we concluded the interview. Over all, B was really nice to talk to, his questions were clear and his didn’t seem disinterested in the call. Lets see what happens next. 

vani ananthuniComment
HTML Semantic Code - Advantages
  1. Improves readability of site, easy to understand and maintain the site. 
  2. Helps screen readers understand the content more efficiently (ARIA)
  3. Improves SEO, helps search engines understand the content better
  4. Shorter and Faster website
  5. Easy to switch between developers
  6. Well organized code
vani ananthuniComment
Front End Developer/Engineer Interview Questions

These are the questions that I was either asked in the interviews or I have asked myself while learning. 

//over 100 questions

HTML5

  1. How do you define “semantic” markup? 
  2. How do you Optimizing your pages for speculative parsing?
  3. What are the new features in html5?
  4. When and why would you use div?
  5. Difference between <aside> and <article>
  6. What is !DOCTYPE? What happens if you do not include it in an HTML file?
  7. How to block the click event of a <a> with out using event blocker?  ( add an onclick function that returns false to <a> )
  8. List some tags which do not need closing tags. //<img> <br> <hr> <p>
  9.  What are some common lists that are used when designing a page? //Ordered, Unordered, Menu, Dictionary, Definition
  10. What are replacements for <b> and <italic> in semantic HTML? //<strong> and <em>
  11. How is the color of a bullet determined?
  12. What are Canvas and SVG in HTML5?
  13. Which video formats are supported by HTML5? //mp4, webm, ogg
  14. How to implement autocomplete feature in HTML5? // <datalist>
  15. What are the new input types used for validation in HTML5?
  16. What's the difference between standards mode and quirks mode?
  17. How do you serve a page with content in multiple languages?
  18. Describe the difference between <script>, <script async> and <script defer>.
  19. What is progressive rendering?

CSS3

  1. What are the new features in CSS3?
  2. How would you integrate multiple CSS files?
  3. What's the difference between a relative, fixed, absolute and statically positioned element?
  4. How would you reduce the size of CSS file(s)? answer
  5. What are preprocessors and why are they used? List advantages and disadvantages.
  6. What is the difference between inline and block styling?
  7. What is specificity in CSS? (answer)
  8. What is the use of * selector? How often should you use it?
  9. What is CSS Reset? What are the issues with using it?
  10. What are Bootstrap and Foundation? What preprocessors are written in?
  11. What are the differences between class and id in css?
  12. How to clear floats? (answer)
  13. What is the difference between inline, embedded and external style sheets?
  14. What are the benefits of CSS sprites?
  15. What is CSS Box model?
  16. How is responsive design different from adaptive design?
  17. Describe pseudo-elements and discuss what they are used for.
  18. What is the purpose of the z-index and how is it used?
  19. Explain the difference between visibility: hidden and display: none?
  20. What is tweening? How to achieve it in CSS? //matrix, translate, rotate, scale etc.
  21. What is RWD? What are the different ways to achieve it? //bootstrap, media queries, fluid grids, flexible images
  22. What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
  23. Create a shining transparent effect over an image. //filter opacity + gradient.

Javascript

  1. What are the new features of ES6/EcmaScript2015? (answer) (click here for PDF Format of everything)
  2. What is BOM? //Browser Object Model
  3. What is the difference between function() and Function()?
  4. What is the difference between innerHTML and appendChild()?
  5. Is JavaScript case sensitive language? (Yes)
  6. What are the different ways to create an object? (answer)
  7. What does Object.assign do? (answer)
  8. What are polyfills?
  9. What is dependency injection?
  10. What are singletons?
  11. Explain event delegation
  12. What are the different pop up boxes available in javascript? // Alert, Confirm, Prompt
  13. What are a few reserved words in JS? What are valid  variable names? (answer)
  14. Write a function that returns the largest number is an array of arrays. 
  15. Write a function that returns the of the number with highest frequency.
  16. What's the difference between host objects and native objects?
  17. How do you organize your code? (module pattern, classical inheritance?)
  18. Write a function that returns the frequency of all the values in an object.
  19. Explain how this works in JavaScript.
  20. What is defer in JavaScript?
  21. Difference between document load event and document ready event?
  22. What is "use strict";? what are the advantages and disadvantages to using it?
  23. Difference between: function Person(){}, var person = Person(), and var person = new Person()?
  24. Write a function that returns the sum of all the even numbers and the sum of all odd numbers.
  25. Write a function that returns Fibonacci sequence and nth element in the series.  
  26. What are MV* and MVC? What are your opinions on Angular, React, Ember, Backbone?
  27. Explain the following concepts in Javascript: Closures, Prototypes, Currying.
  28. What is <noscript> tag and why is it used?
  29. What is the difference between == and === ?
  30. What is the difference between undeclared, undefined and null? 
  31. What is the typeof null? //number
  32. How to identify all the images on a page, including backgrounds? //$(*’).filter(function(){return $(this).css(‘background-image'=)});
  33. What are the pros and cons of using Promises instead of callbacks?
  34. Is JS strictly typed of strongly typed language?
  35. What is the typeof console and console.log? // object & function
  36. What are the rendering problems with browsers < IE8?
  37. What's a typical use case for anonymous functions?
  38. What are the differences between frameworks and library?
  39. Write a function that returns all the prime numbers less than the argument. 
  40. Write a function to check if two strings are anagrams of each other.
  41. Write a function that checks if the given number is a valid US phone number.
  42. What are the differences between call() and apply()? Explain bind().
  43. Write a function that returns the longest palindrome in a string and test it.
  44. Write a function that takes two arrays and returns one sorted array. (array should be sorted while creating)
  45. Count the number of words in a string without using split(“)
  46. Write a javascript code for carousel widget.
  47. What's a typical use case for anonymous functions?
  48. Explain "hoisting".
  49. What's the difference between an "attribute" and a "property"?
  50. How can you change style to one particular browser?
  51. Explain block scoping in Javascript. (JS does not support block scoping)
  52. if(‘false’){alert(“true”);} What is the output of this code? //true
  53. What are falsy values?
  54. What is your opinion on Object Oriented Javascript?
  55. What type of inheritance is used in javascript? //prototype
  56. What is “class” keyword used for? (answer)
  57. What is the difference between classical inheritance and prototypal inheritance?
  58. What are two-way data binding and one-way data flow, and how are they different?
  59. What are the pros and cons of monolithic vs microservice architectures?
  60. What is asynchronous programming, and why is it important in JavaScript?
  61. What are the your most and least favorite parts of JS?


Web Technologies

  1. What is the difference between http and https? 
  2. How would you implement session management? Explain cookies and caching.
  3. What happens when you type a URL in the browser and press enter? Describe the role of cache in this case.
  4. How would you improve the performance of a website if the client likes the UI but feels like its slow?
  5. How do you test the website in different browsers?
  6. How to implement Google like autocomplete feature?
  7. Explain the difference between event bubbling and event capture.
  8. What are the difference rendering problems you have had with different browsers?
  9. How would you update a live websites styling if it’s cached?
  10. Explain latency. (answer
  11. How would you troubleshoot a blank page when you publish the website through local server.
  12. What is the difference between regular web applications and single page web applications?
  13. How to create single page web applications without using any frameworks.
  14. Explain what ARIA and screenreaders are, and how to make a website accessible.
  15. Describe the difference between a cookie, sessionStorage and localStorage.
  16. What are some ways you may improve your website's scrolling performance?
  17. Explain the difference between layout, painting and compositing.
  18. What update of the upcoming web standards excite you? w3standards
  19. How do you like your coffee? 

Node.js

  1. What is javascript’s window object equivalent in node.js? //global
  2. What is a callback hell? How to avoid it?

w/<3

vani ananthuniComment
Improving your profile while job search (and some other tips)

Firstly, Job search takes a lot of time and patience unless you've got like 5+ years of experience. So keep calm and be patient. 

Apply for as many jobs as possible, don't worry about the salary or the benefits yet. You're on an advantage if you're willing to relocate. Don't accept the first offer unless you are forced to earn or the job fits your needs perfectly. 

Don't waste your time in researching a lot about a company unless you've heard from them. Knowing a little while applying is enough. That is just to make sure that your interests align with their products or services. If you're looking for web development   and the company works in automobile manufacturing, it may not help you much. 

Talk to people. Doesn't matter if they're working in your feilf of interest of not. You could relate something to yourself from every conversation. You can learn a lot from other. 

Have a goal. Set a number of applications per day. I usually do 50 applications per day. Remember not to forget to take care of yourself. Have some you-time too. 

Treat your interviews as your experiences. There is a lot to learn everywhere. Note down EVERY question after the interview and search for the answers, even the ones you thought were right. I've realized that I've answered one of the questions completely opposite to the answer. But now I'll never forget the right answer ;)

No one is perfect. No one knows everything. The company is probably wants an expert, but if you're able to prove them that you know the basics perfectly and you're a quick learner, they may prefer you over someone with more experience but lesser knowledge. Saying right things at the right time helps. Its all about how well you can display your skills. Keep improving your profile even after your job search. 

Finally, be confident, wear a smile and don't worry about a thing. Everything will fall in place eventually. 

Check my other post on how to build your portfolio.

vani ananthuniComment
What do you need to know to be a Front End Developer

I’ve been on job search mode for quite some time now. As I swift through more than a thousand applications, I have realized that are a lot of technologies being used and lot more being developed. Each company has its own stack of base languages and frameworks and methodologies. 

You don’t have to know all of them but there are a few must be perfect with HTML, CSS, Javascript. These are like the building blocks. 

Make sure you to know the differences between different elements and when they’re to be used. Knowledge of responsive web designs is important as well. Going through frameworks such as bootstrap or foundation will help in learning more about responsive web designs. 

I will soon be listing all the important concepts in HTML, CSS as well as Javascript.  Meanwhile, here are some great tutorials you can start with. 

MDN This is my goto website

FreeCodeCamp  You can attend a free course here and even get certificate. 

W3Schools You can find the basic info and syntaxes here, i use for quick reference

For more info on useful resources, click here

vani ananthuniComment
Tips to build an effective portfolio

Whether you're a developer or designer or an artist, you need a web portfolio. If your work can be put online, then do it. Now or later its going to be useful. So how should ones portfolio should be?

- Home Page is Work Page: Set your home page to you work page. Don't forget that no one has patience to go through your about page or any other page before looking at your work. 

-Work Flow: Maintain workflow between your pages. Make sure that every page has links to every other page , both on top of the page as well as the bottom of the page. Other suggestion would be a side navigation bar. 

-Stay organized: Make sure that your work is not mixed up or not properly organized. I would suggest using grid layout or table layout for displaying your work. Don't forget to add description of what and how. 

-Maintain a theme throughout the website: Every page should have the same outline structure, this includes header and footer layout, navigation bar and any other components like logos. Also make sure to use uniform colors and font. 

-No fancy colors: Stick to the web colors and very calm background colors. Using neon colors on background is a really bad idea. Don't make your website too colorful. It takes away the aesthetics. Be sure to follow color themes. Look up online if you are not sure of what color combinations are good. 

-Display only what is necessary: A website should reflect only your work related information. Your love life or crazy night outs are really boring. Including your hobbies that may relate to your work might be useful sometimes. A web designer could showcase their sketches or an artist could showcase their photography. But if you are showcasing your talents on beer ping pong, its again boring. 

-Filter your content: You may have a thousand pieces of work. Don't display all of them, Filter out your best work before adding it to your website. 

-Quality:  Use only high resolution media content. Whether it's background or photography, using low resolution takes away the effort. 

-Physical Portfolio:  I know no one really asks for a physical portfolio but having one would be great! Try to reflect your website's design. 

-Finally, Review: Close the preview window, type in your actual web address and see for yourself. Check the website from different devices of different screen sizes. Also in different browsers. Share it with others and get a second opinion. Review every time you add content or change a style. 

 
 
vani ananthuniComment
Did you know about the Google Express?

With so many e-commerce websites on the internet, there's a good chance that a new one might just go inconspicuous. But that might not always be the case with Google. Their new e-commerce website, Google Express, a full range shopping website, has made its way into the public. Its currently available only in the major cities such as NYC, LA, DC and Chicago. Its also offering same day service and a 3 month trial. They do provide everything including groceries. Well, it sounds good right? But whats special about this? Amazon has everything too. They've got Amazon Prime for fast deliveries, A-Z products just as their logo suggests, Amazon Fresh, Amazon Kindle, and so on.. So Google added major Chain stores such as Staples, Walmart, Costco to their website. Also, the interface is way much smoother compared to Amazon so shopping gets more interesting. And the subscription fees aren't expensive, just $10/month or $95 per year and also you can share your membership with your family! That definitely sounds interesting. Lets see how this affects the most popular website, Amazon. Happy Shopping!

Should you use a CMS?
 

          Content Management System (CMS) is an application that allows non-coders (well coders use them too) to create and manage websites. There are a lot of CMSs available right now to the users. It doesn't take much time to learn how to use. Also, most of them offer a free lifetime website that features their domain and some ads. Most popular ones are Wordpress, SquareSpace, Drupal and SilverStripe. There are hundreds of them out there.  
Sounds very easy right? Yes its. But should you be using it? Answer depends on the purpose of the website and the CMS you're using and also the time frame you have.
            If its an informational website, just go ahead, add your data and put it online. It's a good way to quickly make a portfolio or a blog without spending too much on initial costs. Plus its easy to add and manage the content. On the other hand, for business entity dealing with e-commerce, it might not be that helpful. Your website needs to be stand out to catch public attention and provide security.    

 As for e-commerce, if its a small company, it makes sense. But when it comes to handling large scale users, CMS don't seem to do well. Another concern is the security. The CMSs terms and conditions usually state that the CMS doesn't take responsibility in case of security breach or other risks. 
So if you've decided to use a CMS, all you have to do is create account, start with a theme and build your website and publish it. Voila! (Let me know if you need any help with this)

Advantages: 
Low initial costs for the setup and less time to publish.
Mobile and Tablet optimization - almost for all screen sizes.
Easy to manage and add content since they don't really need coding. 
Great workflow. Better than most developers out there who charge like crazy. 
Most importantly, gets the work done. 
Again, it all depends on which CMS you are using. Choose carefully because you will be investing your time (and money) in this, its easy to realize that there's something way better than what you chose. Transferring the content becomes difficult later on . 

Difference between Web Developer and Web Designer

Did you know that the human brain is divided into two lateral sections - left and right? And the left brain deals with the logic, analysis, sequencing, math, computation, thinking etc. And the right brain deals with the creativity, imagination, emotions, art, visualization etc. So, to simplify, I could say that the web developer uses most of his left brain for his work and the web designer his right brain. The languages used by a web developer are PHP, .NET, Python, C, Ruby etc. Whereas a web designer is an expert in HTML, CSS, JavaScript, Photoshop, Illustrator etc. The enthusiasm for a hybrid of developer and designer in increasing rapidly. Though both the jobs need a tremendous effort and are equally essential, the demand for web developers is higher than it is for web designers and so is the compensation.  But everything is getting automated right? There are so many platforms out there that make building websites such as SquareSpace, Wordpress, Wix, so easy that one need not know