DEV Community: Vedant Nandoskar

My experience as a GSoC 2021 student for CaMicroscope

Vedant Nandoskar — Tue, 20 Jul 2021 21:41:04 +0000

Hello everyone!

This post is about my experience as a GSoC 2021 student until now, my story on how I got selected, and some tips and suggestions (, which worked for me) on how to get a spot.

The program is halfway done and the first evaluations are going on as I'm writing this post, so my project is not entirely complete nor is my experience, but this feels like a good time to reflect back and write it down :D

What is GSoC

Google Summer of Code (GSoC) is a program hosted by Google for students at all levels (above 18 years) pursuing courses in various disciplines to contribute to open source projects over their summer break. It's hosted annually and every year it gets a larger response from students and participating organization, thus also increasing the quality of overall experience and it's competitiveness.

GSoC 2021 brought some changes to it's structure because of the Covid-19 pandemic. It has a shorter period of 10 weeks (as compared to previous versions having 12 weeks) and shorter stipulated work hours (~18 hours).

Although, this hasn't taken away anything in terms of learning and opportunities from it.

More about it on Google Summer of Code 2021

The application process and my experience with it

The application process is the most challenging part of the process as you are up with thousands of other students who are also looking to land a spot.

Every student has to submit a proposal to their choice of organizations, and each student can submit a maximum of 3 proposals. The GSoC website has pretty good documentation on how to apply as well as organizations provide their requirements too, so you shouldn't have much trouble in organising how to write your proposal.

However, here are some things that I've learnt every time I applied to the program:

Selecting an organization Even before the application process begins, it's important that you analyze your preferences. Make sure to read about organizations and the work they do in detail. And select an organization that is of your liking since 10 weeks is going to be a long time and if you select an organization which doesn't click with you, it's not going to be worth the efforts.

Writing a detailed proposal The proposal is your most important aspect of your application. Make sure it is as detailed as possible with you explaining every point you make in it, as well as elaborating your plans with supporting articles or research. It's okay if you can't submit all 3 proposals, but make sure they are done well. Prefer quality over quantity.

Contributions to the organizations
The second most important part is establishing contact with the organization and contributing to it. Don't be afraid to introduce yourself, interact, ask questions, and discuss ideas with the people from the organization. They usually have a preferred communication channel (make sure to join it!) and are very proactive towards students interacting with them during this period. Discussing with mentors helps you in understanding each other's needs and ideas and this places you in a better position to write a proposal. Also, having contributions to the organizations tells the mentors that you have a prior understanding of the codebase and a solid foundation of programming.
Submitting the draft
GSoC allows you to submit a draft proposal and get it reviewed from the mentors before the deadline. Remember to get your proposal reviewed by mentors as this provides further room for discussions. Be the early bird and don't leave things for the very end.

I had applied to GSoC in 2018, 2019, 2020; each time reaching a bit closer to the goal until I finally got accepted in 2021. So it's been a long journey for me, and I'd like to share some takeaways from it

Being selected is great, but you need not stop contributing to open source if not selected.
Take the learnings from every experience and move forward.
If you don't get selected, it means you still have a long way to go and can apply again next year.
Finally, take it as a challenge and be gracious in conduct irrespective of the outcome :D

CaMicroscope and the project I'm working on

CaMicroscope is a digital pathology platform with a major focus on cancer pathology WSI (Whole Slide Imaging) and provides the community with an open source solution that can visualize whole slide pathology images, create and display both human and machine generated annotations, and run analysis algorithms on the images. It is being used by major medical organizations across the United State of America as well as globally.

CaMicroscope allows users to:

View pathology slides
Supports batch upload
Zoom and scaling support
Heatmaps, annotations, labels support
Users can run Machine Learning models on slides to detect areas of cancer
Slide capture
Segmentation
Side by side slides viewer

... and many more

Camicroscope Home Screen

CaMicroscope Slide Viewer

What I'm working on

My project for the GSoC program is to implement a Real time Collaboration system and integrate into the CaMicroscope environment. This system should be able to let users work together on slides in real time, as well as providing adequate tools for communication between them.

At the time of publishing this post, we've made a good progress and have achieved more than half of the goals that we've set for the program!

My experience with GSoC

It's been quite an exciting journey being a part of GSoC and contributing to CaMicroscope. I have been able to interact and talk with the people who built this software, be able to understand their stories and the problem they were trying to solve, and also learn from them. Also, I was introduced to the alumni group of GSoC which has a lot (, and I mean a looooot) of developers ready to guide and help you out.

The entire experience has been very valuable according to me, as not only does it provide learning and opportunities to interact with developers over the world and work on problems together, but it also provides a platform for you to speak up and support other developers in your locality. This triggers a chain reaction of helping other developers thus, uplifting the community as a whole.

I'll be writing a part two of this blog once the program ends which would be focused on the project and elaborating more on it.

Thank you for being with me till the end of this post, any questions and suggestions are welcome, and can be put down in the comments section, I'll be making it a point to check them and respond to them atleast at least once a week.

Peace and stay safe ✌️

You can follow me on my Dev.to @vedant1202
and on my Github@Vedant1202

Credits

Cover Image: Photo by Michael Dolejš on Unsplash

JavaScript Developer Lessons: Code Styling Guide

Vedant Nandoskar — Fri, 30 Apr 2021 09:04:22 +0000

Collaborating on code starter pack ^

Hello fellow developers,

Hope you're doing well! In this post, I'll be writing about a few tools that help to maintain Code Styling and Quality, in order to have a consistency of writing code when working in teams.

Code styling, at the first glance, looks like it's just about how well the code looks. But in the words of a pretty cool transformer,

"There's more to them than meets the eye" - Optimus Prime

Code styling is also about how much the code is readable and interpretable. Most of us have a way of writing code (number of spaces for indentation, way of defining functions, etc) that we instinctively recognize and is readily intelligible to us. Being thrown into an area with an unfamiliar coding style, or having a code base which looks like a mixture of different coding styles is usually difficult to deal with. We tend to spend more time on interpreting things, and at times it could be frustrating. This leads to a severe drop in productivity.

Coding style is made up of numerous small decisions based on the language:

How and when to use comments,
Tabs or spaces for indentation (and how many spaces),
Appropriate use of white space,
Proper naming of variables and functions,
Code grouping an organization,
Patterns to be used,
Patterns to be avoided. Code style is usually very personal to individual developers as we start out with learning things as we go, and what suits us well. However, there are some well defined code guides out there which have set up some guidelines in order to ensure code consistency. A good place to find them is here

Kristories / awesome-guidelines

A curated list of high quality coding style conventions and standards.

Awesome Guidelines

A set of guidelines for a specific programming language that provides recommendations on programming style, best practices, and methods for various aspects of writing programs in that language.

Programming Languages

Brainfuck

BF Style Guide

C

C Coding Standard
C Programming/Structure and style
Making The Best Use of C - This chapter provides advice on how best to use the C language when writing GNU software.

C#

C++

Google C++ Style Guide
C++ Core Guidelines - A set of tried-and-true guidelines, rules, and best practices about coding in C++.
LLVM C++ Coding Standards
Mozilla C++ Coding style
Chromium C++ style guide
Webkit C++ Code Style Guidelines
NASA C++ Coding Standards and Style Guide
OceanBase C++ Coding Standards

Clojure

The Clojure Style Guide - A community…

View on GitHub

Now, coming back to the post, I will now introduce you all to some tools which can help you out in maintaining a code style.

1. ESLint

ESLint is a pretty famous linter for all javascript codebases. Even creat-react-app generated project has an eslint configuration built in.

Eslint has the following features:

Code styling guides
Checking the codebase (can be selective or entire project)
Checking based on ECMA version
Auto fixing lint errors To enable ESLint in your project, you need to add the package to your project with your package manager (like NPM, or Yarn) and then need to define a eslintrc.json file. A sample eslintrc.json is as follows,

{
  "env": {
    "node": true,
    "jest": true
  },
  "extends": ["airbnb-base", "plugin:jest/recommended", "plugin:security/recommended"],
  "plugins": ["jest", "security"],
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "rules": {
    "no-console": "error",
    "func-names": "off",
    "no-underscore-dangle": "off",
    "consistent-return": "off",
    "jest/expect-expect": "off",
    "security/detect-object-injection": "off"
  }
}

More about ESLint installations and configurations can be found here: ESLint User Guide

2. PrettierJS

PrettierJS is similar to ESLint, and both of them can be used together. Prettier is an opinionated code formatter, meaning, it passes the code formatting work to the computer-based on the rules defined by you. It analyses the code by parsing your code into an abstract syntax tree (AST) and pretty-printing the AST. This means that your code is automatically saved and you need not worry about making a long list of commits indicating "style fixes".

Prettier has the following features:

Autosave formatting
Supports many languages
Easy to setup Prettier can be used directly in your project by installing it with NPM or Yarn. You can also add prettier as a valid script in your package.json as,

    "prettier": "prettier --check **/*.js",
    "prettier:fix": "prettier --write **/*.js",

More information can be found at Prettier

3 Husky

This is not exactly something limited to code styling, but I thought to include it as it automates most tasks before committing.

Dev 1: Did you make a commit?
Dev 2: Yeah sure, just did.. Nailed that bug
Dev 1: Great! Did you fix the code style?
Dev 2: ...

Haha, this is where Husky🐶 comes into the picture. Husky is used to configure Git hooks which are triggered by Git actions. For example, if you keep forgetting about fixing linting errors while committing, you can set up a Git hook to automatically fix code style whenever you make a commit.

Husky supports all Git hooks and you can install the package to your project with your package manager (like NPM, or Yarn) and then need to define a huskyrc.json file.
A sample huskyrc.json for automating code styling on commits is as follows,

{
  "hooks": {
    "post-checkout": "yarn",
    "pre-commit": "prettier --check *.js",
    "post-commit": "git status"
  }
}

More information can be found at Husky

Alright, so that's it from me for now, hope this was helpful and I'll be seeing more of you people adhere to coding styles in your projects as most of us have started out as self-taught developers and this reminds me of a joke,

And always remember,

if (buildingAwesomeProject) {
   setEquallyAwesomeCodingStyles(true);
}

Peace and stay safe ✌️

You can follow me on my Dev.to @vedant1202
and on my Github@Vedant1202

Footnotes

Cover Photo by Oskar Yildiz on Unsplash
Memes from Google Images.
ESLint https://eslint.org/
Prettier https://prettier.io/
Husky https://typicode.github.io/husky/

Drag and Drop starter project with ReactJS - Part 2

Vedant Nandoskar — Thu, 29 Apr 2021 11:50:46 +0000

Hello fellow developers,

This post is a continuation of the series Drag and Drop Starter Project with ReactJS. In this series, I will walk you people through building a starter project for drag and drop feature in ReactJS without using any external library. Drag and drop features are used in a lot of projects, such as site builders, drawing apps, applications where user can customize their screen, and many more.

In part one, we built

Drag and drop UI components
Custom styled our components
A basic drag and drop feature

You can re-visit Part One of the series here

By the end of part 1, you should be having the following screen,

In this part we would be,

Making components redraggable
Adding feature to remove elements

Let's get onto it!

1. Making components redraggable

To make the components redraggable, we need to know the id of the component being dragged. For this, we need to update our dragStart class method in the App component.

//App.js
...
  dragStart = (ev, type, redrag=false, elementId=null) => {
    ev.dataTransfer.setData("type", type);
    if (redrag) {
      ev.dataTransfer.setData("elementId", elementId);
    }
  }
...

This would set the current dragging element's ID in the dataTransfer attribute of the drag event.

Now we need to make two changes in the getElementList utility function we created earlier. We need to pass this function as a parameter, and need to update the HTML to make them draggable and to accommodate this updated function.

//utility.js
const getElementList = (elementData, dragStartHandler) => {
  const elements = [];

  Object.keys(elementData).forEach(key => {
    let { type, left, top } = elementData[key];

    switch (type) {
      case 'blue':
        elements.push(
          <div
            className="component blue"
            key={key}
            style={{
              position: 'absolute',
              left: left + 'px',
              top: top + 'px',
              zIndex: 100,
            }}
            draggable={true}
            onDragStart={(ev) => { dragStartHandler(ev, type, true, key); }}
          >
            Blue Component
        </div>
        );
        break;

      case 'green':
        elements.push(
          <div
            className="component green"
            key={key}
            style={{
              position: 'absolute',
              left: left + 'px',
              top: top + 'px',
            }}
            draggable={true}
            onDragStart={(ev) => { dragStartHandler(ev, type, true, key); }}
          >
            Green Component
        </div>
        );
        break;

      case 'purple':
        elements.push(
          <div
            className="component purple"
            key={key}
            style={{
              position: 'absolute',
              left: left + 'px',
              top: top + 'px',
            }}
            draggable={true}
            onDragStart={(ev) => { dragStartHandler(ev, type, true, key); }}
          >
            Purple Component
        </div>
        );
        break;

      default:
        break;
    }
  });

  return elements;
}

export { getElementList };

Now, finally, we need to update the drop class method in App component. We need to capture the element's ID if it exists, and then update the "X" and "Y" co-ordinates of that element.

//App.js
...
  drop = (ev) => {
    ev.preventDefault();
    const type = ev.dataTransfer.getData("type");
    const { elementData } = this.state;
    let { nextElementId } = this.state;
    const newElementData = {
      type,
      left: ev.clientX,
      top: ev.clientY,
    }

    let elementId = ev.dataTransfer.getData("elementId");
    if (elementId) {                 // check if element is redragged and the ID exists in dataTransfer
      elementId = parseInt(elementId);
      elementData[elementId] = {
        ...elementData[elementId],
        left: ev.clientX,
        top: ev.clientY,
      }
      parseInt(ev.dataTransfer.getData("elementId"))
    } else {
      elementData[nextElementId] = newElementData;
      nextElementId = nextElementId + 1;
    }

    ev.dataTransfer.clearData();

    this.setState({
      elementData,
      nextElementId,
    });
  }

...

When you run this and visit the browser, you should be able to re-drag the components

We now have added the ability to re-drag and re-arrange the components in our app.

2. Remove or delete the components

We can add the feature to remove the components from the Drop Area when they are dragged outside of it. This is a relatively simple feature since most of the things are already setup.

First, we create a new class method in the App component, named dropOutside, which would handle removing the element's data from the state. This is done by retrieving the dragged element's ID and removing that entry from the elementData in the App component's state.

//App.js
...
  dropOutside = (ev) => {
    const { elementData } = this.state;
    let elementId = ev.dataTransfer.getData("elementId");
    if (elementId && elementData[elementId]) {
      delete elementData[elementId];
    }

    ev.dataTransfer.clearData();

    this.setState({
      elementData,
    });
  }
...

Now we add this method to the onDrop attribute of the Components List div (the left side div).

//App.js
...

        <div className="components-list" onDrop={this.dropOutside} onDragOver={this.dragOver}>

...

And we're done with it. When the page updates in the browser, you should be able to delete the elements from the Drop Area when you drag them outside of it.

Alright then, that's it from me for now hope it was helpful. Feel free to drop any questions in the comments section!

Code Hosted at

Vedant1202 / Drag-and-Drop-Starter-

A starter project for creating drag and drop feature in ReactJS

Demo hosted at Drag and Drop Starter Demo

You can follow me on my [Dev.to @vedant1202]

and on my Github@Vedant1202

Peace and stay safe ✌️

Footnotes

Cover image taken from Photo by Mimi Thian on Unsplash
References from Mozilla Developer Network Web Documentation

Drag and Drop starter project with ReactJS - Part 1

Vedant Nandoskar — Thu, 29 Apr 2021 10:20:05 +0000

Hello fellow developers,

This will be about creating a drag and drop starter project in ReactJS. ReactJS is an open-source, JavaScript framework for building interactive user interfaces. We would be developing a Single Page Application (SPA) that would enable us to

Drag and drop components
Rearrange dropped components
Remove dropped components We would be creating our own components and using some of the flexbox tricks I explained in my previous blog. By the end of this series, we would have the following app Drag and Drop Starter demo

1. First we setup a project with Create React App

Make sure you have Node (>v12) installed, if not install from here

Open a terminal and run

npx create-react-app app ## replace app by any name you like

React will build the app for you. Once its done, go to the directory and run the app

cd app ## or whatever you named it
npm start

Go to the browser at http://localhost:3000 and you should see the following page

If you can see that, our setup is good, onto the next step

2. Add in static UI elements

First, we clear everything in the src\App.css and edit the App component in src\App.js as follows. Note that we are also converting the Functional component to Class component because we would be using state to handle drag and drop features. Learn more about class and functional components here.

// App.js
...

    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
...

//App.js
...
    <div className="App">

    </div>
...

And remove the line import logo from './logo.svg'; from it.

Now add our UI Components to the App Component

//App.js
import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() { 
    return (
      <div className="App">
        <div className="components-list">
          <div className="component blue">
            Blue Component
          </div>
          <div className="component green">
            Green Component
          </div>
          <div className="component purple">
            Purple Component
          </div>
        </div>
        <div className="drop-area">
          Drop Area
        </div>
      </div>
    );
  }
}

export default App;

And App.css as

/* App.css */
.App {
  display: flex;
  flex-wrap: nowrap;
  padding: 10px 10px 0 10px;
}

.components-list {
  width: 18vw;
  margin-right: 2vw;
  padding: 4vh 2vw 0 2vw;
  height: 95vh;
}

.drop-area {
  width: 80vw;
  height: 95vh;
  border: 1px black dashed;
  border-radius: 1vw;
  font-size: 64px;
  text-align: center;
  line-height: 95vh;
  color: gray;
  user-select: none;
}

.component {
  cursor: pointer;
  width: 12vw;
  text-align: center;
  font-size: 20px;
  line-height: 10vh;
  background: white;
}

.components-list .component {
  margin-bottom: 4vh;
}

.blue {
  color: blue;
  border: 2px solid blue;
  border-radius: 10px;
}

.green {
  color: green;
  border: 2px solid green;
  border-radius: 10px;
}

.purple {
  color: purple;
  border: 2px solid purple;
  border-radius: 10px;
}

This should result in the following screen

Making the drag and drop feature

Now, we make our component divs draggable. To do this, we set the draggable attribute to true.

//App.js
...
          <div className="component blue" draggable={true}>
            Blue Component
          </div>
          <div className="component green" draggable={true}>
            Green Component
          </div>
          <div className="component purple" draggable={true}>
            Purple Component
          </div>
...

Alright, you should be able to drag your div now

Next, we have to handle the onDragStart event. The plan is to define three categories, which would be used to identify the type of div being dragged. For this, we can choose three simple names ie, 'blue' for the blue component, 'green' for the green component, and 'purple' for the purple component. We store this data in the dataTransferlearn more attribute of the drag event.

Create a class method in the App component as follows,

//App.js
...
  dragStart = (ev, type) => {
    ev.dataTransfer.setData("type", type);
  }
...

And assign that method to the onDragStart attribute of the divs along with their respective "types"(, or categories)

//App.js
...
            <div className="component blue" draggable={true} onDragStart={(ev) => { this.dragStart(ev, 'blue') }}>
            Blue Component
          </div>
          <div className="component green" draggable={true} onDragStart={(ev) => { this.dragStart(ev, 'green') }}>
            Green Component
          </div>
          <div className="component purple" draggable={true} onDragStart={(ev) => { this.dragStart(ev, 'purple') }}>
            Purple Component
          </div>
...

Now, we have to retrieve this data at the drop event on the Drop Area. For this, we create a class method that would work as the handler to handle the same.

//App.js
...
  drop = (ev) => {
    ev.preventDefault();
    const type = ev.dataTransfer.getData("type");
    console.log(type);
  }
...

We then assign this function to the onDrop attribute of the Drop Area

//App.js
...
        <div className="drop-area" onDrop={this.drop} >
          Drop Area
        </div>
...

When you test it, you should see an output on the developer tools of your browser when you drop the div on the drop area

Okay, so everything looks good so far, but we've to still make our app 'memorize' the dropped components and their position. So we create two properties in the App component's state defined in the constructor. These properties are elementData (used to hold data of dropped elements) and nextElementId (to store a unique key for each dropped element).

//App.js
...
  constructor(props) {
    super(props);
    this.state = {
      nextElementId: 0,
      elementData: {},
    };
  }
...

And we update the state when any new div is dropped in the Drop Area. So we update the drop class method as follows,

//App.js
...
  drop = (ev) => {
    ev.preventDefault();
    const type = ev.dataTransfer.getData("type");
    const { elementData, nextElementId } = this.state;
    const newElementData = {
      type,
      left: ev.clientX,
      top: ev.clientY,
    }

    elementData[nextElementId] = newElementData;
    ev.dataTransfer.clearData();

    this.setState({
      elementData,
      nextElementId: nextElementId + 1, // Increment it for next element
    });
  }
...

Since we're updating the state, we also need to retrieve this data and render the respective elements in the DOM. To do this, we create a new file in the src directory named utility.js. In this file, we add the following function, and export it

//utility.js
const getElementList = (elementData) => {
  const elements = [];

  Object.keys(elementData).forEach(key => {
    let { type, left, top } = elementData[key];

    switch (type) {
      case 'blue':
        elements.push(
          <div
            className="component blue"
            key={key}
            style={{
              position: 'absolute',
              left: left + 'px',
              top: top + 'px',
              zIndex: 100,
            }}
          >
            Blue Component
        </div>
        );
        break;

      case 'green':
        elements.push(
          <div
            className="component green"
            key={key}
            style={{
              position: 'absolute',
              left: left + 'px',
              top: top + 'px',
            }}
          >
            Green Component
        </div>
        );
        break;

      case 'purple':
        elements.push(
          <div
            className="component purple"
            key={key}
            style={{
              position: 'absolute',
              left: left + 'px',
              top: top + 'px',
            }}
          >
            Purple Component
        </div>
        );
        break;

      default:
        break;
    }
  });

  return elements;
}

export { getElementList };

What this function does is it takes an object containing data of dropped elements, and returns an array consisting of HTML elements with their data. This element can be used to render the components in the render method of the App component.

First import the function in App.js

//App.js
...
import { getElementList } from './utility';
...

Then, we call the getElementList in the render function. We pass the state data as a parameter to this function, and store the returned array in a variable called elements. We then render this elements array in the DOM inside the Drop Area div.

//App.js
...
  render() { 

    const { elementData } = this.state;
    const elements = [ ...getElementList(elementData) ];

    return (
      <div className="App">
        <div className="components-list">
          <div className="component blue" draggable={true} onDragStart={(ev) => { this.dragStart(ev, 'blue') }}>
            Blue Component
          </div>
          <div className="component green" draggable={true} onDragStart={(ev) => { this.dragStart(ev, 'green') }}>
            Green Component
          </div>
          <div className="component purple" draggable={true} onDragStart={(ev) => { this.dragStart(ev, 'purple') }}>
            Purple Component
          </div>
        </div>
        <div className="drop-area" onDrop={this.drop} onDragOver={this.dragOver}>
          Drop Area
          { elements }
        </div>
      </div>
    );
  }
...

When you open the app on the browser, you should be able to drag and drop components on the Drop Area

Good going, we now have built a basic drag and drop feature using nothing but React. Since, this blog is getting too long, I will make it into a series.

In part two, we will

Make the components re-arrangeable
Make the components delete-able

Alright, thank you for being with me this far,

Peace and stay safe ✌️

You can follow me on my [Dev.to @vedant1202]
and on my Github@Vedant1202

Link to the Second Part

Footnotes

Cover image taken from Unsplash @cleovermij
References from Mozilla Developer Network Web Documentation

Styling concepts every Frontend developer must know about

Vedant Nandoskar — Wed, 28 Apr 2021 20:47:00 +0000

// Always remember
.your-projects {
  custom-styles: 'neat';
}

Hello fellow developers,

Hope you all are doing well! This post is going to be about some intermediary styling concepts/resources that you need to know about, especially if you are looking for jobs concerning frontend development.

I have found these concepts on every frontend job interview I've ever taken and stumbling over these (unless it's for an internship) is a big red flag for recruiters. That is because it sets you apart from people who use readymade components or use UI libraries. Now there's no problem in using those libraries in a personal project, but when you are developing in an industry, the code you write is likely to be licensed as an intellectual property thus making the use of external libraries questionable. Apart from that, I highly recommend for you people to try these concepts in your personal projects and showcase them, as this highlights your skills and understanding of styling to a fundamental level, and would also rid you of depending on any styling framework.

Alright then, let's dive right into it...

1. Flexbox (or Flex)

Flexbox, according to MDN Web Docs, is

The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.
which essentially means that it's a container that rearranges itself automatically on screen resizing. Now, this is a very handful tool as modern devices vary in screen sizes, and a website needs to be responsive to adapt to these screens.

A good practice to wrap your head around the flexbox concept is to try and make a simple 3x3 checkerboard just by using vanilla CSS.

First create a parent div with 9 child divs.

    <!-- create a parent -->
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
        <div class="child">6</div>
        <div class="child">7</div>
        <div class="child">8</div>
        <div class="child">9</div>
    </div>

Add in the CSS. The parent div will be the flexbox while the children will have width 30% (30vw = 30% view width, more about vw and css lengths).

        .parent {
            display: flex;
            flex-wrap: wrap; /*it's important to wrap the components. More info here https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap*/
        }

        .child {
            width: 30vw;
            margin: 1vw;
            text-align: center;
            border: black 1px solid;
            line-height: 24vh;
        }

Results:

So we've created a simple 3x3 checkerboard with flexbox. If you try to resize your browser window, you will notice that the boxes resize and align themselves accordingly.

2. `nth` selectors

Nth selectors are basically selectors that can be used to select HTML elements based on their position of occurrence in the DOM. For example, if we want to color alternate checker boxes in the checkerboard we created previously, we can add the style as follows

        .child:nth-child(odd) { /* odd = 1st occurrence, 3rd occurrence and so on */
            background: black;
            color: white;
        }

Result

There are more such nth selectors such as

... and many more

3. `:before` and `:after` pseudo elements

If you've ever wondered how to style your paragraphs the way newspapers and magazines do, with the first alphabet of the paragraph being almost 3 times the size of rest of the text, then one of the ways to achieve that is using pseudo elements. Pseudo elements are not exactly on the DOM but are a part of the main element. They are limited in interaction and styling, but can be used to decorate and add stylistic aesthetics to your element.

We will now see how to create a magazine style paragraph. First we'll write a simple "Lorem ipsum" paragraph in a div

<!-- Don't forget to not include the "L" at the start -->
    <div>
        orem ipsum dolor sit, amet consectetur adipisicing elit. Neque velit facilis aut dolorum quasi corrupti reiciendis esse hic. Optio, quia! Quam aliquam repellendus officia hic, delectus accusantium excepturi quibusdam sequi!
    </div>

Then add the CSS

        div:before {
            content: 'L';
            margin-right: 1%;
            display: block;    
            float: left;       /* so that they align in a line, and don't drop off to the next line */
            font-size: 400%;
        }

Result

We can also add a pseudo element at the end with the :after class

        div:after {
            content: 'continued...';
            display: block;
            float: right;
            font-size: 200%;
            color: lightgray;
            font-style: italic;
        }

Result

More about pseudo elements here

Alright, that's all from me for now, hope it was of use to you all. Thank you for staying till the end, I'm still getting a hang of blogging so I'm a noob at it.

I'll add more posts to this series as time passes ;)

You can follow me on my Dev.to @vedant1202
and on my Github@Vedant1202

Peace and stay safe ✌️

Footnotes

Image taken from Unsplash @jantined
References from Mozilla Developer Network Web Documentation

DEV Community: Vedant Nandoskar

My experience as a GSoC 2021 student for CaMicroscope

What is GSoC

The application process and my experience with it

CaMicroscope and the project I'm working on

What I'm working on

My experience with GSoC

Credits

JavaScript Developer Lessons: Code Styling Guide

Hello fellow developers,

Kristories / awesome-guidelines

A curated list of high quality coding style conventions and standards.

Awesome Guidelines

Contents

Programming Languages

Brainfuck

C

C#

C++

Clojure

1. ESLint

2. PrettierJS

3 Husky

Drag and Drop starter project with ReactJS - Part 2

Hello fellow developers,

1. Making components redraggable

2. Remove or delete the components

Vedant1202 / Drag-and-Drop-Starter-

A starter project for creating drag and drop feature in ReactJS

Footnotes

Drag and Drop starter project with ReactJS - Part 1

Hello fellow developers,

1. First we setup a project with Create React App

2. Add in static UI elements

Making the drag and drop feature

Footnotes

Styling concepts every Frontend developer must know about

Hello fellow developers,

1. Flexbox (or Flex)

2. nth selectors

3. :before and :after pseudo elements

2. `nth` selectors

3. `:before` and `:after` pseudo elements