FrontendGuruji

Some Less Known HTML input types 😎


https://youtube.com/shorts/KTrWu0PYqBI?feature=share

www.youtube.com

⁉️ How to detect unwanted re-renderings of elements on the webpage. 😎

✅ Enable “Paint Flashing” 😯

❇️ Now whenever you do actions on page, browser will highlight the repainted area by green color. 🤩

https://youtube.com/shorts/K-OSwgcVta8

www.youtube.com

⭐️Nullish Coalescing Operator (??)

👉Returns its right side operand when its left side operand is null or undefined.
👉However Logical OR (||) operator returns the right side operand if the left operand is falsy value including null or undefined

⚠️Use only when you want to catch null and undefined



https://www.youtube.com/watch?v=1fYZtFpXR28

(?? vs ||) Do you know this JavaScript Logical Operator? 😮 #css #html #javascript #shorts #ytshorts Nullish coalescing operator (??) - logical operator that returns its right side operand if left side operand is null or undefined.However || operator return...

▶️ How to Compare performance 🚀 of JavaScript Code Snippets.

✅ Use Performance API now() method - It returns a DOMHighResTimeStamp in milliseconds.

https://youtu.be/6H6yefjzwyE

Check Performance 🚀 of JavaScript Code Snippet 😎 [So Easy!] #javascript #frontendguruji Learn how to check performance of JavaScript Function.CodePen: https://codepen.io/mandeeppasbola/pen/qBVLdYQ?editors=0012The performance.now() method returns...

(?.) Optional Chaining Operator JavaScript 🤩

✅ It helps to read the value of a property located deep in nested objects without having to check for null.

▶️ Obj1?.Obj2?.Obj3?.Obj4

Learning will make you a .

But to use these effectively, you must know:
✅
✅
✅
✅
✅
✅

▶ Can we create an Accordion (collapsible section) without using JavaScript? 😮
✅ Why not! use checkbox/radio as a click identifier

🔽 Checkout this trick, the link is in the comment! 😎

Most Popular Technologies by StackOverflow Insights 2021.
And as always! JS, HTML, CSS Rocks 🤟
Feeling Proud! Hit Like

Valentine Week special
https://youtu.be/Jq4diUd10Zs

Create Animated CSS Heart Shape - CSS Animation Tutorial #csstricks #csstutorial #cssanimation Learn how to Create Animated CSS Heart Shape using this CSS Tutorial😮.css heart shape, heart using css, caret using css, animated heart cssSubscribe & utill...

Must See! 1min Crazy CSS Tricks, Tips & Tutorials. 😎
https://www.youtube.com/playlist?list=PLfhphuhJDGgzeSXoo1ExkVgZf9BEUj0gI

---
---

Emulating Print CSS using Dev Tools🤟

- Add Background Image To Text using CSS background-clip property.

https://youtube.com/shorts/EUxZO2PFMRM

Check which browser supports the technology you want to use!

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

Want to Detect if Element is in Viewport?.

Lazy-loading images, Implementing infinite scrolling are common use cases of Intersection Observer API.

https://frontendguruji.com/blog/how-to-detect-if-element-is-in-viewport-intersection-observer-api/

How to Detect if Element is in Viewport - Using Intersection Observer API - < FrontendGuruji /> Want to Detect if Element is in Viewport?. Lazy-loading images, Implementing infinite scrolling are common use cases of Intersection Observer API.

Detecting visibility👀 of an element on Viewport 😮 using Intersection Observer API ❗

In the attached example, I have reduced the opacity of the element as it starts leaving the viewport.

Intersection Observer API ⏳asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Most common use of this API:
✅ Lazy-loading of images or other content as a page is scrolled.
✅ Implementing "infinite scrolling" web sites.

Top 16:9 Resolutions 🤯:

640 x 360 (nHD)
854 x 480 (FWVGA)
960 x 540 (qHD)
1024 x 576 (WSVGA)
1280 x 720 (HD/WXGA)
1366 x 768 (FWXGA)
1600 x 900 (HD+)
1920 x 1080 (FHD)
2048 x 1152 (QWXGA)
2560 x 1440 (QHD)
3200 x 1800 (WQXGA+)
3840 x 2160 (UHD)
5120 x 2880 (UHD+)
7680 x 4320 (FUHD)
15360 x 8640 (QUHD)
30720 x 17280 (HHD)
61440 x 34560 (FHHD)
122880 x 69120 (QHHD) 😮

🤔 Blur/Grayscale images, change brightness/contrast and more.. Just using CSS 🕺.

CSS Basics: Align horizontally and vertically center, using CSS Position & Flexbox Layout.

How to parse POST data in Node JS without using Express JS?

RIP AngularJS! 🙏
Are you still working on AngularJS, as even Google has finally stopped supporting it officially 😁.
But I am very thankful for this framework for having begun the revolution in web development 🤘.

Popularity of ReactJS/VueJS/Angular based on GitHub ⭐'s.
And if we look into open issues - ReactJS: 688, VueJS: 323 and Angular is at whopping 1.7K! 😮
Looks like VueJS is shining here 😎

Hello Friends🙏, Whenever we have to create an API in Node, first thing we do is install Express JS, right❗. Check here, how to do it without using Express JS🤔

https://frontendguruji.com/blog/how-to-create-api-in-nodejs-without-express-js/

How to create API in NodeJS without Express JS - < FrontendGuruji /> In this Node JS tutorial, learn how to create API in NodeJS without Express JS, how to implement POST & GET API and how to use Postman for API testing.

Hello Friends🙏, You must have used the ExpressJS body-parser to read the POST request data in Node JS, but do you know why we use it? And how can we parse the POST request body without using Express JS body-parser? 🤔

https://frontendguruji.com/blog/how-to-parse-post-request-in-node-js-without-expressjs-body-parser/

How to parse POST request in Node JS without using Express JS body-parser - < FrontendGuruji /> In this Node JS tutorial, you will learn how to parse POST request in Node JS without using ExpressJS body-parser and also what is Buffer in JavaScript and how to convert Buffer data into readable and accessible data format.

Hello friends🙏. Learn how setup a Vue JS project from scratch😎 (without Vue CLI😯)
With latest Node v16, Vue v3, Vue Router v4, Webpack v5 🥳)
Start New Year 2022 with learning something new with 👍.
https://frontendguruji.com/blog/how-to-setup-a-vue-js-project-from-scratch-without-vue-cli/

How to setup a Vue JS v3 project from scratch (without Vue CLI) (Including SFC’s & Vue Router v4) – < FrontendGuruji /> How to setup a Vue JS v3 project from scratch (without Vue CLI) (Including SFC’s & Vue Router v4) Leave a Comment / Vue JS / By Mandeep Pasbola Hello Friends! 🙏. Today we will setup a Vue JS v3 project with Single File Components (SFCs), without using Vue CLI. Basically Vue CLI provides a comma...

Hello friends🙏. Learn how setup a React JS project from scratch😎 (without Create React App😯)
With latest Node v16, React v17, React Router v6, Webpack v5 🥳)
Start New Year 2022 with learning something new with 👍.

https://frontendguruji.com/blog/how-to-setup-a-react-js-project-from-scratch-without-create-react-app/

How to setup a React JS project from scratch (without Create React App) (React Router v6) – < FrontendGuruji /> How to setup a React JS project from scratch (without Create React App) (React Router v6) Leave a Comment / React JS / By Mandeep Pasbola Hello Friends! 🙏. React JS project can be setup using only one command & it only takes few minutes🚀 . Everyone use it & while command does its magic, all si...