Blog

How I made The Periodic Table with CSS Grid and React

I was looking into the periodic table and trying to memorize all the elements in order. One afternoon I thought, hey can I make the periodic table with my current CSS skills? The periodic table is a collection of elements arranged in an oddly structured way. It has already been built in the past, but the question is, can I do it myself without looking? Making the Layout The first task was to arrange all the elements in the peculiar order. The first idea that came into my mind was to make an HTML <table>, and put all the items inside …

Read More

Fruit Ninja Random Fruit Facts API Built with Pure Node.js

I started learning how to work with pure Node webserver (without Express or any other packages) The best way to solidify the learning is to build something with the knowledge. However, with the limited scope of the lesson, I couldn’t find a project to build. I’m playing Fruit Ninja these days. After every round, it shows interesting fruit facts. I got an idea to make an API that will display random fruit facts in JSON format. This way I can put my knowledge to use while building something fun.

Read More

These 7 Tips Will Make You A Super Productive Programmer

These are some of the general programming tips I want to share with you. Some of these tips might sound trivial but they can sure help you be more productive. Here goes my 7 tips to help you become a super productive programmer.  Learn touch typing Touch typing is typing with all of your 10 fingers. Many computer users don’t know how to touch type and they use one or two fingers to type out. Even I was a two-finger typer for a long time. If you learn touch typing, you can type without looking or even in the dark. …

Read More

Notes on Jest, JavaScript Testing

Jest is from Facebook, it comes pre-installed in Create React App. It’s a good idea to install Jest globally since I will be using it from now on. Or install as a dev dependency: Run it with npm test by adding jest –watchAll in the package.json file. 3 ways to add test files: Put all the test files in __tests__ directory within the project folder Add files with .test.js Add files with .spec.js I like to add .spec.js inside each of my React component files. Each test per component stays on their component folder. For tesing general JavaScript, I will …

Read More

Notes on Algorithms 3, Insertion Sort

Insertion Sort is yet another way to sort a list in ascending order just like we did with Selection Sort last week. Similar to selection sort, it will keep comparing the current value with other items and place it when it finds a suitable position. Given an array of unsorted integers, it will divide the list in 2 sections. The sorted left array and the unsorted right array. It will take the 1th item of the array as the key (or the right index) to make the comparisons. Since we start with the only one item in the left, we …

Read More

Notes on Algorithms 2, Selection Sort

Last time I practiced the binary search algorithm and then implemented it on JavaScript. This time I learned about Selection Sort. A selection sort is a sorting algorithm that will take an array of numbers (or strings) and then sort them into ascending order. If I give an input of [1, 5, 3, 4, 2] it will output [1, 2, 3, 4, 5]. In a nutshell I start with the first item of the list. Then I check the other items one by one and see if any of the other items are lower than my first item. If I …

Read More