DEV Community: Ravina Deogadkar

Reflecting my Journey

Ravina Deogadkar — Fri, 01 Mar 2024 04:54:00 +0000

I started my career without any intention of ending in coding!..
Like all teenagers I was so unsure about my career, all I did was go with the flow. I didn't make it to the Engineering entrance instead I didn't know what I wanted to do. I graduated with a computer science major and that was my baby steps to coding.

Then I completed a Master's in Computer Application and that was beam to my foundation. Learning new programming languages and developing minor projects started becoming my new hobby. Completing challenges and Hackathons on Techgig and Hackerrank started becoming a passion.

I started my blogging journey 5 years back with dev.to and I completely became known for it at work. I keep receiving appreciation from my colleagues for my blogs.

Before starting my blogging journey I was very skeptical about my work. What if someone criticizes it? What if no one reads it?

To get out of my Imposter Syndrome, I drafted a blog and gave it to my friend to read and he helped me with little bits and pieces and gave his strong shoulder to publish it.

To my surprise, my first drafted blog String.Compare() or String.Contains(), the best way to compare strings has 3579 views to date.

One of my blogs on Javascript: Predicate has 10000+ views to date.

A good ingredient for success for me is supportive friends, family, and colleagues but also self-doubt.

Until you question your skills you won't know what you are capable of.

And you cannot overcome uncertainty, failures, and fears until you embrace them.

Happy coding to all Women coders out there.

Unleashing the Power of Delegates in C#: Boost Your Programming Skills

Ravina Deogadkar — Mon, 25 Dec 2023 10:09:17 +0000

Delegates are like pointers to the method. That means they point to the method's address, which we can call the method. A delegate type is defined using the following three parts.

The name of the method on which a delegate calls.
Any argument (if any) of a method.
The return value (if any) of a method.

Let's look at a simple Publish and Subscribe model using delegates.

IPublisher.cs

public interface IPublisher
{
     public delegate void DateTimeDelegate(DateTime dt);

     public void OnDataPublished();
}

The IPublisher interface defines the structure of our publisher class. We have a delegate DateTimeDelegate which will accept DateTime parameter.

ISubscriber.cs

public interface ISubscriber
{
     public void DisplayDate(DateTime date);
}

And our ISubscriber interface defines the structure of the Subscriber class. DisplayDate method accepts parameter type matching with the delegate we declared in IPublisher interface.

Publisher.cs

public class Publisher : IPublisher
    {

        private event IPublisher.DateTimeDelegate _datetimeEvent;

        public void OnDataPublished()
        {
            while (true)
            {
                if (_datetimeEvent != null)
                    _datetimeEvent(DateTime.Now);
                Task.Delay(1000).Wait();
            }
        }

        public void Subscribe(IPublisher.DateTimeDelegate dateTimeDelegate)
        {
            _datetimeEvent += dateTimeDelegate;
        }

    }

In our publisher class, _datetimeEvent parameter of type IPublisher.DateTimeDelegate is being assigned to a parameter of type IPublisher.DateTimeDelegate in Subscribe method.

Subscriber.cs

public class Subscriber: ISubscriber
    {
        public void DisplayDate(DateTime date)
        {
            Console.WriteLine("DateTime Today" + date);
        }
    }

The subscriber class defines the DisplayDate method which simply prints the date.

We have our publisher and subscriber ready, to connect the dots, in program.cs file add the lines below.

var publisher = new Publisher();

var subscriber = new Subscriber();

publisher.Subscribe(subscriber.DisplayDate);

publisher.OnDataPublished();

Here we are calling publisher.Subscribe method by passing subscriber.DisplayDate as the parameter. OnDataPublished() method call triggers the event. In other words, it calls the delegated method subscriber.DisplayDate().

This is a short explanation of delegates to know more about delegates and events stay tuned, until then keep coding :)

Send SMTP email with Node.js using Nodemailer

Ravina Deogadkar — Thu, 09 Mar 2023 16:29:55 +0000

Lately I was working on open source project that needs integration with hotmail to send emails out to user. I did pick up a story as an learning for me and ended up with creating a demo for this blog. I will like to share my learning below.

To send email from Node.js code we need to use nodemailer library. Nodemailer is a module for Node.js applications to allow easy as cake email sending. If you are able to run Node.js version 6 or newer, then you can use Nodemailer. There are no platform or resource specific requirements.

Also for creating demo, I made use of Ethereal email It is fake SMTP service that creates fake email and password for testing purpose and sandboxes the mail box.

You could see all the mails sent to the requested mail in the mailbox. Since it is sandbox environment, mail is not actually received in the real time.

We are going to create '/forgotpassword' api which will send email to user with password reset link.

const transporter = nodemailer.createTransport({
    host: 'smtp.ethereal.email',
    port: 587,
    auth: {
        user: process.env.ETHERAL_EMAIL,
        pass: process.env.ETHERAL_PASSWORD
    }
});

Email and password are stored and fetched from .env file created in root directory of project. This email and password is used to authenticate and send emails through EmailEngine.

Host in this example is 'smtp.ethereal.email' which could also be gmail, hotmail or office 365.

//gmail
const transporter = nodemailer.createTransport({
    host: 'smtp.gmail.email',
    ....
}

//hotmail
const transporter = nodemailer.createTransport({
    host: 'smtp.hotmail.email',
    ....
}

// office 365
const transporter = nodemailer.createTransport({
    host: 'smtp.office365.com',
    ....
});

And now we need to call sendMail method on transporter object passing 4 arguments from, to, subject and html.

  const options = {
    from: process.env.ETHERAL_EMAIL,
    to: req.body.email,
    subject: 'Reset Password',
    html: `You are receiving this email because you(maybe someone else) wanted to change your password.\nIf it was not you, ignore this email.`
  };

  transporter.sendMail(options, (err, info) => {
    if (err) {
        console.log(err);
        return res.status(400).json({ error: "Internal Server Error!" });
    }
    console.log(info.response);

    return res.status(200).json({ success: "Email sent successfully!!" });
})

In the above example we are sending plain text email. We can also send html email by wrapping up html tags with strings.

Let's Test '/forgotpassword' endpoint in postman to verify response.

And in our mail box all outgoing mails are recorded.

That's it... Happy Coding!

WPF: Working with Templates

Ravina Deogadkar — Sat, 04 Feb 2023 13:13:06 +0000

Each control has its own default template which gives it appearance. Template describes overall visual appearance of control. You can easily create your own templates when you want to customize the visual behavior and visual appearance of a control

Control Template

Control Template enables you to customize the default appearance and behavior of the control. e.g., Button has an appearance and behavior. Click event or mouse hover event are the behaviors which are fired in response to a click and hover.

<UserControl x:Class="WpfDevelopment.ControlTemplateEx"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfDevelopment"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Button MinHeight="100" MinWidth="200" Content="Click Me!">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Ellipse Width="205" Height="105" Fill="Black"></Ellipse>

                        <Ellipse Width="200" Height="100" Fill="LightCoral" Name="Button"></Ellipse>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>

                    <ControlTemplate.Triggers>

                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Button" Property="Fill" Value="Red">
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>
        </Button>
    </Grid>
</UserControl>

Data Template

Data Template defines and specifies the appearance and structure of a collection of data. It enables you to customize the appearance of the data objects. It is mostly used with data related item controls such as ListView, ListItem and ComboBox.

    public class Movie
    {
        public string Title { get; set; }
        public string CoverImage { get; set; }
        public int ReleaseDate { get; set; }
    }

In this example, I have created Movie model class with Title, CoverImage and ReleaseDate fields.

<UserControl x:Class="WpfDevelopment.DataTemplate"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfDevelopment"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Resources>
        <DataTemplate x:Key="MovieTemplate">

                <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Path=CoverImage, FallbackValue=CoverImage}" 
                       Grid.Column="0"
                       Height="200" 
                       Width="150"
                       Margin="5"
                       />

                <StackPanel Orientation="Vertical" Grid.Column="1" VerticalAlignment="Center">
                    <Label Foreground="BlueViolet" 
                           FontWeight="Bold" 
                           FontSize="18" 
                           Content="{Binding Path = Title}"/>
                    <Label Foreground="Crimson" Content="{Binding Path = ReleaseDate}"/>
                </StackPanel>
                </StackPanel>
        </DataTemplate>
    </UserControl.Resources>
    <Grid>
        <ListView 
                  ItemTemplate="{StaticResource MovieTemplate}"
                  x:Name="MovieListView"/>


    </Grid>
</UserControl>

In this xaml file, DataTemplate is created for ListView control and ItemSource is set from code behind.

    /// <summary>
    /// Interaction logic for DataTemplate.xaml
    /// </summary>
    public partial class DataTemplate : UserControl
    {
        public DataTemplate()
        {
            InitializeComponent();
            List<Movie> movies = new List<Movie>()
            {
                new Movie() { Title = "Logan", CoverImage = @"images/logan.jpg", ReleaseDate = 2006},
                new Movie() { Title = "Top Gun Maverick", CoverImage = @"images/topgun.jpg", ReleaseDate = 2011},
                new Movie(){ Title = "Puss in Boots", CoverImage = @"images/pussinboots.jpg", ReleaseDate = 2022}
            };

            this.MovieListView.ItemsSource = movies;    
        }
    }

In the code behind DataTemplate.xaml.cs file, sample data is created and set as ItemSource for ListView. Images path are set from images\ folder.

ItemPanelTemplate

ItemPanelTemplate is used to customize the panel that defines the layout of items of ItemControls like ListView, ListBox etc.
Example: Default panel for ListBox is VirtualizingStackPanel.

        <ListView 
                  ItemTemplate="{StaticResource MovieTemplate}"
                  x:Name="MovieListView">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="2" />
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
        </ListView>

ItemPanelTemplate is placed within ListView.ItemsPanel tag.

HierarchialDataTemplate

HierarchialDataTemplate is used to customize template of parent TreeViewItems as well as of child.

We have created Episode(child) class.

    public class Episode
    {
        public Episode(string title)
        {
            Title = title;
        }
        public string Title { get; set; }
    }

And a Series(Parent class)

    public class Series
    {
        public Series(string title)
        {
            Title = title;
            Episodes = new List<Episode>();
        }

        public string Title { get; set; }

        public List<Episode> Episodes { get; set; }
    }

In this xaml file, HierarchicalDataTemplate is created for TreeView control.

<UserControl x:Class="WpfDevelopment.TreeViewTemplate"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfDevelopment"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <TreeView x:Name="treeView">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding Episodes}">
                    <StackPanel Orientation="Horizontal">
                        <Rectangle Width="10" Height="10" Fill="BlueViolet" Margin="2"/>
                        <Label Content="{Binding Path=Title}"/>
                    </StackPanel>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
    </Grid>
</UserControl>

In the code behind, I have created sample data and set as ItemSource for TreeView control.

    public partial class TreeViewTemplate : UserControl
    {
        public TreeViewTemplate()
        {
            InitializeComponent();

            var webSeries = new List<Series>()
            {
                new Series("Friends")
                {
                    Episodes = new List<Episode>()
                    {
                        new Episode("Episode 1"),
                        new Episode("Episode 2"),
                        new Episode("Episode 3"),
                        new Episode("Episode 4")

                    }
                },
                new Series("Young Sheldon")
                {
                    Episodes = new List<Episode>()
                    {
                        new Episode("Episode 1"),
                        new Episode("Episode 2"),
                        new Episode("Episode 3")

                    }
                }
            };
            treeView.Items.Clear();
            treeView.ItemsSource = webSeries;   

        }
    }

That's it for today, Happy Coding!..

Asynchronous programming with C#

Ravina Deogadkar — Thu, 26 Jan 2023 09:35:45 +0000

Asynchronous programming is an essential part of modern software development, and C# provides powerful tools for implementing it. Asynchronous programming allows developers to write code that can execute tasks concurrently, without blocking the main thread of execution. This makes applications more responsive and efficient by allowing multiple tasks to be processed at the same time.

In C#, asynchronous programming is implemented using a combination of language features such as async/await keywords and Task objects. The async keyword marks a method as being capable of running in an asynchronous context while the await keyword tells compiler that it should wait until all operations within an async method have completed before continuing with subsequent instructions in the program flow. By combining these two elements together developers can create highly performant applications which are able to process multiple requests simultaneously without waiting on any particular task or operation to complete before continuing with other work items in its queue.

To illustrate how this works let’s take a look at some sample code written using Visual Studio 2019:

public static void Main() {  

      var myTask = DoSomethingAsync();   // Start executing DoSomethingAsync(). Returns immediately!    

      Console .WriteLine("Doing something else...");     
      // Continue doing other things here...    
} 

private static async Task<int> DoSomethingAsync() {        
      int result = await LongRunningOperation();         
      return result;     
}    

private static int LongRunningOperation(){          
      Thread.Sleep(5000);           
      return 42;        
}

In this example we start off by calling our long-running function “DoSomethingAsync” from our main entry point (Main). Notice however that when we call this function nothing actually happens because all operations within “DoSomethingAsync” are marked with ‘async' so they will run asynchronously instead – meaning they won't block or delay anything else happening inside Main(). We then print out some text indicating what's going on next ("Doing something else...") followed by finally returning control back over again once everything has finished executing inside "LongRunningOperation".

The advantage here is obvious - not only does our application remain responsive throughout but also no unnecessary resources were wasted during execution since only one thread was used for both functions even though their individual executions were performed independently from each other (in parallel). This makes asynchronous coding very effective when dealing with high volumes data processing scenarios where performance needs to be optimized accordingly

In this blog we focused on what and how's of asynchronous programing, in the next blog we will understand Task class and its methods in more detail.

Happy Coding!...

Why C# records should be preferred over classes.

Ravina Deogadkar — Thu, 19 Jan 2023 14:48:08 +0000

Hello everyone! Hope everything is fine. Today I am going to discuss about why we should use C# records instead of classes.

What are Record?

From C# 9, records are new type defined as reference type using record keyword. They are immutable which means once created it cannot be changed.

Record type already overrides both virtual ToString and Equals method on the Object base class.
public record class Person(string firstName, string lastName)

public record Person{
    public String firstName {get; set;}
    public String lastName {get; set;}   
};

Use of class keyword is optional

IN C# 10, records are introduced as struct type which defines record as value type.

public readonly record struct Point(double X, double Y, double Z)

public record struct Point{
    public double X {get; set;}
    public double Y {get; set;}   
    public double Z {get; set;}   
};

Equality

Records are value type unlike class type, So two record variable are said to be equal if they have same record type definition and values are equal in two records.
on the other hand two class type variable are said to be equal if they have same class type definition and both are pointing to same object.

Let's look at example

public record struct Point{

    public Point(double pt1, double pt2, double pt3){
        X = pt1;
        Y = pt2;
        Z = pt3;
    }

    public double X {get; set;}
    public double Y {get; set;}   
    public double Z {get; set;}   
};

And then we will create variables of those records

public class Main{

    public static void main(){

        Point p1 = new Point(5.0, 10.0, 1);
        Point p2 = new Point(15.0, 10.0, 0);
        Point p3 = new Point(5.0, 10.0, 1);

        if(p1 == p2)
            Console.log("p1 and p2 are Equal");

        if(p1 == p3)
            Console.log("p1 and p3 are Equal");
    }
}

Below we are going to see same example using classes

public class Main{

    public static void main(){

        Point p1 = new Point(5.0, 10.0, 1);
        Point p2 = new Point(15.0, 10.0, 0);
        Point p3 = p1;

        if(p1 == p2)
            Console.log("p1 and p2 are Equal");

        if(p1 == p3)
            Console.log("p1 and p3 are Equal");
    }
}
//Output : p1 and p3 are Equal

Immutability

Records are designed to be immutable unlike classes, Once records are instantiated they cannot be changed.

Records do support nondestructive mutation by using keyword with

 public static void Main(){
        Person employee1 = new Person("John", "Doe");
        Person employee2 = employee1 with {firstName = "Martin"};

        Console.WriteLine(employee1.firstName + " "+ 
        employee1.lastName);
        //John Doe
        Console.WriteLine(employee2.firstName + " "+ 
        employee1.lastName);
        //Martin Doe

    }

Concise code

We have already discussed short hand way(single line declaration) of writing records. Less code means smaller codebase and easy maintenance.

Records are generally used for handling data and classes defines behaviors.

That's all for today, Happy coding!...

Understanding TDD

Ravina Deogadkar — Sun, 04 Dec 2022 14:24:43 +0000

Test Driven Development (TDD) is a very powerful development methodology that completely turns traditional development around. When you first go to implement a new feature, the first question that you ask is whether the existing design is the right design for that feature. If it is not, you make changes to the existing design locally to enable that feature to be implemented as quickly and easily as possible. The result is that you are constantly improving the quality of your code and ensuring that your designs match the actual requirements that you will actually use in production. This also helps to ensure that the final code works as expected and does not introduce any unwanted side-effects or bugs.

When implementing new features in a software system it is important to keep sight of the bigger picture at all times and make sure that the system is working as efficiently and accurately as possible. This includes running tests against your production environment. These tests will check whether the new feature is working correctly and identify any potential problems that might arise as a result. If these tests fail then the underlying design of the code will need to be changed to ensure that the new feature can be successfully implemented.

The continuous integration and deployment (CI/CD) process is designed to automate this process. TDD is essentially a test-first development methodology in which you write an automated test suite for your code before you write the actual code itself. These tests are written using programming language-specific syntax and are not actual examples of user behavior.

Looking at few examples for understanding TDD.

//Main.java
public String helloString(){
    return "Hello";
}

This is a simple method returning string "Hello" .To test the returned string we will be adding a test method.

//MainTest.java
    @Test
    void shouldReturnHello(){
        Assertions.assertEquals("Hello", Main.helloString());
    }

To make tests readable have meaningful name for the test methods and aggregate testcases to different classes as per their respective purpose.

Here is a directory structure of LibraryMgmt project. I have separate test class for controller, service and application class.

You can find complete source code here.

That's it for today! Thank you and Happy Coding!...

How to create an image from an existing container

Ravina Deogadkar — Sun, 23 Oct 2022 08:29:01 +0000

Hi everyone! Earlier we have created docker container using nginx:alpine image and now we will learn to create snapshots of docker container. To the readers who have not read my previous article you can find it here. Don't forget to like it and share it😄

Docker run

Let's create a container from nginx:alpine image and name it as "myweb" that will run on 80 port using Docker run command.

docker run -p 80:80 --name myweb -d nginx:alpine

We can now check our newly created container
docker ps -a

Docker exec -it

Docker exec command is used to execute a command in the running container.

docker exec -it myweb /bin/bash

It gives us an error, but why so??
Its because bash is not installed on our container so we are going to use /bin/sh.

Now let's add Tutorial.txt file in the root directory of our container.

press 'Ctrl + D' to exit

Docker commit

Now we have our container ready we can create snapshot of our container by using docker commit comand along with the container name/Id and new container name.

docker commit myweb mynginx

Let's check our newly created docker images.

docker images

And let's check if our file is there in image by creating a container from that image.

Our new container is created with name myweb_v2, now we will check for our Tutorial.txt file in a new container.

That's it for today, Happy Coding!.....

Learn how to spin up docker container

Ravina Deogadkar — Sat, 17 Sep 2022 11:19:47 +0000

Hello everyone!, Today we are going to look at step by step process of creating and running a docker container.

Docker is a software platform that lets you build, test and deploy application very quickly. Docker enables you to separate your applications from your infrastructure so you can deliver software quickly Using Docker an application can be easily deployed and scaled in any environment. Docker provides the ability to package and run an application in a loosely isolated environment called a container. Containers are lightweight and contain everything needed to run the application, so you do not need to rely on what is currently installed on the host machine.

Docker uses a client-server architecture. The Docker client talks to the Docker daemon, which does the heavy lifting of building, running, and distributing your Docker containers which may or may not run on same system as client.

Docker create

To create docker container from image we make use of docker create command along with the image.
An image is a read-only template with instructions for creating a Docker container. A container is a runnable instance of an image.

docker create nginx:alpine

This will create container with nginx:alpine image and the container will have some random name assign to it. If the images are not present locally then it will pull it from registry.
We can assign custom name to docker using --name

docker create --name myNginx nginx:alpine

This will create nginx docker container with name myNginx. But to access our container from our computer we need to port forward it to specific port using -p

docker create --name myNginx -p 80:80 -d nginx:alpine

In the docker desktop you can see our new container created.

Now we can access our container myNginx on port 8080.

Docker start

Docker start command will start docker container and status of container will change from Created to Running.

docker start

Docker ps

Docker ps will list all the running containers and using -a will list all containers created in the machine.

docker ps -a

You can see our myNginx container created and currently in running state.

Docker images

Docker images command will list down all the images.

docker images -a

You can see our nginx alpine image the one that we have currently used to create container.

Docker stop

Docker stop command will stop the container and you can see the status turned to Exited state.

And our docker ps command shows the status as Exited

Docker rm

Docker rm command will remove the specific container permanently

You can check using docker ps command that container is removed from machine.

That's it for today, until next time Happy Coding!..

React: Code splitting

Ravina Deogadkar — Wed, 07 Sep 2022 16:05:16 +0000

Hi everyone! recently I was working on complex multiple module react app and also it has lots of dependencies on third party libraries. So the loading time of some of the components was beyond its expectations and the size of bundle was the other part.

Any web application will be user accessible/friendly only if the response time is lowest as possible and smaller bundle size will improvise build time and save storage.

Bundling is a process to merge all imported modules in a single files. Bundling is good when size of dependencies is small but as dependencies grow merging in a single file is a problem. Here code splitting comes in a picture, Code splitting is a feature supported by Webpack and comes pre-configured with code-react-app.

Code Splitting

It is a process to lazy load only the things that are required by our application causing speeding up the load time of our application. With code splitting the code that is never needed will not be loaded and the code size will be lower at initial build.

Dynamic imports

let sortedString = import('./StringUtils')
    .then(StringUtils=>{
        StringUtils.sort(str)
    })
    .catch(err=>{
    //handles error
   })

In the example, StringUtils module is not imported before this code and the bundle size is smaller. When webpack comes across this syntax it automatically starts code splitting.

React.lazy

Lets you render dynamic imports as regular components. It automatically renders the bundle containing the component when it is first rendered.

let UtilsComponent = React.lazy(()=>import('./StringUtils'))

React.lazy takes a function as input that imports a module and returns a promise that resolves into a module with a default export to a component.

React.suspense

React.suspense is used to render lazy components which shows fallback component until we are waiting for lazy component to render.

import React, { Component, Suspense } from 'react'

export default class Statics extends Component {
  render() {
    let RandomColor = React.lazy(()=>import('./RandomColor'));
    return (
      <div>
        <Suspense fallback={<div>Loading....</div>}>
          <RandomColor/>
        </Suspense>
      </div>
    )
  }
}

fallback props of React.Suspense takes any component that will be displayed until the lazy component is loaded.

So here we have solved both of are problem, our bundle size is smaller since we are dynamically importing components only when they are required. Load time is also low as the bundle size is low due to dynamically importing components.

That's all for today, until then Happy Coding!..

JavaScript : Array Literals

Ravina Deogadkar — Mon, 22 Aug 2022 04:49:28 +0000

Hi everyone! Today we are going look at a very basic but very useful concept Array literals. Unlike a number or string element which represents a single element array are collection of similar data type. Arrays can have zero or more elements. In this article we are going to discuss about array literals in JavaScript.

Array are represented by set of elements enclosed in square brackets.

let x=[5,6,10,15,25]; console.log(x.length)

length property of Arrays will return 5.

Arrays and extra commas(,)

Presense of extra commas(,) in arrays affects the array length. Any two adjacent commas in an array leaves an empty slot for unspecified element. Let's look at few examples.

let x=[5,,6,7,8] console.log(x.length);

And when you log x it will be

[5, <Empty element>, 6,7,8]

Here although only four elements are there in an array but the four commas (second empty ,) causes array length to be 5.

let x=[5,6,7,8,]
and when you log x it will be

[5,6,7,8]

Here again array has four elements and four commas(,) but the array length is 4 and not 5 this is because last comma is ignored.

Note: While using array iterating methods like Map this empty element is always skip.

It's always recommended to have extra comma at the end as it improves the readability of code when you are working on big arrays.

let fruits=["Apple", "Banana", "Mango", "Jack fruit", ]
And also adding comma at end won't cause any merge conflict if multiple team members are adding elements to same array.

That's it for today!
Happy Coding.....

Java executor framework

Ravina Deogadkar — Sun, 14 Aug 2022 17:09:31 +0000

ExecutorService is a JDK API that simplifies running tasks in asynchronous mode. It provides a pool of threads and an API for assigning tasks to it. The executor framework is an implementation of the Producer-Consumer pattern. The java.util.concurrent.Executors class provides a set of methods for creating ThreadPools of worker threads. In this article, we will be looking at types of executors.

Types of executor

Single thread Executor

The SingleThreadExecutor is a special type of executor that has only a single thread. It is used when we need to execute tasks in sequential order.

ExecutorService executor = Executors.newSingleThreadExecutor()

Fixed thread pool

FixedThreadPool is another special type of executor that is a thread pool having a fixed number of threads. By this executor, the submitted task is executed by the n thread.
The tasks are then stored in LinkedBlockingQueue until previous tasks are not completed.

ExecutorService executor = Executors.newFixedThreadPool(4);

Cached thread pool

The CachedThreadPool is a special type of thread pool that is used to execute short-lived parallel tasks. The cached thread pool doesn't have a fixed number of threads. When a new task comes at a time and all the threads are busy executing some other tasks, a new thread is created by the pool and added to the executor.

ExecutorService executor = Executors.newCachedThreadPool();

Scheduled executor service

The ScheduledExecutorService interface runs tasks after some predefined delay and/or periodically.

ScheduledExecutorService scheduledExecService = Executors.newScheduledThreadPool(1);
The scheduleAtFixedRate and scheduleWithFixedDelay are the two methods that are used to schedule the task in ScheduledExecutor.
The scheduleAtFixedRate method executes the task with a fixed interval when the previous task ended.
The scheduleWithFixedDelay method starts the delay count after the current task is complete.
The main difference between these two methods is their interpretation of the delay between successive executions of a scheduled job.

scheduledExecService.scheduleAtFixedRate(Runnable command, long initialDelay, long period, TimeUnit unit)

scheduledExecService.scheduleWithFixedDelay(Runnable command, long initialDelay, long period, TimeUnit unit)

The best use case for ExecutorService is the processing of independent tasks, such as transactions or requests according to the scheme “one thread for one task” in Oracle’s documentation, fork/join was designed to speed up work that can be broken into smaller pieces recursively.

That's all for today, Happy Coding!..