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 |