| Index |
Link |
20-May-2021 |
|
| Smiley Slider |
Link |
3-May-2020 |
|
| Animations Index |
Link |
11-March-2021 |
|
| Notes Index |
Link |
20-May-2020 |
|
| Colors |
Link |
2-April-2021 |
|
| Notes CSS |
Link |
10-April-2021 |
|
| CSS Layouts |
Link |
2-March-2021 |
|
| Vertically Center Element |
Link |
10-April-2021 |
|
| Vertically Divided Element |
Link |
2-March-2021 |
|
| JS Jquery Notes |
Link |
20-May-2020 |
|
| Creating Copy Of An Object |
Link |
5-March-2021 |
|
| Detect If User Has Visited/Seen An Element |
Link |
7-March-2021 |
|
| Error & Solution |
Link |
3-March-2021 |
|
| Practical Notes |
Link |
6-April-2021 |
|
| Sort By Numeric Property |
Link |
6-April-2021 |
|
| Change Event Vs Input Event |
Link |
6-April-2021 |
|
| FullScreen Function |
Link |
6-April-2021 |
|
| Popup Message |
Link |
6-April-2021 |
|
| Swap Key-Value in JSON |
Link |
6-April-2021 |
|
| Sort Object By Keys |
Link |
6-April-2021 |
|
| Copy Content To Clipboard |
Link |
6-April-2021 |
|
| JS Dates |
Link |
27-February-2021 |
|
| on, off, one, click |
Link |
27-February-2021 |
|
| Target Vs Current Target |
Link |
28-February-2021 |
|
| Clean Code |
Link |
15-April-2021 |
Short and Effective way of writing code |
| Swapping Values In Two Variables |
Link |
15-April-2021 |
Short and Effective way to Swapping Values In Two Variables |
| Convert String to Number |
Link |
15-April-2021 |
Short and Effective way to Convert String to Number |
| Substitute A Variable Inside A String |
Link |
15-April-2021 |
Short and Effective way to Substitute A Variable Inside A String |
| Optional Chaining |
Link |
16-April-2021 |
Short and Effective way to extract subproperty of data that too safely |
| Creating Copy Of An Array |
Link |
16-April-2021 |
Correct way to Creating Copy Of An Array |
| Split A String Into An Array |
Link |
16-April-2021 |
Short and Effective way to Split A String Into An Array |
| Remove Duplicate Values From An Array |
Link |
16-April-2021 |
Short and Effective way to Remove Duplicate Values From An Array |
| Single Line If-Else Condition Check |
Link |
16-April-2021 |
Short way for using If-Else Condition Check |
| Well Formatted JSON |
Link |
19-April-2021 |
JSON with proper indentation and format |
| Orientation Based Styling |
Link |
21-April-2021 |
Orientation Based Styling, Screen Rotation, Landscape, Portrait |
scroll-behavior Property for Smooth Scroll |
Link |
22-April-2021 |
Smooth Scroll to an Element using CSS |
| Scroll Reveal |
Link |
23-April-2021 |
CSS Reveal Animation based on scroll using Jquery |
| Device Data from Navigator That Browser Can Share |
Link |
24-April-2021 |
Device data from navigator that browser can share |
| Detect Device Type |
Link |
24-April-2021 |
Detect the device type i.e wether it is Android, iPhone or iPad. |
devicePixelRatio Property |
Link |
24-April-2021 |
Device Pixel Ratio |
| Detect Orientation or Orientation Change |
Link |
24-April-2021 |
Detect the device orientation |
| Height & Width |
Link |
24-April-2021 |
Height & Width |
| Convert Seconds To hh:mm:ss Format |
Link |
24-April-2021 |
JS Code to Convert Seconds To hh:mm:ss Format |
window, document And screen Properties |
Link |
25-April-2021 |
window, document And screen Related Properties |
white-space Property |
Link |
25-April-2021 |
Sets how white space inside an element is handled |
overflow-wrap Property |
Link |
25-April-2021 |
Setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box |
word-break Property |
Link |
25-April-2021 |
Sets whether line breaks appear wherever the text would otherwise overflow its content box |
hyphens Property |
Link |
25-April-2021 |
How words should be hyphenated when text wraps across multiple lines |
transition Property |
Link |
25-April-2021 |
Apply animations to properties using transition |
filter Property |
Link |
26-April-2021 |
CSS property applies graphical effects like blur or color shift to an element |
| CSS Marquee |
Link |
26-April-2021 |
CSS Marquee |
animation-play-state Property |
Link |
27-April-2021 |
Animation CSS Property |
animation-delay Property |
Link |
27-April-2021 |
Animation CSS Property |
animation-iteration-count Property |
Link |
27-April-2021 |
Animation CSS Property |
animation-fill-mode Property |
Link |
27-April-2021 |
Animation CSS Property |
| Rotation Animation on Scroll |
Link |
27-April-2021 |
Rotation Animation on Scroll |
| Translation Animation on Scroll |
Link |
27-April-2021 |
Translation Animation on Scroll |
position Property |
Link |
28-April-2021 |
position Property |
| Create and Download File on UI |
Link |
03-May-2021 |
Create and Download File on UI |
Using display-mode in media rule |
Link |
08-May-2021 |
Using display-mode to Detect FullScreen Using CSS |
| Events |
Link |
08-May-2021 |
Events List |
Handle Touch Move / Cursor Move Event & event.changedTouches & event.touches |
Link |
08-May-2021 |
Handle Touch Move / Cursor Move Event and extract the data using |
Count Touch Points Using event.touches.length |
Link |
10-May-2021 |
Count Touch Points Using event.touches.length |
Check If Object Is Empty using jQuery.isEmptyObject() |
Link |
16-May-2021 |
Check If Object Is Empty using jQuery.isEmptyObject() |
| Shuffle an Array / Randomize an Array |
Link |
16-May-2021 |
Shuffle an Array / Randomize an Array |
@import Rule |
Link |
16-May-2021 |
Using @import Rule to import another css file in given css file and also for importing google fonts |
| HTML Notes |
Link |
17-May-2021 |
|
<meta> tag: The metadata element |
Link |
17-May-2021 |
<meta> tag: The metadata element |
| Standard metadata names |
Link |
17-May-2021 |
Standard metadata names |
| Uncommon MetaData Names |
Link |
17-May-2021 |
Uncommon MetaData Names |
Values for the content of <meta name="robots"> |
Link |
17-May-2021 |
Values for the content of <meta name="robots"> |
| MetaData Viewport |
Link |
17-May-2021 |
MetaData Viewport |
| Refresh A Page On Specific Interval |
Link |
17-May-2021 |
Refresh A Page On Specific Interval |
| Redirect To A Page After Specific Interval |
Link |
17-May-2021 |
Redirect To A Page After Specific Interval |
| Prevent Zoom on Your Website |
Link |
17-May-2021 |
Prevent Zoom on Your Website |
Robots.txt File |
Link |
17-May-2021 |
Robots.txt File |
color-scheme Property |
Link |
17-May-2021 |
Using color-scheme to specify preference of colors |
| Upload Image to a static website without server |
Link |
20-May-2021 |
Upload Image to a static website without server. Input Image Tag. FileReader() and URL.createObjectURL() |
| Making Website Text Content Editable |
Link |
24-May-2021 |
Enable user to edit any text element of your website using contenteditable attribute |
| Spellcheck Attribute |
Link |
25-May-2021 |
Enable website to perform spellcheck for editable element using spellcheck="true" attribute |
Detect Hashtags(#) and Mentions(@) In input or textarea |
Link |
25-May-2021 |
Detect Hashtags and Mentions(@) In input or textarea |
White space issue with html2canvas and canvas2image |
Link |
25-May-2021 |
Solutions for White Gap Issue Related To html2canvas or canvas2image |
Using html2canvas and canvas2image to export a webpage element as an Image |
Link |
26-May-2021 |
Using html2canvas and canvas2image to export a webpage element as an Image |
pointer-events Property |
Link |
27-May-2021 |
CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events |
| Sample Button |
Link |
31-May-2021 |
Sample Button Code you can directly copy-paste |
inset Property |
Link |
06-June-2021 |
Set the position on all four sides with one CSS property. Property top, right, bottom, and left all together can be replaced with one CSS property i.e inset |
| Using Media Query to set dark/light theme |
Link |
07-June-2021 |
Using Media query i.e. @media (prefers-color-scheme: dark/light) for setting website theme based on system theme |
| CSS Units |
Link |
08-June-2021 |
Notes on CSS Units like vh,vw,ch,em,rem,% |
| More Ways to Vertically Center An Element |
Link |
17-June-2021 |
Vertically center using display as table, grid and flex or position as relative & absolute |
| Perspective CSS |
Link |
18-June-2021 |
Implementing Perspective in CSS using perspective and perspective-origin |
::first-letter and ::first-line Selector |
Link |
23-June-2021 |
Styling using ::first-letter and ::first-line Selector |
Styling the Bullets in Lists using ::marker |
Link |
23-June-2021 |
Styling the Bullets in Lists using ::marker |
| Using SVG for bullets in List |
Link |
23-June-2021 |
Using SVG for bullets in List |
mix-blend-mode and isolation Property |
Link |
24-June-2021 |
mix-blend-mode and isolation Property Example |
| Signature Pad |
Link |
28-June-2021 |
Signature Canvas To Draw and Save Your Signature |
:hover or :active doesn’t work in IPhone’s Safari |
Link |
29-June-2021 |
Solution is to use ontouchstart attribute with the tag |
| CSS Interaction Media Queries |
Link |
30-June-2021 |
CSS Interaction Media Queries like hover and pointer |
currentColor Keyword |
Link |
01-July-2021 |
Using currentColor Keyword, to set value same as element’s color property |
| Custom Cursor For Your Website |
Link |
04-July-2021 |
Using Custom Cursor For Your Website using cursor property |
| The Open Graph Protocol |
Link |
05-July-2021 |
The Open Graph Protocol |
| Prevent Div Selection on Android |
Link |
10-July-2021 |
Prevent Div Selection on Android using CSS |
| Prevent Screen Reader From Reading an Element |
Link |
11-July-2021 |
Prevent Screen Reader From Reading an Element using aria-hidden="true" |
Scroll With Padding Using scroll-padding-top |
Link |
14-July-2021 |
Scroll With Padding Using scroll-padding-top |
border vs outline |
Link |
15-July-2021 |
border vs outline |
| Reading a File on UI |
Link |
20-July-2021 |
Reading a File on UI |
| Implementing Drag and Drop |
Link |
20-July-2021 |
Implementing Drag and Drop |
| Using Shadow with Clip Path |
Link |
25-July-2021 |
Using Shadow With Clip Path |
columns Property in CSS |
Link |
26-July-2021 |
columns Property in CSS |
quotes CSS Property |
Link |
27-July-2021 |
quotes CSS Property |
content CSS Property |
Link |
28-July-2021 |
content CSS Property |
| Draggable Element using Jquery |
Link |
30-July-2021 |
Making an element draggable using Jquery |
| Data Attributes |
Link |
03-August-2021 |
Data Attributes in HTML i.e data-* Attributes |
| Global Attributes |
Link |
04-August-2021 |
Global Attributes List |
Random Image Using picsum.photos |
Link |
05-August-2021 |
Random Image Using picsum.photos |
| Detect Device Orientation |
Link |
10-August-2021 |
Detecting Device Orientation / Motion |
aspect-ratio CSS Property |
Link |
20-August-2021 |
aspect-ratio CSS Property sets a preferred aspect ratio for the box |
| Useful Imports |
Link |
24-August-2021 |
List of useful imports |
| Google Fonts Material Icons |
Link |
24-August-2021 |
Google Fonts Material Icons Imports and Details |
| ARIA Attributes |
Link |
25-August-2021 |
ARIA Attributes are used for accessibilities |
| Intersection Observer API |
Link |
27-August-2021 |
Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport. Basically used with scroll. |
<fieldset> Element |
Link |
29-August-2021 |
<fieldset> Element |
<datalist> Element |
Link |
29-August-2021 |
<datalist> Element: The HTML Data List element used with input list |
<progress> Element |
Link |
29-August-2021 |
<progress>: The Progress Indicator element |
<meter> Element |
Link |
29-August-2021 |
<meter>: The HTML Meter element |
<template> Element |
Link |
29-August-2021 |
<template>: The Content Template element |
Set Text Inside a Polygon Using shape-outside Property |
Link |
31-August-2021 |
Set Text Inside a Polygon Using shape-outside Property |
How to import Jquery directly into your script.js file? |
Link |
03-September-2021 |
How to import Jquery directly into your script.js file / How to import jQuery using ES6 Syntax OR solution for Uncaught SyntaxError: Cannot use import statement outside a module |
| PokeAPI Example |
Link |
04-September-2021 |
Randomly getting Pokemon using PokeAPI |
| API Call From Website |
Link |
05-September-2021 |
API Call From Website and all details |
direction Property |
Link |
08-September-2021 |
direction Property |
| WebXR Notes |
Link |
09-September-2021 |
WebXR Notes |
$.get() Function |
Link |
22-September-2021 |
Way to get data / website data using $.get() |
| Fuzzing Testing |
Link |
23-October-2021 |
Fuzzing Testing |
| Kevin Powell’s Challenge |
Link |
1-November-2021 |
Kevin Powell’s Challenge - Link |
writing-mode CSS Property |
Link |
7-Nov-2021 |
writing-mode CSS Property |
| Generators In JS |
Link |
18-Aug-2022 |
Generators In JS, solution for counter problem |
| RegExp In JS |
Link |
19-Aug-2022 |
RegExp In JS |
