DEV Community: Anil Kumar Khandei

Channels in Octopus Deploy

Anil Kumar Khandei — Sun, 23 Oct 2022 19:17:16 +0000

Lets say there are 2 code branch and their associated pipelines for Continous Integration-

Regular branch for current release
future branch for future release [New]

You may have 2 different agile teams working on each of the above branches.

So obiviously for the future branch code we had to provision another set of parallel infrastructure for DEV, QA and UAT

Now comes the tricky part for implementing the Octopus deploy part for the second parallel infra.

Initial analysis may suggest we have to duplicate the existing project, variables, steps etc. But this is bruteforce method, the correct way to implement such a scenario is by using channels in Octopus deploy.

Its a very interesting that the team at Octopus already knew such a situation might occur where we start duplicating projects and creating a mess. Hence they introduced the neat and clean way to accomplish this.

Step 1: Create a new Lifecycle
Step 2: Go to Project > Deployments > Channels
Step 3: Add a new channel, associate it with lifecycle created in step 1.
Step 4: Create a version rule that is applicable to this channel**

**The way the channel works is when a new artifact is created in azure artifactory, it checks for the revision number.

Based on version rule defined in the channel it determines which channel processes the new artifact.

Octopus Deploy Documentation can be found at [Octopus Channels]: https://octopus.com/docs/releases/channels

CSS Precedence

Anil Kumar Khandei — Sun, 23 Oct 2022 18:47:40 +0000

Have you ever wondered how many places we can define css?

We usually define

in a separate css file,
occassionally inline as well

but which one takes the precedence when we have styles defined in multiple places which target the same behaviour.

Ideally its best to define all css in one place but in real world it may not happen that way so in this short but productive post I highlight the precedence of css(starting with the highest order of precedence)-

!Important styles

li{ list-style-type: none !important; }

Inline styles

<a style="color: blue;" aria-current="page" href="#">Home</a>

Id attribute styles

#myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; }

class styles

<a class="nav-link text-black" href="#">Home</a>

when 2 css classes are used and if both happen to define the same behaviour then the last css style takes precedence

Global using directives in dotnet 6 and C# 9+

Anil Kumar Khandei — Sat, 08 Jan 2022 15:00:53 +0000

The latest version of dotnet platform now supports global using directives which means we can now add all using directives in one place or 1 file instead of in every class file.

Infact all dotnet 6 project templates automatically include global directives option. In order to declare a global using directive, for example-

global using System;

Now all files in the project can refer to all the api's in the System namespace.

Missing Main() method in Program.cs

Another significant change is when you try to create a new console application using visual studio or dotnet cli in dotnet 6 platform you see something like this-

Console.WriteLine("Hello, World!");

Believe it or not thats the entire program.cs, it made me feel am I writing C# or JS on a browser console, the new C# 9+ evolution is mindblowing. So whats missing? To know that lets go back a bit, dotnetcore3.1 may be-

using System;

namespace dotnet5consoleapp
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("Hello World!");
        }
    }
}

As you can see the using directive is missing, namespace, class program, Main method and last but not the least the curly brackets are missing. In case of dotnet6 the program entry is generated by the platform in the program.cs file which microsoft documentation terms as using "top-level statements". You can disable implicit using features from config file by removing the node <ImplicitUsings>enable</ImplicitUsings> from csproj file.

Now you can keep writing all your code in Program.cs file assuming as if you are writing within the Program class and Main method. This seems like less code but a bit confusing initially you can always refer to ms documentation for details.

Thanks for your time! Keep Learning!

Generate NuGet Package with Octopus CLI

Anil Kumar Khandei — Wed, 22 Dec 2021 20:01:43 +0000

Prerequisites

Visual studio code

Create a simple dotnet mvc web app

dotnet command to check latest framework version
dotnet --version
cli command to create a new mvc web app along with version specification when you have multiple dotnet frameworks installed locally and you dont want to use the latest one :)-

dotnet new mvc --language C# --framework net5.0

Installing the octopus cli

If you want to install Octopus CLI make sure you install it globally using the command-

dotnet tool install Octopus.DotNet.Cli --global

Build / Run / Publish

Command to build project-

dotnet build

Command to run project-

dotnet run

Check app is up and running using the link generated on the console

Command to publish the project

first ctrl+c to stop running the project
run following command to publish project to custom directory-
dotnet publish -o <foldername>

Generate the Nuget Package

Command to generate the nuget package from cli-

dotnet-octo pack --id=CodeWithAnil -outFolder=ArtifactFolder --basePath=Publish

--id=projectname
--outFolder=folder where to create the nuget package
--basePath=folder where you published your webapp or api

Date & Time Picker in vanilla JS

Anil Kumar Khandei — Sun, 07 Feb 2021 19:25:56 +0000

Scenario:

Time picker will be a drop down with time from 00:00 to 23:30 with periods of 30 mins gap like 09:00,09:30,10:00,10:30...
Date picker will be a regular date picker but if current date is chosen then all times before current time will be greyed out in the time picker.

Lets get the HTML up first



<input type="date" name='datepicker' id='datepicker'>
<select name='timepicker' id='timepicker'>
        <option value="00.00">00.00 AM</option>
        <option value="00.30">00.30 AM</option>
        <option value="01.00">01:00 AM </option>
        <option value="01.30">01:30 AM</option>
        <option value="02.00">02:00 AM</option>
        <option value="02.30">02:30 AM</option>
        <option value="03.00">03:00 AM</option>
        <option value="03.30">03:30 AM</option>
        <option value="04.00">04:00 AM</option>
        <option value="04.30">04:30 AM</option>
        <option value="05.00">05:00 AM</option>
        <option value="05.30">05:30 AM</option>
        <option value="06.00">06:00 AM</option>
        <option value="06.30">06:30 AM</option>
        <option value="07.00">07:00 AM</option>
        <option value="07.30">07:30 AM</option>
        <option value="08.00">08:00 AM</option>
        <option value="08.30">08:30 AM</option>
        <option value="09.00">09:00 AM</option>
        <option value="09.30">09:30 AM</option>
        <option value="10.00">10:00 AM</option>
        <option value="10.30">10:30 AM</option>
        <option value="11.00">11:00 AM</option>
        <option value="11.30">11:30 AM</option>
        <option value="12.00">12:00 PM</option>
        <option value="12.00">12:30 PM</option>
        <option value="13.30">13:30 PM</option>
        <option value="14.00">13:30 PM</option>
        <option value="14.30">14:30 PM</option>
        <option value="15.00">15:30 PM</option>
        <option value="15.30">15:30 PM</option>
        <option value="16.00">16:30 PM</option>
        <option value="16.30">16:30 PM</option>
        <option value="17.00">17:30 PM</option>
        <option value="17.30">17:30 PM</option>
        <option value="18.00">18:30 PM</option>
        <option value="18.30">18:30 PM</option>
        <option value="19.00">19:30 PM</option>
        <option value="19.30">19:30 PM</option>
        <option value="20.00">20:30 PM</option>
        <option value="20.30">20:30 PM</option>
        <option value="21.00">21:30 PM</option>
        <option value="21.30">21:30 PM</option>
        <option value="22.00">22:20 PM</option>
        <option value="22.30">22:30 PM</option>
        <option value="23.00">23:00 PM</option>
        <option value="23.30">23:30 PM</option>
    </select>

You should get a simple UI like this-

Now the JS part:



const timePicker=document.querySelector('#timepicker');
const datePicker=document.querySelector('#datepicker');

datePicker.addEventListener('change',function(e){
    console.log('checking to disable dates');
    checkAndUpdateTimePicker();
    timePicker.value='';
});

function checkAndUpdateTimePicker(){
    if(new Date(datePicker.value).toLocaleDateString()==new Date().toLocaleDateString()){
    document.querySelectorAll('#timepicker option').forEach(opt=>{
            console.log(opt.value);
            let optHour=opt.value.split('.')[0];
            let optMinute=opt.value.split('.')[1];

            let currentHour=new Date().getHours();
            let currentMinute=new Date().getMinutes();
            if(optHour<currentHour){
                opt.disabled=true;  
                opt.dataset.description ='Please scroll to choose a different time, this time has passed.';
            }
            if(optHour==currentHour && optMinute<currentMinute){
                opt.disabled=true;
            }

    });
}else{
    document.querySelectorAll('#timepicker option').forEach(opt=>{
        opt.disabled=false;  
});
}
}

Once you add the JS you can have a behaviour like this-

1- When you choose a date as current date all time slots before current time will be greyed out, I happen to be writing this blog at 11.45 PM so all slots are greyed out :)

2- When you choose a date in the future the all time slots should be available and enabled.

There is always room for improvement

1- You can dynamically populate the time instead of hard coding.



function populateTimePicker(){
    for(let i=0;i<24;i++){
        let opt=document.createElement('option');
        if(i===24){
            opt.value='00.00';
        }
        else if(i.toString().length===1){
            opt.value='0'+i+'.00';
            opt.text='0'+i+'.00 AM';
        }
        else{
            opt.value=i+'.00';
            if(i<12){
                opt.text=i+'.00 AM';
            }
            else{
            opt.text=i+'.00 PM';
            }
        }    
        timePicker.appendChild(opt);
        let opt30=document.createElement('option');
        opt30.value=opt.value.split('.')[0]+'.30';
        opt30.text=opt.text.split('.')[0]+'.30 '+opt.text.split('.')[1].split(' ')[1];
        timePicker.appendChild(opt30);
    }
}

2- You can make the dates prior to current date disabled by setting the current date as min dynamically in JS. You can achieve it by adding the following line of code.



datePicker.min=`${new Date().getFullYear()}-${(new Date().getMonth()+1).toString().length==1?'0':''}${new Date().getMonth()+1}-${new Date().getDate().toString().length==1?'0':''}${new Date().getDate()}`;

Thank you for your time.

CSS box-shadow

Anil Kumar Khandei — Sun, 13 Sep 2020 05:22:16 +0000

While spending occassional weekends on building frontend projects. Everytime I start building the UI among all other things I visit W3Schools or MDN, I definitely refer box-shadow. So I thought of sharing what I learnt recently.

First the Basics

Syntax

box-shadow: inset(opt) x-offset(req) y-offset(req) blur-radius(opt) spread-radius(opt) color(opt);

Definitions are already available in MDN so I am not repeating here, & infact MDN/W3S are best for web dev references, I cant do any better.

Use Case 1:

In this example I am only using blur radius parameter. Use blur-radius to create a blur effect, but if you want a solid shadow use spread-radius instead (use case 2).

.shadow-1{
    box-shadow: 0 0 10px;
}

Use Case 2:

In this example I am going to use only spread radius. Use spread radius only, creates a outline like effect around the container. Ofcourse we can use outline instead, but this is an alternative to outline.

.shadow-4{
    box-shadow: 0 0 0 4px rgb(64,74,87);
}

Pro Tip: You can ignore the rgb color above .shadow-4 class and system will use the font color to create the shadow. This applies to all cases.

Use Case 3:

I guess we can now shift our focus to the first 2 parameters x-offset & y-offset.

.shadow-5{
    box-shadow: 4px 0;
}

As you can see we only get a shadow on the x-axis we only added a positive x-offset value of 4px. Even though y-offset is 0 we still have to write as it is a required parameter.

Now lets try y-offset only & as expected-

.shadow-5{
    box-shadow: 0 4px;
}

Lets try x & y offset together-

.shadow-5{
    box-shadow: 4px 4px;
}

Use Case 4:

By now I hope the 4 parameters(x,y,blur,spread) make some sense when we using individually. Now lets combine everything together and see what we get.

A few more basics to go...

Use Case 5:

Another interesting usage of box-shadow is to create multiple layers. We can display multiple layers of shadows using comma separated list of box shadow values.

.shadow-8{
    box-shadow: 0 0 0 14px rgb(64,74,87),
                0 0 0 28px rgb(56, 250, 82),
                0 0 0 42px rgb(56, 179, 250);
}

Use case 6:

The next property is the usage of inset keyword. Until now we have noticed usage of box-shadow for generating shadow outside the target element. Using inset keyword we can alter the direction of the shadow inward.

.shadow-9{
    box-shadow: inset 0 0 10px 10px rgba(0, 0, 0, 0.5);  
}

Blur vs Spread

When I was implementing box-shadow I really got confused between blur and spread radius. From use case 1 & 2 you can see that using spread radius generates a solid structure where as blur radius creates a blur.

You can use blur or spread separately or use them together.

.shadow-10{
    box-shadow: 0 0 4px 4px ;
}

Thats all for now. The quest for knowledge must never end. Keep learning ✌

Banner image by Céline Martin from Pixabay

Mutable Arrays in Rust

Anil Kumar Khandei — Tue, 24 Dec 2019 18:55:52 +0000

I want to discuss briefly about mutable arrays in rust and how i learnt it the hard way. I come from a C# background so creating an array of integers, iterating over the array and changing the values is a cake walk.

In C#-

    int[] m_h = { 9,5,1,8,2};//or
    int[] m_h_new = new int[5] { 5,9,10,3,5};
    //that simple
    foreach(int i in m_h)
    {
        m_h[i] += 1; //increment each element of the array by 1
    }

However it is not the same in rust, even though it is simple, it took sometime for me to understand the concepts.

Then I tried something similar in rust-

//create a mutable array of 5 elements
    let mut m_h:[i32;5]=[9,3,2,8,1];
    //now since I set it mutable i guess this should work...
    //enumerate() returns a tuple with the (index, value) of each element of the array
    for (i,h) in m_h.iter().enumerate(){
        //however this fails
        m_h[i]=h+1;//cannot assign to m_h[_] as it is borrowed
        //well what i cant understand is if i made it mutable why cant i change it??
    }

I did some googling and found that iter() returns a reference where as iter_mut() returns a mutable reference.

Therefore the correct way to iterate an array and modify its contents is-

//create a mutable array of 5 elements
    let mut m_h:[i32;5]=[9,3,2,8,1];
    for (i,h) in m_h.iter_mut().enumerate(){
        //m_h[i]=h+1; this syntax wont work here :)
        //wait hold on what & why?? i cant do this too??
        //well of course iter_mut returns a reference so inorder to modify it we need to dereference it like so
        *h=*h+1;//this is the correct syntax here
    }

Also the most straight forward way to iterate an array and modify context is just using a range instead of iter() or iter_mut()-

Like so-

for i in 0..m_h.len(){
    m_h[i]=m_h[i]+1;
    println!("{}",m_h[i]);
}

Simple isn't. I hope it was worth the read and hope it was helpful!

JS Var vs Let difference

Anil Kumar Khandei — Sun, 22 Dec 2019 01:02:18 +0000

The difference between var and let in JavaScript is block scope.

var

When a var is declared outside a block scope, and then re declared inside a block after the first declaration. The value of the var gets changed after the block scope is over.

//first declaration of var x
 var x=10;
 {
     //second declaration of var x
     var x=5;
     alert(x); //prints 5
 }
 alert(x); //prints 5

let

However by using let keyword to declare a variable. the value of the variable doesn't get changed by the subsequent re declaration inside the block.

//first declaration of let var y
 let y=15;
 {
     //second declaration of let var y
     let y=90;
     alert(y); //prints 90
 }
 alert(y); //prints 15

Dotnet Core console App to search file contents for a phrase

Anil Kumar Khandei — Thu, 19 Dec 2019 19:05:20 +0000

I guess everyone must have faced this problem of searching for file contents in windows and waiting for really really long...also at times searching network folders with thousands of files is not that convenient either.

Well I created this console app using dotnet core that you can run against any folder network or local and search for any files with specific text content.

I used the following restrictions-

1- ability to search for specific file extensions like .xml or .txt etc.
2- ability to search against files from a specific date

Add the following depedencies-

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;

the input to the console application is in the below format-

dotnet SearchFilesWithContent.dll "\\networkpath\c$\myfolder\subfolder" ".xml" "date_to_look_for" "text_content_to_search"

capture the command line parameters from the args like so-

var dirPath = args[0];
var fileExtension = args[1];
var searchDate = args[2];
var searchText = args[3];

next step is to create an instance of the DirectoryInfo class using the folder path from the arguments. The DirectoryInfo class exposes a lot of useful methods and worth going through from the microsoft documentation or directly from the metadata in visual studio.

DirectoryInfo dir = new DirectoryInfo(dirPath);

We want to iterate the list of files in the folder by applying the filter on the filename and also get a collection of files so we can search for the file contents. We can do everything using a single line of code like so(we are using lambda expression using linq)-

IEnumerable<FileInfo> filelist = dir.GetFiles(fileExtension, SearchOption.AllDirectories)
                    .Where(file => file.LastWriteTime.ToString("yyyy-MM-dd")==searchDate);
        // Parameters:
        //   searchPattern:
        //     The search string to match against the names of files. This parameter can contain
        //     a combination of valid literal path and wildcard (* and ?) characters, but it
        //     doesn&#39;t support regular expressions.
        //
        //   searchOption:
        //     One of the enumeration values that specifies whether the search operation should
        //     include only the current directory or all subdirectories.
        //
        // Returns:
        //     An array of type System.IO.FileInfo.

Now we can iterate the file list to search for the specific content-

var foundFilesCtr = 0;
foreach (var item in filelist)
   if (File.ReadAllLines(item.FullName).Contains(searchText))
   {
      Console.WriteLine($"File with selected content:{item.FullName}");
      foundFilesCtr++;
   }
Console.WriteLine($"Found {foundFilesCtr} files with text {searchText}");
Console.WriteLine("------------------------------------");
Console.ReadKey();

The full program looks something like this-

static void Main(string[] args)
        {
            try
            {
                var dirPath = args[0];
                var fileExtension = args[1];
                var searchDate = args[2];
                var searchText = args[3];
                DirectoryInfo dir = new DirectoryInfo(dirPath);

                IEnumerable<FileInfo> filelist = dir.GetFiles(fileExtension, SearchOption.AllDirectories)
                    .Where(file => file.LastWriteTime.ToString("yyyy-MM-dd")==searchDate);

                var foundFilesCtr = 0;
                Console.WriteLine($"Searching for {searchText} in {dir}");
                Console.WriteLine("------------------------------------");
                Console.WriteLine("Search results...");
                Console.WriteLine($"Found {filelist.Count()} files with extenstion {fileExtension} and dated {searchDate}");
                foreach (var item in filelist)
                    if (File.ReadAllLines(item.FullName).Contains(searchText))
                    {
                        Console.WriteLine($"File with selected content:{item.FullName}");
                        foundFilesCtr++;
                    }
                Console.WriteLine($"Found {foundFilesCtr} files with text {searchText}");
                Console.WriteLine("------------------------------------");
            }
            catch(Exception ex)
            {
                Console.WriteLine(ex.InnerException);
            }
            Console.ReadKey();
        }

Operator Overloading in Rust

Anil Kumar Khandei — Thu, 19 Dec 2019 17:17:17 +0000

I am learning operator overloading in Rust. There is this basic example in the programming book:

struct Point{
        x:i32,
        y:i32
    };

Then implement the add trait over the Point type to be able to add 2 instances of the point type like so:

impl Add<Point> for Point{
        type Output=Point;
        fn add(self, point:Point)->Self::Output{
            Point{
                x:self.x+point.x,
                y:self.y+point.y,
            }
        }
    }

Now we can add 2 points using the below statement:

let point_a=Point{
x:30,
y:40
}

let point_b=Point{
x:50,
y:60
}
point_c=point_a+point_b;

So far so good right? Now can you tell me how to implement the same for String type or for the string literal &str, well it took me a day to figure out how to do that-

First create a new Type using the base String type-

struct MyString(String);

Then implement the Add trait over the custom type like this-

impl Add<MyString> for MyString{
        type Output= MyString;
        fn add(self,input:MyString)->Self::Output{
            let mut own_str=self.0.to_string();
            let input_str=input.0.to_string();
            own_str.push_str(&input_str);
            MyString(own_str)
        }
    }

once you understand the above, you can try re-writing the same like this, in a fewer lines of code-

impl Add<MyString> for MyString{
        type Output= MyString;
        fn add(self,input:MyString)->Self::Output{
            self.0.to_string().push_str(&input.0.to_string());
            self
        }
    }

I hope this saves your day while learning rust.