DEV Community: Prafulla Raichurkar

7 Things that helped me in my DEV Journey

Prafulla Raichurkar — Thu, 29 Feb 2024 14:16:56 +0000

Hey Folks!!

It's been a long time since I posted on this community.
I'm glad to say I am back :)

Here are 7 things which I have learnt along my DEV journey which has helped me personally to improve on my skills -

1. Solution before implementation

I can assure you, if you don't do this you'll have to re-write multiple times.

Whenever you are given with a problem -

Create a flow diagram which envisions all the negative scenarios and what will happen when that negative scenario occurs

In case there are multiple systems involved, each system can be a point of failure hence you have to consider the scenario when any or all of them are down.

Review with senior DEVs and subject matter experts.

2. It is what it says it is.

Most of the times we overlook the error message and try to debug things by ourselves and end up in circles. I have observed that 99% of the times the error is exactly what it says it is and it also suggests how to solve it.

Example :-

console.log(student.name)

The error is clearly mentioning that you cannot read an attribute of undefined

In this case you are reading the 'name', however the student object itself is undefined.

I've been here too many times.

Learning : Always read the error, try to understand the message and exactly at what line it is occuring

3. PR over direct merges and build before commits

If you are working on a project where there is a small team and code review flow is not setup, make it a habit to still make a pull request and review your own code.
I took this tip from one of my friends and it works wonders, when we wear a developer hat we enter the developer mindset to get things done, but post development we need to wear the reviewer hat and actually review our own code without bias. This will help you cut down on a-lot of bad practices, think about clean code and reducing redundant DB / API calls.
Always build your solution before committing code, we often over-look our code and miss out a semi-colon or have some typos. Introducing a small build / compile step before you commit will help you gain a clean history and reduce "Fixed xyz" commits

4. Modularize and Reuse, Plug N Play

Wherever possible try to identify a logic which does a generic thing and can be applied across solutions, remove that chunk out and keep it as a separate module which can be plug and play.
Keeping these common modules logically grouped outside the system will help you maintain them easily.
Learn concepts like unit of work, SOLID principles, segregation of layers, they will help you in the longer run.

5. Logging is ART.

Logs are like hints which will help you solve the crimes of the past.
While adding logs always keep in mind the functional requirement and add the necessary meta data which you feel will be required to cover that functionality.

Example - You have a page for admins where they can modify / add users to the application

In this context it is important to log the who, when, whom and why.

admin : "Prafulla"
action : "AddUser"
user: "PrafullaB"
reason : "Requested access to the portal and fits the role"
timestamp : "25-02-2024 12:30:00"

The above fields will change based on the functionality, however it is important to log the key fields by which you will have to search the logs to help you in times of difficulties / audits.

Never logs passwords in your logs.
Encrypt sensitive data while logging.
Too much of logs (or anything) is bad for health. Log only the crucial things and in case of exception handling.

Example : You have a method fetch_data_from_db() which fetches 1 million records from DB

  data = fetch_data_from_db()
  console.log("fetched data ")
  console.log(data) ❌

Log only the required things like the count of data fetched and in case of failure exception -

 try:
    data = fetch_data_from_db()
    console.log(`fetched ${data.length} records`)✅
 catch:
    console.error("Failed to fetch data")

There's just a-lot of useful things we can do by optimizing the logs.

6. Prevention is better than cure

Yes you read that right, you don't want to end up losing company reputation and tons of money by overlooking security measures.

If you have an application with a-lot of users and contains sensitive data, it is extremely crucial to ensure the right security checks in place -

Encrypt Passwords
Mitigate Risks of SQL Injection
Check that a proper role based authentication is established which functions correctly when new users are added and removed.
Whitelist third party APIs ... (This list is never ending, implement security measures based on your application scale and criticality)

7. Unlearning

Many times we learn things and connect the dots unknowingly without knowing what's happening at the back-end. I have learnt that as I keep learning more about the systems and architecture I keep realizing how limited my knowledge is in the domain.

The skill of unlearning has helped me tremendously cut down a-lot of misinformation and wrong methods which I learnt in the process and replace them with actual facts.

That's a wrap for now. Thanks for reading ^_^ 💖
Feel free to discuss and add your learnings in the comments.

Sorting Hat

Prafulla Raichurkar — Fri, 19 Nov 2021 18:04:07 +0000

Want to know which Hogwarts House would you fall into? Come and let the Sorting Hat cast judgement upon you! Fall into one of the 4 Great Houses of Hogwarts and win a GitHub Badge to showcase on your github profile! ✨

⚡ https://gh-sorting-hat.netlify.app/

Badges 🛡️

For more info checkout our repository

prafulla-codes / sorting-hat

🧙 Want to know which Hogwarts House would you fall into? Come and let the Sorting Hat cast judgement upon you and win a README badge ✨

How I Created My Portfolio: From Thought Process To Deployment.

Prafulla Raichurkar — Fri, 11 Sep 2020 08:08:59 +0000

It had always been in my bucket list to have a portfolio before entering the corporate world and I am glad to share that around a month ago that task has been completed🎉.

You can check my portfolio at https://prafulla.tech.

In this post, I would like to share my journey from thought process to deployment.

I would break down the entire process in the following section

Planning & Design
Project Strucutre
Optimization
Deployment

Planning & Design

In this phase, I have used a browser-based design & prototype tool Figma. Other tools like Adobe XD, Sketch, etc would also work.

This is the Figma planning board for my portfolio.

The reason why I have put the planning & designing phase on a single page is that it makes implementing thoughts into actions easier.

The planning phase consists of two steps:

Objectives

Writing down basic requirements expected out of the portfolio helps in generating a stronger purpose & makes one think twice if the implemented design & content will fulfill them.

Example:-

References

Before directly jumping into development & design, it's better to refer some sample websites and list out some idea's you like about them.

You can find reference websites easily by simply searching
Top portfolio websites in <xyz> field.

Following are some of the portfolios I referred:

Make a note of features that you feel you must have in your portfolio.
Example:-

Designing Phase

This is the phase where I put the visualized design into action.

I put my design in the following format for every page/section.
Requirements
Light Mode Mobile & Desktop View
Dark Mode Mobile & Desktop View

Example:-

The Requirement specifies the components which I feel should be present in this page/section.

Putting requirements besides section designs helps find creative ways to implement the requirement and also reduces the chances of missing out putting important details.

Project Structure

In this section, I would like to talk more about the tech stack I have used & the way I have organized my code.

I have used react.js to create my portfolio since I had just started learning about javascript frameworks at that point in time.

My portfolio is totally static with no back-end requirement, hence there was no need to implement complex state management, database connectivity, etc.

I have used SASS, which is a CSS Preprocessor which makes styling components more flexible.

Stack Used

React.js Learn More
SASS (For Styling) Learn More

Since I wanted a single page application(SPA), there was no need to even implement a react-router.

File Structure

.
├── src
    ├──📂components
         ├──📂about
              ├── 📄About.scss
              ├── 📄About.js
         ├──📂footer
         ├──📂....(Other Components)

│   └──📂services (APIs)  
|   └──📄App.js (Root App) 
|   └──📄index.js
|   └──📄_variables.scss (Variables)

In my codebase, every page/section of portfolio is React Class Based Component stored in components directory with its respective style file.

📄App.js
It is a root level component which consists of all the components in the desired order. Here is a rough template of my App.js

// Module Imports

class App extends React.Component {
  constructor(props){
    super(props);
    let theme = localStorage.getItem("theme");
    // Switch Theme as per time Logic

  }

  componentDidMount(){
    // Console Log Messages
  }
  changeTheme = (theme)=>{
    // Change Theme Helper Function
  }
  render(){
    // * Render the components as a SPA
    return <div className={'App app-'+this.state.theme}>
          <ThemeToggler theme={this.state.theme} changeTheme={this.changeTheme}></ThemeToggler>
          <NavWidget theme={this.state.theme}></NavWidget>
          <Landing theme={this.state.theme}></Landing>
          <Projects theme={this.state.theme}></Projects>
          <About theme={this.state.theme}></About>
          <Skills theme={this.state.theme}></Skills>
          <Hobbies theme={this.state.theme}></Hobbies>
          <Footer theme={this.state.theme}></Footer>
      </div>;
  }
}

export default App;

The 📂services directory consists of helper methods which call the backend APIs needed (For example I use DEV's API to fetch my articles and display it on my portfolio)

📄_variables.scss
It is a SASS file which consist of color combinations & other helpful variables that can be imported in other styles to make them more reusable.
Example

 // Text Colors
  $lightPrimaryText:#3F3D56;
  $darkPrimaryText:#FAFAFA;
  $darkSecondaryColor:#FDCA13;
  $lightSecondaryColor:#66BB6A;
  $lightTextColorGray:#828282;
  $darkTextColorBlue:#0d47a1;
  // Container Colors
  $lightContainerColor:#FFFFFF;
  $darkContainerColor:#202D36;
  $maxWidth: 800px;

The main idea here is to Define things once, call multiple times

Optimization

Don't think your portfolio is good enough? How do you benchmark it?

There are some of the tools which help you benchmark your websites with different parameters:

These sites will benchmark your websites & will also provide a detailed report to help you make them better.

Example

Following are some of the steps which I found helpful to increase my SEO and Performance:

Use Content Delivery Network (CDN) to serve static assets (I use Cloudinary)
Half of the SEO is meta tags (keywords, description, title, favicon, open-graph tags, etc) and the other half is content (make sure to include content related to keywords).
Minify CSS & JS Files (You will find various tools online to do so)
Lazy Load Images/Videos
Use Compressed File Formats (Example .webp for images)
Use plugins to check color contrasts (Check this for Figma)
Have a xml sitemap, submit sitemap to google.

Deployment

This is the last phase which consists of hosting your websites.

Following are some the free hosting providers

Netlify (Provides free SSL)
Firebase hosting (Provides free SSL)
000webhost
Heroku (One of the most popular to host full stack applications with both a client & a server)

Following are some of the widely used paid providers

I use Netlify & Heroku mostly because it is easier to integrate with GitHub's Continuous Integration & Deployment.

💖 Feel free to share your portfolios and any other helpful resources in the comments.

Express Autodocs - A GitHub Action to generate documentation (Submission)

Prafulla Raichurkar — Mon, 07 Sep 2020 14:21:30 +0000

I am glad to announce my submission to the GitHub Actions Hackathon 😄

Are you tired of maintaining documentation for your APIs?

Express AutoDocs is a GitHub action that solves this problem.

Submission Category:

Maintainer Must-Haves

My Workflow

Express AutoDocs scans your codebase for express API definitions and automatically generates the documentation and deploys it to a GitHub branch.

Example Repo - MERN_SHOPPINGLIST

YAML File

Here's how you can integrate Express AutoDocs in your workflow.

# This is a basic workflow to help you get started with Express AutoDocs Action

name: Express AutoDocs.

# This specifies when the action should occur
on:
  push:
    branches: [master]

jobs:
  generate_docs_job:
    runs-on: ubuntu-latest
    name: Generating Docs
    steps:
      # this step checks out the master branch of your repo using checkout action.
      - name: Checks out the repository
        id: checksout-repository
        uses: actions/checkout@v2
        with:
          repository: ""
      # this step generates the docs
      - name: Generating Docs.
        id: reading-file
        uses: Pika1998/express-autodocs@v0.0.1
      # Use the output from the `hello` step
      - name: Get the output time
        run: echo "The time was ${{ steps.reading-file.outputs.time }}"

For a detailed configuration, checkout the official repository

prafulla-codes / express-autodocs

A GitHub action which automatically generates documentation for your express APIs.

💡 Introduction

This action automatically scans for express APIs in your codebase and generates a documentation website

Whats New?

Added JSDOC Like Syntax to define APIs (Thanks to @rahil1304)
Refactored Code & Reduced Bugs (Thanks to @rosborne132 & @KulkarniSuraj)
Added Unit Tests

How to add to your workflow ❔

To add this action to your workflow simply modify your workflows main.yml file.

# This is a basic workflow to help you get started with Express AutoDocs Action
name: Express AutoDocs.

# This specifies when the action should occur
on:
  push:
    branches: [master]

jobs:
  generate_docs_job:
    runs-on: ubuntu-latest
    name: Generating Docs
    steps:
      # this step checks out the master branch of your repo using checkout action.
      - name: Checks out the repository
        id: checksout-repository
        uses: actions/checkout@v2
        with:
          repository: ''
      # this step generates the docs

…

View on GitHub

Additional Info

Easily Pass API Info using JSON in comments
Example

/*  
{
    "description":"Checks for token and gets the logged in user",
    "inputs":{
        "x-auth-token":"The JWT Token in header"
    },
    "label":"Public",
    "outputs":{
        "user":"The user object stored in database",
    }
}
*/
router.get("/user", auth, (req, res) => {
  User.findById(req.user.id)
    .select("-password")
    .then((user) => {
      res.json(user);
    });
});

Output Format

Supports two output formats markdown and standard
Default output example:

Easy CI/CD Integration

It is very easy to maintain the documentation website since the action deploys the output to a GitHub branch which can be easily set up as a deployment branch using Github pages, Netlify, etc.

Checkout on GitHub MarketPlace

💖👨‍💻 It was fun and enlightening to participate in the actions hackathon.

Working on Github Actions - Update 2 (Beta Release)

Prafulla Raichurkar — Wed, 02 Sep 2020 09:54:58 +0000

It's been a while since I started working on express-autodocs, A GitHub action that generates documentation by scanning express APIs.

Today I would like to gladly share the first public version of the action with the DEV community 🎉🎊

prafulla-codes / express-autodocs

A GitHub action which automatically generates documentation for your express APIs.

💡 Introduction

This action automatically scans for express APIs in your codebase and generates a documentation website

Whats New?

Added JSDOC Like Syntax to define APIs (Thanks to @rahil1304)
Refactored Code & Reduced Bugs (Thanks to @rosborne132 & @KulkarniSuraj)
Added Unit Tests

How to add to your workflow ❔

To add this action to your workflow simply modify your workflows main.yml file.

# This is a basic workflow to help you get started with Express AutoDocs Action
name: Express AutoDocs.

# This specifies when the action should occur
on:
  push:
    branches: [master]

jobs:
  generate_docs_job:
    runs-on: ubuntu-latest
    name: Generating Docs
    steps:
      # this step checks out the master branch of your repo using checkout action.
      - name: Checks out the repository
        id: checksout-repository
        uses: actions/checkout@v2
        with:
          repository: ''
      # this step generates the docs

…

View on GitHub

Here is the working demo:

✅ Tested on Repository

Processing Output

Outputs

docs/readme.md

docs/pages/api-items.md

💖 Feel free to try out this action & share your opinions about it :)

Working on Github Actions - Update 1 (The Idea)

Prafulla Raichurkar — Thu, 20 Aug 2020 17:20:06 +0000

After checking out the Github Actions Hackathon, I started exploring more about GitHub actions and was amazed by learning the amount of power they possess.

In this post, I would like to share the idea on which I am working for this hackathon (This is not a submission)

The Idea

Current Progress

Right now, the action scans the backend javascript file for express API Calls and just console logs them on each push to the repository

Description

I plan to scan the backend server file for API calls and also scan the router routes for categorized API calls and then use the keywords get, post, etc to fetch the API call type.

The backend file path, app variable name used can be given a custom input.

prafulla-codes / express-autodocs

A GitHub action which automatically generates documentation for your express APIs.

💡 Introduction

This action automatically scans for express APIs in your codebase and generates a documentation website

Whats New?

Added JSDOC Like Syntax to define APIs (Thanks to @rahil1304)
Refactored Code & Reduced Bugs (Thanks to @rosborne132 & @KulkarniSuraj)
Added Unit Tests

How to add to your workflow ❔

To add this action to your workflow simply modify your workflows main.yml file.

# This is a basic workflow to help you get started with Express AutoDocs Action
name: Express AutoDocs.

# This specifies when the action should occur
on:
  push:
    branches: [master]

jobs:
  generate_docs_job:
    runs-on: ubuntu-latest
    name: Generating Docs
    steps:
      # this step checks out the master branch of your repo using checkout action.
      - name: Checks out the repository
        id: checksout-repository
        uses: actions/checkout@v2
        with:
          repository: ''
      # this step generates the docs

…

View on GitHub

Suggestions and ideas are most welcome 👨‍💻💖

What ideas did you consider while making your portfolio?

Prafulla Raichurkar — Mon, 29 Jun 2020 13:57:04 +0000

Hi everyone. I am trying to create my portfolio using React.js and I would like to know what ideas y'all went through before creating yours.

What would you think is one of the key elements for your portfolio?

React Native Wifi & Hotspot Wizard.

Prafulla Raichurkar — Sat, 20 Jun 2020 06:43:04 +0000

A react native library that will allow you to easily configure both Wifi & Hotspot settings programmatically using a single library.

Installation

npm install react-native-wifi-and-hotspot-wizard

Auto Linking

The library supports Auto Linking using the following command

react-native link react-native-wifi-and-hotspot-wizard

Usage

🧙‍♂️ Wizards

Wizards will help you do all the necessary magic ✨

In this context, Wizards are javascript classes that contain functions that will help you configure settings.

1. Wifi Wizard (for Wifi Related Configurations)

2. Hotspot Wizard (for Hotspot Related Configurations)

Runtime Permissions

Runtime permissions are automatically managed by the library.
Permission will be asked on the device whenever they are required

Importing Wizards

  import {WifiWizard, HotspotWizard} from 'react-native-wifi-and-hotspot-wizard';

Check out the API to learn some magic ✨

The documentation website is powered by AbellJS which is a static site generation framework.

For contributing check out

prafulla-codes / react-native-wifi-and-hotspot-wizard

Configure essential Wifi and Hotspot Settings Easily

Flutter - Stateless vs Stateful Widgets.

Prafulla Raichurkar — Sat, 29 Feb 2020 14:32:27 +0000

Have you been wondering about what exactly is the difference between a stateless and a stateful widget?

What are widgets?
Stateless Widgets
Stateful Widgets
Concept of External Data
Differences Between Stateless and Stateful Widgets

Widgets

Widgets are the UI building blocks in Flutter. Everything that you see in a Flutter application is a widget. The entire Flutter Application is itself a widget.

Widgets are classified into two main types:

1. Stateless Widgets
2. Stateful Widgets

Let's dive deeper into both the types and later discuss the differences.

Stateless Widgets

Let's start by creating a new widget to get a better understanding of these concepts.

We will create a Tips Widget which will display a list of tips for programmers to view.

tips.dart

We have:

An array tips which contains the list of tips we would like to show the user.
A counter tipIndex which will track the tip which is to be shown.
A renderable Text() which will render the tip at the current tipIndex
A renderable RaisedButton() with the label Next which on clicked will render the next tip. Check out the logic of the onPressed function changeTip().

Let's embed this widget in our main.dart file.

main.dart

Output

Now in this case after clicking the Next button, the tipIndex must increment and thus the next tip at the index position 1 should be rendered.

BUT IT DOESN'T :(

WHY?

Because our widget is a stateless widget as it extends the class StatelessWidget.

Stateless Widgets do not have internal states as the name suggests.
Stateless Widgets have no method by which the UI gets re-rendered whenever the internal values change.

The only way a stateless widget can get re-rendered is by passing EXTERNAL DATA which we will talk about after understanding Stateful Widgets.

Stateful Widgets

These type of widgets do have their own internal states.

We will convert our stateless tips widget into a stateful one for more understanding.

tips.dart

Note the following to understand the conversion from stateless to stateful:

The Tips Class now extends StatefulWidget class
The entire logic of the tips app have been moved to _TipsState class which extends State
Tips Class has a function createState() which returns the _TipState.

The above are the three essential changes required to convert a stateless widget to a stateful widget.

Output

After Clicking the next button

Now this is the output which we needed and the main reason it works is because of setState() method which is applied in changeTip() function

setState() is a special function only available in Stateful Widgets which updates the state of the widget and re-renders the components that are affected by the change in state.

We specify the state which is to be updated in setState() function [we incremented tipIndex]

In our case, only the Text() which displays the tip is re-rendered because only that widget is associated with the change in tipIndex.

Now, let's discuss how Stateless Widgets can get re-rendered using External Data.

Concept Of External Data

EXTERNAL DATA is the data provided to a widget through its constructor.

Now it's time we split our Tips Widget into two parts:

TipsView (Just The Widget)
Tips (Top Level Logic)

TipsView will just consist of renderable components Text() and RaisedButton() [Note that this is a stateless widget]

Tips will contain the top-level logic. The list of tips and the functions to handle the state change will be in this part. [This is a stateful widget]

This concept is similar to LIFTING THE STATE UP used in web frameworks.

Let us understand how a stateless widget can get-rendered.

tips_view.dart

TipsView is a stateless widget which has a constructor which takes 3 parameters tip, changeTip and tipIndex

tip (The Tip To Be Displayed)
changeTip (A pointer to the function which changes the tip)
tipIndex (The Current Tip Index)

tips.dart

This is the top-level widget which renders the TipsView and passes down the parameters tip, tipIndex and pointer to the changeTip function.

FLOW

The build method of Tips will render the TipsView with the first tip.
When Next button inside the TipsView will be pressed, the changeTip function residing in Tips will be called since it's pointer is passed down to TipsView.
The tipIndex will get incremented and then the entire TipsView widget will be re-rendered with changed parameters.

Even after splitting the application it will still have the same functional result.

Note that in this case the entire stateless widget including Text() and RaisedButton() will be re-rendered and not just the Text()

So this is the use-case which shows re-rendering of stateless widgets.

Differences Between Stateless and Stateful Widgets

Stateless widgets have no method to re-render themselves if INTERNAL DATA changes.
Stateless widgets can only be re-rendered when EXTERNAL DATA changes.
If a stateless widget is re-rendered then the entire widget is re-rendered.
Stateful widgets can be re-rendered when INTERNAL as well as EXTERNAL changes.
The setState() method in Stateful widgets re-render components only associated with the change in state. It does not re-render the entire widget but only the necessary parts of it.

Thank you for reading this article 💖.

I created Git-Widget for websites/blogs.

Prafulla Raichurkar — Wed, 26 Feb 2020 05:50:20 +0000

Showcase your project's open-source timeline on their websites/blogs using git-widget.

Check it out

Usage

- Via Script

    <git-widget data-projectid="Pika1998/CYOMS"></git-widget>
    <!-- Place script tag before the end of the body tag -->
    <script src="https://unpkg.com/git-widget@1.0.0/dist/card.component.mjs" type="module"></script>

- Via NPM

This can be used in React, Vue and almost any other frontend framework

npm install --save git-widget

Inside your framework component

import 'git-widget'

Then you can use

    <git-widget data-projectid="Pika1998/CYOMS"></git-widget>

Check out the detailed documentation at

prafulla-codes / Git-Widget

Showcase your projects on their official websites/blogs. 👨‍💻👩‍💻

Git Widget

Showcase your projects on their official websites/blogs. 👨‍💻👩‍💻

A Detailed timeline of contributions done on your project. 💖

Codepen - https://codepen.io/Prafulla1998/pen/OJVNzxP

Installation & Usage

You can install git-widget using two ways.

1 - Using Script

    <git-widget data-projectid="Pika1998/CYOMS"></git-widget>
    <!-- Place script tag before the end of the body tag -->
    <script src="https://unpkg.com/git-widget@1.0.0/dist/card.component.mjs" type="module"></script>

2 - As NPM Module

This can be used in React, Vue and almost any other frontend framework

npm install --save git-widget

Inside your framework component

import 'git-widget'

Attributes

attributes	description	default
data-projectid	< Your Github UserID > / < Project you want to showcase>
data-width	Width of the card	400px
data-height	Height of the card	500px

Changelog

RELEASES

Contribution

Feel free to contribute to git widget, checkout CONTRIBUTING.md

View on GitHub

Github - https://github.com/Pika1998/Git-Widget
NPM - https://npmjs.org/package/git-widget
Codepen - https://codepen.io/Prafulla1998/pen/OJVNzxP

Feel free to make contributions to the project 💖 and 🌟 the repository.

2019 - My Year Of Awakening.

Prafulla Raichurkar — Tue, 31 Dec 2019 16:21:49 +0000

2019 has been a year of challenges, hardwork, failures and success. Most importantly a year of LEARNING .

This year has certainly been a turning point in my life. Not because this year has brought good things in my life, but because I chose to make my life better from this year.

I would like to share some of my achievements from this year.

I worked on a freelancing project and earned my first salary.
I completed 5 months paid internship and learnt alot of interesting technologies like Node.js, MongoDB, Express.js, Cloud Hosting and much more.
I got recruited during campus placements and will be starting my first job as a Trainee Software Developer after graduation.
I started making contributions to Open Source. Thanks to Hacktoberfest.
I hosted my first desktop application - https://cyoms.tech
I learnt to make the best out of every situation

Well this is not just a year recap. I would like to share some things which have helped me in my journey.

1. Maintaining A Diary

I started writing my daily events in a dairy and then later it turned into it a habit. I would definitely suggest maintaining a diary to get some routine in your life.

2. Your Time. Your Way.

There is no key or a secret to achieve things. Everything indirectly depends on your time management.

There will never be a crash course or a map to manage yourself. Working on yourself and creating your own routines is the only way.

Always feel free to explore and draw from your own experiences.

Feel free to share what helped you this year.😄

Wishing the DEV Community a very Happy New Year🎉🍻🌌🌃🎆.

Play Minecraft with friends easily using CYOMS. 👨‍💻👩‍💻

Prafulla Raichurkar — Thu, 19 Dec 2019 13:32:28 +0000

Craft Your Own Minecraft Server (CYOMS) is a desktop application to easily create and configure minecraft servers.

Want to play minecraft with friends, but don't know where to start? This is just the right tool for you!

Step 1 - Download CYOMS from Official Website:-

https://cyoms.tech

Visit Official website for downloading latest version of CYOMS and to view a detailed server setup using Hamachi.

Step 2 - Configure & Select Folder to create server

CYOMS provides full vanilla support and will soon support craft-bukkit and spigot support.

Step 3 - You are all set, launch & test the server :)

Feel free to share your experiences and ideas to improve CYOMS. Happy Crafting ⚒️😄

DEV Community: Prafulla Raichurkar

7 Things that helped me in my DEV Journey

1. Solution before implementation

2. It is what it says it is.

3. PR over direct merges and build before commits

4. Modularize and Reuse, Plug N Play

5. Logging is ART.

6. Prevention is better than cure

7. Unlearning

Sorting Hat

Badges 🛡️

prafulla-codes / sorting-hat

🧙 Want to know which Hogwarts House would you fall into? Come and let the Sorting Hat cast judgement upon you and win a README badge ✨

How I Created My Portfolio: From Thought Process To Deployment.

Planning & Design

Objectives

References

Designing Phase

Project Structure

Optimization

Deployment

💖 Feel free to share your portfolios and any other helpful resources in the comments.

Express Autodocs - A GitHub Action to generate documentation (Submission)

Submission Category:

My Workflow

YAML File

prafulla-codes / express-autodocs

A GitHub action which automatically generates documentation for your express APIs.

💡 Introduction

Whats New?

How to add to your workflow ❔

Additional Info

Output Format

Easy CI/CD Integration

💖👨‍💻 It was fun and enlightening to participate in the actions hackathon.

Working on Github Actions - Update 2 (Beta Release)

prafulla-codes / express-autodocs

A GitHub action which automatically generates documentation for your express APIs.

💡 Introduction

Whats New?

How to add to your workflow ❔

💖 Feel free to try out this action & share your opinions about it :)

Working on Github Actions - Update 1 (The Idea)

The Idea

Current Progress

Description

prafulla-codes / express-autodocs

A GitHub action which automatically generates documentation for your express APIs.

💡 Introduction

Whats New?

How to add to your workflow ❔

Suggestions and ideas are most welcome 👨‍💻💖

What ideas did you consider while making your portfolio?

React Native Wifi & Hotspot Wizard.

Installation

Auto Linking

Usage

🧙‍♂️ Wizards

Runtime Permissions

Importing Wizards

Check out the API to learn some magic ✨

For contributing check out

prafulla-codes / react-native-wifi-and-hotspot-wizard

Configure essential Wifi and Hotspot Settings Easily

Flutter - Stateless vs Stateful Widgets.

Table of Contents

Widgets

Stateless Widgets

We have:

Let's embed this widget in our main.dart file.

Output

Stateful Widgets

Note the following to understand the conversion from stateless to stateful:

Output

Concept Of External Data

FLOW

Differences Between Stateless and Stateful Widgets

Thank you for reading this article 💖.

I created Git-Widget for websites/blogs.

Check it out