Friday, June 23, 2023

Helpful Tools for Web-Developer on internet

Small Dev Tools

Free tools for devs like HTML/CSS/Javascript formatters, minifies, fake or test data generators, and many more.

https://smalldev.tools/


Code Snippets

Create and share beautiful images of your source code. Start typing or drop a file into the text area to get started.

https://carbon.now.sh


Code Converter

It's a useful tool where you can write and convert code from one programming language to another language.

https://ide.onelang.io


Tuesday, June 13, 2023

CSS Tricks

 1) Custom input colour using the accent-colour property.

You can use the CSS property accent-colour to change the colour of your input element, and yes you can use input[type="inputType"] for selecting a specific input element based on its type.

<input type = "checkbox">

<input type = "radio">

<input type = "range">


CSS

input[type="checkbox"]{
   accent-color:lime;
}


input[type="radio"]{
   accent-color:red;
}


input[type="range"]{
   accent-color:blue;
}



2) Text cut-out using the mix-blend-mode property.
You can use the mix-blend-mode CSS property to cut out your text which gives your text a transparent look.

<div class = "container">
   <h1 class="text-cutout">CSS Tricks</h1>
</div>

CSS

.container{
   background-image: url("https://cutt.ly/nNnH6GG");
}

.text-cutout{
  background-color:#f1f1f1;
  border-radius:8px;
  padding:2rem 5rem;
  mix-blend-mode:screen;
}












3) Shadow effect for PNG images.
You might know that we can use the box-shadow property to give a shadow effect to any element, but when we use it on some image element which contains a transparent PNG image then sometimes you might want a different result than what box-shadow gives you. You can use the drop shadow CSS property to get a shadow effect on a PNG image.

<img class="image1" src="fish.png">
<img class="image2" src="fish.png">

CSS

.image1{
   box-shadow:5px 5px 5px #808080;
}

.image2{
   filter: drop-shadow(5px 5px 5px #808080);
}






Friday, June 9, 2023

Dropdown Menu with Checkbox

    

Friday, May 12, 2023

Push into an Array in JavaScript


let myarray = [1,2,3,4,5]


// Add to the start of an array

Array.unshift(element);

myarray.unshift(100); // output 100,1,2,3,4,5


// Add to the end of an array

Array.push(element);

myarray.push(100); // output 1,2,3,4,5,100



// Add to a specified location

Array.splice(start_position, 0, new_element...);

myarray.splice(2, 0, 100,200); // output 1,2,100,200,3,4,5



// Add with concat method without mutating original array

let newArray = [].concat(element);

let newmyarray = myarray.concat(10,20);


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.