DEV Community: Davinderpal Singh Rehal

1 Year of Consistent LeetCoding

Davinderpal Singh Rehal — Thu, 24 Oct 2024 16:31:29 +0000

It was September 2023, a time when change was in the air. I found myself between jobs, and as luck would have it, Google had just kicked off a hiring wave in Nairobi, Kenya. I came across the Google Foobar challenge, a coding gauntlet I'd heard whispers about. With a decade of coding behind me, I felt it was time to give it a shot.

The first challenge was like a warm-up—a binary search problem that felt like a gentle jog. The second and third problems followed suit, manageable and engaging. But then, the fourth challenge appeared, and it was like hitting a steep hill. This was my introduction to graphs, a concept that had somehow eluded me in my career.

Feeling a bit overwhelmed, I turned to YouTube for guidance. As I watched the videos, explaining the algorithms and concepts, I couldn't help but feel a touch of imposter syndrome. How had I worked as a software engineer for so long without encountering these problems?

To cut to the chase: a Google recruiter did reach out. It led to a phone screen and three rounds of interviews. Unfortunately, I didn't make it through. But this experience kindled a fire in me to master data structures and algorithms (DSA).

Determined to improve, I found the LeetCode 75 question set. I tackled it with zeal, making notes and learning heaps. Halfway through, I landed my first contract of the year, which meant less time for practice. To keep pushing myself, I started doing LeetCode’s daily challenges. This eventually led to a 365+ day streak.

I tracked every question in a (Google Sheet)[https://docs.google.com/spreadsheets/d/14GXh2RLulTo2vLeLzOuOqqCm5DQmCI-OK8MJvi9yJz8/edit?usp=sharing]. My system was simple, if I can't solve it within the time I mark it as a fail:

Easy: Solve within 25 minutes
Medium: Solve within 45 minutes
Hard: Solve within 1 hour

Every two weeks, I'd revisit a failed question and give it another shot. Here’s what I learned along the way:

Some Topics Pop Up More Than Others

Arrays (Lists)

Following (PrimeAgen)[https://www.youtube.com/@ThePrimeTimeagen]? Then you know arrays are fundamental to DSA. A year in, I can vouch for it. Efficient array manipulation is essential.

Strings

Strings are like arrays, but with a twist. They’re immutable in most languages, meaning any change requires creating a new string. This was a lesson learned the hard way.

Hash Tables

When mapping data, hash tables are a go-to due to O(1) insertion and deletion. Initially, I thought hash tables were complex, but I learned they’re essentially objects.

Sorting

Know at least two sorting algorithms. Bubble Sort is classic and quick to code. Merge Sort is powerful but takes practice. And there’s Bucket Sort—mind-blowingly fast but space-intensive.

Greedy Algorithms

Greedy problems are intriguing. They allow early exits once conditions are met. These problems still trip me up sometimes, but they’re rewarding to solve.

Conclusion

DSA can become addictive. Once you start spotting patterns, solving problems becomes almost mechanical. I’m hoping for another shot at Google. Until then, I’ll keep grinding LeetCode and getting better at this craft.

100-Day Daily Streak on LeetCode

Davinderpal Singh Rehal — Wed, 31 Jan 2024 18:16:01 +0000

I almost can't believe it's been 100 days of me grinding LeetCode! There was a point when I thought I completely lost my streak, and that point was 28th Jan 2024.

You see that gap in my calendar, that was the day our house was broken into and a lot of things were stolen, vandalised and ransacked. Before anyone complains about the semantics of that sentence I know ransacking is the act of stealing and vandalising, I am still in trauma so let me vent. The only way I could get my streak back was by using the time travel tickets.

As much as I would love to take you guys through all the details of the robbery, I doubt anyone is interested, so let's talk about what I learned during these 96 days (the last couple of days rolled into 1).

1. ALWAYS MAKE NOTES

LeetCode has this amazing feature that lets you take notes, especially when you submit a solution the notes panel pops up. This has been so useful for me to make my own notes as soon as I read the problem statement.

If it's an easy problem and the solution is obvious then I normally don't bother making notes, but for a bit more complicated problems my notes start off as a speculation of what approach I should use, then when a solution has been arrived I add to my notes what has changed. Some of my notes look like this.

A DFS approach would probably make sense here since we are looking for diff between ancestor and nodes

This note would evolve to something like.

[ Time taken: 24 m 46 s ] had the right idea but had a hard time converting it to code.

A DFS approach would probably make sense here since we are looking for diff between ancestor and nodes

2. Don't Rush Into Code

I would usually start the timer as soon as I started reading the problem. This put some pressure on me to read faster and start coding faster, but the more I got comfortable with the timer being on the more time I took to actually understand the problem better, go over the inputs and results until I could form some sort of a mental image. There have been so many times that it took me 10 min just to understand what the question needed and once that clicked, it would take me another 10 min to convert the idea into code.

Writing the code is usually not the hardest part, it's usually coming up with an approach that is hard. This is especially true for Medium problems, Hard problems are just there so you have suicidal thoughts.

3. Draw a Line in the Sand

In the beginning, I would spend more than an hour at a problem, write some code and keep on iterating on it until I passed more and more test cases. This is normally the approach most of us take when working on a feature request but it's not the best approach for LeetCode. A lot of times there is a trick that you are missing, or you are lacking a better understanding of the problem itself. At some point in time, its time to try a new approach or to watch a NeetCode video (no affiliation). My suggestion is about the 50 min mark you should probably change approaches and add that to your notes.

Don't let your ego get the best of you, be humble enough to know that your approach isn't working.

4. Know Your Language

I come from a JavaScript background, and although I have used Python at work for some reason I never enjoyed it as much as I did JavaScript. That is till I started the LeetCode75 study plan, and at that point I found out how many data structures JS is missing.

There were many times that I had the right approach in mind and managed to code the correct solution and then I discovered that Python has a much better way of doing something.

One thing I use all the time is defaultdict which when I discovered made coding up solutions much faster. 90-something days in and I am still discovering new ways in which Python makes writing algorithms easier. The more I use Python for LeetCode the more I enjoy it.

Final Thoughts

While I am very far from being able to solve any problem that LeetCode throws my way, every time I do a problem I feel slightly more confident. The biggest issue I seem to have is in Dynamic Programming problems. Looking forward to making a new post with a 200-day streak.

Why I moved from JavaScript to Python for LeetCode

Davinderpal Singh Rehal — Tue, 02 Jan 2024 18:52:38 +0000

Cover image generated using Microsoft Designer.

In December 2023 I started a YouTube channel more for the purpose of learning how to tackle coding interview and getting a better understanding of Data Structures and Algorithms. I started the LeetCode 75 study plan and since my strongest language is JavaScript that's what I started to use. After creating about 9 videos and going through more than 70% of the study plan I am ditching JavaScript for Python and here is why.

Data Structures

A major difference between JavaScript and Python is the built-in data structures. JavaScript has arrays and objects, which are versatile but sometimes inefficient. Python has lists, tuples, sets, and dictionaries, which are more specialized and optimized for different purposes. For example, sets are useful for checking membership and removing duplicates, while dictionaries are useful for mapping keys to values. Python also has some data structures that JavaScript does not have, such as stacks, queues, heaps, and dequeues. These data structures are often needed for solving LeetCode problems, especially those involving graphs, trees, and priority queues. For example, here is how to implement a queue using a list in JavaScript and using a dequeue in Python:

// JavaScript
let queue = [];
queue.push(1); // enqueue 1
queue.push(2); // enqueue 2
queue.shift(); // dequeue 1
queue.shift(); // dequeue 2

# Python
from collections import deque
queue = deque()
queue.append(1) # enqueue 1
queue.append(2) # enqueue 2
queue.popleft() # dequeue 1
queue.popleft() # dequeue 2

As you can see, Python has a built-in dequeue class that supports efficient appending and popping from both ends. JavaScript has to use a list and shift the elements every time a dequeue operation is performed, which is costly in terms of time and space.

Syntax

I have been using Python professionally for the past 6+ years and JavaScript for probably 10, that being said everytime I move from Python to JavaScript I kind of miss how less code I have to write for Python. JavaScript uses curly braces {} to define code blocks, such as functions, loops, and conditionals. Python uses indentation to define code blocks, which makes the code more readable and concise. For example, here is how a function to check if a number is even looks like in JavaScript and Python:

// JavaScript
function isEven(n) {
  if (n % 2 == 0) {
    return true;
  } else {
    return false;
  }
}

# Python
def isEven(n):
  if n % 2 == 0:
    return True
  else:
    return False

As you can see, Python has less boilerplate code and does not require semicolons or parentheses around the condition. Python also has some syntactic features that JavaScript does not have, such as list comprehensions, multiple assignment, and tuple unpacking. These features can make the code more elegant and expressive. For example, here is how to swap two variables in JavaScript and Python:

// JavaScript
let a = 1;
let b = 2;
let temp = a;
a = b;
b = temp;

# Python
a = 1
b = 2
a, b = b, a

As you can see, Python can swap two variables in one line, while JavaScript needs three lines and a temporary variable. This can save time and space when coding.

Before I piss off the rest of my JavaScript brothers and sisters, newer JS syntax does let us do swapping of values in 1 line as well, but I have not had the most consistent results, especially in the context of LeetCode. If you are using modern JS you can do.

let a = 1;
let b = 2;
[a, b] = [b, a];

Libraries

Another difference between JavaScript and Python is their libraries. JavaScript has a standard library that provides some basic functionality, such as math, string, and date operations. However, it does not have many advanced modules or packages that are useful for solving LeetCode problems, such as data structures, algorithms, or testing frameworks. Python has a rich and comprehensive standard library that covers a wide range of topics, such as data structures, algorithms, math, statistics, random, itertools, collections, functools, and unittest. Python also has many third-party libraries that can be easily installed and imported, such as numpy, scipy, pandas, matplotlib, and sklearn. These libraries can provide more functionality and performance for solving LeetCode problems, especially those involving numerical computation, data analysis, or machine learning. For example, here is how to calculate the mean and standard deviation of a list of numbers in JavaScript and Python:

// JavaScript
let nums = [1, 2, 3, 4, 5];
let sum = 0;
let sumOfSquares = 0;
for (let num of nums) {
  sum += num;
  sumOfSquares += num * num;
}
let mean = sum / nums.length;
let variance = sumOfSquares / nums.length - mean * mean;
let std = Math.sqrt(variance);
console.log(mean, std);

# Python
import numpy as np
nums = [1, 2, 3, 4, 5]
mean = np.mean(nums)
std = np.std(nums)
print(mean, std)

As you can see, Python can use the numpy library to calculate the mean and standard deviation of a list of numbers in one line, while JavaScript has to use a loop and some math formulas.

Video Support

Everytime I get stuck in a problem, which happens more often than I admit, it is as soon as I search for the problem on YouTube the first few that results that come up solve the problem with Python, though it is not super hard to translate the code to JavaScript given that my primary goal is to get a deeper understanding of the Data Structures and Algorithms it felt a bit counter-intuitive to spend the limited time I have translating code, I would rather attach a debugger to the code and step through with different inputs.

Conclusion

If you follow me on YouTube, LinkedIn and Dev.to expect to see more Python content coming soon :).

Taking on the JavaScriptmas Challenge

Davinderpal Singh Rehal — Mon, 28 Dec 2020 11:40:27 +0000

Taking on the JavaScriptmas Challenge

December 2020 started off a little bit stressfully, on about 14th I got an email from Scrimba about a new challenge that focused on front-end web development. Below are all the scrims from the challenges.

Web Components - Part 1

Davinderpal Singh Rehal — Sat, 05 Sep 2020 15:42:48 +0000

Web components logo

Front-end web development has become incredibly complex over the years. Back in the day the only things you needed to become a front-end web developer was HTML, CSS and some basic JavaScript or if you were fancy then you would learn jQuery. But the issue ‘back in the day’ was that browsers would rendering of elements would be different so as web developer we would have to use hacks to make things look acceptable.

Today, we have a number of front-end libraries/frameworks that offer front-end developers some incredible super powers, the problem with them is that most of us don’t utilise all the features that we import with the libraries/frameworks. To make things even worse depending on the preference of the developers working on a project you end up using different libraries for different projects. Wouldn’t it be nice if we could have a set of components that could be used across projects and across libraries/frameworks?

NB: Henceforth when I libraries I am referring to libraries/frameworks

Enter

Web Components title surrounded by fireworks

[Insert Bollywood Explosions here]

Web Components were originally introduced in 2011 and browsers started implementing them much later.

What are Web Components?

Web components are a set of web APIs that allow developers to make encapsulated components that have their own set of functions and styling.

Web components are made up of

Custom Elements
Shadow DOM
ES Modules
HTML Templates

For this article I will be focusing on Custom Elements.

Custom Elements

The need for Custom Elements

HTML provides a number of tags that have been serving the web well but the issue comes in when you try to get a consistent look and feel for various HTML tags. CSS tries to solve this by having a global style sheet that houses all the UI styles, however, this gets very difficult to manage with multiple developers since most developers would end up writing styles at the bottom of CSS files which makes it difficult to manage the styling.

To address this various frameworks and libraries have come up such as React and VueJS that let you encapsulate/scope styles. This solution of course works well when you have the freedom of importing libraries but what if you would like to achieve the same without using a particular library or framework. This is where Custom Elements in. As a PoC lets look at how an ecommerce front-end would look like with Custom Elements .

The Design

Very simple design of an e-commerce store that we will be implementing to figure out how Custom Elements work.

Basic HTML Implementation

https://codepen.io/davinderpal/pen/abNwoBp

CodePen showing implementation using basic HTML

Converting To Custom Elements

We have tried as much as possible to provide semantic meaning to the markup but there are places that the tag chosen doesn’t make sense. If a different developer was to continue this project they would would probably use different mark up, e.g. instead of using a p tag for the price they could use a div , this won’t cause any issues in styling since we are using the classes to do the styling but it does make our codebase very inconsistent, therefore, harder to manage.

Instead we could convert the mark up to a custom element and abstract the implementation. So having a custom element such as

<shop-product
  image='https://source.unsplash.com/200x200/?shoes'
  name='Nikey Shoes'
  price='$40'
  rating='1'
  variants='100'
></shop-product>

would ensure that any developer creating a new shop page would have a consistent way of describing the elements. There is an added advantage of making our code base slightly more readable.

https://codepen.io/davinderpal/pen/bGpaNpG

As you can see from the Pen above both implementations look exactly the same to the end-user, but the below one has a more consistent codebase with less chances of a different developer changing markup in a different page. This also makes the code reusable across pages and even sites.

The Implementation

To register a custom element you have to JS with the window.customElements.define (or customElements.define)function which takes in 2 required arguments and 1 optional argument.

The first argument is the name of the custom element that you are creating. The docs require that the name of the custom element needs to include a hyphen — in its name. This is usually a string.
The second argument is the constructor that defines how the element will actually be implemented. This is usually a class.
The third argument is an options object. This is out of scope for this article but in the coming articles I will be covering this more.

The way JS is structured you will need to declare the implementation class before trying to register the custom element.

The implementation class extends the HTMLElement class and as such inherits all the functions and events that a normal HTML element would have. Within the new class we only require to provide the constructor which starts by calling the super() function.

class Product extends HTMLElement {
  constructor () {
    super()
  }
}

Within the constructor you would create the HTML elements that are required for the implementation of the custom element. This code can be seen within the CodePen above.

Conclusion

Creating custom elements really helps have consistent and reusable code for web applications. This also lets you hide some of the inner workings which let developers who are not very familiar with front-end development still write front-end code.

Moving from Apache2 to Nginx Webserver

Davinderpal Singh Rehal — Sun, 03 Nov 2019 13:38:47 +0000

Recently at work I had to move our dev, staging and production web servers from Apache2 to Nginx. The reason for this move is that in the rest of the company we are using Nginx for all the backend services but when the web sites were set up for some reason the consultants set up Apache2. This became a problem mostly for management. In this article, I will be going step-by-step through the process. I will be using a vagrant box for all the screenshots but the steps I did were the same for the actual servers.

Server

For my test server I am using vagrant and ubuntu/bionic64. On this server I had apache2.4, php7.2 and mysql5.7 a basic LAMP stack. Which I will be moving to a LEMP stack replacing Apache with Nginx.

This server has a WordPress site running on it, with WordPress 5.2.4 running. We will have achieved our goal once we can see this WordPress site running on Nginx and PHP 7.3. Oh and we have a bunch of envvars set up of the Apache2 instance that will also have to transfer to the Nginx installation.

Installing Nginx

Pretty straight forward. Start off by checking for updates.



sudo apt update
sudo apt upgrade

Actually install Nginx.



sudo apt install nginx

Nginx is now installed but is not running, since we have Apache2 already installed and configured on the system, Apache2 will be using port 80 which means that to avoid conflicts we should run Nginx on a different port to test that everything is running well. I choose the port 8080.

Configure Nginx with Port 8080

There is a default website that is set up with Nginx (just like Apache) just to make sure that things work. The config can be seen at.



sudo vim /etc/nginx/sites-available/default

This should open up a file that looks like.

On line 22 and 23 we are gonna change 80 to 8080.


 nginx
listen 8080 default_server;
listen [::]:8080 default_server;

Let's test the config quickly before we start the Nginx service.


 bash
sudo nginx -t

If all is well, let's write a small HTML page that will just let us know that the server is up. Line 41 shows me the root of the server. I changed server root to make sure that am not using the same directory as Apache.



root /srv/www/html;

That's the directory I will be adding the index.html file. Now we can start the server.



sudo service nginx start

To test out the new config.



curl http://localhost:8080

Which should return the new HTML file that I had created. Moving on to install PHP.

Installing PHP

Right now we have PHP7.2 installed on the system, since there has been a bit of a scare with the whole PHP7.2 and Nginx config, will be moving to PHP7.3.

First off, Ubuntu doesn't know where to get PHP7.3 from so we need to add the repository.



sudo add-apt-repository ppa:ondrej/php
sudo apt update
sudo apt upgrade

Actually installing PHP7.3 and some extensions. These are just the extensions I need, feel free to add or remove extensions as required.



sudo apt install php7.3
sudo apt install php7.3-cli php7.3-fpm php7.3-pdo php7.3-mysql php7.3-zip  php7.3-mbstring php7.3-curl php7.3-xml php7.3-bcmath php7.3-json

Once all the extensions have been installed, its time to edit the Nginx config file again to tell it that the website we have uses PHP. The config file is below, with all the comments stripped out and comments only on the lines that have been changed.

Test the config to make sure there are no syntax errors.



sudo nginx -t

You will probably get an error because there is no env file at /srv/config/default.nginx.conf. Just add a blank file there, for now, will explain what it does later.

Hopefully, that solved your error. Now let's change the index.html file to index.php and add some basic PHP code to see if things work. Also, be sure to set the appropriate permissions to the index.php file. I like going with.



sudo chmod 755 index.php

Restart the Nginx server



sudo service nginx restart

And you should see the PHP file you wrote. I printed out the phpinfo() function to make sure configurations are good.

Server Env Variables

I like having some of my app configurations saved in the $_SERVER superglobal. This comes in handy when your moving your app between dev, stage and prod servers and don't want to keep on changing your db passwords or API endpoints.

The file that we touched /srv/config/default.nginx.conf, I will be adding the following lines of code in it.



fastcgi_param   APP_ENV         dev;
fastcgi_param   APP_ENDPOINT    https://dev.server.com;
fastcgi_param   DB_HOST         localhost;
fastcgi_param   DB_USER         root;
fastcgi_param   DB_PASS         password;

The format is usually



fastcgi_param  {VAR_NAME}      {VAR_VALUE};

Feel free to add any other env variables. Once your happy test config and restart Nginx. You should see your new variables in the phpinfo() function output as below.

Pay close attention to the last 5 values.

And thats it, just move all your files to the relevant folder to do a final test. When ready you can stop the Apache service.



sudo service apache2 stop

Change the port number from 8080 in the Nginx config, to 80 and restart Nginx, and we are done.

Well done!