DEV Community: Basecamp Community

Best Online IDE for Fast Development

Suraj Vishwakarma — Tue, 05 Oct 2021 06:26:31 +0000

Introduction

An Integrated Development Environment(IDE) provides us with all the tools for software development. IDE in the form of software runs on our local machine and helps us with the writing, compiling, and executing of the program/software.

Such IDE software can be heavy on the machine as it contains lots of tools and with the support of the extension, on every extension install it gets heavier. For quick computing having a local IDE can be painful as it takes a lot of resources for small work.

Online IDE can be launched quickly. It requires fewer resources and can be very handy for the quick execution of the program. You do not have to download dependencies to your local machine.

So let's get started and explore some of the best online IDE available on the web.

Repl.com

Use our free, collaborative, in-browser IDE to code in 50+ languages — without spending a second on setup.

Repl.com is my personal favorite to run React-based projects online. It creates a react app way quicker than installing react app using a terminal on the local machine. You can start from scratch for writing programs in more than 50 languages or you can pick a template to start with basic code and structure for quicker programming.

CodePen

CodePen is a social development environment for front-end designers and developers.

CodePen IDE is best for fronted projects. It is mostly used for writing HTML, CSS, and JAVASCRIPT. The best part of CodePen is that you can be embedded into a website, some markdown editor like dev.to for blog. It makes it easier to share the code and output with others. You can create your template for coding or you can start from scratch. It supports Vue and Flutter too.

Online GDB

GDB online is an online compiler and debugger tool for C, C++, Python, PHP, Ruby, C#, VB, Perl, Swift, Prolog, Javascript, Pascal, HTML, CSS, JS. Code, Compile, Run and Debug online from anywhere in world.

Online GDB is best for writing small beginners level programs which can be executed in the terminal. It's simple and easy to use. It supports more than 20 languages.

CodeSandBox

CodeSandbox is an online code editor and prototyping tool that makes creating and sharing web apps faster.

Best for frontend development containing all the major frontend technologies templates. You can start coding in any frontend framework with few clicks.

GitPod

Gitpod is a natural extension to GitHub.

Gitpod is a great extension for GitHub. It offers a lot of features such as collaboration, workspace for coding, managing workflow for GitHub. One such feature is Online IDE for GitHub Repositories. You can access online IDE for any GitHub repositories by adding the prefix https://gitpod.io/# to the GitHub repository URL.

Last Note

I hope this online editor will help you with faster coding.

Thanks for reading the blog post.

Web Animation with CSS - Animation Property

Suraj Vishwakarma — Thu, 30 Sep 2021 08:45:29 +0000

Introduction

Continuing with the series of Web Animation with CSS. Today we are going to learn more about animation using CSS.

The last part of the series paved the way to start animating in web pages for beginners. You can read here.

So let's get started with today's topic.

Animation Direction

As the name suggests this property is used to alter the direction of animation. It has four values normal, reverse, alternate and alternate-reverse.

Code

{
 animation-direction:reverse
}

Codepen Example

In the above example, I have used the animation-direction with the value alternate. The animation first started as normal and for 2nd time it reversed. This happens alternately once normal and other times reverse. It becomes a sequence of animation looping again and again.

Animation Timing Function

The animation timing function helps you to control the animation speed curve. This curve defines the speed of animation transition at the different time frames. This curve helps you to make the transition smoothly.

Code

{
 animation-timing-function: linear;
}

CodePen Example

In the above Codepen, the ball is moving from top to bottom. The animation is not linear as the speed of transition changes. We have used animation-timing-function with the value ease. Using ease value the animation has a slow start and end but fast in between slow and end. There is various value to animation timing function, you can learn more about it here.

One such value of the animation-timing function is cubic-bezier. It let you create your timing function to control your animation. It takes 4 numeric values between 0 and 1. You can visit Cubic Bezier to create your animation timing function.

Animation Shorthand

Till now we have used lot of animation property to define animation such as animation-direction, animation-delay, animation-timing-function, etc. You can use shorthand technique to define all animation related property into single property that is animation.

Code

{
 animation: bounce 1s infinite ease;
}

CodePen Example

Weekly Newsletter of SurajOnDev

What you will get?

Read of the Week: 5 best articles hand-picked by myself from different platforms. This article will be developer, self-growth, and productivity-oriented.
Tool of the Week: A resource or tool link that will help in easing your work.
Our latest blog post: Latest 3 blog post from SurajOnDev that is me.
Free eBook and Resources: Occasionally you will get free eBook that are by developers and for developers.

Frequency: Weekly
Subscribe Here: Weekly Newsletter of SurajOnDev

Last Note

Now with these properties of CSS, you can have more control over your animation.

I highly recommend you to read our previous blog post of this series Web Animation with CSS - Learn the Basics.

Thank You for reading the blog post.

Web Animation with CSS - Learn the Basics

Suraj Vishwakarma — Sat, 11 Sep 2021 11:44:55 +0000

Introduction

Animation makes a web page more interesting, attractive, and interactive than any static web page that doesn't contain any animation. A ton of websites we visit each day but very few stand out in terms of the pure frontend. Animation in web pages makes our website stand out in a pool of websites.

So, I am going to start a series called Web Animation. In this, we will learn Web Animation using CSS from scratch. We will learn the various concept from basic to advance.

Starting with the first topics in web Animation are transform, transition, and keyframes.

Transform

Transform property helps you to add a 2D or 3D transformation to an element. It allows you to scale, rotate, move, etc. an element. Read here to know about all the values for transform property.

Code

{
 transform : scale(1.5,1.5)
}

CodePen Example

In the above example, the element with the class name smallcircle is given the transform property. We applied the translate value to change the location of the element. smallcircle and bigcircle together appears as concentric circles.

Transition

CSS transition property allows you to change the property of the element over a particular duration. As a value, we passed the property name to which we want to apply the transition. We can define duration, delay of transition separated by a single space in terms of seconds. You can learn about different values related to transition here

Code

{
 transition : background-color 1s;
}

CodePen Example

In the above codepen, we can see the circle is transitioning from left to right with a change in the color of the circle. We have applied transition property to the div with the class name circle. As a value, we have passed the property on which we want to apply transition with the duration of transition next to it. We can give a different value for the transition that can be separated by a comma(,). To trigger the transition we have used a hover selector. This has to define property and value to which transition happens from the initial value.

Keyframe

Keyframe allows you to control the flow of animation by giving different CSS styles set to different animation stages. It is the transition from one set of CSS styles to another. You can change the different properties of an element multiple times. You can use from and to to define the start and end of transition respectively. You can also use percentage to define multiple changes during different stages of transition, 0% to 100% percent are used. 0% for starting and 100% for ending the transition.

Code

@keyframe move{
 from{
   background-color:red;
}
 to{
   background-color:green;
}

Codepen Example

In the above codepen, we have three circles that are animating in a loop. We have define animation property such as animation-name, animation-duration, animation-iteration-count, and animation-timing-function. For transition we have a keyframe define using @. After defining the @keyframe, we have the name of the animation that is bounce and bounce1. As to define animation we have used percentage. We have 50% to define our CSS style for transition. As there are no 0% and 100% that makes starting and ending value for animation as the initial value of the property.

Last Note

Now with the help of transform, transition, and keyframe we can add basic animation to our web pages.

I hope, with this new power of animation, you will apply it in your next project to make it more interactive.

Thank You for reading the blog post.

5 APIs to Develop Your Next Project

Suraj Vishwakarma — Tue, 17 Aug 2021 12:39:33 +0000

Introduction

I like the power of APIs. They turn simple applications into more useful, informative applications. I have been using APIs to turn my thoughts into a real-life problem-solving application by creating weather and Covid19 statistics web apps.

You can develop some great applications with the use of the following APIs.

So let's begin the list.

API Football

If you are a fan of a sport like a football, then it will be more fun and exciting to work on a project that deals with football data. API football provides tons of data including teams, fixtures, live scores, predictions, etc.

Frankfurter

Frankfurter provides current and historic foreign exchange rates. Rates are based on data published by the European Central Bank. It's totally free and does not require a key to fetch data.

Poke API

All Pokémon data at one place with poke API. We all know about Pokémon, we used to watch the show in our childhood and many even today. This API shows data of individual Pokémon.

You can use the data to develop games for pokemon lovers using the statistics.

Responsive Voice

Responsive Voice API lets you convert text into speech. You can change the voice model based on text and language. You can also modify pitch, rate, and volume.

image via TechCrunch

TheMovieDB

The MovieDB as the name suggests it has a database for movies. You can use their API to develop web app revolving around movies and TV shows. It's free to use API, you only need a The MovieDB account to use.

You can develop a movie recommendation application using all the data.

Last Note

These APIs will help you to develop the website and you can use the data to run scripts for more functionality.

I hope you will create your next project using these APIs.

Thanks for reading the blog post.

How you tackle a bug?

Suraj Vishwakarma — Mon, 09 Aug 2021 11:08:15 +0000

Introduction

We all have encountered bugs either small or big. Sometimes it was quick and we solve the bug in few minutes but sometimes it even takes days for solving a particular bug.

So today, we are going to discuss "How we solve the bug?"

How I did?

I did following this when I encountered with bug:

First I tried all of my knowledge to solve the bug🧠
If it persists then I go to look on the web especially the savior Stack Overflow and documentation🌐
If it persists, mostly I take a break then I go for walk, listen to music, meet my friend, etc💆
After coming from break, most of the time I cracked the bug as I was able to see things that I was probably had missed during the coding👨‍💻
If it persists, mostly it won't, I call my other developer friends to have an eye on the bug😄

Discuss

What is your method of solving a bug?

10 Newsletters for Developers

Suraj Vishwakarma — Wed, 28 Jul 2021 05:53:55 +0000

Introduction

A newsletter can be a good source of getting updated about the progress that is happening within the industry, a programming language, or any particular topic and product.

Today's Newsletter provides much useful information that can be useful. It saves our time providing great articles, tips, useful resources, and et cetera.

So today, we are going to see 10+ newsletter that is created by developers and organization for developers.

So let's get started.

Weekly Newsletter of SurajOnDev

Time for self promotion. This is a weekly newsletter by myself.

What you will get?

Read of the Week: 5 best articles hand-picked by myself from different platforms. This article will be developer, self-growth, and productivity-oriented.
Tool of the Week: A resource or tool link that will help in easing your work.
Our latest blog post: Latest 3 blog post from SurajOnDev that is me.
Free eBook and Resources: Occasionally you will get free eBook that are by developers and for developers.

Frequency: Weekly
Subscribe Here: Weekly Newsletter of SurajOnDev

JavaScript Weekly

A newsletter of JavaScript articles, news and cool projects

What you will get?

JavaScript Tutorials
Articles
Jobs Details related to JavaScript
Code and Tools

Frequency: Weekly
Subscribe Here: JavaScript Weekly

PyCoder's Weekly

A free, weekly e-mail newsletter for those interested in Python development and various topics around Python and the communi‍‍‍ty:

What you will get?

Upcoming Python Events
Python Article and Tutorials
Discussion post of reddit
Python Jobs
Projects and Code

Frequency: Weekly
Subscribe Here: PyCoder's Weekly

Dev Digest

A Newsletter by The Dev Community.

What you will get?

Curated list of Articles based on your interest

Frequency: Mostly Weekly
Subscribe Here: Dev Digest

O'Reilly Newsletters

Stay informed. Receive weekly insight from industry insiders—plus exclusive content, offers, and more on the topic of software development.

What you will get?

Interesting Projects
Programming Articles
Exclusive Content
Offers

Frequency: Weekly
Subscribe Here: O'Reilly Newsletters

GitHub Explore

The perfect way to keep on top of everything GitHub. Every Tuesday, we’ll send you an email with everything we found for you in the past week based on your interests.

What you will get?

Trending Repositories
Trending Developers
Articles
Events

Frequency: Weekly/Daily/Monthly
Subscribe Here: GitHub Explore

Software Lead Weekly

A weekly email for busy people who care about people, culture and leadership.

What you will get?

Inspiring tweets
Article about People and Culture
Guide on Leadership

Frequency: Weekly
Subscribe Here: Software Lead Weekly

Newsletter by SitePoint

Get the freshest resources and stories for developers, designers, and digital creators in your inbox each week.

What you will get?

Tips for writing better code
Article for Web Development
Resources

Frequency: Daily
Subscribe Here: Newsletter by SitePoint

Hackernewsletter

They've put out a weekly newsletter of the best articles on startups, technology, programming, and more.

What you will get?

Articles handpicked by them
List of Books
Startup News
And some fun stuff

Frequency: Weekly
Subscribe Here: Hackernewsletter

Smashing Magazine

Every Tuesday we send out an editorial email newsletter with useful tips and techniques on front-end and UX. Subscribe and get the Interface Design Checklists (131 MB, PDF) as a lil' gift.

What you will get?

Tips and tricks for frontend
UI/UX

Frequency: Weekly
Subscribe Here: Hackernewsletter

Last Note

I hope this newsletter will be beneficial for you. Thank you reading the blog post.

5 Phase effective learning approach for developers

Rishabh Singh ⚡ — Thu, 01 Jul 2021 10:59:19 +0000

You can go through 1000s of tutorials & still end up being completely clueless on how to implement the concepts, you just learnt, in the right way. This is one of the core reasons why people couldn't get enough of following tutorials & ends up being in a state known as "Tutorial Hell".

This is a state where you never feel confident enough about your foundations & just wish to continue learning indefinitely without trying to apply the knowledge.

Here is 5 phase learning approach to learn any new tech effectively & escape tutorial hell for once & all!

Why & how? 🤔

Learning begins way before you start the actual tutorial begins. The first & foremost phase is all about the recalling & understanding the standard motivation of why you want to learn this. And why this particular technology? Why not something else?

Having an end goal in mind with a soft deadline can really do wonders. Meanwhile also make sure that you are ready to devote enough time for consistent learning.

Prioritize the consistency over intensity.

Learn by Building 🛠

This is where you start with the tutorial. Here take you time making yourself familiar with the basic concepts. Now it's time to start building.

For this, I always recommend following this approach:

Once comfortable with basic concepts, try breaking the project into its basic components.
Try to figure out how to build each component individually. (Feel free to use Google here)

Pause & Revise 🔁

Focus on using your brain to process information, not storing it. As you'll learn, concepts will automatically become a second nature to you.

This is where occasionally pausing the tutorial & going back for a revision will play a vital role eventually. No need to rush.

Debug 🐞

Now up to this phase, you've completed most of all the core concepts and have built a couple of projects. You are now at the end of the tutorial, but this where the real applied learning begins.

It's time to get into reading other's people code & trying to fix them.

You can find a lot of issues on GitHub for any kind of tech you're currently learning. Try finding a couple of good first issues & try fixing them. Feel free to reach out to the project owners & maintainers for clarification & guidance.

Final Showdown ⚡

You did great! Your foundations are strong & you're ready for the final phase.

In this phase, find a good but challenging project idea & try building it from scratch. Don't follow any tutorial here, you're supposed to this on your own. But feel free to make use of google, researching, or going back to the concepts if you feel lost at any point.

That's it for today!

This write up was inspired by Jessica Wilkins' article on "How to Learn from Tutorials the Right Way – and Not Get Trapped in Tutorial Hell".

📖 Read here: https://www.freecodecamp.org/news/how-to-learn-from-coding-tutorials-and-avoid-tutorial-hell/

Support

Thank you so much for reading! I hope you learnt something new today. Please leave a like, a lovely comment or feedback.

If you like my work please consider Buying me a Coffee so that I can bring more projects, more articles for you.

Connect with me

If you have any questions or doubts feel free to contact me on Twitter, LinkedIn & GitHub.

Feel free to post a comment/discussion here & I will try my best to help you :D

5 Website to Start Your Newsletter

Suraj Vishwakarma — Tue, 29 Jun 2021 13:21:49 +0000

Introduction

I unsubscribed a lot of newsletters every week that annoys me, flood my inbox, and distract me from useful messages. They did many things wrong in terms of email formatting, sending to people who are more likely to unsubscribe, and many more.

Today, we are going to look into "How a DEV newsletter should be created and marketed?".

So let's get started.

What is Newsletter?

Let us start with the basics.

Email Newsletter is a type of email that is sent to the subscribed user to inform them about promotions, latest news, updates, tips, event, and many other things.

The newsletter has been part of marketing for a long time. E-commerce websites have utilized it for sending offers and discount updates to their customer. Users of these websites are more likely to buy something through their newsletter.

If you own a website then a newsletter becomes an essential part to drive traffic to your website. Every user that visited your website will not return to your website unless and until you send a notification to them about new things about your website. This can be informed through a newsletter that drives traffic to your website.

When Newsletter will not be unsubscribed?

Newsletter should not only inform but also provide content to users that engage them with your newsletter. If we use a newsletter to provide benefits to users then there will be fewer chances of getting unsubscribed.

Subscribe to Our Weekly Newsletter

Subscribe Here

Benefit of Newsletter

Driving Traffic Back to your website
Informing about new product
Building loyal followers
Building one-to-one relation with your followers
And Many More

Recipe for a great newsletter

As the saying Content is King. If your newsletter values the time of the user with useful content then your newsletter will grow. I have read the article where bloggers used to send a random newsletter without any useful value to their users, this led to many unsubscribed and less opening rate. After changing to the content-oriented newsletter, they have seen growth in their newsletter in terms of opening rate, less unsubscribe rate and more subscribers count.

So first thing is that your newsletter must provide value to your users.

Points to consider

When you have decided to start a developer newsletter, then you should consider the following points:

Your Audience: To whom you are sending, their needs, and what they expect from you.
Goal: What is the goal of your newsletter? It can be generating web traffic, more sales, providing information, etc.
Content: Content that will engage your users. It can be blog post links, exclusive content, promotional deals, etc.
Frequency: What will be the frequency of your newsletter? It can be daily, weekly, monthly, quarterly, etc.

Websites

Many websites can help you in creating, managing, marketing, and sending the newsletter to your users.
Here is popular to try out:

GetRevue

Revue makes it easy for writers and publishers to send editorial newsletters — and get paid.

Mailchimp

Mailchimp is the All-In-One integrated marketing platform for small businesses, to grow their business on your terms. It's easy to use - start for free today!

Sendinblue

Sendinblue is the smartest and most intuitive platform for growing businesses. Thrive digitally as we guide your business with the right marketing & sales tools.

GetResponse

GetResponse offers an online platform for email marketing software, landing page creator, webinars hosting, and much more.

Stripo

Stripo provides email builder solutions for multiple industries and teams · Rich integrations with the most popular email systems and clients.

Weekly Newsletter of SurajOnDev

I am very glad to announce that I am going to start a newsletter that will send to you on weekly basis mostly on Friday.

What You will get?

Read of the Week: 5 best articles hand-picked by myself from different platforms. This article will be developer, self-growth, and productivity-oriented.
Tool of the Week: A resource or tool link that will help in easing your work.
Our latest blog post: Latest 3 blog post from SurajOnDev that is me.
Free eBook and Resources: Occasionally you will get free eBook that are by developers and for developers.

If this excites you then make sure to subscribe it as the very first issue is coming this weekend.

Subscribe Here

Last Note

I hope this article will help in kickstarting a newsletter of your own. This was a quick guide to think about starting a newsletter with the website to kickstart.

This is the very first blog post of the Developer Newsletter series. We are going to discuss more newsletters in the coming days. So follow me to get an update quickly.

Tiny Habits for career growth as a developer

Rishabh Singh ⚡ — Mon, 28 Jun 2021 03:40:10 +0000

The 3 most important aspects in the career growth of a developer are:

Developing your skills 💻
Establishing online presence 🌐
Networking 💬

Let's pick them up individually and learn what they mean & how we can build some easy-to-follow habits around them to stay on top of things.

1. Developing your skills 💻

The first step in your dev career is to start learning & developing your skills. There are many ways you can do this, try what works best for you! This involves building projects, practicing Leetcode, contributing to open source, etc. At the end of the day, everything comes down to finding what you're good at and focusing more on it.

Suggested Habits:

Build one small project every month
Solve at least 3 Leetcode problems every week
Solve one good first issue every week

2. Establishing online presence 🌐

Having an online presence on platforms like Twitter & LinkedIn is very vital for your career. You need to get noticed to attract opportunities. Good thing about these platforms is that it's easy to grow here despite of having a small following initially. However, you still need to give it some time by showing up on regular basis. I recommend devoting at least 30 minutes every day to building your online presence.

Suggested Habits:

Post at least once a day on Twitter
Post at least once a week on LinkedIn
Engage with the other like-minded people for 15 mins per day

3. Networking 💬

You might be wondering what's the difference between building online presence vs networking? 🤔 Well, networking is all about directly engaging with people you're interested in through DMs, etc. Days of randomly applying to hundreds of jobs and hoping to get selected in at least one are over now. Traditional hiring system is slowly fading away, this is the time you need to show how innovative and creative you are to directly attract recruiters to yourself. Networking plays a key role here to help you connect with potential employers and remain in their vision. This is also great for getting referrals and off campus opportunities.

Suggested Habits:

Reach out to companies & startups and appreciate them that you like their products & how enthusiast you are about the work they are doing.
DM to one of the persons you admire & ask for advice meanwhile showing your passion.

That's it for today!

This write up was inspired by Ken Rogers' article on "How to Use Small and Sustainable Habits to Get Your First Dev Job".

📖 Read here: https://www.freecodecamp.org/news/how-to-use-small-sustainable-habits-to-get-your-first-dev-job/

Support

Thank you so much for reading! I hope you learnt something new today. Please leave a like, a lovely comment or feedback & also consider following me as I regularly post useful & informative articles to help you become a better programmer.

If you like my work, please consider Buying me a Coffee so that I can bring more projects, more articles for you.

Connect with me

If you have any questions or doubts feel free to contact me on Twitter, LinkedIn & GitHub. Or you can also post a comment/discussion here & I will try my best to help you :D!

MLH INIT - Quick Guide to Participate 🤩 and Win Swag🎁

Suraj Vishwakarma — Sat, 26 Jun 2021 07:25:30 +0000

One of the biggest hackathons organizers, MLH is comping up with a global event called MLH INIT.

What is MLH INIT?

MLH INIT is a weeklong celebration starting on June 27th to July 5th, of hackers from around the world where they come together to hack, learn & have a hell lot of fun 🔥 Complete Daily & Weekly challenges to earn points & climb the leaderboard. Oh, did I mentioned about the exclusive MLH swags & stickers you'll be getting? 😍

Sounds fun! How do I register myself?

That's easy! Just follow these steps:

1. Register at https://hackp.ac/init

2. Join the Guild at https://discord.mlh.io/

Fill in all the details & Select Basecamp Community under Guild Membership

Joining a guild has a lot of benefits and will also work as your support system if you get stuck in any challenge.

3. Join our Discord at http://bit.ly/basecamp-discord

Our discord server is one stop shop for all your MLH INIT announcements and a great welcoming community.

4. Complete Swag form at https://hackp.ac/INITswag

In case you're not interested in swags, feel free to skip this step.

5. Submit your address https://hackp.ac/address

Address is required to send you the swags. In case you're not interested in swags, feel free to skip this step.

In case you get stuck somewhere while registering, let us know by dropping a comment on this blog, we'll help you out.

Get excited! 🤩 We'll see you there 😉

What was your first code editor?

Suraj Vishwakarma — Thu, 24 Jun 2021 02:29:10 +0000

Introduction

Today, we have known many code editors that offer more than a just code editor. They have many features and support for extensions to increase their features.

Back to when we code the first time, we were having less idea about code and code editor. So we used whatever was best or recommended.

So today, let's share about our first code and code editor.

My Experience

Batch Scripting Language was my first programming language. I used it to code my first program that was Hello World!
The Code Editor that I used was Notepad
No feature of a modern code editor, it was only me and notepad

Discuss

What was your first experience with code and code editor?

🔗 Connect with me:

Currently, on Twitter, I am posting about "How to write and grow blog?". If you want to write a more effective blog with tips, consider the follow button on Twitter.

With this completing 500 tweets🥳.

Thank you to everyone🤩.

As helping more people, I am going to tweet about writing and growing blog especially technical, in the coming days🔥.

So if you haven't followed me, please consider🤗.
— Suraj Vishwakarma @surajondev May 17, 2021

Twitter

Last Note

I am excited to read your experience.

10 Best Blogging Tools and Resources with TIPS🎁

Suraj Vishwakarma — Wed, 09 Jun 2021 15:13:05 +0000

Introduction

In learning you will teach, and in teaching, you will learn.
― Phil Collins

As Phil Collins said you will learn while teaching and one of the best ways for teaching and providing information to you is by writing a blog. Writing a blog will give a lot of opportunities in your career, you interact with many other people just like you and it will boost your confidence.

If you want to start or already had started, I am going to list down 10 Tools and resource that will surely help you in

Writing Blog Post
Finding Blog Post Ideas
Enhancing Content of your blog post
Creating Attractive Header Images . Generating Traffic for Your Blog
And Many More

So let's get started

Grammarly

Communicate With Impact. Ensure Everything You Write Comes Across The Way You Intend. Present Your Best Self Every Time You Type. Make Your Writing Clear and Engaging. Eliminate grammar errors. Easily improve any text.

I have been using Grammarly for a long time to check grammar mistakes. I helped me a lot in producing better blog post without grammar error and wrong tone of a blog post. In the free plan, it suggests great points to rewrite the sentence to resolve those issues. In premium, it suggests edits that you can just apply by clicking.

Canva

Thousands Of Custom Templates And Stock Images, Easy-To-Use Editing Features, And More! Priority Support. Simple To Use Interface. 200K+ Companies On Board. 100% Happiness Guarantee. Free 30 Day Trial. Services: Brand Kit, Magic Resize Tool.

My go-to web app for creating header images for my blog and other social media. It has tons of template for to start editing and make it own with their editing tools.

DropBox Paper

Dropbox Paper is a new type of document designed for creative work. Collaborate in real-time, assign tasks, make a to-do list, and more. Start today!

I recently found about DropBox Paper and it's super useful for writing the draft for your blog post. It supports markdown and it has a very easy sharing option. The shared person can edit and comment on a particular line, word, paragraph, or whole document which makes it suitable for getting an initial review on your blog post.

Notion

A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team.

Notion helped me a lot in noting all my research for my blog posts such as keyword, reference, goal, and key points for my blog. It can be used for multiple purposes like creating notes, to-do lists, table content, etc. It is highly recommended by many developers.

Google Keyword Planner

Find the right keywords to use in your Blog for SEO and reaching more people with our Keyword Planner tool.

Google Keyword Planner is for finding the right keyword for targeting the right audience for your blog post. You can find keywords from other websites and can research them on the platform. You can see the forecast of keyword weather traffic will rise or decline.

MailChimp

Mailchimp is the All-In-One integrated marketing platform for small businesses, to grow their business on your terms. It's easy to use - start for free today!

MailChimp is best for building email subscribers and creating a weekly newsletter to update followers about new posts, events or just providing information. I am going to start a newsletter for you all soon.

Typeform

Build beautiful, interactive forms — get more responses. No coding is needed. Templates for quizzes, research, feedback, lead generation, and more.

Typeform let you create survey form, quizzes, feedback form, etc. for your subscribers. Forms are interactive and one question at a time with many other features.

Quora

Quora is a place to gain and share knowledge. It's a platform to ask questions and connect with people who contribute unique insights and quality answers.

Quora is the best place for finding topics for your next blog post. You can look into the different questions and find out what people are interested in knowing. Search for your keyword, and follow topics related to your blog’s focus.

Discover recipes, home ideas, style inspiration, and other ideas to try.

I think you used Pinterest for searching, saving, and downloading images but it is one of the social media that drive direct traffic to your blog. Pinterest lets you create a pin, add a description and website to direct traffic from Pinterest.

You can follow Anastasia Blogger YouTube Channel to learn more about Pinterest marketing.

Wordpress.com

Responsive Mobile Themes and Dedicated Live Support. Get Started in Minutes! Live Chat and Email Help. Rich, Easy-to-Read Stats. Built-in SEO. Fast, Secure Web Hosting. Ad-Free Site w/ Paid Plan. Scalable and Secure. Upload Photos & Videos. Free Website Templates.

Wordpress.com is best for hosting your blog for free with a subdomain with wordpress.com. It is best for coders as well as a non coder to create beautiful blogging websites with their templates. Your blog post will be searchable through every search engine and it is recommended to WordPress Readers.

🔗 Connect with me:

Currently, on Twitter, I am posting about "How to write and grow blog?". If you want to write a more effective blog with tips, consider the follow button on Twitter.

With this completing 500 tweets🥳.

Thank you to everyone🤩.

As helping more people, I am going to tweet about writing and growing blog especially technical, in the coming days🔥.

So if you haven't followed me, please consider🤗.
— Suraj Vishwakarma @surajondev May 17, 2021

Twitter

Last Note

I hope this resource with tips will help you in acing your blogging career.

Thank You for reading the blog post.