DEV Community: 👨‍💻Rohit 🪄

Almost Quit Freelancing — 4 Tricks Changed Everything

👨‍💻Rohit 🪄 — Tue, 01 Apr 2025 19:18:04 +0000

Hey freelancers, ever feel like you’re stuck in a rut? I get it, I’ve been there too. Not getting clients, feeling lost when starting, and even now, some days are a total mess.

It’s like you’re shouting into the void, hoping someone hears you. But I’ve found some unconventional tricks that turned things around for me, and they’re simple enough for anyone to try.

Stop chasing clients, let them come to you.

Cold emails? Endless gig bids? Forget that. I started making super-specific content, like quick videos or posts about problems my dream clients face. It’s not about showing off; it’s about proving you know your stuff.

Tool: Grab Loom, record a 2-minute tip, and share it here on LinkedIn. Clients find you, already hooked.

Skip the boring portfolio—show real proof.

Instead of just listing projects, I share results: numbers, client wins, even a screenshot of a “you’re amazing” email. It’s a proof vault, not a brag book.

Tool: Use Tangible to slap together a quick case study page. Looks slick, costs nothing.

Take a “no-work” day every week.

Sounds nuts, right? But blocking one day for no client stuff—just rest or random ideas—keeps me sane and sharp.

Technique: On workdays, try the Pomodoro Technique (25-minute sprints) so you earn that break guilt-free.

Automate the annoying stuff.

Proposals, invoices, follow-ups—I used to drown in that. Now, I let tools handle it.

Tools: Bonsai for contracts and payments, TextExpander for instant email replies.

These tweaks took me from scrambling to steady. Freelancing doesn’t have to suck. What’s your biggest struggle? Drop it in the comments—let’s swap ideas!

freelancingtips

🪐Created Planets with pure CSS 🌍 - rohitcodes

👨‍💻Rohit 🪄 — Fri, 24 Mar 2023 16:13:28 +0000

Click on the Results button for source code, enjoy!!

Earth 🌍

Moon 🌑

Saturn 🪐

Suggest me some web dev project Ideas💡in comments 👇

👨‍💻Rohit 🪄 — Sat, 11 Dec 2021 22:14:01 +0000

Hello world
This is Rohit an another coding introvert, Who is struggling to find some webdev project ideas💡. Which I can complete as a challenge until the end of this month and year also whoever will see this post let me know what can you suggest me. Comment down in comment section below 👇.

Resons why I'm posting this question on blog:

Don't have audience on Twitter.
Here's my Twitter handle🐦
Twitter
Not either on instagram
Here's my Instagram handle 📸
Instagram
Part of amezing community😎.

Please let me know your idea in comment I'll share daily my experience on that projects with you.

With that said let's grow as community.

_Nothing to prove, Everything to improve.
_

Thanks for reading peace out✌️.

exit()

How to install react , A simplest guide

👨‍💻Rohit 🪄 — Wed, 17 Nov 2021 15:45:10 +0000

Intro:

Hey there this is Rohit, today I am going to share an easiest guide for how to install react for beginners, So let's get into it
Image: Photo by Lautaro Andreani on Unsplash

What is react :

React is amazing JavaScript library for building front-end user interfaces.

Pre-requisites :

Before installing react we need to install node which is cross-platform JavaScript runtime environment, with node it comes with npm i.e node package manager which allow you to install packages and dependencies.

click here to install node.js
note: If you have already installed node in your system you can skip this step and move on to next
Image by: rohitcode on LinkedIn

Let's Install React :

Installing React is the most easiest thing to do for that we need only one command in your terminal or PowerShell:

npx create-react-app project-name

That's it after this command press enter on your keyboard and wait for npm to install all the dependencies and packages.

Image by: rohitcodeon LinkedIn
Congratulations you have successfully installed react for the project, Now enter these following commands to launch react on browser:
open the project directory by this command: cd project-name Then npm start

If you see this, Now you are good to go.

Conclusion :

I hope you enjoyed this installation guide for React.js. If you have any questions or comments about this article, Comment me Thank you for reading, I am always excited when one of our posts is able to provide useful information on a topic like this!

Facebook's Virtual Reality Future: The Metaverse

👨‍💻Rohit 🪄 — Fri, 29 Oct 2021 12:03:53 +0000

Today Mark zuckerberg introduced metaverse at facebookConnect2021

Section 1: What is metaverse?

In the concept of Metaverse, virtual reality and augmented reality converge and merge, creating an immersive world that's fun and explorable.

But first, what is Metaverse?

Metaverse is an online space that emulates a real world. People use it to make virtual avatars, interact with each other, and find entertainment. People create Metaverse by opening portals and expanding existing virtual spaces using the technology of the future, and its social network, facebook.com.

Note that this article is part of The Facebook 10, a series of articles looking at key players in Facebook’s 10 year road map. This is the first of two articles on Facebook’s Virtual Reality future. You can find the second here.

Here’s a hint: you don’t need a VR headset to participate.

What does the future hold for facebook's virtual reality?

Mark Zuckerberg had just three words to describe the state of virtual reality today in his closing remarks at Connect2021:

Space exploration:

Ariel asks:

Space exploration

Mark has put a lot of emphasis on VR as being the future of virtual reality. The community was excited to get a glimpse of how much progress was being made, and it has been so excited that we have been asked to discuss it in detail on the final day of the Connect conference.

It may seem contradictory for our community to ask us to talk about the future of something that isn't here, but hear me out.

Mark Zuckerberg is betting the social network on virtual reality (VR). It's Facebook's best bet for the future of social interaction. VR will forever change the way we interact.

How does technology shape our world?

Will we get to live in virtual worlds like we lived in the gaming world? How do we feel about that?

Come and listen to panellists talk about what virtual worlds really are and what it means to be part of such a world.

Since virtual reality is the hot technology at the moment, everyone is talking about it. One of the most prominent examples is Facebook's Facebook's Oculus team recently opening up the Oculus store, allowing users to create a VR experience.

Why should you listen to this video?

If you're serious about developing for virtual worlds like Minecraft, this video is for you. Panellists will talk about the evolving nature of virtual worlds, hardware and app development.

The future of interconnectivity

In 2014 Mark Zuckerberg put together a manifesto outlining the future of connectivity which was a game changer.

Last year he announced Facebook's aim to connect everyone on the planet and introduced an initiative called "Connectivity for the rest of the world".

In its effort to achieve this goal Facebook will be using the above infrastructure which includes the use of solar panels and wind turbines. This will be a tough challenge as the post-oil world in the 1950's is already well and truly over. In fact in some places the distance between people is closer than ever and we don't even need technology.

About 800 million people have no internet connection at all, while millions more are restricted to mobile connections which are typically slow and expensive.

Conclusion

Facebook believes that user experience is a gateway to communication, media consumption and learning. What could we learn from their vision for future Facebook? We learn that they believe that virtual reality will replace television, game consoles and Facebook as we know it. I do not think the future of Facebook will be in a different way than the future of television was in our grandparents time. What we have to do as designers is to keep the user experience unchanged and work on the interactions to improve user experience and keep them engaged for longer.

CSS Grid Explained: How To Become A CSS Grid Master

👨‍💻Rohit 🪄 — Sun, 24 Oct 2021 03:48:23 +0000

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Section 1: What Is CSS Grid?

In its simplest form, CSS Grid defines eight major properties, each one triggering an effect when applied to the body element:

grid-template-columns — sets the baseline size for each row of the grid. This determines the size of each column.

— sets the baseline size for each row of the grid. This determines the size of each column. grid-template-rows — sets the spacing for each row. This determines the size of each column.

— sets the spacing for each row. This determines the size of each column. grid-gap — controls how much space between the row elements and columns.

— controls how much space between the row elements and columns. grid-template-areas — defines how grid rows and columns are supposed to be used (in terms of spacing).

How Does The CSS Grid System Work?

Let's take a closer look at how the grid system works in CSS.

The following code shows a screencast showing how to set a CSS grid system using Sass.

To create a CSS grid system, all we need is a grid, a container, and some content. A simple grid will look something like this:

There are three HTML markup elements you need to make the basic layout work. A new section of code in the layout element:

What The CSS Grid Algorithm Does

First, let's look at the HTML markup elements we need to use to create a CSS grid layout.

CSS Grid Layout's content and grid. There is a column-based grid which means each row has a column of content. This may look something like this:

There is a row-based grid which means each row has a row of content.

What Are The Advantages Of Using The CSS Grid System?

That’s the question many web developers are asking themselves. After all, floats and other box-based layouts have been around for decades, so what’s so great about the CSS Grid Layout?

The answer is in the name – CSS Grid Layout is a grid-based layout system which is more efficient and structured compared to floats. It has been made for the next generation of web design, combining simplicity with flexibility and reliability.

Before going any further, a few important notes:

No longer an experimental project, the CSS Grid Layout Module has been formally adopted by the W3C as an official specification.

It is designed to work across all browsers including IE11 and older versions.

How Do You Become A CSS Grid Master?

CSS Grid Layout Explained: How To Become A CSS Grid Master

Chances are you’re coming to the CSS Grid Layout, or the CSS Grid Module, for the first time today. Most of you already know what it is, and are still wondering how to become a CSS Grid master.

“What is the CSS Grid Layout?” is the first question you’ll be asked. The CSS Grid Layout was developed by Jake Archibald, currently the community manager at Microsoft. He was inspired to create CSS Grid after working on the previous Microsoft Edge blog, where he produced a manual layout system for the browser.

Practice, Practice, Practice!

Here’s a simple exercise for you: write down three tasks that you must accomplish in the next 10 minutes. Maybe it’s something small like remembering to buy milk and coffee, or it could be a more serious matter like finding out if a friend is okay after he or she accidentally got caught up in an accident. Whatever the task, we’re talking about putting pen to paper right now and finishing it in that timeframe.

Now, follow the logic of the time constraint: you’ve got 10 minutes to complete three tasks. To do that, you have to complete your tasks quickly, be decisive, and eliminate distractions.

Any of these characteristics can be traced back to business intelligence — a discipline that, over the years, has become embedded in every company’s DNA.

Learn the Rules of the Game

In CSS, it's easy to create some absolute divs. These elements have special behaviour, and so are defined by the CSS rules.
Learn to break these rules.

Learn to create floats.

Learn to use floats to define your own layout - not as it was defined in CSS before, but as you want it to be.

Learn about positioning in the rows and columns, and how to use - or break - the rules about positioning.

Introduction to Preprocessors:

With CSS preprocessors, it's now possible to define an element, and give it all its visual appearance, even its colors, using the syntax of a CSS file.

Why Use Preprocessors.

Preprocessors let us define styles directly, and without having to load fonts and images first.

Use a Tool

Other tools to design a custom grid layout include:

Flashercase

Flashercase provides grid-based layouts with grids, borders and tabs, and supports grids by gridcell, column, row and table.

Hexgrid:
With Hexgrid you can easily create a customizable template or pattern with many options to suit your design and development needs.

GridWiz:
You can easily design a cross-browser compatible responsive grid and layouts that are optimized for mobile, tablet, and desktop.

Terraform:
Terraform allows you to easily build and theme a website. With the option of designing a grid layout for your website, you can easily make sure your website is compatible with mobile devices, works with web browsers with varying features, and is optimized for delivery with HTML5 and CSS3.

Keep it Simple.

The CSS Grid Layout Module is specifically designed to be used on desktop and mobile devices. Users can download it as either a CSS or a HTML module and use either of them to create their layouts. But note that it may still be too early to start designing and developing grids for both versions of IE11 and Android.

A Solid Foundation.
While the flexibility of the CSS Grid Layout Module might seem overwhelming, starting out with just four basic properties will ensure that your layout is mostly complete.

How to Create Your Own VS Code Extension: A Simple, Step-by-Step Guide

👨‍💻Rohit 🪄 — Sat, 23 Oct 2021 05:03:30 +0000

Section 1: What to keep in mind before creating an extension

1.1. VS Code has an extensive API, and most of the most common extensions such as Plugins (which lets you integrate extension functionality with your code), are implemented using its C# API.

1.2. However, some functionality which is currently implemented by extensions can be handled in different ways, such as importing files and helping users with syntax highlighting. Using some extensions can be an implementation detail, and hence, be added to your project in a way that can’t be changed later.

1.3. For each extension that is implemented, you should know its API so that you can use it to implement your own extension. This includes the extensions for the core editor UI, code language UI and some advanced extensions.

How to find out what extensions are already available

How to contribute

The key point here is that Visual Studio Code is built to be extensible, built by, and for, you. Add to that the fact that the code editor is open source (or in this case contributed back) and that there are a bunch of extensions already available, it’s easy to see how VS Code is designed for you to contribute to and get your own extensions made. But what exactly can I do in Visual Studio Code?

Extension Authoring

A simple example of an extension is a notification system. Although Visual Studio Code has many built-in features to accomplish this, for this example we’re going to build an extension from scratch. Here’s the problem: I want to be notified whenever my code works as expected, but it’s hard to know if my code is working as expected until I see a log.

How to create a VS Code extension

We have assembled this post to answer all your questions about building extensions for Visual Studio Code. Before starting this post, I would like to mention that most of the information presented in this post is for Visual Studio Code 1.5 or later.

The post covers all the steps involved in creating your own VS Code extension. This post will go over the entire journey that you will go through from signing up and activating your extension, installing the extension in Visual Studio Code, adding user-defined functions, extending VS Code, creating a command line script to install, and finally, to uninstall the extension and remove the package.

Create a New Extension Project

To create a new extension project, go to Extension Projects > New > Create New > Extension.

Using the VS Code Quick Open command to open your project folder

An awesome developer experience all wrapped up in a streamlined package

Extensions are perfect for automating tasks, right? Great! But how do you go about writing a VS Code extension for something as simple as viewing the contents of a folder?

This week, I’ll be walking you through the steps necessary to do just that. I’ll introduce the build process you can follow if you want to go for it on your own, and provide a full preview of the extension I created.

Prerequisites

Nothing below assumes you know what you’re doing. In fact, I’m hoping you’ll share the extension that we build and have a chance to show it off! I’ll feature your extension on this blog, too!

I’ll be using Visual Studio 2015 Community Edition (included with VS 2015 RTM) on an OSX machine.

Create a Package.json file to list project dependencies

Package.json file to list project dependencies Create an extension.json to define extensions dependencies

Extension.json to define extensions dependencies Add ASP.NET Core dependencies

Adding ASP.NET Core dependencies Start Visual Studio Code

Development Steps

To create a package.json file, first you will need to configure Visual Studio Code to use it. Next, if your Package.json doesn’t already exist, create a new one by going to Settings | Project | Generate New Project . Copy the contents of the contents of the below.json file and paste it into the new project’s root folder:

{ "name": "Hello VS Code Extension", "version": "1.0.0-dev", "description": "A simple, step-by-step guide.

Add a tsconfig.json file for TypeScript compilation

For all things Visual Studio Code related, read on!

Let’s take a look at the process of creating an extension.

Step 1: Build a Visual Studio Code extension

First, let’s explore how to build Visual Studio Code extensions. For the purpose of this post, a Visual Studio Code extension is a .vscode file, which has the extension .vscode. As of Visual Studio 2017 RC and the next Visual Studio Update, extensions can be used for installing, managing and editing .vscode projects. If you want to create an extension for a version of Visual Studio other than Visual Studio 2017, you have to add the below components to your extension project.

Add the source files for your VS Code extension, e.g., .vscode/.

Write a component definition with your extension

Create the extension once, build and share the executable with friends

Do the same with the Maven-based .vscode-maven

Step 1: Create a New VS Code Extension

Let’s start with creating a simple extension — let’s create an extension that allows me to delete an item from an ItemGroup tree. First, create a new VS Code Extension.

Step 2: Write a Component Definition

In order to build a component definition for your extension, you must write code that defines a component class. This class represents a container that all of your components will be added to. This component will also define how the application will be able to register these components.

Run your extension locally by using npm start or yarn start

Why is there so much choice for VS Code extensions? And are any of the extensions useful?

Working with and customizing extensions

Want to use a new input style, different syntax highlighting, use new features?

Lets you target multiple devices and languages without leaving your editor

You can even write your own extensions for your own IDE (or your IDE can be your extension)?

Reasons why VS Code extensions are useful

While this guide is targeted to beginners, most of these steps should be very intuitive for seasoned developers.

Publish or share your extension with others

Extend VS Code with extensions for team collaboration and mobile code

Check out the Visual Studio Code Add-on Directory to browse a large collection of plugins available for VS Code.