Monday, April 17, 2023

Image CSS property aspect-ratio, object-fit and mix-blend-mode

Three CSS properties will help you to display images

1) The aspect-ratio property maintains the aspect ratio of an element, even if its size changes.

2) Object-fit controls how an image or video is displayed within its container, allowing for versatile scaling and cropping options.

3) Mix-blend-mode creates stunning visual effects by blending the colors of overlapping elements.

These powerful techniques can elevate your website's design to the next level, impressing your visitors with visually stunning layouts.

Before

After

Monday, April 10, 2023

_sppagecontextinfo Get current user details

While using CSOM, we have mostly required some details of the current users, like, Name, Email, Title (Designation), Manager, etc., Following code, will help to know all this with simple API calls.

Monday, April 3, 2023

Get week number of month from Date

People struggle a lot when it needs to get a week from a date, here below is a simple example to get the week number of the month from a Date.

Monday, January 9, 2023

Responsive and Animated Pie Charts with HTML and CSS

Responsive and Animated Pie Charts

///////////////////
// HTML
//////////////////

body {
  font-family: "Open Sans", Arial;
  background: #EEE;
  text-align: center;
}
body * {
  font-weight: 300;
  margin: 0;
  padding: 0;
}

@-webkit-keyframes bake-pie {
  from {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
}

@keyframes bake-pie {
  from {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
}
.pie-chart {
  font-family: "Open Sans", Arial;
}
.pie-chart--wrapper {
  width: 400px;
  margin: 30px auto;
  text-align: center;
}
.pie-chart__pie, .pie-chart__legend {
  display: inline-block;
  vertical-align: top;
}
.pie-chart__pie {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 10px auto 35px;
}
.pie-chart__pie::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: 100px;
  height: 100px;
  background: #EEE;
  border-radius: 50%;
  top: 50px;
  left: 50px;
}
.pie-chart__pie::after {
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 3px 4px rgba(0, 0, 0, 0.1);
  margin: 220px auto;
}

.slice {
  position: absolute;
  width: 200px;
  height: 200px;
  clip: rect(0px, 200px, 200px, 100px);
  -webkit-animation: bake-pie 1s;
          animation: bake-pie 1s;
}
.slice span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  clip: rect(0px, 200px, 200px, 100px);
}

.pie-chart__legend {
  display: block;
  list-style-type: none;
  padding: 0;
  margin: 0 auto;
  background: #FFF;
  padding: 0.75em 0.75em 0.05em;
  font-size: 13px;
  box-shadow: 1px 1px 0 #DDD, 2px 2px 0 #BBB;
  text-align: left;
  width: 65%;
}
.pie-chart__legend li {
  height: 1.25em;
  margin-bottom: 0.7em;
  padding-left: 0.5em;
  border-left: 1.25em solid black;
}
.pie-chart__legend em {
  font-style: normal;
}
.pie-chart__legend span {
  float: right;
}

.pie-charts {
  display: flex;
  flex-direction: row;
}
@media (max-width: 500px) {
  .pie-charts {
    flex-direction: column;
  }
}

///////////////
// HTML
///////////////
  
<div class="wrapper">
  <h1>Answered Questions</h1>
  <div class="pie-charts">
    <div class="pieID--micro-skills pie-chart--wrapper">
      <h2>Micro-Skills</h2>
      <div class="pie-chart">
        <div class="pie-chart__pie"></div>
        <ul class="pie-chart__legend">
          <li><em>Additive</em><span>642</span></li>
          <li><em>Multiplicative</em><span>358</span></li>
        </ul>
      </div>
    </div>
    <div class="pieID--categories pie-chart--wrapper">
      <h2>Categories</h2>
      <div class="pie-chart">
        <div class="pie-chart__pie"></div>
        <ul class="pie-chart__legend">
          <li><em>Horizontal</em><span>768</span></li>
          <li><em>Vertical</em><span>232</span></li>
        </ul>
      </div>
    </div>
    <div class="pieID--operations pie-chart--wrapper">
      <h2>Operations</h2>
      <div class="pie-chart">
        <div class="pie-chart__pie"></div>
        <ul class="pie-chart__legend">
          <li><em>Addition</em><span>486</span></li>
          <li><em>Subtraction</em><span>156</span></li>
          <li><em>Multiplication</em><span>215</span></li>
          <li><em>Division</em><span>143</span></li>
        </ul>
      </div>
    </div>
  </div>
</div>

/////////////////
//JQuery
/////////////////
  
function sliceSize(dataNum, dataTotal) {
  return (dataNum / dataTotal) * 360;
}

function addSlice(id, sliceSize, pieElement, offset, sliceID, color) {
  $(pieElement).append("<div class='slice "+ sliceID + "'><span></span></div>");
  var offset = offset - 1;
  var sizeRotation = -179 + sliceSize;

$(id + " ." + sliceID).css({
    "transform": "rotate(" + offset + "deg) translate3d(0,0,0)"
  });

$(id + " ." + sliceID + " span").css({
    "transform"       : "rotate(" + sizeRotation + "deg) translate3d(0,0,0)",
    "background-color": color
  });
}

function iterateSlices(id, sliceSize, pieElement, offset, dataCount, sliceCount, color) {
  var
    maxSize = 179,
    sliceID = "s" + dataCount + "-" + sliceCount;

if( sliceSize <= maxSize ) {
    addSlice(id, sliceSize, pieElement, offset, sliceID, color);
  } else {
    addSlice(id, maxSize, pieElement, offset, sliceID, color);
    iterateSlices(id, sliceSize-maxSize, pieElement, offset+maxSize, dataCount, sliceCount+1, color);
  }
}

function createPie(id) {
  var
    listData      = [],
    listTotal     = 0,
    offset        = 0,
    i             = 0,
    pieElement    = id + " .pie-chart__pie"
    dataElement   = id + " .pie-chart__legend"

color         = [
      "cornflowerblue",
      "olivedrab",
      "orange",
      "tomato",
      "crimson",
      "purple",
      "turquoise",
      "forestgreen",
      "navy"
    ];

color = shuffle( color );

$(dataElement+" span").each(function() {
    listData.push(Number($(this).html()));
  });

for(i = 0; i < listData.length; i++) {
    listTotal += listData[i];
  }

for(i=0; i < listData.length; i++) {
    var size = sliceSize(listData[i], listTotal);
    iterateSlices(id, size, pieElement, offset, i, 0, color[i]);
    $(dataElement + " li:nth-child(" + (i + 1) + ")").css("border-color", color[i]);
    offset += size;
  }
}

function shuffle(a) {
    var j, x, i;
    for (i = a.length; i; i--) {
        j = Math.floor(Math.random() * i);
        x = a[i - 1];
        a[i - 1] = a[j];
        a[j] = x;
    }

return a;
}

function createPieCharts() {
  createPie('.pieID--micro-skills' );
  createPie('.pieID--categories' );
  createPie('.pieID--operations' );
}

createPieCharts();

Thanks to Temani Afif, code on CodePen.

OutPut

Micro-Skills

Additive642
Multiplicative358

Operations

Addition486
Subtraction156
Multiplication215
Division143

Tuesday, January 3, 2023

Excel - Add and Remove Line Breaks in a Cell

Many time we struggle for the line break in a multiple excel cells. This article have some useful tricks that will help you to achive this easily.

1) Manully add line break in a cell using "Alt + Enter".
- Edit the cell with F2 or while typing in a cell when you press "Alt + Enter" it will create new line in a cell.
- To remove a line break, edit the cell with F2, go to the start of line break and press "Backspace" and enter.

2) Line break using formula:
- You can use line break character in CHAR(10) function. Here 10 is the line break character.
- example: CONCATENATE("Rakesh" , CHAR(10) , "Patel"), if you can't see the line break when you press ENTER, then apply WRAP TEXT to the cell.

3) Replace "," or any other character with New Line:
- Press CTRL + H, this will open "Find and Replace" window. Under "Find what" you can put your text that you want to search. and under "Replace with" press CTRL + J (you won't able to see anything) just click on "Replace" or "Replace ALL". This will will add line break wherever it finds your text.
- The same way you can replace Line break with any of your text.

If "CTRL + J" does not work for you then you can also try Alt + type 0010.

Wednesday, December 7, 2022

Delete Files and Subfolders from SharePoint Library using PowerShell

Make life easy with PowerShell, following script will help you to delete all files and subfolders in One Go.

#Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser #Install-Module SharePointPnPPowerShellOnline #Config Variables $SiteURL = "https://mydomain.sharepoint.com/site" $ListName ="my_DocLib" $FolderServerRelativeURL = "/site/my_DocLib" Try { #Connect to PnP Online Connect-PnPOnline -Url $SiteURL -UseWebLogin #Get All Items from Folder in Batch $ListItems = Get-PnPListItem -List $ListName -FolderServerRelativeUrl $FolderServerRelativeURL -PageSize 2000 | Sort-Object ID -Descending #Powershell to delete all files from folder ForEach ($Item in $ListItems) { Remove-PnPListItem -List $ListName -Identity $Item.Id -Recycle -Force Write-host "Removed File:"$Item.FieldValues.FileRef } } Catch { write-host "Error: $($_.Exception.Message)" -foregroundcolor Red }

Saturday, December 3, 2022

number to word in Microsoft Word using formula

Press Ctrl + F9 to write mathematical equations and you get { }.

write the formula as: { =123456\*cardtext } and press Alt + F9

Output:

one hundred twenty-three thousand four hundred fifty-six