IntroductionAlgorithem is a step by step process to how to solve a program. Algorithm is important because it can influence the speed and efficency of our program. As our program size grow or our users grow, we don’t want slow functions affect our user experience. Here a sneak peak of some algorith ...

IntroductionBootstrap has been my favorite css framework because of it’s large amount of components and its well css structure. Bootstrap is currently the largest CSS framework which means it also has the most resources. Bootstrap has definately help me with my css workflow. I usually let bootstrap ...

Pre-workFile Structure The file structure that I take is to have a _assets, _exports, and design folder. The _assets folder is where I keep my dummy text, logo, images and etc. _exports is where I exports my design and images. Lastly the design folder is where I have my sketch file (usually only one ...

BackgroundSemantic HTML is a feature in HTML. It exist back in HTML such as form, img, and tables. In HTML5, more semantic tags are added, for example header, footer, and nav. There are many benefits to for this. This added more structure to our html page. In the following, I’ll discuss the benefits ...

BackgroundImage optimization is very important for your web app. It accounts for more than 50% of the loading time. 47% of users expect a webpage to load in under 2 seconds, and 40% will abandon a page that takes more than 3 seconds to load. You can also optimize your image tag and image name for be ...

BackgroundCentering your div blocks both horizontally and vertically is a tricky tasky. Today I’m going to show you four ways to do it. So let’s do eeetttt! 1. Transform TechniqueMake the parent div position relative so the child position will based on parent’s position. Next to move it top and left ...

What is parallaxParallax is an effect where the background layer or image in this case, is moved at a different speed than the front layer while scrolling. Parallax design is a popular technique in modern webdesign. There are two approaches to this effect: CSS and JS. Both are really easy. So here w ...

Basic Commands123456789101112131415161718npm -vnpm init # create package.json & add -y is yes to all requirementsnpm install # install all packages in package.jsonnpm install <package> # install in package but not written in package.jsonnpm install <package> --save-dev # install in m ...

IntroductionThis is a question that I been struggle for a long time. However, I final figure it out. There are two ways that I recommend doing this using dotenv package or setting it manually. dotenv packageHere’s my example repo: dotenv repo First install dotenv 1npm install dotenv --save-dev Cre ...

Here we will go over some more advanced git scenarios. Squah Multiple Commits Let’s say we have multiple commits and we want to squash them. We use rebase to the first commit. The rebase screen will come up. 123b1 # commit 1b2 # commit 2git rebase -i 49687a0a646954afdf3f4dae1f914ea793341ea2 (Commit ...