How I Built A Custom Build PC for Myself

Manjunath G — Wed, 11 Nov 2020 06:51:00 +0000

Building my own custom configured PC 🖥 was something which I had in my mind for a while now. Basically I wanted to build a PC for Development as my previous configuration was not good enough, also it's 2 years old laptop. It's a HP Laptop with Core i3 5th Gen,8GB Ram, 2GB AMD Graphics and 1TB HDD. It's good but I need something more efficient and faster. Also my brother ❤️ wanted to play high end games like GTA V 😅, so I began my research and after few days of reading several reviews and comparisons, based on my thought process I came up with following Specifications.

Configuration 🚀

ADM Ryzen 3600XT Processor
DeepCool GAMMAXX GT A-RGB Air Cooler
Corsair Vengeance 16GB DDR4 3200Mhz Ram
Intel 660p Series SSD - 512GB
ASUS GeForce GTX 1650 Phoenix Edition 4GB Graphics
MSI B450 Gaming Pro AC Motherboard with inbuilt Wi-Fi
Corsair CV650 80 Plus Bronze PSU - 650Watts
Corsair Carbide SPEC-05 Mid-Tower Case

As per the storage I already had an 1TB Internal HDD from so I did have to buy again 🤪

Why this Specs 🧐?

The main reason for this specification is it's within the budget (It did exceed a bit but It's worth it) and Upgrade friendly. To be honest I did learn many things as I was researching and building this. If you are planning on building your own PC, always keep in mind that you will eventually need to upgrade, so choose configuration/specs based on that.

Processor - At First I planned for Ryzen 3400G with Integrated Redon graphics and avoid graphics card entirely. I would have worked just fine but I needed the games to run smoothly even in 1080p without frame drops/shutters during gameplay. So I opted for Ryzen 3600XT. I do know that Ryzen released Zen 3 Architecture past week but for that I had to wait and also I was not sure about motherboard compabilities. So I went with this.
Motherboard - I needed motherboard that would support Ryzen AM4 Socket and also I was searching inbuilt Wi-Fi boards, this was perfect fit and also it has RGB Lightings that's 2 Plus Points 😁. So I went with MSI Gaming Pro Carbon AC b450 motherboard.
Note: If you are buying this motherboard make sure that the BIOS is updated to latest version
SSD - I wanted the games to load faster, the applications to process faster, especially npm install would take a lot of time in my laptop but not in this😜. The Read/Write is SSD are way more faster then HDD. So I planned for 512GB SSD for my OS and Games. For storage I used 1TB HDD along with this SSD. So overall Internal is about 1.5TB
PSU - For this specs a 450Watts PSU was sufficient or 550Watts would be enough, but as I said keeping future upgrades in mind I opted for 650Watts. I did search for comparisons in terms of +ve reviews and price range and I decided Corsair CV650 80 Plus Bronze would be best option for me.
Air Cooler - If you are familiar with processors you must be thinking why not just use stock cooler instead. I did try for a a month. With Stock Cooler I had my pc shutdown when I tried to check benchmark with CineBench also the idle and the gaming temperature of my pc was from 50deg C to almost 9+ deg C with maximum utilization. So I planned to check for Air Coolers that would cost below 5K. I came across several but with comparisons and price range I got DeepCool GAMMAXX with RBG for less than 3K and It's actually great. Check the results below.

Remaining parts are self explanatory I guess. If you want know more just leave a comment.

Building Process👨‍🔧

This was my first time building entirely new custom PC from scratch but I did repair my old PC's myself every time, so I had pretty good idea.

To be honest I wanted something more than just build a PC, I wanted It to be visually appealing with colors and lightings as well. So I planned that I would buy a transparent casing and I decided to go with Corsair's Mid-tower Case. As you can see below it's entirely transparent at one side.

Now that it transparent, it's on you to do wire management as well😂. You cannot just throw all wires inside case and pack it right 😜

I tried my best and you can see before and after pics below with final result.

It's not complete yet, I know it's still missing few lightings 😜 which I'll be adding in coming days and make it more cooler. This post will be updated as I do it.

As per monitor I already had a LG Ultrawide Monitor which I was using with my Laptop for last 1.5 years I think 🤔 but It's still Pretty good for me, even perfect for games 😁

Benchmarks 👨‍🏫

I'm not entirely sure how this benchmark rating works but I can see it's pretty good 😅. As I mentioned earlier when I first built this PC with stock cooler, the system was shut down on rendering about 70% in CineBench 🤯. Now after Installing Air Cooler you can see the result without pc shutdown it did render completely even when I ran twice to check the temperature at 100% CPU Utilization.

Let me know what you think about it in the discussion 😉. Thanks.

Getting Started with TailwindCSS and Gulp Workflow

Manjunath G — Sun, 08 Nov 2020 14:39:30 +0000

It's been almost 2.5 Years ago or nearly 3 years now when I came across a CSS utility Framework - TailwindCSS. It was the time when PSD to HTML or Custom Wordpress Themes was in play in most cases. I was never fan of any CSS Frameworks such as Bootstrap, Foundation etc. I always created my own set of styles keeping base styling intact (You can say my own grid system with base styling 😎 ) for all the projects I worked on.

I started using TailwindCSS when it was still in early stage, as you can see in this commit, it was v0.7 version of TailwindCSS. I used Gulp those days for my development workflow that's when I created this StarterKit for TailwindCSS with Gulp Workflow.

Today I'm here to share this workflow with all of you, which I recently updated as Gulp and TailwindCSS has come a long way since then. So Let's get started. 🤟

Getting Started

Step 1: Simply download the zip file from github by clicking here or if you are a command line person simply clone the repo.



$ git clone https://github.com/manjumjn/gulp-with-tailwindcss.git

Note: Make sure you have NodeJS and Git Installed in your system before proceeding.

Step 2: Install all necessary packages.



$ npm install

Usage

There are two commands you can use, one is for development which will use browsersync for the live preview that reloads on changes made to the files and the other is for production build which builds optimized and minified files for production sites.



$ npm run dev // for development

$ npm run prod // for production

Files Structure



|-- Folder
    |-- config.js
    |-- gulpfile.js
    |-- tailwind.config.js
    |-- src
        |-- index.html
        |-- css
        |   |-- a.tailwind.scss
        |   |-- main.scss
        |-- img
        |   |-- cover.jpg
        |-- js
            |-- main.js
            |-- external
            |   |-- external.js
            |-- libs
                |-- library.js

As you can see in the folder structure there is are

config.js - Configuration file used in gulp which can be used to change directory names and port of browsersync
tailwind.config.js - for TailwindCSS configuration
js > external - the files in this folder will be excluded in compiling for minification/concatination

Few Tips to keep in mind

Use prefixes in file name for reordering the concatenation of files as gulp uses alphabetic order in concatenation. The same reason the tailwind.scss is named as a.tailwind.scss. Same goes with js files naming as well.
When using tailwindCss@apply property in scss make sure to end the line with semi colon, if missed the next lines will be ignored.

I'll be updating this article with more information and updates. You can follow the repo for the same or to raise issues.

Forem: Manjunath G