Show multiline text svg circle

For creating a circle using svg, you can follow this post. Then add the below code within the svg view box.

Normally you can use text tag to show some text in a svg component. But in order to show multiline text, we need to use HTML inside foreignObject tag as shown below:

< foreignObject id="content" x="20" y="25" width="100" height="100" >
                    < div >
                        < p id="txt1" style="font-size: 12px;">Text 1< /p >
                        < p id="txt2" style="font-size: 12px;">Text 2< /p >
                    < /div >
                < /foreignObject >

The x, y values should be set according to the svg view box. You can also use normal Javascript to modify the text using innerText property as below:

document.getElementById("txt1").innerText = "New Text 1";

Circular Progress bar svg javascript

In this post, I’ll give the code to create a Circular progress bar which I tried with a Start button and it resets every time you click on the start button and ticks every second for 60 seconds. The start button is shown using media control html code. The start button will re-appear once timer is reset.

If you’re using Asp.net Core MVC template, I’ve put the below code in index.cshtml file.

The HTML is as below:

< div >
            < svg class="progress-ring"
                 width="120"
                 height="120" >
                < circle class="progress-ring__circle"
                        stroke="orange"
                        stroke-width="4"
                        fill="transparent"
                        r="58"
                        cx="60"
                        cy="60" / >
                < text id="play" x="40" y="70" onclick="startTimer()" >▶< /text >
            < /svg >
< /div >

Css is as follows in the site.css file:

.progress-ring {
}

.progress-ring__circle {
    transition: 0.35s stroke-dashoffset;
    transform-origin: 50% 50%;
}

#play {
    cursor: pointer;
    font-size: xx-large;
}

The below Javascript code is going to modify the svg stroke-dashoffset attribute as below in the site.js file:

var i = 0;
var interval;
var circle = document.querySelector('circle');
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
console.log('radius', radius);
console.log('circumference', circumference);
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;

function setProgress(percent) {
    const offset = circumference - percent / 100 * circumference;
    circle.style.strokeDashoffset = offset;
}

function startTimer() {
    console.log('circumference', circumference);
    circle.style.strokeDashoffset = `${circumference}`;
    document.getElementById("play").textContent = "ok";
    interval = setInterval(increment, 1000);
}

function increment() {
    i = i % 360 + 1;
    var perc = (i / 60) * 100;
    console.log(i);
    if (i === 60) {
        clearInterval(interval);
        document.getElementById("play").textContent = "\u25B6";
        i = 0;
    }
    setProgress(perc);
}

The stroke-dashoffset value is reduced every time to increase the progress with stroke-dasharray. You can play around with the radius to increase the circle size.

Binary Search with C#

It is a divide and conquer approach to search an element in the Array. At each step, the search space is reduced to half.

The first part of the program is a recursive approach to write the Binary Search algorithm. The second approach focuses on the iterative model. The code will spit out the index of the element if found.

public class BinarySearch
    {
        //space complexity: O(log2 (n)).
        public int? fnRecursiveBinarySearch(int[] Arr, int k, int low, int high)
        {
            int mid = 0;
            if (low > high)
            {
                return null;
            }
            else
            {
                mid = (high + low) / 2;
                if (k==Arr[mid])
                {
                    return mid;
 //return position of found.
                }
                else if (k < Arr[mid])
                {
                    return fnRecursiveBinarySearch(Arr, k, low, mid - 1);
 //search in first half.
                }
                else
                {
                    return fnRecursiveBinarySearch(Arr, k, mid + 1, high);
 //search in second half.
                }
            }
        }

        //space complexity: O(n)
        public int? fnIterativeBinarySearch(int[] Arr, int k, int low, int high)
        {
            int mid = 0;
            do
            {
                mid = (low + high) / 2;
                if(k==Arr[mid]) { return mid; //return position of found. }
                else if(k<Arr[mid]) {
                    high = mid - 1;
 //search in first half.
                }
                else
                {
                    low = mid + 1;
 //search in second half.
                }
            } while (low <= high);
            return null;
        }

    }

To test the above 2 approaches, we use a simple call to both the functions:

class Program
    {
        static void Main(string[] args)
        {
            BinarySearch bs = new BinarySearch();
            int[] Arr = { 5, 6, 3, 1, 8, 10 };

            Console.WriteLine("Recursively Found element at index: {0}", bs.fnRecursiveBinarySearch(Arr, 8, 0, Arr.Length - 1));
            Console.WriteLine("Iteratively Found element at index: {0}", bs.fnIterativeBinarySearch(Arr, 8, 0, Arr.Length - 1));
        }
    }

Time complexity is log2 (n), for both approaches. For the space complexity,
Recursive may reach to log2 (n) space because of the stack, but in the iterative approach, it should be O(1) space complexity.

Create html div as circle using HTML and css

Create the following div on your HTML page as below:

< div id=”circularDiv” class=”circluarDiv” >< /div >

Add the following css in your html file or common css file that you’re importing:

.circluarDiv {
     width: 100px;
     height: 100px;
     background-color: whitesmoke;
     border: 1px solid black;
     border-radius: 50%;
 }

Please note that the width and height should be equal for the div. Keep the border and background colours distinct to easily recognize the element.

The border-radius is giving rounded corners to the Div.

Send email with classic asp

Below is an example function used in my classic asp code to send e-mail with Attachments. The e-mail is written in HTML format and attachments picked up from the physical path on the Server where the Application is hosted on IIS.

I’m using a hard-coded path in the sample below for the Attachment example. You can create a dynamic string by fetching the path from the DB.

I’m using CDOSYS mail provider object below to send e-mail.

Function GenerateEmailCEF(senderemail, recipient)
MailProvider = "CDOSYS"
EmailFmt = 0 'For HTML, 1 is for Plain Text ' SMTP Server Config
Dim rsSMTPSendUsing, rsSMTPServer, rsSMTPServerPort, rsSMTPSendUsername, rsSMTPSendPassword, rsSMTPUseSSL Dim SMTPSendUsing, SMTPServer, SMTPServerPort, SMTPSendUsername, SMTPSendPassword, SMTPUseSSL

SMTPSendUsing = "1"
SMTPServer = "smtp.xx.xx" 'Change as per your configuration.
SMTPServerPort = "25"
SMTPSendUsername = ""
SMTPSendPassword = ""
SMTPUseSSL = "false"

if MailProvider = "CDONTS" then set objMail=CreateObject("CDONTS.NewMail")

if MailProvider = "CDOSYS" then set objMail =CreateObject("CDO.Message")

objMail.From = senderemail
objMail.To = recipient
objMail.Subject = "Test Subject"

if MailProvider = "CDONTS" then objMail.MailFormat = EmailFmt
if MailProvider = "CDONTS" then objMail.BodyFormat = EmailFmt

'Created only HTML format
emailbod = "<html?<HEAD?<TITLE?</TITLE?</HEAD?<BODY?" 'Fix this
emailbod = emailbod & "<BR?Mail Body." 'Fix this

'Add attachments to mail.
newfn = "c:\Data\myfile.pdf" 'Path on the Server.

if MailProvider = "CDONTS" then execute ("objMail.AttachFile(" & newfn & ")")

if MailProvider = "CDOSYS" then execute ("objMail.AddAttachment(" & newfn & ")")

if MailProvider = "CDONTS" then objMail.Body = emailbod
if MailProvider = "CDOSYS" then objMail.HTMLBody = emailbod

objMail.BodyPart.Charset = "UTF-8"
objMail.HTMLBodyPart.Charset = "UTF-8"

if MailProvider = "CDOSYS" then
objmail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/sendusing") = SMTPSendUsing
objmail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/smtpserver") = SMTPServer
objmail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/smtpserverport") = SMTPServerPort
objmail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/smtpusessl") = SMTPUseSSL

if SMTPSendusername <> "" then
objmail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/sendusername") = SMTPSendusername
objmail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/sendpassword") = SMTPSendPassword
objmail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/smtpauthenticate") = 1
end if

objmail.Configuration.Fields.Update
end if

objMail.Send
set objMail=Nothing
End Function

LogParser query example

I’ve found LogParser tool to be very useful for querying log files especially whenever I am required to analyze the IIS log files. You can download LogParser from here.

In this example, I’ll be querying multiple Log files unique users with Windows Authentication visiting the site. Click on the icon “Choose Log files/folders to query” and Add all files which you want to search. Open a New Query window and in the Query editor, enter the below query:

SELECT DISTINCT cs-username FROM '[LOGFILEPATH]'

This works much like SQL queries where IIS log headers work like columns. The above query will simply return distinct users visiting the site. Make sure the Log Type selected is W3CLOG.

If you want to Output all the data to a .csv file, then you can use the below query:

SELECT SELECT DISTINCT cs-username INTO '[OUTFILEPATH]users.CSV' FROM '[LOGFILEPATH]'

You can check the default export directory where the file is created. It should be something like this “C:\Users\<username>\AppData\Roaming\ExLPT\Log Parser Studio\Output”.

Download word file without Protected View .Net ReactJS

I have an Intranet Application where a .docm template downloaded from a ReactJS UI as a blob is opening in Protected View on the users’ machines. This is happening when downloading in browsers other than IE or Edge browser in IE mode.

When you download the document from Chrome or other browsers, MS Word is considering it as an Internet Application. Hence, the checkbox for Protected View is applying these changes and downloading it in Protected View.

Enable Protected View For Files Originating From The Internet. This setting controls documents opened from a website.

The code to download this as a blob is in ReactJS is available here.

However, if you generate the .docm file on the Server where the API is located and put it in a location on the Server itself. Create a Virtual Directory in IIS to make the document downloadable as http. So just return the hyperlink at the Client-side Javascript. You can receive this hyperlink and assign to anchor link clicking it through code.

var downloadUrl = response.data.Path;
        const link = document.createElement("a");
        link.id = "DownloadLink";
        link.href = downloadUrl;
        link.setAttribute("download", "filename");
        document.body.appendChild(link);
        link.click();
        document.getElementById("DownloadLink").outerHTML = "";

This will prevent it from opening in Protected View.

Also, if your word file has Macros, read-only fields become editable when you click on “Enable Editing” when you open the document in Protected View until you enable the Macros.

Change highlight color Autocomplete Material UI ReactJS

Create the below styles in your ReactJS component:

const styles = (theme) => ({
  ////....
  option: {
    // Hover
 with light-grey
    '&[data-focus="true"]': {
      backgroundColor: '#F8F8F8',
      borderColor: 'transparent',
    },
    // Selected
 has dark-grey
    '&[aria-selected="true"]': {
      backgroundColor: theme.palette.grey.A200,
      borderColor: 'transparent',
    },
  },
});

You can choose the colors based on your preference on selected and for mouse-over for backgroundColor property.

Add the following property in your AutoComplete component

classes={{
	  option: classes.option
	}}

as shown below:

<Autocomplete
	id="combo-box-1"
	options={myvalues}
	getOptionLabel={(option) => option.value}
	size="small"
	className={classes.formControlAutopopulate}
	classes={{
	  option: classes.option
	}}
	value={myvalues.find((x) => x.id === this.state.ID)}
	disabled={this.props.isLocked}
	onChange={this.handleSelected}
	renderInput={(params) => (
	  <TextField
		{...params}
		variant="outlined"
		placeholder="Please Select Value"
		fullWidth
	  />
	)}
/>

Borders not shown in Firefox with border-collapse on material table

I came across this issue that all Material Table used in the ReactJS Application are not showing bottom border in the th row in the Firefox browser. This issue is not reproducible in Chrome.

So, I found css hack where you can simply change the position attribute specifically for the Firefox browser in the default MuiTableCell-head class. This class is applied at the cell level by Material-table.

@-moz-document url-prefix() {
  .MuiTableCell-head {
    position: static !important;
  }
}

The above code will remove the default sticky value for position which causes the issue with border-collapse in the .MuiTable-root class. You can also remove the border-collapse in a similar fashion but do test that it’s not breaking anything else.

The component which has the Material-table code should import the above css to take effect. This hack might also work generally for html table if you’re facing a similar issue without Material-table.

Find duplicates in Excel

One of the most common scenarios of data cleansing is finding duplicates in Excel. Below are the steps:

Select the data range in Excel in which you want to find the duplicate values.

Under Home Tab, select Conditional Formatting->Duplicate Values:

Click OK and observe the highlighted cells with duplicate values.

You can now filter the data based on color to quickly check the duplicate values. Short-cut to filter is select the header of the column or columns and then Alt+D+F+F on keyboard.