DEV Community: Hari Haran😎

What's your typical RAM usage ?

Hari Haran😎 — Wed, 23 Sep 2020 06:19:50 +0000

For the love of Open Source

Hari Haran😎 — Sun, 14 Jun 2020 16:40:44 +0000

Everyday we need some tools to get our work done, like noting things, sharing collaborative items, tracking work, chatting with people and hosting applications on the cloud. All these are the most wanted areas of Software industry and we are paying the commercial companies with either in terms of our data or money.

Today I have a curated list of amazing Open source ❤️ products that you can use instead of the commercial ones.

Notes

Writing notes is very important in IT Life, be it to making API documentation to sharing and storing our thoughts on a digial and easily accessible manner. Here are some of the most popular applications and services that we use.

Instead of these commercial products try using any of the below open source projects. All these products are FREE and are mainly focused on privacy.

Project Management

Being it supply chain or processing transactions every company does have a tool to keep track of the projects. Here are some commercial tools in current trend

Instead of the above try switching to any one of these open source project management tools.

Team Chat

Chatting and communicating work between people who work from various offices and parts of the world. Communication is very important. Here are the current trending apps

Instead try any one of the open source projects for communication.

Cloud Hosting

Hosting your application in the cloud is also a important factor in software development. Without cloud services we won't be able to ship products and services to clients seamlessly. The current trending apps

Instead here are the open source FREE cloud hosting services that are available.

If you are still reading I hope this list will definitely help you in choosing the right tool for the right job. Thanks for reading. 🙏
Stay tuned for more amazing lists 📃📃

7 FREE Courses to learn ANGULAR

Hari Haran😎 — Mon, 08 Jun 2020 11:53:54 +0000

Angular is one of the most biggest community of developers who keep on sharing amazing things.
Here are some of the FREE courses which will take you through the basics for working in Angular.

All these courses are free as on 8th June 2020. I hope this list will be useful for beginners who are getting started with Angular.

what's your side hustle after work hours?

Hari Haran😎 — Thu, 07 May 2020 05:13:52 +0000

What do you do after work time ?

If you have a side hustle how motivated are you to achieve it ?

JavaScript tips and tricks to be a better developer

Hari Haran😎 — Thu, 07 May 2020 03:59:35 +0000

These are some of the very basic Javascript methods that will help you get better in Javascript.
Let's straightly jump into coding.. 💥

Fill array with data

var myArray = new Array(10).fill('A');
console.log(myArray); 

//Output
[ 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A' ]

Merge Arrays

var bikes = ['TVS', 'BMW', 'Ducati'];
var cars = ['Mercedes', 'Ford', 'Porsche'];
var autoMobiles = [...bikes, ...cars];
console.log(autoMobiles);

//Output
[ 'TVS', 'BMW', 'Ducati', 'Mercedes', 'Ford', 'Porsche' ]

Intersection of arrays

var setA = [5, 10, 4, 7, 1, 3];
var setB = [3, 11, 1, 10, 2, 6];
var duplicatedValues = [...new Set(setA)].filter(x => setB.includes(x));
console.log(duplicatedValues);

//Output
[ 10, 1, 3 ]

Remove falsy values

var mixedArray = [12, 'web development', '', NaN, undefined, 0, true, false];
var whatIsTrue = mixedArray.filter(Boolean);
console.log(whatIsTrue); 

//Output
[ 12, 'web development', true ]

Get random value

var numbers = [];
for (let i = 0; i < 10; i++) {
    numbers.push(i);
}

var random = numbers[Math.floor(Math.random() * numbers.length)];
console.log(random); 

//Output
 4

Reverse an Array

var reversedArray = numbers.reverse();
console.log(reversedArray);

//Output
[ 9, 8, 7, 6, 5, 4, 3, 2, 1, 0 ]

Sum of all values in array

var sumOfAllNumbers = numbers.reduce((x, y) => x + y);
console.log(sumOfAllNumbers);

//Output
45

Remove duplicates from array

var duplicatedArray = ['hello','hello','web developers']
var nonDuplicatedArray = [...new Set(duplicatedArray)];
console.log(nonDuplicatedArray); 

//Output
[ 'hello', 'web developers' ]

Thanks for reading. I hope this gave you an some insights about the JavaScript array methods. Keep following and Stay tuned for more amazing blogs.

How to visualize live data using SignalR and Angular

Hari Haran😎 — Mon, 27 Apr 2020 08:51:23 +0000

In this blog, we will take a look at a simple scenario to use SignalR to track live data and feed it in our client application. For this let us consider a simple scenario where we need to know what's the price of a BitCoin in various countries right now or get stock market prices. You can also think of any other scenario where the data gets changed every second.

Let's look at what you need to have and what you need to know before we get into detail.

Prerequisites

A computer 💻 😝
Visual Studio or VS Code 🎨
Knowledge in consuming API's using C#
Angular basics to visualize things

Getting started

Create a simple ASP.NET Web application using the default template. This will provide you with a weather forecast controller
Create a simple angular app using ng new signalR-client
Since we know that any angular app by default will run in the port 4200 let's solve the CORS issue first. If you have experience in creating apps earlier you knew this is the first most thing to be done for the client-server communication to happen.

Add the below piece to your startup to be able to communicate with the client without any issues.

services.AddCors(options => 
    { 
        options.AddPolicy("CorsPolicy", builder => builder
        .WithOrigins("http://localhost:4200")
        .AllowAnyMethod()
        .AllowAnyHeader()
        .AllowCredentials()); 
    });

Please note that we are not using the AllowAnyOrigin() method to enable cors from any origin, but we explicitly say which origin to allow WithOrigins(“[http://localhost:4200](http://localhost:4200/)”). We are doing this because in .NET Core 3.0 the combination of AllowAnyOrigin and AllowCredentials is considered as an insecure CORS configuration.

Server side code

Now we need to bring some data. How do we do that? As we will need Live BitCoin price, we will do with the coindesk API. Let's create a simple service to obtain data from the coindesk API and convert it based on our response model.

Since by default the coindesk API response gives out results for three countries.

We will plot charts for all three of them. Just for convenience, I am converting the response into a JSON object like this.

public class CoinResponse {
    public string Name { get; set; }
    public List<ReportResult> ReportData { get; set; }
}
public class ReportResult {
    public string Group { get; set; }
    public string Count { get; set; }
}

We are grouping each currency based on the currency code and the price. Now that we have a simple service to get data, let's look at the signalR stuff to be able to send data to the client-side in real-time.

Adding SignalR

We need to use the Hub class from the Microsoft.AspNetCore.SignalR and create a class like this

public class CoinHub : Hub{
}

What is this Hub? Why do we need it? And why is the class empty?

Hub is nothing but a communication pipeline between client and server using SignalR. We don't need any methods here, because we are just doing one-way communication, where the server will send data to the client.

Adding a controller

Now that we have everything in place, the last part is to add an Endpoint. Let's call the controller as CoinController and we will be using the IHubContext and call our service which fetches data from the coindesk API.

The controller will look like this. But notice something called TimerManager .

[Route("api/coinPrice")]
[ApiController]
public class CoinController : ControllerBase
{
  private readonly IHubContext<CoinHub> _hub;

  public CoinController(IHubContext<CoinHub> hub)
  {
    _hub = hub;
  }

  public IActionResult Get()
  {
    var timerManager = new TimerManager(() => _hub.Clients.All.SendAsync("getCoinPrice", CoinService.GetCoinPrice()));
    return Ok(new { Message = "Request Completed" });
  }
}

Once you have added a controller don't forget to add the endpoint to your startup pointing to the empty Hub class that we created

app.UseEndpoints(endpoints =>
  {
    endpoints.MapControllers();
    endpoints.MapHub<CoinHub>("/coinPrice");
  });

The route in the MapHub should match the controller endpoint path that we created above.

TimerManager

This is a class to be able to repeatedly poll for whatever interval that you specify and send results to the client. Here I am adding a timer for every 10 seconds. You can modify the interval as per your needs.

public class TimerManager {
    private readonly Timer _timer;
    private readonly AutoResetEvent _autoResetEvent;
    private readonly Action _action;

    public DateTime TimerStarted { get; }

    public TimerManager(Action action)
    {
      _action = action;
      _autoResetEvent = new AutoResetEvent(false);
      _timer = new Timer(Execute, _autoResetEvent, 10000, 10000);
      TimerStarted = DateTime.Now;
    }

    public void Execute(object stateInfo)
    {
      _action();

      if ((DateTime.Now - TimerStarted).Seconds > 60)
      {
        _timer.Dispose();
      }
    }
  }
}

Enabling Angular client to consume SignalR

The first thing to do is install the signalR library. You can do it by running
```
npm i @aspnet/signalr
```
Now let's create a service to consume data using the SignalR Hub

private _hubConnection: signalR.HubConnection

  public startConnection() {
    this._hubConnection = new signalR.HubConnectionBuilder()
      .withUrl('https://localhost:44316/coinPrice').build();

    this._hubConnection.start()
      .then(() => console.log('connection started'))
      .catch(error => console.log('Error while creating connection:' + error));
  }

  public addCoinPriceListener = () => {
    this._hubConnection.on('getCoinPrice', (response) => {
      this.data = response;
      this.convertDateToTimeStamp();
    })
  }

The code above is self-explanatory and very simple to understand. We are using the SignalRHubConnectionBuilder with our endpoint URL and we start the connection.
Once we have the connection started using the connection call the hub's method. From the server-side, on the Get method in the controller, we can give the method name as getCoinPrice and obtain the response.
Now the coindesk results response has only the date string. We need to convert that into a realTime object with an interval in minutes. I have written a simple method to map the result

convertDateToTimeStamp() {
    this.data.filter(x => {
      x.reportData.filter(r => {
        var timeStamp = moment.utc(r.group).toDate();
        const dataInDecimal = r.count.replace(/\,/g, '');
        var type = '';
        if (x.name === 'USD') {

        }
        // plot the data only when it has changed
        if (dataInDecimal != this.dataInDecimalcopy) {
          const dataCopy = this.series.find(s => s.name === x.name).data.slice(0);
          const timeCopy = this.timestamps.find(t => t.name === x.name).timedata.slice(0);
          dataCopy.push(parseFloat(dataInDecimal))
          timeCopy.push(timeStamp.getHours() + ":" + timeStamp.getMinutes() + ":" + timeStamp.getSeconds())
          this.dataInDecimalcopy = +dataInDecimal;

          // *optional: limit amount of data points shown
          if (dataCopy.length > 20) { dataCopy.shift(); }
          if (timeCopy.length > 20) { timeCopy.shift(); }

          // set the OG data equal to the copy
          this.series.find(s => s.name === x.name).data = dataCopy;
          this.timestamps.find(t => t.name === x.name).timedata = timeCopy;
        }
      });

    });
  }

Once we have done that, you can use any Chart Library or a simple table to visualize the data. Here I will be using KendoCharts to visualize and plot data. The HTML code for KendoCharts may look like this.

<kendo-chart>
    <kendo-chart-title text="Bitcoin live pricing chart"></kendo-chart-title>
    <kendo-chart-legend position="bottom"
                        orientation="horizontal"></kendo-chart-legend>
    <kendo-chart-tooltip format="{0}"></kendo-chart-tooltip>
    <kendo-chart-value-axis>
      <kendo-chart-value-axis-item [title]="{ text: 'Price' }"
                                   [min]="6000"
                                   [max]="10000">
      </kendo-chart-value-axis-item>
    </kendo-chart-value-axis>
    <kendo-chart-category-axis>
      <kendo-chart-category-axis-item [title]="{ text: 'Time stamps' }"
                                      [categories]="_coinService.timestamps[0].timedata">
      </kendo-chart-category-axis-item>
    </kendo-chart-category-axis>
    <kendo-chart-series>
      <kendo-chart-series-item *ngFor="let item of _coinService.series"
                               [style]="'smooth'"
                               type="line"
                               [line]="{ style:'smooth' }"
                               [data]="item.data"
                               [name]="item.name">
      </kendo-chart-series-item>
    </kendo-chart-series>
  </kendo-chart>

Once you have done that you will be able to visualize live bitcoin prices like this. You can also change the type of chart. Here I have used Line chart, you may also use Area, Bar 💹

Conclusion

I hope this blog gives you an understanding of using signalR to your own use cases. You can also try out various scenarios to be able to get more familiar with SignalR 💥

This was originally posted on Hariharan Subramanian

Top 10 Unsplash Alternatives

Hari Haran😎 — Mon, 23 Mar 2020 11:54:42 +0000

Hey developers, ever wondered where bloggers get copyright free amazing photos for their blogs, thumbnails and baners etc? You must've definitely used Unsplash but here are some other alternatives with their links. 😊

Hope you find it useful for everyone. 👍

Originally posted on HariHaran Subramanian

Thanks for reading 🙏🙏

Write Angular code 10x faster

Hari Haran😎 — Fri, 28 Feb 2020 04:31:03 +0000

In today's age speed is a thing. Speed is a necessity. In this blog i will tell you a secret to write angular code 10x faster ⏩ ⏩.

Prerequisites ❔

Visual Studio code
You should be working in Angular 😝

If you are not having VSCode, you can download it here for free.

Angular & Component sharing ☑️

In angular, we can have multiple reusable components. Eg: You can create the below list of components which are commonly used across the application and it enables sharing and faster development.

⬇️ Some of the commonly used components like ⬇️

Blade
Modal
Any common filters used across the application.
Shared components that generate Charts/ Graphs etc.

🙏 How VS-Code can help 🏁

When you are starting out on a new project or application, initially we will focus on getting the common components out first. Once we have developed the common components, we can easily keep on re-using it across the entire application.

Let's say we need blade on multiple areas of the application. While development instead of typing the entire snippet, we can make vscode to automatically insert the whole component HTML code for us.

How to create snippets? ℹ️

Open Visual Studio Code.
Open the desired project or workspace. [Optional]

The second step is optional because some people prefer to create snippets which applies to a particular workspace or specific project.
Type F1 on your keyboard and type User Snippets
Press Enter and vs code will prompt for selection of a language. Since we are developing snippets for Angular proceed to choose HTML
Once you have selected html.json it will open a json file, in which we are going to make some changes.

The syntax for the snippet.json will be something like this

{
    "snippetName":{
        "prefix":"your-shortcut-name",
        "body":[
        // Your full HTML content to be inserted
        ]
    }
}

Using the help of this syntax you can insert whatever you want to inside your HTML in an efficient and fastest way.

NOTE: Each line inside the body[] should be enclosed within "" string notation.

My snippet shortcuts

Here are my top snippets for creating something very quickly.

⚡ Blade ⚡

"app-blade": {
        "prefix": "blade",
        "body": [
            "<app-blade>",
            " <div bladeHeader>",
            " </div>",
            " <div bladeContent>",
            " </div>",
            " <div bladeFooter>",
            " </div>",
            "</app-blade>"
        ]
    }

Kendo Grid

{
    "KendoGrid": {
        "prefix": "k-grid",
        "body": [
            "<kendo-grid [data]=\"data\"",
            "            [filterable]=\"true\"",
            "            [pageSize]=\"10\"",
            "            [skip]=\"0\"",
            "            [kendoGridSelectBy]=\"'id'\"",
            "            [selectedKeys]=\"selectedKeysIndexes\"",
            "            [resizable]=\"true\"",
            "            [sortable]=\"true\">",
            "",
            "</kendo-grid>"
        ],
        "description": "KendoGrid"
    }
}

I have a much bigger list since I am working on an enterprise application, we have a lot of sharable components that we tend to keep re-using.

I found this highly useful and improves our workflow and the way we write code. My team found it very useful.

If you are reading this, I hope this will definitely help you as well.

Happy coding 💥💥

Thanks for reading. 🙏 🙏
Stay tuned for more interesting stuffs 🔥🔥🔥🔥

Angular ViewChild and Template Variables

Hari Haran😎 — Mon, 10 Feb 2020 05:30:44 +0000

Today one of my friend was facing an interesting problem. As sometimes if we are struggling in something for hours, we may call for help from a friend, as its better to notice something minute with an extra pair of eyes.

Introduction

As the title says we are working on a very large enterprise application whose front end is built in Angular. We have lot of nested and sub components which gets rendered in the HTML based on multiple conditions.

An example would look something like this



<div>
  <my-first-component>
  </my-first-compoent>
  <div *ngIf="!isProcessing">
    <message-component #messaging>
    </message-component>
  </div>
  lot of other stuffs...
</div>

If you are already familiar with Angular you might recognize the above HTML structure. The above is just a simple example. In a real time application there must be more than 1000+ lines of HTML code which renders various subcomponents.

😐 The problem❓

As i already said if you are familiar with angular you will understand the below code.



messages : Messages = new Messages();
@ViewChild('messaging') messageComponent : MessageComponent;

ViewChild is nothing but, it is used to access the childComponent from your parentComponent.
In the above two lines of code, one is just a variable initialized with the Messages class and the other is used to access the child component called MessageComponent

👀 ViewChild / Template Variable problem ❕

What we were doing is trying to access the value of the messages variable in the HTML.
An example would look something like this



<div>
  {{messages | json}}
  <div *ngIf="!isProcessing">
  {{messages | json}}
    <message-component #messaging>
    </message-component>
  </div>
</div>

Notice the line immeadiately after the first div the value can be seen in the UI.
But we were not able to get the value inside the second div ,i.e where the isProcessing is set to !(false)
We checked alot of things including ngOninit() and the object state, even validated the if condition twice.
Everything looked perfectly fine,but still we were not able to get the value inside the processing div.

💭 The Solution

After an hour of debugging it strike's me that the name of the ViewChild selector and the variable name is the same. Why not try changing this ? So we did so. We changed the selector name to #messageComponent and boom 🔥 it works.

A working example can be found here at Stackblitz ✌️

Originally posted on HariHaran Subramanian

Thanks for reading and stay tuned for more blogs 🙏🙏

How to Fix Windows 10 Search is not working

Hari Haran😎 — Thu, 06 Feb 2020 05:27:59 +0000

Originally posted on HariHaran Subramanian

As the title states you're here reading this to fix 💩 your windows 10 Search. So this recently happened to me as well on the latest version of windows. This seems to be a issue from MSFT end that alot of users are affected due to this issue. 💥

I have came across alot of blogs asking to try to update / troubleshoot windows update, but all those things did not resolve the issue for me.
Here's the final working method ❕❕.
All you need to do is execute tje below commands one by one from a Adminstrator command prompt.

REG ADD HKCU\Software\Microsoft\Windows\CurrentVersion\Search /v BingSearchEnabled /t REG_DWORD /d 0

REG ADD HKCU\Software\Microsoft\Windows\CurrentVersion\Search /v CortanaConsent /t REG_DWORD /d 0

tskill searchui

You don't have to restart your computer. The search will now work normally.

PROOF 🔥

Thanks for reading! ✌️ ✌️

Stay tuned for more blogs 👐

Amazing Nuget Libraries for C# Development

Hari Haran😎 — Wed, 05 Feb 2020 10:19:26 +0000

Orignially posted on HariHaran Subramanian

Today I am sharing some of the amazing libraries which help in a lot of ways in almost any project. Here are them in no particular order.

💻 Development

🔧 Data Generators

💰 Logging

🔦 Testing

Kudos to all the amazing developers ✋ who have made it to this list. ❤️
I hope some of these will help you fasten up or even a slight improvement in your software development life cycle 🔄

I'm also interested to know if i have missed anything. Mention your awesome libraries in comments 👇 👇 👇

Thanks for reading! 🙏

Awesome .NET bloggers i enjoy reading as a developer

Hari Haran😎 — Thu, 30 Jan 2020 13:46:09 +0000

Originally posted in HariHaran Subramanian

I have curated some list of people who write some amazing stuffs revolving around .NET and C#.
If you are working on a .NET Environment or trying to learn .NET/C#, here are the awesome bunch of people whom you should follow up. 🔥🔥🔥🔥🔥

Name	Blog	Twitter
Jon Skeet	https://codeblog.jonskeet.uk/	https://twitter.com/jonskeet
Ardalis	https://ardalis.com/blog	https://twitter.com/ardalis
Elmah	https://blog.elmah.io/	https://twitter.com/elmah_io
Ranjeet Singh	https://ranjeet.dev/	https://twitter.com/NotRanjeet
Jiří Činčura	https://www.tabsoverspaces.com/	https://twitter.com/cincura_net
Christian Findlay	https://christianfindlay.com/	https://twitter.com/CFDevelop
Michael Shpilt	https://michaelscodingspot.com/	https://twitter.com/MichaelShpilt
Adam Sitnik	https://adamsitnik.com/	https://twitter.com/SitnikAdam
Jason Roberts	http://dontcodetired.com/blog/	https://twitter.com/robertsjason
CSharp Digest	https://csharpdigest.net/blog	https://twitter.com/csharpdigest
Jeremy Morgan	https://www.jeremymorgan.com/blog/dotnet/	https://twitter.com/JeremyCMorgan
Jimmy Bogard	https://jimmybogard.com/	https://twitter.com/jbogard
Mark Heath	https://markheath.net/	https://twitter.com/mark_heath
Vladimir Khorikov	https://enterprisecraftsmanship.com/posts	https://twitter.com/vkhorikov
Mark Seemann	https://blog.ploeh.dk/	https://twitter.com/ploeh
Tim Corey	https://www.iamtimcorey.com/blog	https://twitter.com/IAmTimCorey
Scott Hanselman	https://www.hanselman.com/blog/	https://twitter.com/shanselman
Kamil Grzybek	http://www.kamilgrzybek.com/	https://twitter.com/kamgrzybek
AzureTipsAndTricks	https://microsoft.github.io/AzureTipsAndTricks/

I hope the list helps you to interact and connect with more awesome people. ❤️

I wish to make the list bigger 💪. Click follow 📌 and reply to the comment ✒️ section of your favorite blogger.

Feel free to checkout this, if you are interested in building bots.

Show some love ♥️ ♥️