Skip to content

Instantly share code, notes, and snippets.

@hoanglamhuynh

hoanglamhuynh/questions.md

Last active February 14, 2017 06:59
Show Gist options
  • Save hoanglamhuynh/2412f702e6f6cacaf15fbcfa2db2d001 to your computer and use it in GitHub Desktop.
Save hoanglamhuynh/2412f702e6f6cacaf15fbcfa2db2d001 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
questions.md

8Bit Rockstars Front End Test

Javascript

1. What Javascript version have you used?

  • ES5
  • ES6 (ES6 has another name which is ________)
  • ES7 (which is also called ________)

2. On a scale from 1 to 10, how well are you familiar with those terms:

  • Typescript: ______/10
  • Babel: ______/10
  • ESLint: ______/10
  • Webpack: ______/10
  • Functional Programming: ______/10
  • Functional Reactive Programming: ______/10
  • Service Worker: ______/10
  • GraphQL: _____/10

3. What is Higher Order Function?

4. There are some falsy values in Javascript which are:

5. What's the native equivalent DOM event to jQuery's famous $(document).ready function?

6. Give an example usage of Array.prototype.reduce

7. On an old browser, a develper gets this error?

Array.forEach is not a function

What does he need to get the function working?

8. Give an example where putting a piece of Javascript at the <head> is better than at the end of the document

9. The website has a Factorial Calculator feature. User inputs 5, click Calculate, then the number 120 is displayed (5! = 120).

function factorial(n) {
     if (n === 0) { return 1; }
     return n * factorial(n - 1);
}

However when user inputs larger number (like 100) the browser is not responding for a while. Given that we cannot change factorial function, describe how to fix it the lag?

10. The client wants a header on a page that is hidden when user scrolls to the top, but shown if user scrolls down a little bit. The developer does that by registering a handler to window's scroll event like this:

window.addEventListener('scroll', function() {
     if (window.pageYOffset <= 10) {
          // Hide header
     }
     else {
          // Show header
     }
});

But on some machine, scrolling lags because the event fires so many times. Any idea on how to fix this?

11. A website has a section where user can type raw HTML into an <textarea>. Then clicking on a button View HTML will display the raw HTML content on the site.

  • What can be the security risk here?
  • How would you propose to fix it?

12. One of the client's website has a notification feature. If something happens in the backend, the frontend will show notification in real time. One developer thinks of calling an AJAX request after every 30 seconds. Is this a good way or is there an alternative?

13. On the deployment of a new website, all of the Restful APIs fail with code 405 Method-Not-Allowed.

  • The reason of this error is that:
  • To fix this, we must:

14. The client wants that, when user logs out of one browser tab, all other opening tabs of that same page on that browser will be notified as well (and show a message, for example). Give an idea on how to do that?

15. Supposed we have a function that takes a long time to finish.

someCalculation(1234); //takes 10 seconds to finish

The writer of this function says that it is idempotent - and is pure

  • What is Idemponent
  • What is Pure
  • What can be done to the function to allow caching of result, so that if we call with the same argument again, it will not re-calculate. (We are not allowed to change the internal of the function someCalculation)
someCalculation(1234); //takes 10 seconds to finish
someCalculation(1234); //should return immediately

16. Client website is a Photo Portfolio app. On the page, we have two images already loaded.

What Native HTML API can be used to:

  • Get the data-id from the <img> element being clicked?
  • Add and remove class "active" from the <img> being clicked?
  • Change browser URL without reload?

17. Explains the result of this code snippet: which alert will be fired first, or something else will happen?

<script type="text/javascript">
  	document.write('<script type="text/javascript">alert(1);</script>');    
  	alert(2);
</script>

CSS

18. On a scale from 1 to 10, how well are you familiar with those terms:

  • BEM: ______/10
  • SASS: ______/10
  • PostCSS: ______/10
  • CSS Module: ______/10
  • Above the fold: ______/10
  • Feature Queries: _____/10
  • CSS Grid: _____/10

19. How many CSS ways to hide an element on the screen so that it's not visible and not interactive at all:

20. Two CSS properties that are best optimized for animation, which are:

21. Supposed the browser screen is 1280 x 655 pixels. What will be the pixel equivalence of those CSS units:

  • 1 vh = _____ px
  • 1 vw = ______px
  • 1 vmin = _____px
  • 1 vmax = _____px

22. In the following CSS snippets

.parent .child { background-color: red; }
.child { background: green; }

And with DOM like this

<div class="parent">
     <div class="child"></div>
</div>

What will be the background color of div.child?

In CSS, the "strength" of a declaration is called:

23. We have the following declarations:

.container1 { z-index: 100; }
.container1 .child { z-index: 102; }
.container2 { z-index: 101; }

And the following HTML:

<div class="container1">
     <div class="child"></div>
</div>
<div class="container2"></div>

Supposed that the bounding rectangle of div.child overlaps div.container2.

  • Is div.child displayed under or above div.container2?
  • What is this property of z-index called?

24. From w3c website: "z-index only works on positioned elements".

What does "positioned elements" mean?

25. The client wants a header on a page that:

  1. Is 150px away from the top of document.
  2. When scroll position is from 0px to 150px, the header scrolls normally.
  3. When scroll position is from 150px to the end of document, the header sticks at the top.
  • Describe how to implement this kind of header?
  • Can this be solved using only CSS?

26. If we have two divs stacking vertically. The div at the top has margin-bottom of 10px. The div at the bottom has margin-top of 20px.

  • What will be the actual margin between them?
  • What is this feature of margin called ?

27. The client wants that when user goes to http://example.com#section1, the div#section1 should be highlight. Can this be done via CSS only, and how?

28. The client's website has two sizes: Desktop and Mobile. However when loading Desktop, resources for Mobile (images, video…) are also loaded. Can we prevent loading irrelevant resources by pure CSS only? And how?

GENERAL WEB DEVELOPMENT

29. On a scale from 1 to 10, how well are you familiar with those terms:

  • Progressive Web Apps: ______/10
  • Domain Sharding: ______/10
  • ARIA: ______/10
  • Modernizr: _____/10
  • A/B Testing: _____/10
  • Web Component: _____/10
  • HTTP2: _____/10

30. A client website has an email address and a telephone number.

<a>[email protected]</a>
<a>1900 1001</a>

Our client wants that clicking on the email address should open the respective email client and clicking on the phone number on a phone should open the dial screen. Rewrite the markup to fix this:

31. Supposed you have an <input type="text" /> on the screen. Without using Javascript, make the input focus when page loads.

32. You have a <button> inside a <form> element. This button is not the submit button, but when you click on it, the form does a submission. How to fix this?

33. Describe the advantages and disadvantages of using Icon Font and SVG?

Advantages of IconFont:

Disadvantages of IconFont:

Advantages of SVG:

Disadvantages of SVG:

34. What is the idea behind <link rel="preload>?

35. What is the native HTML way to load the correct image depending on user's device resolution. For example: on iPhone the page should loads a smaller image, and on a desktop the page will load a bigger image.

36. The client's website is https://example.com. Some user have reported that the console shows an error:

Mixed Content: The page at https://example.com was loaded over HTTPS, but requested an insecured XMLHttpRequest endpoint http://example.com/api/get. The request has been blocked; the content must be served over HTTPS.

Why does it happen, and how to fix this issue?

37. Imagine you are a new developer coming to an existing project. On a feature, you load an external library script by using a script tag.

<script src="https://external-libraries.com/script.js"></script>

However the site refuses to load and execute your script. The following was observed in the console:

Refuse to load the script https://external-libraries.com/script.js because it violates the following Content Security Policy directive: script-src self

What is the cause of this error:

How to fix this issue:

38. What does form's novalidate attribute do?

39. Search Engine Optimization

For example we have

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/">

What does rel="alternate" do?

Another link

<link rel="canonical" href="http://www.example.com/">

What does rel="canonical" do?

40. Implement a download image feature for your site. When user clicks on a link, the browser automatically downloads a file name "downloadme.jpg"

<a href="/my-site/downloadme.jpg">Click to download</a>

Rewrite the markup to achieve such feature.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment