Top VS Code Extensions For Absolute Frontend Beginners

Isaac Melchizedek — Fri, 29 Jan 2021 14:20:22 +0000

Microsoft's Visual Studio Code (VS Code) is one of the best code editors out there. Not only does its intuitive user interface make coding a little less crazy for newbie developers, but it's also got a bunch of other functionalities that set it apart from among the stock. Awesome plug-ins being one of them. So, here are ten VS code plug-ins that'll make your coding experience as a beginner Front-end Developer really smooth.

1. Live HTML Previewer

Live HTML Previewer allows you to view your HTML/CSS codes live while getting your hands on the code editor. This will allow you have a real-time visual representation of whatever you're coding. And comes with the huge advantage of allowing you to inspect, edit or delete any section of the page you didn't like irrespective of the code behind it. After all, what matters most at this stage is whether you really can deliver basic design and development objectives.

2. Live Server

Live Server is an amazing VS code extension that makes the whole process of setting up a server really easy. Oftentimes, you'd want to test your dynamic and/or static web pages and the local development server that Live Server allows developers to run will always come in handy. What is more, it supports HTTPS, proxies and enables really powerful customizable features on your project.

3. Live SaaS Compiler

SaaS is often called "CSS with superpowers'' and while the debate of whether that title absolutely belongs to SaaS or not over yet on its own right, SaaS is an amazing tool to master. As a CSS preprocessor, SaaS helps you write better, cleaner CSS code. And the Live SaaS Compiler makes the process seamless for you. With this Live SaaS Compiler, you don't need to download/install nodejs or npm on your machine. It takes care of all the stress for you.

4. Better Comments

As a beginner, you'd probably want to keep notes, mark your To-do list and leave comments that'll help you make sense of your work environment. That's exactly what Better Comment does for you. Once installed, it helps you sort your HTML comments into categories for easy reference.

Like my picks? Let me know in the comment section below. Also, feel free to add your best VS Code extension to the list and why you love it.

The Newbie Dev: How to Use Github without the Command Lines

Isaac Melchizedek — Wed, 13 Jan 2021 22:16:33 +0000

Nothing is What it Seems

Coding is hard. I know it’s an obvious truth, but oftentimes, those with years of programming experience forget this when dealing with mere mortals like us. I started learning front-end development barely four months ago, and on my first day in, I was already overwhelmed by the noise of various technologies - scarily echoed in group chats - SASS, LESS, Bootstrap, Vanilla JavaScript, React.js, Angular, Vue, and whatnot.

“What is going on here?” I seemed to be asking my creator.

I thought my job was to learn HTML, CSS, and JavaScript. I thought wrong. Besides these programming languages, preprocessors, and frameworks; something else was always mentioned when I started programming. The almighty Github. The most used version control system? What’s that?

The Bad Way to Introduce Git to a New Developer

Like I said earlier, it is quite difficult not to get unnecessarily overwhelmed by several tools and stuff one needs to master as a beginner. Having to worry about Git and Github was absolutely not something I was expecting until I did my first task in a Bootcamp and had to move everything to Git.

Apparently, to push codes on Git from your machine (yea, makes sense that my PC is what is called a machine) you need to run a series of codes from your machine’s terminal or get GitBash to run it for you.

Starting with:

git add .
git commit -m "<your message here>"
git push

While I understand that it will help a fresh developer a lot to master git commands. I think it is ill-conceived and sometimes counterproductive to their learning goals. So, after using command line a couple of times I came across a very easy way to go about pushing my codes from my machine to Git.

Finding My Way Around Git Command Line

The easier alternative to using the Git command line is a very intuitive one that gets the job done without a single line of code. Of course, I am assuming that as a new developer, the only thing you do on Github is to push and fork new and existing projects.

To do this:

Download and install GitHub Desktop
Download a text editor, since we are all about intuitive and easy to use tools, I suggest VS Code. You can get it here.
Create a folder where you will save all your code.
Open your VS Code. Drag and drop the folder you opened inside the VS Code. Let’s name it codefolder. Create another folder, let’s call this one gitfolder. Abandon your gitfolder for now
After you’ve saved all your files in your code folder. Go to github.com (not your github desktop). Create a new repository
Make sure you didn’t add anything while creating your repository (leave the add README uncheck.
On the next page, click on set up in desktop.
That will take you to a dialogue box on your desktop. On the dialogue box, make sure you select URL at the top (Other options include “Github.com” and “Github Enterprise Server”) and your local path is gitfolder that we created earlier.
Click clone.
Now, copy and paste your codefolder or individual files inside it to your gitfolder.
Go back to your Github Desktop and you will see that your codes have been added to it.
At the summary side (left-bottom corner), type “initial commit” into the placeholder and click on commit to master.
All you have to do now is to press the publish branch button.
Congrats, your files are now on github. Go back to github.com to confirm it.

I know that this may seem like along method because of the number of lines I used in explaining it, but in reality, it takes less than a minute (and way less if you’re lazy like me) when practising it in real life.

As I’ve said earlier, this doesn’t mean you should not learn your git commands. Happy coding.

DEV Community: Isaac Melchizedek