DEV Community: Saad Irfan

Setup Next.js blog under a minute

Saad Irfan — Sat, 07 Jan 2023 15:41:08 +0000

The title pretty much gives it away. I have built an open-source tool that you can use to build a Next.js blog with Markdown in under a minute without looking at tutorials online.

When I was building my blog with Next.js last year, I had to read a lot of documentation to develop the basic infrastructure. So when I was thinking about 2023 and my goals in terms of open-source, I got this idea to build an unopinionated tool that anyone can use to set up a Next.js blog site quickly.

Hence, introducing you to create-nextjs-blog.

create-nextjs-blog

Let’s look at what create-nextjs-blog has to offer right now:

Blog: Run a single command to set up TypeScript or JavaScript blog
Tailwind CSS: Supports Tailwind CSS out of the box so you don’t have to set it up if you want to use it for your blog
Unopinionated: Completely unopinionated meaning you can build whatever UI you want without thinking about breaking anything
Category: Easily create different blog categories with each category having its individual page where all the blogs of that category are listed.
Post: Create a new blog post by creating a new markdown file inside the posts directory
Route: Automatically create routes for your blog posts based on the markdown file name. For instance, if the file name is hello-world.md, its route will be /blog/hello-world.
SEO: Offers basic SEO using markdown file frontmatter
Markdown components: Build React components and use them in your blog markdown file

Live demo of the blog

Installation

# use it with npx (recommended)
npx create-nextjs-blog@latest

# install the CLI globally
npm i -g create-nextjs-blog@latest

Usage

# npx: create a new Next.js blog
npx create-nextjs-blog@latest

# npx create a next Next.js blog with TypeScript
npx create-nextjs-blog@latest --typescript

# npx create a next Next.js blog with Tailwind CSS & TypeScript
npx create-nextjs-blog@latest --withTailwind

# npx create a next Next.js blog with JavaScript
npx create-nextjs-blog@latest --javascript

# global: create a new Next.js blog
cnb

# global: create a next Next.js blog with TypeScript
cnb --typescript

# global: create a next Next.js blog with Tailwind CSS & TypeScript
cnb --withTailwind

# global: create a next Next.js blog with JavaScript
cnb --javascript

Once the blog is set up, run the Next.js app and navigate to http://localhost:3000/blog to see your blog. I highly recommend using Vercel to deploy your blog.

Demo

You can read the complete documentation here to learn more about how to create a blog post, new category, and React components that you can call in your markdown file.

Wrap Up

That’s all, folks! If you find this tool useful, don’t forget to give it a star on GitHub. Also, I am looking to expand this tool and I would highly appreciate your feature requests. You can use the GitHub issues to submit them.

Cheerios 🙌

Want to learn frontend development? Read this!

Saad Irfan — Fri, 19 Aug 2022 17:12:00 +0000

In the past, many people have asked me about a course or tutorial I recommend or know of to learn something (mostly related to frontend). So when I taught frontend development from beginner to advance level, I collected some resources. They had been in my Google Docs for more than a year.

Finally, I decided to curate a list of these resources and put them on GitHub. I compiled resources related to learning Git, HTML, CSS, JavaScript, Asynchronous JavaScript, React, Next.js, and more. I also listed some job boards where you can find jobs related to front-end development.

msaaddev / frontend-resources

A list of frontend resources from very basic to advance. Feel free to add new resources!

A curated list of frontend resources from very basic to advance. Feel free to add new resources!

Code Editor

Name	Description	Status
Visual Studio Code	A free and open source code editor for the cloud.	`free`
Sublime Text	A sophisticated, open source text editor for code, markup and prose.	`free`
Atom	A hackable text editor for the 21st Century	`free`
Vim	Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient.	`free`
Notepad++	Notepad++ is a text and source code editor for use with Microsoft Windows.	`free`
Brackets	With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser.	`free`

Resources

Name	Description	Status
Visual Studio Code Crash Course	In this

…

View on GitHub

The following are some JavaScript resources:

JavaScript

Name	Description	Status
Node.js	Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.	`free`

Resources

Name	Description	Status
Learn JavaScript - Full Course for Beginners	This complete 134-part JavaScript tutorial for beginners will teach you everything you need to know to get started with the JavaScript programming language.	`free`
JavaScript DOM Crash Course - Part 1	This crash course focuses on the DOM WITHOUT JQUERY. In this part we will talk about what the JavaScript DOM (Document Object Model). We will also look at how to change content and styles via these selectors	`free`
JavaScript DOM Crash Course - Part 2	In this video we will learn how to traverse and move around the DOM with properties like parentNode, parentElement, nextElementSibling and so on. We will also learn how to insert elements with createElement() and createTextNode().	`free`
JavaScript DOM Crash Course - Part 3	In this lesson in the JavaScript DOM, we will be looking at different events and how to attach them to DOM elements with addEventListener().	`free`
JavaScript DOM Crash Course - Part 4	In this video we will take what we learned in the last 3 videos and create a simple Item lister project where we can add list items with a form, delete them and filter through them all with vanilla JavaScript and DOM properties and methods.	`free`
Async Javascript Tutorial For Beginners (Callbacks, Promises, Async Await)	Asynchronous JavaScript crash course	`free`

Want more resources?

You can find more of these resources on the GitHub repository I have placed above. Don’t forget to star the repo if you found the resources I have collected useful.

I got featured for my work with Tailwind CSS

Saad Irfan — Thu, 15 Jul 2021 19:26:12 +0000

I am thrilled to share that my open-source work got featured in Cooperpress's Node Weekly newsletter. Cooperpress newsletter is one of the most reputable, followed newsletters in the developer community with almost half a million subscribers. You can read the newsletter here.

I subscribed to Cooperpress a year ago. I remember at the time I thought what would one has to do in order to get featured in such newsletters. Hence, you can imagine my excitement when I got to know that it finally happened.

The funny part is someone who I don't know reached out to me on Facebook to let me know that hey you got featured.

But why?

A month ago, I started dabbling with Tailwind and I totally loved it. But I hated the steps I had to go through in order to get started with it across different web apps. At the time, I thought I should just create a template repository with Next.js and React.js Tailwind integrated boilerplate.

The next day I thought why not just create a tool that can get me started with Tailwind and Next.js and React.js with a single command. And eventually, I started working on new-tailwind-app. One thing led to another and I expanded it to support almost all the frameworks that are in the documentation of Tailwind CSS.

Next steps

I am planning to integrate many different frameworks with the new-tailwind-app and also to included TypeScript support in the upcoming weeks. I am also planning to shape it in a way to make it a one-stop tool for developers which they can use to easily get started with Tailwind across many web frameworks.

I also wrote a piece about why here on dev.to explaining why I built this tool. You can read it here.

Cheerios 🤞🏻

Hitchhiker's Guide To Writing Your First Open-source software

Saad Irfan — Mon, 12 Jul 2021 14:21:55 +0000

This article is written just from my perspective to help out beginners. If you disagree from anything in this piece, I respect that.

Before you start reading this article, let me just stop you right there. Why!? You asked and I obliged. To congratulate you! Confused!? If you have decided to give this piece a go then at some part of your mind you want to take the first step towards open-source and I am really glad that I can contribute to it. 🥂

Well today, I have something special for you. In the past, you might have used packages from one of the biggest open-source package repositories, i.e., npmjs. Today, I am going to teach you just how simple it is to write your own open-source node package and then publish it on npmjs.

Let’s do it in steps to make things simpler.

🏗 STEP #1 – Setting Up Everything

Every good open-source project contains some files that build confidence. For instance, having a code of conduct, contributing guidelines, and proper documentation goes a long way. Plus, don’t forget the license while we are talking about such files.

Since I have some experience myself writing open-source automation tools and packages, I decided to save you some time and cooked up something that you could use to get started with everything using a single command. But before I tell you about that, let’s create a folder called cross-path.

cross-path is going to be an npm package that will convert darwin paths to win32 and win32 paths to darwin.

Navigate inside this folder and type the following in the terminal:

npx create-foss-files --javascript

This is going to go ahead and set up everything you need for an open-source project.

Just so you know, I have also written a piece about the files you should have in an open-source project if you want to read it.

Once you are done, open this folder in your VSCode or preferred code editor and write your contributing guidelines in the contributing.md file.

🎩 STEP #2 – Writing Your Package Metadata

The files that have just been created would contain a package.json file. Safe to say that this file contains all the metadata of your project. Open it.

You will see many empty fields inside of it. Fill them one by one. Give your package a name, description, version, etc. Since I am writing a package to generate cross-platform paths, I am going to give it the name cross-path, some description to explain the functionality of the package, and fill out other stuff as well.

The file will look something like this:

{
    "name": "cross-paths",
    "version": "1.0.0",
    "description": "Converts paths from darwin to win32 platform and vice versa",
    "repository": "https://github.com/msaaddev/cross-paths",
    "author": {
        "name": "Saad Irfan",
        "email": "me@msaad.dev",
        "url": "https://twitter.com/msaaddev"
    },
    "main": "index.js",
    "license": "MIT",
    "scripts": {
        "format": "prettier --write \"./**/*.{js,json}\"",
    },
    "keywords": [
        "cross paths",
        "windows to unix paths",
        "unix to windows path",
        "darwin to windows path",
        "windows to darwin path",
        "path converter",
        "convert paths",
        "Saad Irfan",
        "msaaddev"
    ],
    "devDependencies": {
        "prettier": "^2.3.2"
    },
}

Make sure to give your package appropriate keywords related to the package you are building so people can find your package on npmjs.

💻 STEP #3 – Coding

The next step is to write the magic which some people also call code. Open the index.js file for this. I am not going to waste your time with this part of the process since it varies from package to package.

Although, I am still sharing the code of this cross-path package.

/**
 *
 * Author: Saad Irfan
 * GitHub: msaaddev
 * Twitter: https://twitter.com/msaaddev
 */

const logSymbols = require('log-symbols');
const nodePath = require('path');
const { toUnix } = require('upath');

/**
 *
 *
 * @param {path} - darwin path
 * @returns {path} - win32 path
 */
const darwinToWin32 = path => {
    if (!path) {
        console.log(`${logSymbols.error} Please provide a valid path`);
        return null;
    }
    return nodePath.win32.normalize(path);
};

/**
 *
 *
 * @param {path} - win32 path
 * @returns {path} - darwin path
 */
const win32ToDarwin = path => {
    if (!path) {
        console.log(`${logSymbols.error} Please provide a valid path`);
        return null;
    }
    return toUnix(path);
};

module.exports = {
    darwinToWin32,
    win32ToDarwin
};

There is one extremely important thing which I need to explain to you. You need to know what module.exports does.

‼️ module.exports exports anything you set equal to it. You can export anything (variable, object, arrays, functions, classes) from a file through this and it will export it as a module. If you look at the code above, you will notice that I am exporting an object through module.exports. The object contains two functions. So in turn, I am exporting two functions from this file via an object.

Make sure the function/s that you want other people to use via your package must be put inside of this object. I recommend you read this article to get a better understanding of module.exports.

You can use module.exports to modularize your code across multiple files. This will help the readability of your codebase.

Every module that you export can be imported in another file using the require keyword. ⚡️

I don’t know if you have noticed but I am using three other packages in the code above. I am importing it into my index.js file using the require keyword. Just so you know, this is how someone is going to use your code in their project.

📖 STEP #4 – Documentation

Once you are done coding your package, be sure to write a good documentation so people can actually use your package. The documentation plays a vital part in the success of any project.

For this purpose, open readme.md file and write things like features, installation guide, usage, any other information that you think is important, etc.

🎯 STEP #5 – Sign Up And Login

Before you can publish your package, you need to first sign up on npmjs.com. So go ahead and do this.

When you are done, open your terminal and type the following command there:

npm login

You will asked a bunch of questions like your username, email, password, etc. Answer them one by one. Now your computer terminal is connected with your npmjs account.

🚀 STEP #6 – Publishing

The last thing you need now is to publish your package on npmjs. For this, all you need to do is open your project terminal, and type the following there:

npm publish

This command is going to go ahead and publish your project. And that’s all. You have successfully published your first open-source software on one of the biggest platforms out there.

⚠️ Common Errors

This post can’t be completed with me telling you some of the common errors that you might see while publishing your open-source package.

Sometimes when you try to publish your package, you run into an error. It can be due to any of these two reasons:

A package with the same name already exists. In this case, either you need to change the name of your package or make a scoped package. Read more about scoped package here.
You have not updated the version number of your package before publishing it again. Everytime you have made a change and now you are publishing your package again, you would need to change its version. It is because you can not publish again on an existing version. I would suggest following semantic versioning.

I know I have not talked about writing tests. It is because I have tried to make this piece as beginner oriented as possible.

I think every developer is a magician who can produce magic via a few strokes of the keyboard (maybe not a few but you get the idea). I have also tried making a bit of a magic myself. One of them is the new-tailwind-app that can get you started with Tailwind integrated web app with a single command. You can see more of my projects here. Be sure to follow me while you are at it. 🙌🏻

Cheerios 🤞🏻

Files every open-source project should have

Saad Irfan — Wed, 30 Jun 2021 16:52:00 +0000

This is just how I like to go. Hence, I am sharing this with everyone. But if you do things differently and you don’t agree with what I have to say next then I respect your opinion.

Well, well, well! I see you are reading this post. That means you are intrigued and curious to know all the files you should have in your open-source project. Before I jump into this, I think you may also like my earlier article which you should definitely give a read if you are into Tailwind.

Tailwind CSS User? Read this!

Saad Irfan ・ Jun 24 '21

#tailwindcss #javascript #css #webdev

So that’s said, let’s jump into the highlight of this piece. Well, you see, I am not going to take much of your time. So if you just want to know the files, here is the list of them:

.editorconfig
.gitignore
.prettierrc.json
.npmrc
License
Code of Conduct
Contributing
Changelog
Readme

I see you are still reading. That’s awesome. That means I have your undivided attention (at least I hope so). So while I have it, let me explain each of these files and why you should have them in your project.

🎩 .editorconfig

In my opinion, every open-source project should have this file. Why? Glad you asked. You are building an open-source project. You are using your code editor and that editor is configured according to your needs. Now someone else wants to contribute to your project. When they clone your repo and open it in their code editor, they will have different editor settings. And now if they open a PR, you will notice all the weird style changes in the code. 😐

This is where .editorconfig file comes into the picture. The settings that you have added to this file will ultimately be used by all the other code editors. So if you have this in your project, and someone then clones your project, they will also get a copy of this file that has all the editor settings, and if they have set indent style to spaces and you have set it to tabs then for this project, tabs will be used for indentation.

Here is an example of the contents of this file:

root = true

[*]
indent_style = tab
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

Handy. Right?!

🏗 .gitignore

I am not going to explain this file much because I know you are a developer and if you are here, then you must have heard about this strange place called GitHub where all the developers put their work on display. And you must also have used git for version controlling your software.

Well if you have this file in your project then git will ignore all the files or folders you add to this file. Since you never commit your node modules to GitHub, you can just node modules inside this file and you are gold. Git will just ignore it now and you won’t see it when you write git status in your terminal. 🥂

Here is an example of the contents of this file:

node_modules/
/node_modules/

**.DS_Store*
ehthumbs.db

✨ .prettierrc.json

You need to write code that looks pretty and easy to read. Well, you can use prettier to do just this. Since I work mostly with JavaScript and Node.js for my open-source work, I always install Prettier as my dev dependency and add an additional script to my package.json file:

{
"scripts": {
        "format": "prettier --write \"./**/*.{js,json}\"",
    },

}

This script allows me to format my entire codebase using npm run format. If you carefully look at the script, you will notice that it actually contains a regular expression. You can modify it to include all the different file types you want to format.

Well, I still need to set some ground rules for Prettier to follow. Otherwise, again different code editors have different Prettier configurations set. So, in .prettierrc.json file, you define all the Prettier-related configurations. So if you run npm run format now, Prettier is going to follow this configs. ⚡️

Here is an example of the contents of this file:

{
    "trailingComma": "none",
    "singleQuote": true,
    "printWidth": 60,
    "useTabs": true,
    "tabWidth": 4,
    "semi": true
}

💥 .npmrc

If you want to set any npm-related configurations locally in your project, you can use this file to add them. For me, I just use this file to not generate a package-lock.json file. Well, because I don’t need it in production.

Here is an example of the contents of this file:

package-lock=false

🔑 License

Every and I mean EVERY open-source project should be licensed. This is a license file and the contents of it determine which license you want to use. Since I have authored more than 10 open-source tools, I often find myself going with the MIT license.

You can easily create this file by running a single command in your terminal:

npx license [license_name]

# for instance, npx license MIT

🧑🏻‍💼 Code of Conduct

This is another MUST have file for an open-source project. I think the name is quite self-explanatory. You can add a code of conduct in your project again using a single command. Just open your terminal and run this:

npx conduct

🙋🏻 Contributing

This is a markdown file that includes all the instructions that you want the potential contributors of your open-source project to follow. Everyone has different instructions. You can find the instructions that I usually go with here

‼ Changelog

Every open-source software should be properly versioned. With every new release, a new version comes in. This is another markdown file. It contains the changes that you have done across multiple versions of your project.

For instance, in version 1.0.0, you launched the beta version of your project. With version 1.1.0, you fixed a couple of bugs. Now you might want to add the changes you made to changelog.md file. So if anyone is using your tool, they can read this file and know instantly what exactly changed across a version. 💻

You can write your changelog file any way you want. Here is an example:


### v1.1.0

Fixed bug _____
Improve code of ____
Implemented feature ____

### v1.0.0

Implemented feature x that does ___
Implemented feature y that does ___
Implemented feature z that does ___

I am not going to get into how you should version your software. Maybe I will write another piece on it.

📖 Readme

I guess this is the most magical file in a project. The content you have in this file is shown in your project repository. So mainly, this file is used for documentation. And you should have great documentation if you want your project to be successful.

And there you have it, folks. These are all the files you should add to your open-source project. You can check this open-source project of mine where I have used all of these files. And while you at it, if you like it, don’t forget to star it. 😛

You can also follow me on GitHub where like many other magicians, all my magic lies.

Until next time, cheerios. 🤞🏻

Tailwind CSS User? Read this!

Saad Irfan — Thu, 24 Jun 2021 17:30:00 +0000

So, if you are like me, a frontend developer who loves to work with Tailwind CSS, then this article may just save you a minute or two in the future. You see folks when I started my journey with Tailwind, I went to the place where all the secrets lie when it comes to any framework or library. And yeah! you guessed it right. The holy documentation. 👨🏻‍💻

I opened the Next.js Tailwind set up guide and found out that that there were a bunch of steps that I needed to perform in order to get started with this beauty. And just like you, I did all the steps and voila! I had Tailwind integrated with my project.

After this, I started reading documentation and found out that the setting up process of Tailwind varies from framework to framework. So now, if you want to use Tailwind with your React.js project after using it with Next.js, the same setup steps won't do the trick.

Turns out I really hate when I have to spend an extra minute or two to get started with something. So like any other developer, I used my magic prowess to automate the crap out of it. And voila! Here comes the era of new-tailwind-app.

⚡️ new-tailwind-app

So, new-tailwind-app is a zero-configuration cross-platform tool that can integrate Tailwind with six different kinds of web frameworks using a single command. Yeah! I know. Magic, right?!

All you need to do is have Node installed in your computer and from there I got you covered. Just run the following in your terminal, and you are good to go:

npx new-tailwind-app@latest

You can see all the supported frameworks by typing the following command in the terminal.

# see all the features you get with the CLI
npx new-tailwind-app@latest --help

And that's a wrap, folks! If you find this tool useful, don't forget to star it. Now go ahead and utilise the power of open-source to do good and save yourself some time.

Cheerios 🤞🏻

Create a Next.js based PWA With Tailwind — create-next-pwa

Saad Irfan — Mon, 07 Jun 2021 11:20:25 +0000

So a couple of days back, I started learning about Progressive Web Apps (PWA) and how they make your web app a standalone desktop application and sort of like an android application. I was really intrigued by the whole concept. I knew about PWAs before but I have never experimented with them. And this time, I decided to do just that.

So to indulge in my curiosity, I went ahead and created a Next.js app with create-next-app. And afterward, I started making all the changes in the code that were required for a PWA. In the end, I was successful but it took me some time since I was coming from a background where I had no experience with PWAs.

Later I decided to use Tailwind for my project. I looked up its documentation and followed all the steps I needed to perform to set up Tailwind in my Next.js application. And here again, I spent some time figuring out what to do and what not to do.

After going through all this, figuring stuff out, I realized that some kind of automation tool can come in real handy when doing all these configurations. And that is when I started building create-next-pwa. 🏗

⚡️ CREATE-NEXT-PWA

create-next-pwa is an extremely lightweight, zero-configuration Node.js-based CLI tool that I have built to automate everything I have talked about above. It can set up your Next.js PWA with a single command:

npx create-next-pwa@latest [app_name]

If you want to set up Tailwind for your PWA, you can easily do this with create-next-pwa with a single --tailwind flag like this:

npx create-next-pwa@latest [app_name] --tailwind

I have also integrated Prettier as a dev dependency in the PWA. It means you can format your entire project when you are building your PWA by just running:

npm run format

Everything you needed to do before in order to set up a Next.js-based PWA with or without Tailwind can now be done with a single command. How awesome is that?! 🥂

If you still want to set up Next.js-based PWA by yourself, I would then recommend reading this awesome article by Eshwaren. And on top of this to integrate tailwind, you can follow the official documentation.

🙌🏻 WRAP UP

If you folks want me to integrate something else like I have integrated Tailwind then open an issue in the repository and I will get back to you. Also if you like this application, be sure to star it as well. 😉

Cheerios ✌🏻

Who Unfollowed Me – GitHub CLI 😢

Saad Irfan — Sun, 30 Aug 2020 10:28:13 +0000

There is a saying in the developer community that getting followers on GitHub is super hard. There are in fact memes about it.

I am a Computer Science student who mostly works with JavaScript and builds open-source tools. These tools are mostly Node.js based Command-Line Interfaces (CLIs) to automate stuff. You can check them out on my GitHub.

Two months back, I tweeted that I'm 14 people short of reaching 100 followers on my GitHub. This tweet got viral and more people followed me in two days than in two years.

😠 Who Unfollowed Me

Yesterday, I launched a CLI that lets you know who recently unfollowed you on GitHub. There is a small story behind why I build this CLI.

Actually, it happened to me more than twice that when I was about to reach 200, someone unfollowed me. GitHub does not provide any feature to let you know who did that. So I blended GitHub REST API and a little bit of creativity and voila! who-unfollowed-me came to life.

👨🏻‍💻 How It Works

Copy-paste the following command in your Terminal. If you're a Windows user, first run your Command Prompt or Terminal as Administrator. If you're using macOS, make sure to add sudo before the following command.

npm i -g who-unfollowed-me

Now run the CLI by writing the following command on your terminal.

unfollow

When you run the CLI for the first time, it will ask for your GitHub username. It will save it for later use.

After this, whenever you run the CLI by writing unfollow in your terminal, the CLI will show you who recently unfollowed you.

If no one has unfollowed you, it will also let you know this.

If you are a Windows user, make sure that whenever you run the CLI, first run your Terminal or Command Prompt as Administrator.

🙌 Wrap Up

Whenever you lose some followers on GitHub, you can use this CLI to know who unfollowed you. It would not be wrong to say that getting followers on GitHub is a different kind of happiness and at the same time losing them is an entirely different kind of pain.

The CLI is also on Product Hunt. Kindly, show some love and check it out.

Cheerios 🤞

🔍 Find Your Outdated VSCode Extensions

Saad Irfan — Thu, 30 Apr 2020 15:23:06 +0000

If you are like me & use VSCode as your code editor, you might then want to learn some tips & tricks about it. There is an awesome course on VSCode just for this, which at the end of it, turns you into a VSCode power user. ⚡️

Staying up-to-date with everything has become crucial nowadays whether it's your OS, a CLI, or your VSCode extensions. In this piece, I am going to show you guys an easy way to check your outdated VSCode extensions so you can then update them. Now without further ado, let's jump right in! 🙌🏻

👨🏻‍💻 VSCode Outdated Extensions

Follow the steps below to see your outdated extensions.

🚀 STEP #1: Launch your VSCode
📦 STEP #2: Open Extension's Area located at the sidebar.
✍️ STEP #3: Write @outdated in the extension search box.

Once you are through these steps, you will see a list of your outdated VSCode Extensions, if there are any. If there isn't, you will get the message of No extensions found.

That's it for today, folks! If you have found this piece useful then please hit the like button. If you have any questions, just drop them in the comment section below. Till then, cheerios! 🤞

VSCode Command Line Interface

Saad Irfan — Sun, 26 Apr 2020 16:50:06 +0000

Just when I thought VSCode can't surprise me anymore, it came out of the closet with something awesome & shocked me again. Did you folks know VSCode offers a Command Line Interface (CLI) that lets you do a bunch of amazing VSCode stuff right inside your terminal.

Before we go into details, let's first activate this CLI.

⚙️ Setting Up the CLI

Open your VSCode. Press ⌘command + ⇧shift + p to open the Command Palette. Once it's open, search for shell command & then select the option: Shell Command: Install 'code' command in PATH

When you are done, you will see a confirmation message at the bottom right corner of your VSCode & that's it. You have activated the CLI. 🙌🏻

🚀 Code CLI

As the name suggests, every Code CLI command will start with code. For instance, if you want to get your VSCode version, you can just type code -v.

You can also open any folder in VSCode by just typing code . in any terminal & then pressing enter

Code CLI also allows you to open any file of your project from your terminal. Just write code -r filename in the terminal & you are good to go.

We have added -r to reuse the existing window instead of opening a new one. You can also use the command code -d filename1 filename2 to compare to files with each other. ⚡️

These are just the tip of the iceberg. You can see all of the options that this CLI provides by writing code --help in the terminal.

That's it for today's, folks! If you like this piece, please hit the like button, and if you have a question, just drop it down in the comments section below. 🙌🏻

🔥 Make Your Code Look Pretty – Prettier

Saad Irfan — Fri, 24 Apr 2020 10:03:25 +0000

VSCode Marketplace offers more than 15k+ extensions to the developers. These extensions save tons of hours & make VSCode developer experience more & more impressive. All of these extensions are open-source which means you can contribute to any of your favorite extensions.

🙌🏻 Today we are going to talk about an extension that has made my life & the life of 6M+ developers so much easier. It is none other than Prettier – Code Formatter.

🤩 Prettier Auto-formatting with VSCode

Prettier is an opinionated code formatter that lets you format your code any way you like. It provides a lot of customizable options that you can use to define standards for your code. Hence, ultimately allowing you to code more & more without worrying about formatting. ⚡️

👨🏻‍💻 My Workflow

It would be unfair of me to not share with you folks my personal workflow with the Prettier. I like to code carefree. Formatting the code every time I write something new is a bit of hassle for me. Also, there are some other settings that I prefer like single quotes over double quotes, etc.

So to take care of that, I make use of a combination of VSCode settings that allows my code to format using Prettier. If you are interested in adapting my workflow then follow the steps below.

⚙️ STEP 1: Turning on AutoSave

Open your VSCode Settings and set the Auto Save to afterDelay.

📦 STEP 2: Adding key/value Pairs to settings.json

The next & final step is adding some key/value pairs in your settings.json.To open it, press ⌘ command + ⇧ shift + p & then search for settings.json.

Once you find it, hit Enter. It will open a JSON file. Add the following key/value pairs anywhere in this file.

{
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    "prettier.printWidth": 100,
    "prettier.singleQuote": true,
    "prettier.jsxSingleQuote": true,
    "prettier.tabWidth": 4
}

And, voila!! Now you can code carefree just like me 🙌🏻

🎩 Top 3 VSCode Themes in 2020

Saad Irfan — Wed, 15 Apr 2020 13:55:57 +0000

VSCode is the most popular code editor. The best part of VSCode is how extendable it is. It's actually a JavaScript and Electron-based application.

Today, I'm going to share three top VSCode themes you should try in 2020. This is an opinionated post on what I believe are the top themes in the VSCode marketplace.

1. 🦄 Shades of Purple

If you haven't tried Shades of Purple till now then, believe me, you are in for a treat. The author, Ahmad Awais, has so meticulously designed this theme that it makes you fall in love with your code editor. The documentation itself is a piece of art. Millions of developers are using this theme. Over 100 five-star ratings. ⭐️

2. 🦉 Night Owl

The number 2 on our list is Night Owl developed by Sarah Drasner who is the VP of the Developer Experience at Netlify. As the name suggests, this theme is specially designed for folks who work at night & need a theme that doesn't hurt their eyes. The theme also offers a lighter version for developers who are not into night mode. It has a five-star rating with over 400k+ installs. ⚡️

3. 🎛 Material Theme

The last one we got is the amazing Material Theme designed by Mattia Astorino. This theme has over 8M+ downloads & 2M+ installs. It gives you a blend of dark green with light green & makes your code look so elegant. It got a four-star rating and definitely worth a shot.

🙌🏻 So that's all for today. Do let me know what your favorite VSCode theme is in the comment section down below. Also, if you are interested in saving tons of productivity hours on a weekly basis then check the VSCode.pro course. This course will make you a VSCode Power User in no time.