Here are 10 more questions and answers I got while interviewing for the Junior React position. Enjoy!

Image for post
Image for post
Photo by ThisisEngineering RAEng on Unsplash

1. Can you tell me what is the DOM, and if you know, what is the difference between the DOM and the Virtual DOM?

DOM stands for Document Object Model and is an abstraction of a structured text. The text is an HTML code, and the DOM is simply called the HTML DOM. Elements of HTML become nodes in the DOM. While the HTML is a text, the DOM is an in-memory representation of this text. The HTML DOM provides an interface (API) to traverse and modify the nodes. There are methods like removeChild and getElementById that can dynamically change the content of the web page. The issue with HTML DOM is that it is always tree-structured. That is usually okay, because we can…


I was scrolling through Reddit and remembered Atit’s post with 30 programming memes that made my day, so I decided to make one myself full of JavaScript memes for you guys. Enjoy!

Image for post
Image for post


(and Answers)

Image for post
Image for post
Photo by Maranda Vandergriff on Unsplash

While I was interviewing for a Junior Frontend Developer position I got asked these 10 quick-fire questions. Enjoy!

CSS

EM are relative to the immediate parents while REM is only relative to the html (root) font-size.

Let’s say we have a code like this:

Then our CSS needs to look like this:

The way this works is that absolutely positioned elements are always positioned with respect to the first relatively positioned parent element, or the window. Because we set the box’s position to relative, .box-text positions its right edge to the right edge of .box …


Image for post
Image for post
Photo by Markus Spiske on Unsplash

There are great ways to make a beautiful dropdown menu. One of them is to use react-select. But, if you would like to make your own for practice or building your own component for the project just follow along.

For the people that don’t have time to read through it all, there is a full code written down at the bottom of the page. :)

Goal

Our goal is to make a component that will take a header (this can be a title of the dropdown menu or in our case a initialized value od 300N) and list that will be…


Image for post
Image for post
Photo by Kaidi Guo on Unsplash

I am sure there has been some times, when you were building React component, you wanted to conditionally apply a class. Maybe, you wanted to make a background-color of a div depending on some state, but couldn’t think of the way — here is a solution to your problem.

There are couple of ways of doing it. We will explain them on our example.

Example 1: Dropdown menu

We want to have every other menu item background-color grey. It should look something like this:


Image for post
Image for post
Photo by NeONBRAND on Unsplash

In my last project I had to write a timer that you could set, start/pause and reset. It isn’t the most difficult thing to write, but there were couple of things, I initially hadn’t thought of. Let’s go step-by-step and see how to do it.

Goal

Our timer should look something like this:


Image for post
Image for post
Photo by Christopher Gower on Unsplash

There are couple of extension I really like, and are useful while coding React applications in VS Code. Let’s go straight to them.

1. Auto Close Tag

The name says it all. This extension automatically adds HTML/XML close tag.


Image for post
Image for post
Photo by Kate Krivanec on Unsplash

So, I have been living in London for the past year. As my name suggests, I come from Slavic speaking country, called Croatia. After finishing my Master’s Degree I moved to London. Living in London has been great, especially now during Covid-19 as the streets are not full of tourists and there is not much traffic. But, it was a process of getting used to it. Here are some things that struck me the most.

Cars driving on the left line

Everybody knows this. Also, the countries that used to be a part of the British Empire adopted the left-hand traffic such as India, Australia, South…


Image for post
Image for post
Photo by Balázs Kétyi on Unsplash

While learning React.js I have asked myself multiple times what is the best practice of displaying icons on my website?

If you are a web developer you know that the icons are integral part of UI design. We use them almost everywhere, from the social media icons to the hamburger menu. It is not so strange to ask yourself which set of icons to use.

Before, we just used images for icons but soon came to realize that using images creates poor performance in terms of resolution and had poor scalability. Image formats like JPEG and PNG had the dramatic…


In React the map() function is most commonly used for rendering a list of data to the DOM.

Image for post
Image for post

What exactly is map() function?

.map() function lets you manipulate the items in an array by iterating and accessing individual items, so to use it you have to attach .map() function to an array you want to iterate over.

Syntax:

let newArray = arr.map(function callback(currentValue [, index[, array]] {
// return element for newArray
} [, thisArg]

As you can see, map() function expects a callback as the argument and executes it once for each element in the array. …

Ariana Milasincic

Electrical engineer that loves robotics, fun facts and cooking!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store