DEV Community: Deeshan Sharma

10 Best Friends of a Developer: Essential Tools You Can't Do Without

Deeshan Sharma — Wed, 12 Jun 2024 11:02:04 +0000

Ever felt like a magician conjuring digital wonders with a few keystrokes? As a web developer, having the right tools can transform your workflow from tedious to seamless, making you feel like a wizard in the world of coding. While everyone knows about the basics like VSCode, Node.js, and npm, there’s a treasure trove of lesser-known tools that can turbocharge your development process. Ready to level up? Here are the top 10 must-have tools for every web developer.

1. Nginx

Nginx is more than just a web server; it's a high-performance, reliable reverse proxy server that can handle a multitude of tasks. It excels in serving static content, load balancing, and caching, making it a cornerstone for modern web architecture. Easy to configure and lightning-fast, Nginx helps ensure your applications run smoothly under heavy traffic.

Use Cases:

Serving Static Content: Efficiently serve static files such as HTML, CSS, and JavaScript.
Load Balancing: Distribute incoming traffic across multiple servers to ensure high availability and reliability.
Reverse Proxy: Forward client requests to backend servers, improving security and performance.

Alternatives:

Apache HTTP Server
Caddy
Lighttpd

2. PM2

For those who rely on Node.js applications, PM2 is a process manager that simplifies running and maintaining your apps. It offers powerful features like automatic restart, monitoring, and load balancing. With PM2, you can ensure your applications are always up and running, even after a system reboot or crash.

Use Cases:

Process Management: Start, stop, and restart Node.js applications effortlessly.
Automatic Restarts: Ensure applications automatically restart on crashes or system reboots.
Monitoring: Keep track of application performance and health in real-time.

Alternatives:

Forever
nodemon (for basic restart functionality)
StrongLoop Process Manager

3. VisBug

VisBug is a Chrome extension that brings design tools directly into your browser. It allows you to tweak CSS, analyze spacing, and manipulate the layout on any webpage visually. Perfect for front-end developers and designers, VisBug makes the process of debugging and prototyping in the browser intuitive and straightforward.

Use Cases:

CSS Tweaking: Modify and test CSS styles in real-time on any webpage.
Layout Debugging: Analyze and adjust the spacing and alignment of elements.
Prototyping: Create visual prototypes quickly without altering the actual codebase.

Alternatives:

Firefox Developer Tools (Grid and Flexbox inspectors)
CSS Peeper
Stylebot

4. Postman

Postman is an API client that simplifies the process of developing and testing APIs. With its user-friendly interface, you can create and send HTTP requests, inspect responses, and organize your APIs. It also supports automation, making it an essential tool for ensuring your back-end services are robust and reliable.

Use Cases:

API Testing: Send requests and verify API responses.
Automation: Create automated tests to ensure API endpoints work correctly.
Collaboration: Share API collections and environments with your team.

Alternatives:

Insomnia
Paw (macOS)
Hoppscotch

5. Webpack

Webpack is a powerful module bundler for JavaScript applications. It takes modules with dependencies and generates static assets representing those modules. Webpack’s ability to bundle various assets like JavaScript, CSS, and HTML ensures that your application is optimized for performance and easy to deploy.

Use Cases:

Module Bundling: Combine multiple modules into a single file for easier deployment.
Asset Optimization: Minify and optimize CSS, JavaScript, and HTML files.
Hot Module Replacement: Update modules in real-time without refreshing the browser.

Alternatives:

Parcel
Rollup
Browserify

6. Docker

Docker revolutionizes how applications are developed, shipped, and deployed. It allows you to package your application and its dependencies into a container, ensuring consistency across multiple environments. With Docker, you can easily replicate your development, testing, and production environments, simplifying deployment and scaling.

Use Cases:

Environment Replication: Create consistent development, testing, and production environments.
Microservices: Deploy and manage microservices efficiently.
Continuous Integration/Continuous Deployment (CI/CD): Automate deployment pipelines using containerization.

Alternatives:

Kubernetes (for orchestration)
Podman
LXC/LXD

7. GraphQL

GraphQL is a query language for your API, offering a more efficient and powerful alternative to REST. It allows clients to request exactly what they need, reducing over-fetching and under-fetching of data. This flexibility makes GraphQL ideal for complex applications where the front-end requirements can change frequently.

Use Cases:

Efficient Data Fetching: Request exactly the data needed, reducing over-fetching and under-fetching.
Schema Stitching: Combine multiple GraphQL schemas into a single schema.
Real-time Data: Use subscriptions to handle real-time updates.

Alternatives:

REST APIs
Falcor
OData

8. Jenkins

Jenkins is a continuous integration and continuous delivery (CI/CD) server that automates the parts of software development related to building, testing, and deploying. With a vast array of plugins, Jenkins can integrate with almost any tool, making it a linchpin in the DevOps pipeline.

Use Cases:

Automated Builds: Compile and build applications automatically after code changes.
Testing: Run automated tests to catch bugs early in the development cycle.
Deployment: Deploy applications to various environments automatically.

Alternatives:

GitLab CI/CD
Travis CI
CircleCI

9. Figma

Figma is a cloud-based design tool that allows for real-time collaboration among designers and developers. Its intuitive interface and powerful features make it perfect for designing user interfaces and creating interactive prototypes. With Figma, everyone involved in a project can stay on the same page, from concept to completion.

Use Cases:

UI Design: Create user interface designs for web and mobile applications.
Prototyping: Build interactive prototypes to demonstrate user flows.
Collaboration: Collaborate in real-time with team members on design projects.

Alternatives:

Sketch (macOS)
Adobe XD
InVision

10. ElasticSearch

ElasticSearch is a distributed search and analytics engine, ideal for projects that require advanced search capabilities. It’s used for log and event data analytics, full-text search, and real-time data analysis. Its scalability and speed make it a favourite for handling large volumes of data quickly and efficiently.

Use Cases:

Full-text Search: Implement powerful search functionality in applications.
Log and Event Data Analytics: Analyze log data in real-time for monitoring and debugging.
Real-time Data Analysis: Perform real-time analytics on large datasets.

Alternatives:

Solr
Algolia
Amazon CloudSearch

Conclusion

Equipping yourself with the right tools can make a significant difference in your productivity and the quality of your work. From handling server requests with Nginx to designing intuitive interfaces with Figma, these tools are the best friends of a modern web developer. Dive in, explore, and watch your development process transform into a well-oiled machine.

Ready to enhance your development toolkit? Start integrating these tools today and experience the magic!

How to Do Verified Commits on GitHub

Deeshan Sharma — Wed, 29 May 2024 10:05:41 +0000

Have you ever wished your GitHub commits could have that prestigious "verified" badge, similar to the coveted blue tick on social media? While I can't help with Instagram verification, I can guide you through the process of verifying your GitHub commits. Verified commits not only add authenticity and security to your work but also showcase your professionalism. Let's dive in and get your commits verified!

What Are Verified Commits?

Verified commits are a way to ensure that the changes pushed to a repository are genuinely from you and haven't been tampered with by someone else. GitHub uses GPG (GNU Privacy Guard) to sign commits and tags, adding a layer of security and authenticity to your contributions.

Below is an example of how a verified commit looks.

Why Should You Use Verified Commits?

Authenticity: Assures your collaborators and users that your commits are genuinely from you.
Security: Prevents unauthorized changes and tampering.
Professionalism: Adds credibility to your open-source projects.

The Problem with Unverified Commits

One significant issue with unverified commits is that anyone can pretend to be you by simply changing the git config settings. For example, someone can set their user.name and user.email to your details and make commits that appear to come from you. Without verification, these commits can mislead collaborators and compromise the integrity of your project.

An Example Scenario

Consider a situation where a friend makes a commit using your name and email address:

git config user.name "Your Name"
git config user.email "your.email@example.com"

Below commit was made using my friend's details from my account.

This commit will appear to be from you, but since you use verified commits, it will be tagged as Unverified on GitHub. This visual cue helps distinguish between genuine and potentially spoofed commits.

By using verified commits, you can ensure that only commits genuinely made by you carry the "Verified" badge, enhancing trust and authenticity.

How to Get Started with Verified Commits

Step 1: Install GPG

First, you need to install GPG on your system.

Windows: Download and install Gpg4win.
macOS: Use Homebrew to install GPG.

brew install gnupg

Linux: Use your package manager.

sudo apt-get install gnupg

Step 2: Check Existing GPG Keys

Before generating a new GPG key, check if you already have one.

gpg --list-secret-keys --keyid-format LONG

This command lists all the GPG keys available on your system along with their details. If you find an existing key you'd like to use, you can skip to adding this key to GitHub.

Step 3: Generate a GPG Key

If you don't have an existing GPG key or want to create a new one, generate a new GPG key.

gpg --full-generate-key

Follow the prompts to set up your key. Choose RSA and RSA (default), key size of 4096 bits, and set a validity period if you prefer. Enter your name and email address (use the same email address associated with your GitHub account).

Step 4: Retrieve Your GPG Key ID

After generating the key, retrieve your GPG key ID.

gpg --list-secret-keys --keyid-format LONG

You'll see an output similar to this:

/home/user/.gnupg/secring.gpg
------------------------------
sec   4096R/ABC123456789DEF0 2024-01-01 [expires: 2025-01-01]
uid                          Your Name <your.email@example.com>
ssb   4096R/0987654321ABCDEF 2024-01-01

Copy the long string after sec (in this case, ABC123456789DEF0).

Step 5: Add Your GPG Key to GitHub

Export your GPG key and add it to your GitHub account.

gpg --armor --export ABC123456789DEF0

Copy the output and go to GitHub > Settings > SSH and GPG keys > New GPG key. Paste the key there and save it.

Step 6: Configure Git to Use Your GPG Key

Tell Git to sign your commits with your GPG key.

git config --global user.signingkey ABC123456789DEF0

To sign all your commits by default, add this to your global Git configuration.

git config --global commit.gpgSign true

Step 7: Verify Your Signed Commits

Now, every time you commit, Git will sign the commit with your GPG key. You can verify that your commits are signed and verified on GitHub by looking for the "Verified" badge next to your commits.

Troubleshooting

If you encounter issues, ensure that your GPG key is correctly associated with your GitHub email and that you've configured Git correctly. You may also need to cache your GPG passphrase to avoid entering it every time you commit.

echo "use-agent" >> ~/.gnupg/gpg.conf
echo "default-cache-ttl 28800" >> ~/.gnupg/gpg-agent.conf
echo "max-cache-ttl 28800" >> ~/.gnupg/gpg-agent.conf

Restart the GPG agent to apply the changes.

gpgconf --kill gpg-agent
gpgconf --launch gpg-agent

Conclusion

Adding GPG signatures to your commits is a great way to enhance the security and authenticity of your contributions on GitHub. It assures others that your work is genuinely yours and hasn't been tampered with. Follow these steps to get your commits verified and add that extra layer of credibility to your projects.

Powerful VS Code Setup: Amateur to Pro

Deeshan Sharma — Fri, 14 Jan 2022 16:10:50 +0000

Believe it or not, VS Code or Visual Studio Code "Built by Microsoft" is the most popular and most used code editor among developers.

So in support of this, if you are a newbie or experienced developer, I am here to show you how you can boost your vs code game and experience a whole new level and get the most out of your code editor.

Topics Covered:~

Extensions to get the most out of your editor
Secret settings to improve the experience
Editor's makeover

How to install VS Code..?

If you already have it, you could just scroll to the next section.

Visit the Official Download Page and download according to your OS and install it.

There are more ways to install it:

Chocolatey (my preference) will cover this in another blog
Source code

Extensions to get the most out of your editor

The coolest thing about vs code is there is a huge community using it, hence you never feel left out, there are tons of extensions made by these awesome people which makes this the most useful feature of vs code.

I have listed some of the useful and cool extensions for you to save time.

General

Prettier: A code formatter for rescue, use common styling among all the files and projects
Eslint: It is code linter for JS & TS that will catch bugs even before you run the code
Tabnine: This is super awesome, this is the AI code completion assistant to amplify coding accuracy and boost productivity. This gives super-accurate suggestions
Code Spell Checker: This will save you from committing misspelled words and feeling ashamed later
GitLens: Helps you in multi-author projects by showing author blame on each line, see file history, and much more
Live Share: Enables real-time collaboration similar to Google Docs, multiple individuals could work on the same file, it enables to share the localhost, port, and even the terminal sessions most useful in pair programming
Path Intellisense: This will help in autocompleting the filename and file path
TabOut: Get out of the quotes, brackets, etc just using Tab and without the use of arrow keys
Better Comments: This helps in creating more user-friendly comments with different highlighting for different types of comment
WakaTime: It is responsible for metrics, insights, and time tracking automatically generated from your programming activity

Web Development

Auto Rename Tag: Renames the closing tag when you edit the opening tag or vice versa
Live Server: Launch a local development server with a live reload feature for static & dynamic pages
HTML Lint: Linter for HTML
Style Lint: Linter for CSS

Secret settings to improve the experience

Certain settings are turned off by default but are worth turning on and make life a lot easier. Open your vs code,

There are two ways to change the settings in vs code:

JSON Way (the preferred and easy way)
GUI Way

The JSON way

Open VS Code Command Pallet using the keyboard shortcut Ctrl+Shift+P on Windows or Cmd+Shift+P on Mac or hit F1
Type settings JSON in command pallet
Open 'Preferences: Open Settings (JSON)'
Now copy the following lines to your settings.json file

"files.autoSave": "afterDelay",
"files.trimTrailingWhitespace": true,

"editor.wordWrap": "on",
"editor.formatOnSave": true,
"editor.wordWrapColumn": 120,
"editor.formatOnPaste": true,
"editor.quickSuggestions": true,
"editor.inlineSuggest.enabled": true,
"editor.codeActionsOnSave": {
  "source.fixAll": true,
  "source.organizeImports": true
},
"editor.wordWrap": "on",
"editor.defaultFormatter": "esbenp.prettier-vscode",

// Extensions settings

"git.autofetch": true,
"git.allowForcePush": true,
"git.autorefresh": true,
"git.autoRepositoryDetection": true,

"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.updateImportsOnFileMove.enabled": "always",

"tabnine.experimentalAutoImports": true,

"prettier.singleQuote": true,
"prettier.endOfLine": "crlf",
"prettier.jsxBracketSameLine": true,
"prettier.printWidth": 120,

"eslint.validate": [
  "typescript",
  "javascript",
  "typescriptreact",
  "javascriptreact"
],

"better-comments.highlightPlainText": true,

GUI Way

First of all, open the settings page
hit Ctrl+, on windows or Cmd+, on mac to open the settings page or go to File>Prefrences>Settings
Now suppose for eg, you want to turn on the word wrap the entry in settings.json is:

"editor.wordWrap": "on"

so in the search bar enter editor.wordWrap and change the setting accordingly. This is the reason I prefer JSON way.

Editor's Makeover

It's time to change the editor's look and feel, I will walk you through some steps and you will love the way your editor looks

Theme

Let's start by changing the theme of your editor. There are numerous themes available in the marketplace. I have listed some of my favorites.

To change your theme:

Install the one you like
Now to select it hit Ctrl+K+T on windows and Cmd+K+T on mac and select your theme or click on the gear icon on the bottom left>Color Theme>Select the theme

Themes

Bearded Theme: There are 25 variations of this theme I have listed two of my favorite
- Black & Amethyst
- Anthracite You can see all of the variations on Official Bearded Theme Example
Cobolt2
Github Dark Theme
Tokyo Night

Icons

There are two types of icons in vs code:

File Icons: You see beside your files and folders, I prefer Material Icon Theme
Product Icons: You see all around the vs code, I prefer Fluent Icons

To change the icons theme:

Click on the gear icon on the bottom left>File Icon Theme/Product Icon Theme>Select the theme

You can also set the theme and icon theme from the settings.json file just add these lines

"workbench.colorTheme": "Bearded Theme Black & Amethyst", // your theme
"workbench.iconTheme": "material-icon-theme",
"workbench.productIconTheme": "fluent-icons",

"material-icon-theme.folders.color": "#42a5f5",
"material-icon-theme.folders.theme": "specific",

Font

When it comes to the font I love Fira Code, which also supports font legislature.

Noticed those symbols, these are called legislature, believe me, this adds a star when someone looks into your editor

Add these lines to your settings.json for the font configuration

"editor.fontSize": 15,
"editor.lineHeight": 25,
"editor.letterSpacing": 0.5,
"editor.fontLigatures": true,
"editor.fontFamily": "Fira Code, Operator Mono, Consolas, 'Courier New', monospace",

And for the final touch-ups add these

"editor.cursorBlinking": "expand",
"editor.cursorSmoothCaretAnimation": true,

Bored..? Well we have completed the setup and you are good to go. I hope you loved it.

Have I missed something..? or do you have something to share, please let me know in the comments.

Join me on Discord, invite your friends as well and let's get to know each other in a better way.

Till then keep hustling

README Template - The only one you need for perfect readme

Deeshan Sharma — Tue, 25 May 2021 15:45:24 +0000

In the Open Source world, the most powerful and useful document is a README file. It is a multipurpose thing, How..? Let's see that, It servers as the documentation for your project, it servers as the landing page too on your repository. So, it alone has the power of making and ruining your game. Then it's worth it, it should look professional and presentable as well.

Most of us spend lots of time on it because we are confused like what all things I should include in my readme file and make it professional + attention grabber. What is the use of having a readme if it doesn't fulfill its purpose?

So, this is the sole purpose of this article and you won't regret reading it and I am sure you will definitely take away something new.

What topics this article will cover..?

What is README?
What you should include in your README?
How to make your README memorable?
All-in-one README Template for you

TL;DR - Does it seems too long to read, skip to the end, and get my template

What is README?

README is a simple markdown file present in the root directory of any project whose sole purpose is to convey to the reader what this project is about, how to use the project, and some guides for installation and setup, etc. In simple words, it serves as the documentation, landing page of the project as it is the only most visible thing in a repository, it includes everything an end-user must know about. That is why the filename is written in all caps so it catches the reader's attention first.

What to include in a perfect README?

OK, we know what is readme but what to include in a perfect readme file.

Name of your project
Give your project a name it is a must-do thing. How would a user tell someone what he is using..?
Introduce your project
Introduce your project to the reader. Write four to five lines about your project, these questions will help you What it does? What is the purpose of building it? Who it is for?
Features of your project
Present an ordered list of all the features your awesome project has. You may include all the core functionalities and core features.
What you used for building it
Tell your readers what all things you used to build this awesome project. Use bullet points for it.
How to get started?
This section will guide your project users that how to start using your project this will include sub-sections:

What are the prerequisite? - If your project needs something beforehand then include them here so that the user may not end up in an error loop, for eg: your project needs python 3 or Node so list them using bullet points.
How to install? - Under this, you should include step by step procedure to install your project right from the beginning.

Todo a must-have thing
List all the things you plan to do or add to the project for eg add <this> feature <that> functionality. Why it is important to have? Suppose the reader wants to contribute to your project, so this will help him/her as they will know exactly like what should they work on? And this way both parties get benefited as your project will get a tick on todo and the contributor successfully done open source contribution.
Mention your future plans for the project
Mentioning your plans gives a positive impression to the reader that you are serious about what you do and will also sound professional.
How to use
Tell the user how he/she can use your project and take benefit from it. You can include screenshots, code examples, or anything relevant.
List all the authors
Tag all the authors with their profile link and also optionally you can mention what they did as the author in the project.
How to contribute to the project
Provide all the steps needed to contribute to your amazing project. You might have seen in various projects they tend to have a separate contributing.md file where they add a guide for the contributors briefly, you can also follow a similar approach in your project and add a link to that file in your README.
Credit all the contributors
Make sure you give credit to your project's contributors as they gave part of their precious time to your project. Also, it's a nice way to make Open Source feel like teamwork or a family. And it will motivate them to do more open source as well.
Add LICENSE information
Add license information if it applies to your project. As others are likely to use your project. You can use chooselicense to find an appropriate license for your project.
Link all the resources
You should link all the resources you used or took advantage of like articles, videos, or documentation, etc. So, that the reader could also go through them.
Add acknowledgement
If you have used someone's work {code, design, etc} or you took inspiration from someone then this is the right place to acknowledge them. Or sometimes you may be using something that is copyrighted and requires an attribution so you can do that here.

How to stylize your README and make it stand out?

There are several ways to make your README visually appealing and attractive, I'll tell you some of the most common ways.

Add project logo - The very first way your project could stand out is by simply adding a logo to your project and add that in the README at the top just before the project heading.
Add badges and shields - You can add badges or shields to show various things like it can show the number of issues, the number of pull requests, and what license has been used in this project. They look pretty cool in the README, I'm sure that you have seen them before on. You can use Shields.io to create shields and badges for your own project.
Add demo GIF/Screenshots again, a must - Make sure you include a demo gif/screenshots of your project (very important) because the reviewer may or may not have time to visit your live project so watching this he/she will get a sneak peek at the project and may visit it later. And also you have to update them when you update your project.
Add emojis - At last, you could use emojis in your README, nowadays lots of projects are doing this as it adds emotions and colors to it so it tastes more like human and less boring and robotic.

My all-in-one Template for perfect & awesome README

I've created a template for you that has all the recommendations made in this post + some extra stuff too. You can use this template to create your next project repository. If you feel like adding something or have any idea, fork it and create a PR and I'll definitely consider it. You may customize it as per your needs. You can find my template on GitHub here.

EndNote

If you like this post, please show some love and support by liking and sharing it. And consider subscribing to my newsletter to get such useful posts directly on your mail.

---: ALL THE BEST & KEEP HUSTLING :---