### Building websites can be hard, but it shouldn't

There are a few different ways that you can go about building a website. You can either use a website builder, which will allow you to create a website without having to learn any code, or you can learn how to code and build a website from scratch.

If you want to use a website builder, there are a few different options that you can choose from. Weebly and Wix are two popular website builders that are easy to use and allow you to create a professional looking website without having to learn any code.

If you want to learn how to code and build a website from scratch, you will need to choose a programming language. HTML and CSS are two of the most popular languages that are used to build websites. Once you have learned how to code in these languages, you will be able to create a website that looks exactly the way that you want it to. 

But hey! We are here to build website fast preferably in minutes. So here is a review of Weebly and Wix! Something that I think is the best tool for the problem!

#### [Weebly](https://www.weebly.com) 
I have used Weebly for a few years now to create websites for my small businesses and have always been happy with the results. The platform is easy to use and has a lot of great features, including the ability to create a blog, an online store, and a members-only area. The only downside is that it can be a bit pricey if you want to use all of the features, but overall it is a great platform for creating a professional website.

**Pros:**
- Weebly is a very user-friendly platform that is great for those who are not very tech-savvy.
- There is no need to download or install any software, which makes it very convenient.
- Weebly offers a wide range of templates and designs that can be used for creating a professional-looking website.
- The platform provides a drag-and-drop interface that makes it easy to add content and images.
- Weebly is a very affordable platform, with plans starting at just $4 per month.

**Cons:**
- Weebly’s free plan is very limited in terms of features and storage space.
- The platform does not offer a lot of customization options, which can be a drawback for those who want to create a unique website.
- Weebly is not as widely used as some of the other website builders, which can make it difficult to find support and resources.

## [Wix](https://www.wix.com/)
Wix is a great website builder that allows you to create a website for free. There are many templates to choose from and you can customize your website to look however you want. You can also add your own photos and videos, and create a blog.

**Pros:**
- Wix is an extremely user-friendly website builder with a drag-and-drop interface. This makes it ideal for those with no prior experience in web design.
- Wix offers a wide range of templates and features to choose from, allowing you to create a professional-looking website without having to hire a web designer.
- Wix is a very affordable website builder, with plans starting at just $5 per month.

**Cons:**
- Wix websites can be less flexible than those built with other website builders or coding languages, as they are limited to the features and templates offered by Wix.
- Wix websites may not be compatible with all web browsers and devices.
- Wix websites may be less search engine friendly than those built with other website builders or coding languages.

### Conclusion
No code website builders help build websites fast by allowing users to create and edit web pages without having to write any code. This is especially helpful for those who are not familiar with coding or do not have the time to learn how to code. By using a no code website builder, anyone can create a professional-looking website in a fraction of the time it would take to build one from scratch.

How to build a website and go live in minutes

Earlier this year I have received an expected of some sort, but not "not so soon" so to say call from my landlord. In short, after 3 years living in a beautiful townhouse that me and my wife were renting, it was time to move on, because owner decided to sell it. 

Honestly this is very expected. When we moved in 3 years ago this was a freshly built area still under construction and it still is, however much better looking now. However back then in 2018 there were no Covid, there were no Real Estate market boom! Prices were high, but not as high and crazy as it is right now or in later 2021. When I was renewing my leasing agreement in 2021 I was afraid landlord would say that he wants to sell it, but no. 

At first scared, but then gathered our thoughts together we decided that it is time to make a move and buy a property. 

## Budget

Buying a house requires at least 5% of downpayment, long gone days where you can have 0% downpayment and walkout from bank with a house. There is also a catch, that in Canada you only pay 5% for the first 500k$ and then you pay additional 10%. So for the house that costs 800k we will have to pay 55k$.

I knew one day this will happen and we would have to gather all cash from every account that we have a put towards a property ask family to help and finally make a bare minimum to pay for everything.

In total for the house you would need: *downpayment + land transfer fee + lawyer fee*. 

## Getting pre approved for Mortgage

What I think is also important is to understand how much you can get from banks. That will give you a better picture of a price range or max price you should consider when buying a property. 

So that is what I did, I reached to RBC Mortgage Advisor and started explaining my financial situation, what I have, how much I earn and finally got a pre approval. What I also found is that they can give you your very high limit of affordability and explain risks related to going too high. 

Also, not sure if this is entirely true, but some realtors don't want to work with clients who don't have mortgage pre approval. Pre approval kind of says that you are serious and not just playing around and wasting anyones time. 

Definitely suggest reaching out to Mortgage Advisor and work closely with one. Don't hesitate and don't be shy even in saying that you don't like their rates or that you are also in talks with other banks as his job is to give you an advice and not to force you into getting mortgage with their bank. 

## Searching for a house

In Canada the closer you to Toronto, the pricier will be the house. We were looking for a property in range between 700 - 800k and with few requirements.

- Fairly new
- Somewhat spacious 
- at least 3 bedrooms
- Good neighbourhood
- Has train station to get to Toronto 

and optional:
- backyard
- finished basement

In order to make search easier we used [HouseSigma](https://housesigma.com) which has map search and every filter you need. Perhaps the only site you need to find a property in Canada. 

So given those requirements the only locations that we were interested in were: Hamilton, Oshawa, Brampton, Barrie. Because everything else is basically out of our price range. 

## Finding a Realtor

You can always search and book viewing and make an offer yourself, I would not suggest it. Realtor is the person who first of all will do all the actions listed before, but also represent you and your best interests. 

In my experience realtor was giving a lot of advices about property and beyond. For example for people who are not aware about the area, realtor was giving a lot of insights about the neighbourhood. The good the bad and everything that you need to know.  Also, realtor can talk to gain useful insights when negotiating an offer. 

Like I said realtor represents your best interests. Sometimes when you see a house for lets say 750k$ and you say you like it, you want to make an offer how much should you offer. First that I was thinking about is to offer more, however realtor knows that houses around were sold for a lower price or for exact price sellers are asking and can suggest to pay less or the asking price. Saving money is always good!


## Scheduling viewing

Once we had our budget and scrolled over HouseSigma like million times  we came up with a spreadsheet of properties we would like to see. We had 4-5 viewing per day on weekends and sometimes during the week. 

Mostly we were operating from the list of requirements + realtors view on area and lastly on a feeling from a question __"Do I see my self living in this property for X years?"__.

The last one I think is very important, because everything might be good but you just don't think like this is __the one__. So you scratch this one from the list and move on. 

## Making an offer

It took us about a month to find a property we fell in love is and honestly when we found it we've made offer immediately. 

We actually made 2 offer to different properties but first one got rejected. 

Also we decided to always be greedy and offer below asking price. With this strategy there is a chance that offer will go through given that market is cooling down. However higher chance that it will bounce back with a number from seller or a note that there is a competing offer. 

We actually only had one competing offer and our second offer was accepted fairly fast. 

Once again I think this is very important to have a good realtor who will suggest how much you should increase an offer, but also realtor can negotiate with the other realtor and kind of sense some information about competing offer. Don't ask me, it is some Realtor wodoo magic. 

## What is next?

Well now that we have an offer accepted, we are shopping for a better mortgage deal. I guess I will write up about it once I have something!

### FIN
  




Buying new house in Canada

## Demo project setup

First up let's create new React app. This should setup React using `create-react-app`.
```command-line
npx create-react-app autocomplete-demo
cd autocomplete-demo
yarn start
```

Next we will need 2 extra dependencies [Fuse.js](https://fusejs.io/) and [Styled Components](https://styled-components.com/).

__Fuse.js__ will help us with fuzzy search on client side since we will not be storing user searches anywhere but on a client side.

__Styled Components__ is to make everything look pretty
 
Let's install those

```command-line
yarn add fuse.js styled-components
```
Now that everything is installed, let's get to coding part!

## Autocomplete component

First create folder named Autocomplete and index.js file
```command-line
mkdir Autocomplete
touch Autocomplete/index.js
```

There are 3 core elements in this Autocomplete component implementation:
- Input for entering text
- Suggestions list
- Shadow word match 

```jsx

export const Autocomplete = () => {
  const [searchTerm, setText] = useState("");
  const [searchHistory, setHistory] = useState([]);
  const handleSubmit = (ev) => {
    ev.preventDefault();
    const set = new Set([...searchHistory, searchTerm]);
    setHistory([...set]);
    setText("");
  };
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="search" // this gives us ability to clear input with Esc key
          value={searchTerm}
          onChange={(ev) => setText(ev.target.value)}
          placeholder="eg. I do autocomplete for living"
        />
      </form>
      {/* suggestions list */}
      <div>
        <div show={searchTerm.length > 0 && searchHistory.length > 0}>
          <ol>
            {searchHistory.map((search) => (
              <li key={search}>{search}</li>
            ))}
          </ol>
        </div>
      </div>
    </div>
  );
};
```

This is what we have so far. Every time user submits search query we add it to searchHistory and show it in the list.
![step1](https://rem-blog-bucket.s3.amazonaws.com/assets/3f5de6ab-b8a2-4702-945f-9009604dac43-screen-shot-2021)

Now I know this is already looks very pretty but let's do some styling. Let's create `styles.js` file and add our styled-components there. 

```command-line
touch Autocomplete/styles.js
```

styles.js
```jsx
import styled from "styled-components";

export const AutocompleteContainer = styled.div`
  width: 450px;
  margin: 0 auto;
`;

export const SuggestionsContainer = styled.div`
  position: relative;
`;

export const SuggestionsDropdown = styled.div`
  position: absolute;
  width: 100%;
  border: 2px solid gainsboro;
  border-radius: 4px;
  margin-top: 2px;
  box-sizing: border-box;
  display: ${({ show }) => (show ? "block" : "none")};
`;

export const Input = styled.input`
  width: 100%;
  padding: 1.1rem;
  border: 2px solid gainsboro;
  border-radius: 4px;
  font-size: 1.2rem;
  z-index: 10;
  background: transparent;

  &:focus {
    outline: none;
    border-color: lightblue;
    box-shadow: 0 0 4px lightblue;
  }
`;

export const List = styled.ol`
  list-style: none;
  text-align: start;
  font-size: 1.1rem;
  padding: 0;
  margin: 0;
`;

export const SuggestionItem = styled.li`
  padding: 1.1rem;
  transition: all 250ms ease-in-out;
  &:hover {
    background: #cccccc;
  }
`;

export const MatchShadow = styled.div`
  position: absolute;
  border: 2px solid transparent;
  padding: 1.1rem;
  border-radius: 4px;
  font-size: 1.2rem;
  color: #cccccc;
  z-index: -1;
  user-select: none;
  background: transparent;
  top: 0;
`;
```
This should be enough, this contains enough styling for every element that we use.

Autocomplete
```jsx
import { useState } from "react";
import {
  AutocompleteContainer,
  Input,
  List,
  SuggestionItem,
  SuggestionsContainer,
  SuggestionsDropdown
} from "./styles";

export const Autocomplete = () => {
  const [searchTerm, setText] = useState("");
  const [searchHistory, setHistory] = useState([]);
  const handleSubmit = (ev) => {
    ev.preventDefault();
    const set = new Set([...searchHistory, searchTerm]);
    setHistory([...set]);
    setText("");
  };
  return (
    <AutocompleteContainer>
      <form onSubmit={handleSubmit} style={{ position: "relative" }}>
        <Input
          type="search"
          value={searchTerm}
          onChange={(ev) => setText(ev.target.value)}
          placeholder="eg. I do autocomplete for living"
        />
      </form>
      {/* suggestions list */}
      <SuggestionsContainer>
        <SuggestionsDropdown
          show={searchTerm.length > 0 && searchHistory.length > 0}
        >
          <List>
            {searchHistory.map((search) => (
              <SuggestionItem key={search}>{search}</SuggestionItem>
            ))}
          </List>
        </SuggestionsDropdown>
      </SuggestionsContainer>
    </AutocompleteContainer>
  );
};
```

## Fuse.js

Time to add fuse.js and make our Autocomplete somewhat smart in its suggestions.

```command-line
touch Autocomplete/useFuse.js
```

Here is a `useFuse` hook that we will use to make suggestions.

```javascript
import { useEffect, useRef, useState } from "react";
import Fuse from "fuse.js";

export function useFuse(searchTerm, items, options = {}) {
  const fuse = useRef();
  const [suggestions, setSuggestions] = useState([]);
  useEffect(() => {
    fuse.current = new Fuse(items, options);
  }, [items, options]);
  useEffect(() => {
    const items = fuse.current.search(searchTerm);
    setSuggestions(items.map(({ item }) => item));
  }, [searchTerm]);

  return suggestions;
}
```
Every time we update `searchTerm` fuse will run search on that updated term and set new suggestions based on it. 

Injecting `useFuse` into Autocomplete component
```diff
import { useState } from "react";
import {
  AutocompleteContainer,
  Input,
  List,
  MatchShadow,
  SuggestionItem,
  SuggestionsContainer,
  SuggestionsDropdown
} from "./styles";
+import { useFuse } from "./useFuse";

export const Autocomplete = () => {
  const [searchTerm, setText] = useState("");
  const [searchHistory, setHistory] = useState([]);
  const handleSubmit = (ev) => {
    ev.preventDefault();
    const set = new Set([...searchHistory, searchTerm]);
    setHistory([...set]);
    setText("");
  };
+  const suggestions = useFuse(searchTerm, searchHistory);
+  const exactMatch = (query, text) => {
+    const regex = new RegExp(`^${query}`);
+    return regex.test(text);
+  };
  return (
    <AutocompleteContainer>
      <form onSubmit={handleSubmit} style={{ position: "relative" }}>
        <Input
          type="search"
          value={searchTerm}
          onChange={(ev) => setText(ev.target.value)}
          placeholder="eg. Mazda, Toyota, Porshe"
        />
+        <MatchShadow>
+          {suggestions.length > 0 &&
+            exactMatch(searchTerm, suggestions[0]) &&
+            suggestions[0]}
+        </MatchShadow>
      </form>
      {/* suggestions list */}
      <SuggestionsContainer>
        <SuggestionsDropdown
          show={searchTerm.length > 0 && suggestions.length > 0}
        >
          <List>
            {suggestions.map((search) => (
              <SuggestionItem key={search}>{search}</SuggestionItem>
            ))}
          </List>
        </SuggestionsDropdown>
      </SuggestionsContainer>
    </AutocompleteContainer>
  );
};

```

This block adds usage of `useFuse` and pipes in searchHistory and searchTerm. 
```jsx
  const suggestions = useFuse(searchTerm, searchHistory);
  const exactMatch = (query, text) => {
    const regex = new RegExp(`^${query}`);
    return regex.test(text);
  };
```

This is a helper function that will check if suggestion is exact match with query that user types in. If yes we will show autocomplete shadow of the suggested word in the input. Giving it a very nice touch for UX.
```jsx
  const exactMatch = (query, text) => {
    const regex = new RegExp(`^${query}`);
    return regex.test(text);
  };
```

Finally here we add `MatchShadow` styled component and adding our exact match and other conditional checks to make sure we show it only when we have suggestions and it is an exact match. 
```jsx
        <MatchShadow>
          {suggestions.length > 0 &&
            exactMatch(searchTerm, suggestions[0]) &&
            suggestions[0]}
        </MatchShadow>
```

## Result

With all that in place let's check final result!

After user types in few searches and submits them 
![Populate history](https://rem-blog-bucket.s3.amazonaws.com/assets/7d617b95-dc57-4a5c-a681-8f4e8c73033e-screen-shot-2021)

And if user request is exact match from previous search
![exact match search](https://rem-blog-bucket.s3.amazonaws.com/assets/2c9ff001-7a58-4ba1-8a34-26bf464cab23-screen-shot-2021)

### I hope you found this guide useful! Thank you for reading.


## Links
- [Source code](https://github.com/rem4ik4ever/autocomplete-demo)
- [Sandbox](https://codesandbox.io/s/polished-firefly-ur2of?file=/src/Autocomplete/index.js)

How to make Autocomplete in React.js with Fuse.js

In my previous blog I've described few tips of preparing for an interview and how interview process looks like. 
[Tips on preparing for an interview](/blog/tips-on-preparing-for-an-interview-as-a-software-engineer) Today I want to share some preparation material with you.

## What is Technical Interview?

In order to prove that you qualify for a Software Engineering position that you are applying to, you need to pass all technical interviews. Usually it is a 3 separate interviews depending on company but not less than 2. 

- Initial filtering (Algorithm problem, Homework challenge) 
- Second round (Algorithm / System design problem)
- Final Round (System design / Domain specific interview)

### Algorithm problems 

If you are not prepared and/or didn't brush up your knowledge about data structures you will fail. 

__How to prepare for it?__

__[LeetCode](www.leetcode.com)__ is a good source of coding problems to solve. If you are serious about preparation and getting hired by FAANG companies I'd suggest purchasing a subscription that will unlock additional questions and faster compile time. 

__[Grokking Algorithms](https://amzn.to/3frGoCD)__ if you are new to algorithms and want to read about it first, this book is a great starting point. Very descriptive illustrations will help you to visually understand how those algorithms work.

__Practice a lot.__ You never know what problem you will get, so the more you practice the higher chance you will solve it.

__LeetCode problems__

I've found this list on [Blind](https://www.teamblind.com/) and so far this covered most of the problem topics.

Array

- [Two Sum](https://leetcode.com/problems/two-sum/ )
- [Best Time to Buy and Sell Stock](https://leetcode.com/problems/best-time-to-buy-and-sell-stock)
- [Contains Duplicate](https://leetcode.com/problems/contains-duplicate/)
- [Product of Array Except Self](https://leetcode.com/problems/product-of-array-except-self/)
- [Maximum Subarray](https://leetcode.com/problems/maximum-subarray/)
- [Maximum Product Subarray](https://leetcode.com/problems/maximum-product-subarray/)
- [Find Minimum in Rotated Sorted Array](https://leetcode.com/problems/find-minimum-in-rotated-sorted-array/)
- [Search in Rotated Sorted Array](https://leetcode.com/problems/search-in-rotated-sorted-array/)
- [3Sum](https://leetcode.com/problems/3sum/)
- [Container With Most Water](https://leetcode.com/problems/container-with-most-water/) 
---

Binary

- [Sum of Two Integers](https://leetcode.com/problems/sum-of-two-integers/)
- [Number of 1 Bits](https://leetcode.com/problems/number-of-1-bits/)
- [Counting Bits](https://leetcode.com/problems/counting-bits/)
- [Missing Number](https://leetcode.com/problems/missing-number/)
- [Reverse Bits](https://leetcode.com/problems/reverse-bits/)

---

Dynamic Programming

- [Climbing Stairs](https://leetcode.com/problems/climbing-stairs/)
- [Coin Change](https://leetcode.com/problems/coin-change/)
- [Longest Increasing Subsequence](https://leetcode.com/problems/longest-increasing-subsequence/)
- [Longest Common Subsequence]()
- [Word Break Problem](https://leetcode.com/problems/word-break/)
- [Combination Sum](https://leetcode.com/problems/combination-sum-iv/)
- [House Robber](https://leetcode.com/problems/house-robber/)
- [House Robber II](https://leetcode.com/problems/house-robber-ii/)
- [Decode Ways](https://leetcode.com/problems/decode-ways/)
- [Unique Paths](https://leetcode.com/problems/unique-paths/)
- [Jump Game](https://leetcode.com/problems/jump-game/)

---

Graph

- [Clone Graph](https://leetcode.com/problems/clone-graph/)
- [Course Schedule](https://leetcode.com/problems/course-schedule/)
- [Pacific Atlantic Water Flow](https://leetcode.com/problems/pacific-atlantic-water-flow/)
- [Number of Islands](https://leetcode.com/problems/number-of-islands/)
- [Longest Consecutive Sequence](https://leetcode.com/problems/longest-consecutive-sequence/)
- [Alien Dictionary (Leetcode Premium)](https://leetcode.com/problems/alien-dictionary/)
- [Graph Valid Tree (Leetcode Premium)](https://leetcode.com/problems/graph-valid-tree/)
- [Number of Connected Components in an Undirected Graph (Leetcode Premium)](https://leetcode.com/problems/number-of-connected-components-in-an-undirected-graph/)

---

Interval

- [Insert Interval](https://leetcode.com/problems/insert-interval/)
- [Merge Intervals](https://leetcode.com/problems/merge-intervals/)
- [Non-overlapping Intervals](https://leetcode.com/problems/non-overlapping-intervals/)
- [Meeting Rooms (Leetcode Premium)](https://leetcode.com/problems/meeting-rooms/)
- [Meeting Rooms II (Leetcode Premium)](https://leetcode.com/problems/meeting-rooms-ii/)

---

Linked List

- [Reverse a Linked List](https://leetcode.com/problems/reverse-linked-list/)
- [Detect Cycle in a Linked List](https://leetcode.com/problems/linked-list-cycle/)
- [Merge Two Sorted Lists](https://leetcode.com/problems/merge-two-sorted-lists/)
- [Merge K Sorted Lists](https://leetcode.com/problems/merge-k-sorted-lists/)
- [Remove Nth Node From End Of List](https://leetcode.com/problems/remove-nth-node-from-end-of-list/)
- [Reorder List](https://leetcode.com/problems/reorder-list/)

---

Matrix

- [Set Matrix Zeroes](https://leetcode.com/problems/set-matrix-zeroes/)
- [Spiral Matrix](https://leetcode.com/problems/spiral-matrix/)
- [Rotate Image](https://leetcode.com/problems/rotate-image/)
- [Word Search](https://leetcode.com/problems/word-search/)

---

String

- [Longest Substring Without Repeating Characters](https://leetcode.com/problems/longest-substring-without-repeating-characters/)
- [Longest Repeating Character Replacement](https://leetcode.com/problems/longest-repeating-character-replacement/)
- [Minimum Window Substring](https://leetcode.com/problems/minimum-window-substring/)
- [Valid Anagram](https://leetcode.com/problems/valid-anagram/)
- [Group Anagrams](https://leetcode.com/problems/group-anagrams/)
- [Valid Parentheses](https://leetcode.com/problems/valid-parentheses/)
- [Valid Palindrome](https://leetcode.com/problems/valid-palindrome/)
- [Longest Palindromic Substring](https://leetcode.com/problems/longest-palindromic-substring/)
- [Palindromic Substrings](https://leetcode.com/problems/palindromic-substrings/)
- [Encode and Decode Strings (Leetcode Premium)](https://leetcode.com/problems/encode-and-decode-strings/)

---
Tree

- [Maximum Depth of Binary Tree](https://leetcode.com/problems/maximum-depth-of-binary-tree/)
- [Same Tree](https://leetcode.com/problems/same-tree/)
- [Invert/Flip Binary Tree](https://leetcode.com/problems/invert-binary-tree/)
- [Binary Tree Maximum Path Sum](https://leetcode.com/problems/binary-tree-maximum-path-sum/)
- [Binary Tree Level Order Traversal](https://leetcode.com/problems/binary-tree-level-order-traversal/)
- [Serialize and Deserialize Binary Tree](https://leetcode.com/problems/serialize-and-deserialize-binary-tree/)
- [Subtree of Another Tree](https://leetcode.com/problems/subtree-of-another-tree/)
- [Construct Binary Tree from Preorder and Inorder Traversal](https://leetcode.com/problems/construct-binary-tree-from-preorder-and-inorder-traversal/)
- [Validate Binary Search Tree](https://leetcode.com/problems/validate-binary-search-tree/)
- [Kth Smallest Element in a BST](https://leetcode.com/problems/kth-smallest-element-in-a-bst/)
- [Lowest Common Ancestor of BST](https://leetcode.com/problems/lowest-common-ancestor-of-a-binary-search-tree/)
- [Implement Trie (Prefix Tree)](https://leetcode.com/problems/implement-trie-prefix-tree/)
- [Add and Search Word](https://leetcode.com/problems/add-and-search-word-data-structure-design/)
- [Word Search II](https://leetcode.com/problems/word-search-ii/)

---

Heap

- [Merge K Sorted Lists](https://leetcode.com/problems/merge-k-sorted-lists/)
- [Top K Frequent Elements](https://leetcode.com/problems/top-k-frequent-elements/)
- [Find Median from Data Stream](https://leetcode.com/problems/find-median-from-data-stream/)

 
### System design 

This interview type will test your knowledge of building complex applications. Scalability, resilience, caching strategy and much more is going to be part of this interview. You will need to explain your solution and also explain why you made certain decisions. 

__How to prepare for it?__

__[Designing Data-Intensive Applications](https://amzn.to/3jmjmxY)__ - this book has it all. Distributed systems, databases, how tos, whys, limitations and much more. It is a pretty big book, but I suggest you read it. 

__Build your own projects__ - try building you own side projects. Most of the AWS resources can be easily enabled as a free tier so you can have your own playground and build what ever you want. 
 
## Conclusion

Preparation is they key for success. Read books, work on real life projects and solve LeetCode problems to improve your programming, analytical and critical thinking. Good luck!

Preparing for Coding Interview

Let's say you are new grad and would like to apply for a startup, but you have no idea on what to expect from interview process. In this blog I will tell you my tips on how to pass technical interview and how to approach each step of the interview process!  I will not cover types of coding  questions and how to prepare for them. But will gladly describe those in my next blog. 

Let me just quickly outline somewhat basic steps of hiring process for a tech company.  
__

1. Recruiter phone screening
2. Project Manager phone screening
3. First technical challenge
4. (Virtual) Onsite interview - Final step

__

Those are the most common steps for an hiring funnel. Some companies might swap step 2 and 3 and/or have additional technical screening,  because they are trying to fill Full Stack Engineer position and require additional Frontend or Backend challenge. 

### Recruiter phone screening

Quick chat with company recruiter to identify if you are a good match, in terms of experience level and technical stack.

### Project manager phone screening

Same as recruiter phone screening, but this time will be more focused on your previous work experience.

### First technical challenge

This is also called initial filtering. Usually conducted by one of the engineers you will be given a coding challenge to complete. 

### Onsite interview 

Usually consists of 4-5 interviews and takes 3-4 hours to complete. You will probably need to allocate full day for it in case if you work ask for a day off. 

- 1-2 Technical challenges
- Leadership
- Growth
- CTO or VP of engineering 


## Tips for each steps 

### Recruiter and Manager phone screening

- __[Stay positive and energetic](#positive-and-energetic)__ - show your interest in the company. 
- __[Do your homework](#do-your-homework)__ - research about the company that will help you to form a good picture about what company does. Also go to [Glassdoor](www.glassdoor.com) and look at company reviews, that can tell you a lot. For example you can find out about company work/life balance or if product is not aligned with engineering and much more. 
-  __[Prepare "About me" story](#prepare-about-me)__ - both recruiter and manager will ask you to tell about yourself and your past experience. This is easy to prepare. Write something up, no longer than 2 minutes, make sure its eloquent and contains all the highlights you are proud of to make great initial impression. 
- __Prepare questions__ - at the end of each interview you will be asked if you have any questions. Now this could be moment where you can show that you __[did your homework](#do-your-homework)__ and ask something about company or your concerns or questions about benefits package. Some recruiters and managers think that if you don't have any questions at the end it could mean that you are not really interested in the company,  however not everyone. 

### Technical interview preparation

- __[Pick your language](#pick-your-language)__ - know your programming language of strength. This means language that you are most comfortable with. Your interviewer will probably say that you are allowed to use Google, but this can take your precious time to solve the coding problem and you will only have 30-45 minutes to do so. 
- __[Have backup language](#have-backup-language)__ - let's say challenge is to create OOP model of something and your language of choice was JavaScript. While this still can do the thing, JavaScript is more of a functional programming language and if I was asked to do something like that I would prefer to switch to Ruby. 
- __[Explain your solution](#explain-your-solution)__ - while solving the problem is the main goal, explaining your solution and your decision making is second most important thing to do. __Show your ability to clearly communicate your idea__
- __[Write tests](#write-tests)__ - some coding challenges will require you to write tests, but if not, still write them to prove that your solution is correct and covers as many edge cases as possible. That will also help you identify flaws of your solution. 

### Growth, Leadership, CTO or VP conversation 

- __[Prepare for questions](#prepare-for-questions)__ - Usually questions for Growth and Leadership are widely available online, so do your homework and find questions examples and prepare your answers. 
- __[Be honest](#be-honest)__ - Be authentic, tell truth. If you want to be an awesome programmer in next 5 years say it. If you want to be team lead or product manager say it. 
- __[Prepare for unexpected](#prepare-for-unexpected)__ - CTO or VP might ask you something that you wont expect. For some its a SQL question, for some its something that they found in your CV for example recent C++ experience and he or she might pull a tricky question under their sleeve. So this one could be a surprise! 


### Wrapping up

Preparation is the key, and for Software Engineers there is a huge emphasis on technical knowledge and making sure you solve the problem the most optimal way, while this is true make sure you don't forget about proper communication skills and prepare answers and questions in advance! 

Good luck in your interviews! 




Tips on preparing for an interview as a Software Engineer

# Legacy Rails app
There are many legacy applications out there that want to migrate to new modern web apps using React or Angular, to bring much smoother and better user experience. However with existing client base and huge number of features to re-implement it becomes a huge challenge. 

In my experience I had 2 cases of Rails to React migration and both took different strategies.

- React app within Rails using webpacker (React in Rails)
- Rails app with React app on a separate domain as an iframe (React iFrame)

Both approaches are viable and as practice shows work well in production.

## React in Rails
Probably will be first pick for many teams when deciding on how to migrate to React. Latest versions of Rails already come with Webpacker, however if you are running earlier version of Rails you will need to manually setup it up. 

In general this approach is easier. You will still be working in existing Rails app. You can pass Rails props to component hence opening up room for server side rendering. On the other hand if you had a plan to completely detach Frontend from Backend, this does not really help since both Frontend and Backend codebases are in single monorepo, but if your team didn't have such plans and you just want to have React on Frontend then this will work well for you.

### Pros:
- Easy to start, lots of documentation on Webpacker and React 
- Add components to Rails pages 
- Potential to SSR (Server Side Rendering) if needed
- No headache maintaining separate build/deploy pipeline 

### Cons:
- Rails monolith is getting even bigger with 2 codebases in single repository 
- Issues with running Webpacker for earlier versions of Rails
- Build time is longer

## React iFrame
Not as an obvious choice for some teams, however has its own pros and cons. 

This approach helps to separate Frontend from Backend. You will have another repository for React app, which means it needs to have its own build and deploy pipeline. It can be a headache now that for full end to end feature you will need to coordinate backend and frontend deployments to make sure everything is delivered at the same time. But once migration is complete you will get a complete frontend backend delineation, now dedicated backend team can work on API and frontend team on React app.  

Iframe has its limitations and they can be a deciding factor when picking this approach. 

If you want to use `react-router` then you will find that even though you can navigate within iframe it will not update parent URL. 

If you have authenticated pages, assuming you pass a token to iframe, React app will have to refetch user on every page when navigating in Rails app between React pages. 

### Pros:
- Offload Frontend pieces from Rails monolith
- Separate build/deploy pipeline
- After migration is complete Rails becomes API only server

### Cons:
- Build/Deploy/CORS headache 
- No control over URL in iFrame
- Need to authenticate on every page


## Conclusion

Like I said before both of those approaches work and depending on what you try to achieve one might work better than another. It is a common thing for legacy apps try to migrate to modern web frameworks, so knowing those techniques and their pros and cons can come in handy!






Migrate from Rails to React two simple approaches

# Looks like you're in a different country from the family manager

It is very confusing on how does google determine if your family member if not in the same address as you. However it appears that your first payment method address is set to be your legal address.

So here are steps to fix this issue.

1. Navigate to google.com or in Google Chrome click account and navigate to "Manage your Google Account"
2. On the left hand navigation open "Payments and subscriptions"
3. In "Payment methods" section find and click on link to "Manage payment methods"
4. Navigate to "Settings" tab 
5. Find payment profiles and at this point you have 2 options. 
    - Close all profiles that you have and do the same for your family member and then recreate payment profile with the same address
    - only delete payment profile for your family member, but entering your legal address. 

Hope that helps!

How to fix Google - looks like you're in a different country from the family manager

## Welcome to part 2 of Setting up Next.js blog!
It is obvious that you need some sort of storage to save your blogs. It could be good old MySQL or Postgres. It could be document storage like  MongoDB, or something new and fancy like FaunaDB. In my case I didn't want to use any third party hosting/provider services to store my data and I also wanted to own data. So, I decided to save files locally and use Github as a data storage. 

# CMS
There are few things we will cover while building CMS. 
- Writing markdown and rendering markdown blog content
- Saving/updating files locally using Lambda functions 
- Listing all blogs from files
- Making sure you can only save/update/delete in development mode locally

## Writing markdown 
I didn't want to write HTML for each blog to style it. So the easiest and right way to do it is to use markdown. 

I used package [react-markdown](https://github.com/rexxars/react-markdown) that allows you to render markdown input as HTML. Now since in my blog I use [Chakra UI](https://chakra-ui.com/) I had to pass renderer function in order for react-markdown package to know how to render each of markdown elements. 


 ![markdown-preview](https://rem-blog-bucket.s3.amazonaws.com/assets/708b2982-d0f6-455c-a8e7-2bcd7cac0498-saving-markdown-)
Full blog form code [here](https://github.com/rem4ik4ever/next-blog/blob/master/src/cms/blogs/BlogForm.tsx)

This form allows us to write our blog in textarea as a markdown and then preview it using React Markdown package. We will use the same package to render it in blog page.

## Saving blog file
We will be using Lambda functions which is Next.js API routes to save blog. 

Sending POST request to `/api/cms/blogs` will save file. 

![Saving/Listing blog files](https://rem-blog-bucket.s3.amazonaws.com/assets/11e1b90a-63c7-4c97-a203-6fc4f0d7913b-carbon-png)
[Click here for code](https://github.com/rem4ik4ever/next-blog/blob/master/pages/api/cms/blogs/index.tsx)

First of all we need to make sure that incoming request is `POST`, then we check if we are in development environment, by running `devonlyMiddleware` which I will describe later. After that we can proceed with saving file. 

Here is example structure of the blog file 
```JSON
{
  "title": "Newer draft",
  "tldr": "Some tldr",
  "tags": [],
  "content": "",
  "thumbnail": null,
  "status": "draft",
  "author": "Rem Kim",
  "createdAt": "2020-04-15T02:32:45.034Z",
  "updatedAt": "2020-04-22T21:19:19.791Z",
  "slug": "newer-draft",
  "id": 1586917965034
}
```
Those are the fields I find useful and need to be saved. For an ID i used current timestamp. 

generateFilename 
![generateFilename](https://rem-blog-bucket.s3.amazonaws.com/assets/7df954b6-b97e-4c2d-a706-7c31f455daa1-generate-filenam)

getSlug 
![getSlug](https://rem-blog-bucket.s3.amazonaws.com/assets/56430dd5-ed3f-4771-b1e2-e457e307ceca-getslug-png)

and finally saveBlogFile
![saveBlogFile](https://rem-blog-bucket.s3.us-east-2.amazonaws.com/assets/91ee5a00-2fd2-42ce-b985-a23b6f431314-500.png)

I used `fileSystem.promises` in order to be able to use async/await syntax.

## Update/Find blog

Now, in order to find or update blog by its ID, i've added another api route
`api/cms/blogs/[id]`
![save-find](https://rem-blog-bucket.s3.us-east-2.amazonaws.com/assets/f0a5185c-b5ab-484e-a326-b260f56ca17b-600.png)
[Click to see code](https://github.com/rem4ik4ever/next-blog/blob/master/pages/api/cms/blogs/%5Bid%5D.tsx)

allFiles - This function will scan directory with blog files, reach each one and parse its content to JSON, then output array of blog objects.
![allFiles](https://rem-blog-bucket.s3.us-east-2.amazonaws.com/assets/6891a6a7-fc1b-4ccc-b8eb-e42ce5ecb633-600.png)

writeJSONToFile and makeFilename
![write-and-make-filename](https://rem-blog-bucket.s3.us-east-2.amazonaws.com/assets/a4c3f9f1-010a-4c13-8458-c66e8edb7447-600.png)

## devonlyMiddleware
I promised we will comeback to this one. Like I said before I want to be able to use all that functionality locally when spinning up local development server. However on production those api functions should error out. 

In order to do it I've added `devonlyMiddleware` 
![devonlyMIddleware](https://rem-blog-bucket.s3.us-east-2.amazonaws.com/assets/b99248db-4a01-4dcf-9bf2-081075a0bc47-600.png)


## Conclusion
Now with those API routes, I can read/save/update blogs and github becomes my data storage.  

Saving blogs as JSON files. Next.js blog Part 2

### System requirements
- [Node 10.13](https://nodejs.org/en/) or later
- Linux, MacOS system

### Getting Started
Let's first install Next.js default starter project. In your terminal type
```
npx create-next-app YOUR_APP_NAME
```
This command will create a folder for your project and ask you if you want to install `Default starter project` or use existing Next.js templates from repository of examples. But we will use `Default starter project`.

If you don't want to use `create-next-app` just create project directory and run: 
```
yarn init next-app
or 
npm create next-app
```
This will also create a project for you. 

Now let's look at the structure of the created project.
```
.gitignore
README.md
node_modules
package.json
pages
public
yarn.lock
```

Let's go ahead and run a development server. Go to your terminal and type 
```
yarn dev
```
The default port is set to 3000 and once you navigate to `localhost:3000` in your browser you should see
![Next.js Index page](https://rem-blog-bucket.s3.us-east-2.amazonaws.com/assets/86034f39-5348-410c-a5fa-04f06455c3b1-450.png)

## Next.js commands
If you take a look at `package.json` file you will see that by default you will have 3 commands to run:
- `dev` - run a development server with development features such as hot reload
- `build` - creates an optimized production build of your project 
- `start` - run a server. In a production mode based on your recent build

## Pages
Everything we want to serve on the screen is stored in pages. Let's go ahead and edit existing `pages/index.js` file. 

First we will erase existing content of the file and add our own.
```javascript
 const Home = () => {
   return(
     <div>
       <h1>Welcome to my blog!</h1>
     </div>
   )
 }

 export default Home;
```

Also let's create another page and call it About page in `pages/about.js`
```javascript
 const About = () => {
   return(
     <div>
       <h1>This page is about me!</h1>
     </div>
   )
 }

 export default About;
```

Good, now let's link those pages together and add some routing navigation. For that we will use 'Link' component from `next/link`

add the following line at the top of the `pages/index.js` and `pages/about.js`
```javascript
import Link from 'next/link';
```
Let's update our pages to include links to each other.


*_index.js_*
```javascript
import Link from 'next/link';

const Home = () => {
  return (
    <div>
      <h1>Welcome to my blog!</h1>
      <Link href="/about">Learn more about me!</Link>
    </div>
  );
};

export default Home;
````


*_about.js_*
```javascript 
import Link from "next/link"

 const About = () => {
   return(
     <div>
       <h1>This page is about me!</h1>
       <Link href="/">Back home</Link>
     </div>
   )
 }

export default About;
```

Now you should be able to navigate between those pages.

## Routing in Next.js
As you might've already understood in Next.js all the routing maps to `pages` folder.

`pages/index.js` => `/` 
`pages/about.js` => `/about`

Say you want to add nested routes, how would you do it? Easy! Let's create 2 new routes:
`/blog` to list out blogs and `blog/[slug]` to view each individual blogs.

First create a folder `blog` inside `pages`, then add 2 files:
- `index.js` which will map to `/blog` route
- `[slug].js` which will map to `/blog/your-blog-slug` route

and that's it! 


## Fetching data 

Next.js supports both Static Generation and Server-Side Rendering. Depending on how you would like to fetch your data those two approaches are very handy! 

In order to demonstrate Static Generation you will need to use 2 supporting functions in order to let Next.js to know how to generate pages during build time. 

- `getStaticPaths` helps generate routes
- `getStaticProps` helps to fetch data during build time

### Static Generation
Now here is an implementation of `pages/blogs/index.js` using Static Generation

```javascript 
const BlogsPage = ({ blogs }) => (
  <div>
    <ul>
      {blogs.map(blog => (
        <li>
          <a href={`/blog/${blog.slug}`}>{blog.title}</a>
        </li>
      ))}
    </ul>
  </div>
);

export const getStaticPaths = async () => {
  const blogs = require('./blogs.json');
  const paths = blogs.map(blog => ({
    params: {
      slug: blog.slug
    }
  }));
  return {
    paths,
    fallback: false
  };
};

export const getStaticProps = async () => {
  const blogs = require('./blogs.json');
  return {
    props: {
      blogs
    }
  };
};

export default BlogsPage;
```

as for `blogs.json`, here is a simple json file to have some mock data.

```json
[
  {
    "title": "How to cook pasta. Easy 3 steps!",
    "slug": "how-to-cook-pasta-easy-3-steps",
    "content": "Some amazing recepy!"
  },
  {
    "title": "NextJS or GatsbyJS?",
    "slug": "nextjs-or-gatsbyjs",
    "content": "Obviously NextJS *winkyface*"
  },
  {
    "title": "Coding your first NextJS blog is easy!",
    "slug": "coding-your-first-nextjs-blog-is-easy",
    "content": "Blog and NextJS."
  }
]
```
Now if you navigate to `http://localhost:3000/blog` you should be able to see our super fancy styled list of blogs. 

### Server-Side Rendering
Let's make `pages/blog/[slug].js` in order to fetch each individual blog post using `getServerSideProps`

```javascript
const Blog = ({ blog }) => (
  <div>
    <h1>{blog.title}</h1>
    <div>{blog.content}</div>
  </div>
);

export const getServerSideProps = async (req) => {
  const {slug} = req.query;
  const blogs = require('./blogs.json');
  const blog = blogs.find(bl => bl.slug === slug);

  return {
    props: {
      blog
    }
  }
}

export default Blog;
```

## Conclusion

I hope you learned something new in part 1, of this Next.js blog setup series. In the next part I will tell how to make a simple CMS setup to be able to write your blogs using web interface and save files locally as json files. That way you don't need to have a database and you can use github as a data storage!

Here is a [source code](https://github.com/rem4ik4ever/blog-content/tree/master/nextjs-app)  for our app enjoy!


Setting up your Next.js Blog

## Props Drilling
Lets look at this example component
![component](https://rem-blog-bucket.s3.amazonaws.com/assets/bb810891-4e6d-4175-a01a-b9df55e866b8-screen-1-png)

As you can see, `Dashboard` is a sort of a Controller component that manages state using `React.useReducer`. It passes actions down to child components. 

In some cases this is absolutely fine. However as your application grows you may run into a situation when most distant child needs state or an action from root parent component. 

```javascript
<RootParent>
  <NestedChild>
    <DeeperNestedChild>
      < TheDeepestChildThatNeedsState />
    </DeeperNestedChild>
  </NestedChild>
</RootParent>
```
This is called "Props Drilling". Passing props down the component tree to child that needs it.

As a developer I try to recognize moments like that because maintaining that type of code in the future will be very hard. Thankfully its never too late to refactor! Well, I hope... 

![refactor](https://rem-blog-bucket.s3.amazonaws.com/assets/dc8d1894-6944-4765-987c-b30ae3c227e3-refactor-time-jp)

## Context

> Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Now lets see how we can refactor our example to utilize Context API.

First of all lets understand how it works.
![context-api-example](https://rem-blog-bucket.s3.amazonaws.com/assets/c31e96fe-1a6b-49c7-81cc-f8cfd89de918-context-basic-ex)

You can create Context using `React.createContext` and pass default value of the context. Once that is done you can wrap your components with ContextProvider, hence making its value available across every child component. Neat right?! 

Now let's come back to our example and refactor it using Context API and React Hooks. 


### Let's clean up and put code in its own files
![file structure](https://rem-blog-bucket.s3.amazonaws.com/assets/578fa985-4d1d-4bc5-9c73-377103dfabfc-screen-shot-2020)

#### Actions
Define all actions in **actions.js** pay attention that it exports function that requires `dispatch` prop in order to trigger an action and exports function wrapper around dispatch.
![actions.js](https://rem-blog-bucket.s3.amazonaws.com/assets/0cdfb522-313b-4101-af9c-121ef15ed7ce-actions-png)

#### Reducers
Corresponding reducers in **reducers.js**. It contains our `initialState` and `reducers` function to handle state updates.
![reducers.js](https://rem-blog-bucket.s3.amazonaws.com/assets/683483e6-a0bf-4fd1-a8a1-76efd5f7038c-reducers-png)

#### useData hook
Connecting actions and reducers in simple yet elegant hook **useData.js** that will export _state_ and actions. 
![useData.js](https://rem-blog-bucket.s3.amazonaws.com/assets/e7290cb7-db9c-4e30-94e4-cb25a0697436-usedata-png)

#### useCtx hook
Now lets put utility function that will create context and export `useCtx` hook and Context Provider in **createCtx.js**
![createCtx.js](https://rem-blog-bucket.s3.amazonaws.com/assets/0feab02e-9c82-4a73-907c-133902c44fe0-createctx-png)

#### contextApi.jsx
Here is where all the magic happens **contextApi.jsx**.  
![useContextApi.js](https://rem-blog-bucket.s3.amazonaws.com/assets/169291a1-3d45-47d0-8d02-9cb1372d3967-usecontextapi-pn)

Let's break this one down. 

_First_ we create context using `createCtx()` and export hook `useDataContext` this will be used in child components to get access to state and actions.

_Second_ we export `DataProvider` that will wrap child components and utilize our `useData` hook that will create our state from reducers and actions.

#### And finally **App.jsx** 
![App.jsx](https://rem-blog-bucket.s3.amazonaws.com/assets/9a589ebe-6c93-411b-b57d-d9e9d7c78712-app-png)

Clean isn't it? No props are being passed to child components. 

Here is **Filters.js** example on how to consume state and grab action from the Context
![filters.js](https://rem-blog-bucket.s3.amazonaws.com/assets/23f01328-22d9-4462-9af8-ec0755759b0e-filters-context-)


If you want to play around with example here is the [Link](https://github.com/rem4ik4ever/blog-content/tree/master/context-api)


## Conclusion

Obviously its up to you how you want to manage state in your application and what state management architecture suits your case. But if you faced "Props Drilling" problem, I think Context API is the way to go!

![drake meme](https://rem-blog-bucket.s3.amazonaws.com/assets/88ea46b3-1081-45aa-b5ed-bf657aa9fd3e-drake-context-ap)

Use Context API, avoid Props Drilling

### Why starting a blog? 

I've always wanted to start a Blog, but kept procrastinating and thinking about what tools to use. First step is always the hardest! However I've been reading a lot of other blogs on a day to day basis and realized that all of those people, at some point, started writing and kept this as a habit, consistently writing their thoughts and ideas and putting it out there for people like me, to read it. 

I knew I have experience and desire to start it, so I decided to scaffold this little blog using tools that are relevant right now [Next.js(https://nextjs.org) and [React.js(https://reactjs.org/).

There are 3 main reasons why I want to have a blog: 

#### Have a backlog of ideas and knowledge
As a Software Engineer I constantly solve different technical problems and try to come up with creative solutions. However I haven't recorded any of those solutions, nor shared publicly. Which many developers practice in their blogs. Thus helping other developers to solve similar problem and have a log of something important.

#### Personal and career growth
Software Engineers don't usually blog. They write code, commit code and done deal. But recruiters and big companies don't look at your code, unless its an Open Source project with a lot of followers. Developers need to stand out, they need to go beyond resume small Github projects. Companies are looking for personality. Blog is a great place to show what kind of person you are. How you reflect of problems and ideas, how you solve them and what conclusions you drew after. 

#### Gain more experience in writing
Ever since school I was not a good writer. My essays were usually horribly graded and I was ok with that! I was not going to be a writer anyway. Err... now I realize that is some important skill I missed out. Knowing on how to express thoughts and ideas in writing is very important. It is not the same as writing documentation for the code, no. It is when you have a brilliant idea in your head and you want to write it down in a way that tomorrow it would not sound like a complete non-sense to you! 

### What will I write about?
First and most importantly I will write about things I'm passioned about! I like new technologies in developers world. I like solving problems. I like to express my thoughts and help people. 

Second, I want to write about my personal developer experience. What I do, how I do, what I find useful and interesting. Not that my opinion stands above all others, but I always would like to make my take on something that i'm interested in. 

### Here we go!
Like I said before I've always wanted to start a Blog. And just like in Github each repository start with `initial commit`, this is my initial commit to this Blog!


Rem Kim

Blog