Learn a topic daily

Is it a function? Use a verb!

handleThat()
goToThatRoute()
doThatOtherThing()

Is it a boolean?

const isUserAuthenticated = true
const hasAccessRights = false
const isFunctionAllowed = true

Is it a number?

const valueOfProduct = 10
const greaterThanOrherValue = 23
const ageOfTheUser = 31

Is it a string?

Express the string into the variable name:

const userAuthenticationMessage = "You must be authenticated in order to see this screen"

const errorFetchRequestMessage = "We are sorry! There was an error our side".

HTML Tip ⚡

Prevent content from being pasted in HTML editable element. using "onpaste" HTML event. It is mostly used to prevent users from pasting passwords in forms.

𝟏𝟎 𝐯𝐞𝐫𝐲 𝐩𝐫𝐨𝐦𝐢𝐬𝐢𝐧𝐠 𝐎𝐩𝐞𝐧 𝐒𝐨𝐮𝐫𝐜𝐞 𝐏𝐫𝐨𝐣𝐞𝐜𝐭𝐬 𝐲𝐨𝐮 𝐡𝐚𝐯𝐞𝐧’𝐭 𝐡𝐞𝐚𝐫𝐝 𝐨𝐟!

𝟭)𝗧𝗛𝗘 𝗙𝗨𝗖𝗞 (70.2k ⭐)
The F**k is a magnificent app, that corrects errors in previous console commands.
Link: https://lnkd.in/eNkQp_vR

𝟮)𝗣𝗔𝗥𝗧𝗬𝗧𝗢𝗪𝗡 (7.2K ⭐)
Partytown is a lazy-loaded library to help relocate resource-intensive scripts into a web worker, and off of the main thread. Its goal is to help speed up sites by dedicating the main thread to your code and offloading third-party scripts to a web worker.
Link: https://lnkd.in/ey5U6ZMY

𝟯)𝗧𝗥𝗣𝗖 (5k ⭐)
tRPC allows you to easily build & consume fully typesafe APIs, without schemas or code generation.
Link: https://lnkd.in/ekvFAf54

𝟰)𝗠𝗮𝗻𝘁𝗶𝗻𝗲 (10k ⭐)
Build fully functional accessible web applications faster than ever – Mantine includes more than 120 customizable components and hooks to cover you in any situation.
Link: https://lnkd.in/e_krNrMd

𝟱)𝗗𝗔𝗙𝗡𝗢 𝗝𝗦 (3.3k ⭐)
Danfo.js is a javascript package that provides fast, flexible, and expressive data structures designed to make working with "relational" or "labeled" data both easy and intuitive. It is heavily inspired by Pandas library.
Link: https://lnkd.in/eghGYyUK

𝟲)𝗦𝗨𝗣𝗘𝗥𝗧𝗢𝗞𝗘𝗡𝗦 (5.7K ⭐)
Add secure login and session management to your apps. SDKs are available for popular languages and front-end frameworks.
Link: https://lnkd.in/eew-fPDB

𝟳)𝗠𝗘𝗜𝗟𝗜𝗦𝗘𝗔𝗥𝗖𝗛 (26K⭐ )
It is a powerful, fast, open-source, easy to use, and deploy search engine. Both searching and indexing are highly customizable. Features such as typo-tolerance, filters, and synonyms are provided out-of-the-box.
Link: https://lnkd.in/e5Qegs5M

𝟴) 𝗡𝗢𝗖𝗢𝗗𝗕 (26.1k⭐ )
The Open Source Airtable Alternative, Turns any MySQL, PostgreSQL, SQL Server, SQLite & MariaDB into a smart spreadsheet.
Link: https://lnkd.in/eApNrX8v

𝟵)𝗛𝗢𝗣𝗣𝗦𝗖𝗢𝗧𝗖𝗛 (42.6K ⭐)
It is a lightweight, web-based API development suite. It was built from the ground up with ease of use and accessibility in mind providing all the functionality needed for API developers with minimalist, unobtrusive UI.
Link: https://lnkd.in/eN4-svmQ

𝟭𝟬)𝗔𝗠𝗣𝗟𝗜𝗖𝗔𝗧𝗜𝗢𝗡 (7K ⭐)
Amplication is an open‑source development tool. It helps professional Node.js developers develop quality Node.js applications without spending time on repetitive coding tasks.
LINK: https://lnkd.in/enFWVFtK

Some of the best free open-source alternatives of the paid application in the market.

GitHub - nvbn/thef**k: Magnificent app which corrects your previous console command. Magnificent app which corrects your previous console command. - GitHub - nvbn/thef**k: Magnificent app which corrects your previous console command.

Javascript Tips💡

FOR LOOP VS FOR-OF LOOP

If you just need to iterate through data items of an iterable (also if you need to apply some changes maybe) for-of is an obvious choice.

💡 𝚂𝚝𝚛𝚒𝚗𝚐𝚜 𝚒𝚗 𝙹𝚊𝚟𝚊𝚜𝚌𝚛𝚒𝚙𝚝! 💡

𝙷𝚎𝚛𝚎 𝚒𝚜 𝚊 𝚋𝚛𝚒𝚎𝚏 𝚎𝚡𝚙𝚕𝚊𝚗𝚊𝚝𝚒𝚘𝚗 𝚏𝚘𝚛 𝚜𝚘𝚖𝚎 𝚘𝚏 𝚝𝚑𝚎 𝚌𝚘𝚗𝚏𝚞𝚜𝚒𝚗𝚐 𝚜𝚝𝚛𝚒𝚗𝚐 𝚖𝚎𝚝𝚑𝚘𝚍𝚜. 𝚃𝚑𝚎 𝚛𝚎𝚜𝚝 𝚊𝚛𝚎 𝚌𝚕𝚎𝚊𝚛𝚕𝚢 𝚍𝚎𝚖𝚘𝚗𝚜𝚝𝚛𝚊𝚝𝚎𝚍 𝚠𝚒𝚝𝚑𝚒𝚗 𝚝𝚑𝚎 𝚎𝚡𝚊𝚖𝚙𝚕𝚎 𝚋𝚎𝚕𝚘𝚠.

✔ 𝚃𝚑𝚎 𝐬𝐥𝐢𝐜𝐞() 𝚖𝚎𝚝𝚑𝚘𝚍 𝚎𝚡𝚝𝚛𝚊𝚌𝚝𝚜 𝚊 𝚜𝚎𝚌𝚝𝚒𝚘𝚗 𝚘𝚏 𝚊 𝚜𝚝𝚛𝚒𝚗𝚐 𝚊𝚗𝚍 𝚛𝚎𝚝𝚞𝚛𝚗𝚜 𝚒𝚝 𝚊𝚜 𝚊 𝚗𝚎𝚠 𝚜𝚝𝚛𝚒𝚗𝚐, 𝚠𝚒𝚝𝚑𝚘𝚞𝚝 𝚖𝚘𝚍𝚒𝚏𝚢𝚒𝚗𝚐 𝚝𝚑𝚎 𝚘𝚛𝚒𝚐𝚒𝚗𝚊𝚕 𝚜𝚝𝚛𝚒𝚗𝚐.

✔ 𝚃𝚑𝚎 𝐬𝐮𝐛𝐬𝐭𝐫𝐢𝐧𝐠() 𝚖𝚎𝚝𝚑𝚘𝚍 𝚛𝚎𝚝𝚞𝚛𝚗𝚜 𝚝𝚑𝚎 𝚙𝚊𝚛𝚝 𝚘𝚏 𝚝𝚑𝚎 𝚜𝚝𝚛𝚒𝚗𝚐 𝚋𝚎𝚝𝚠𝚎𝚎𝚗 𝚝𝚑𝚎 𝚜𝚝𝚊𝚛𝚝 𝚊𝚗𝚍 𝚎𝚗𝚍 𝚒𝚗𝚍𝚎𝚡𝚎𝚜, 𝚘𝚛 𝚝𝚘 𝚝𝚑𝚎 𝚎𝚗𝚍 𝚘𝚏 𝚝𝚑𝚎 𝚜𝚝𝚛𝚒𝚗𝚐.

✔ 𝚃𝚑𝚎 𝐬𝐮𝐛𝐬𝐭𝐫() 𝚖𝚎𝚝𝚑𝚘𝚍 𝚛𝚎𝚝𝚞𝚛𝚗𝚜 𝚊 𝚙𝚘𝚛𝚝𝚒𝚘𝚗 𝚘𝚏 𝚝𝚑𝚎 𝚜𝚝𝚛𝚒𝚗𝚐, 𝚜𝚝𝚊𝚛𝚝𝚒𝚗𝚐 𝚊𝚝 𝚝𝚑𝚎 𝚜𝚙𝚎𝚌𝚒𝚏𝚒𝚎𝚍 𝚒𝚗𝚍𝚎𝚡 𝚊𝚗𝚍 𝚎𝚡𝚝𝚎𝚗𝚍𝚒𝚗𝚐 𝚏𝚘𝚛 𝚊 𝚐𝚒𝚟𝚎𝚗 𝚗𝚞𝚖𝚋𝚎𝚛 𝚘𝚏 𝚌𝚑𝚊𝚛𝚊𝚌𝚝𝚎𝚛𝚜 𝚊𝚏𝚝𝚎𝚛𝚠𝚊𝚛𝚍𝚜.

✔ 𝚃𝚑𝚎 𝐫𝐞𝐩𝐥𝐚𝐜𝐞() 𝚖𝚎𝚝𝚑𝚘𝚍 𝚛𝚎𝚝𝚞𝚛𝚗𝚜 𝚊 𝚗𝚎𝚠 𝚜𝚝𝚛𝚒𝚗𝚐 𝚠𝚒𝚝𝚑 𝚜𝚘𝚖𝚎 𝚘𝚛 𝚊𝚕𝚕 𝚖𝚊𝚝𝚌𝚑𝚎𝚜 𝚘𝚏 𝚊 𝚙𝚊𝚝𝚝𝚎𝚛𝚗 𝚛𝚎𝚙𝚕𝚊𝚌𝚎𝚍 𝚋𝚢 𝚊 𝚛𝚎𝚙𝚕𝚊𝚌𝚎𝚖𝚎𝚗𝚝. 𝚃𝚑𝚎 𝚙𝚊𝚝𝚝𝚎𝚛𝚗 𝚌𝚊𝚗 𝚋𝚎 𝚊 𝚜𝚝𝚛𝚒𝚗𝚐 𝚘𝚛 𝚊 𝚁𝚎𝚐𝙴𝚡𝚙, 𝚊𝚗𝚍 𝚝𝚑𝚎 𝚛𝚎𝚙𝚕𝚊𝚌𝚎𝚖𝚎𝚗𝚝 𝚌𝚊𝚗 𝚋𝚎 𝚊 𝚜𝚝𝚛𝚒𝚗𝚐 𝚘𝚛 𝚊 𝚏𝚞𝚗𝚌𝚝𝚒𝚘𝚗 𝚝𝚘 𝚋𝚎 𝚌𝚊𝚕𝚕𝚎𝚍 𝚏𝚘𝚛 𝚎𝚊𝚌𝚑 𝚖𝚊𝚝𝚌𝚑. 𝙸𝚏 𝚙𝚊𝚝𝚝𝚎𝚛𝚗 𝚒𝚜 𝚊 𝚜𝚝𝚛𝚒𝚗𝚐, 𝚘𝚗𝚕𝚢 𝚝𝚑𝚎 𝚏𝚒𝚛𝚜𝚝 𝚘𝚌𝚌𝚞𝚛𝚛𝚎𝚗𝚌𝚎 𝚠𝚒𝚕𝚕 𝚋𝚎 𝚛𝚎𝚙𝚕𝚊𝚌𝚎𝚍. 𝚃𝚑𝚎 𝚘𝚛𝚒𝚐𝚒𝚗𝚊𝚕 𝚜𝚝𝚛𝚒𝚗𝚐 𝚒𝚜 𝚕𝚎𝚏𝚝 𝚞𝚗𝚌𝚑𝚊𝚗𝚐𝚎𝚍.

✔ 𝚃𝚑𝚎 𝐩𝐚𝐝𝐒𝐭𝐚𝐫𝐭() 𝚖𝚎𝚝𝚑𝚘𝚍 𝚙𝚊𝚍𝚜 𝚝𝚑𝚎 𝚌𝚞𝚛𝚛𝚎𝚗𝚝 𝚜𝚝𝚛𝚒𝚗𝚐 𝚠𝚒𝚝𝚑 𝚊𝚗𝚘𝚝𝚑𝚎𝚛 𝚜𝚝𝚛𝚒𝚗𝚐 (𝚖𝚞𝚕𝚝𝚒𝚙𝚕𝚎 𝚝𝚒𝚖𝚎𝚜, 𝚒𝚏 𝚗𝚎𝚎𝚍𝚎𝚍) 𝚞𝚗𝚝𝚒𝚕 𝚝𝚑𝚎 𝚛𝚎𝚜𝚞𝚕𝚝𝚒𝚗𝚐 𝚜𝚝𝚛𝚒𝚗𝚐 𝚛𝚎𝚊𝚌𝚑𝚎𝚜 𝚝𝚑𝚎 𝚐𝚒𝚟𝚎𝚗 𝚕𝚎𝚗𝚐𝚝𝚑. 𝚃𝚑𝚎 𝚙𝚊𝚍𝚍𝚒𝚗𝚐 𝚒𝚜 𝚊𝚙𝚙𝚕𝚒𝚎𝚍 𝚏𝚛𝚘𝚖 𝚝𝚑𝚎 𝚜𝚝𝚊𝚛𝚝 𝚘𝚏 𝚝𝚑𝚎 𝚌𝚞𝚛𝚛𝚎𝚗𝚝 𝚜𝚝𝚛𝚒𝚗𝚐.

✔ 𝚃𝚑𝚎 𝐩𝐚𝐝𝐄𝐧𝐝() 𝚖𝚎𝚝𝚑𝚘𝚍 𝚙𝚊𝚍𝚜 𝚝𝚑𝚎 𝚌𝚞𝚛𝚛𝚎𝚗𝚝 𝚜𝚝𝚛𝚒𝚗𝚐 𝚠𝚒𝚝𝚑 𝚊 𝚐𝚒𝚟𝚎𝚗 𝚜𝚝𝚛𝚒𝚗𝚐 (𝚛𝚎𝚙𝚎𝚊𝚝𝚎𝚍, 𝚒𝚏 𝚗𝚎𝚎𝚍𝚎𝚍) 𝚜𝚘 𝚝𝚑𝚊𝚝 𝚝𝚑𝚎 𝚛𝚎𝚜𝚞𝚕𝚝𝚒𝚗𝚐 𝚜𝚝𝚛𝚒𝚗𝚐 𝚛𝚎𝚊𝚌𝚑𝚎𝚜 𝚊 𝚐𝚒𝚟𝚎𝚗 𝚕𝚎𝚗𝚐𝚝𝚑. 𝚃𝚑𝚎 𝚙𝚊𝚍𝚍𝚒𝚗𝚐 𝚒𝚜 𝚊𝚙𝚙𝚕𝚒𝚎𝚍 𝚏𝚛𝚘𝚖 𝚝𝚑𝚎 𝚎𝚗𝚍 𝚘𝚏 𝚝𝚑𝚎 𝚌𝚞𝚛𝚛𝚎𝚗𝚝 𝚜𝚝𝚛𝚒𝚗𝚐.

🔵 𝐇𝐓𝐌𝐋 𝐓𝐢𝐩: 🔵

𝐘𝐨𝐮 𝐜𝐚𝐧 𝐮𝐬𝐞 𝐝𝐞𝐜𝐨𝐝𝐢𝐧𝐠 𝐚𝐬𝐲𝐧𝐜 𝐚𝐭𝐭𝐫𝐢𝐛𝐮𝐭𝐞 𝐭𝐨 𝐢𝐦𝐩𝐫𝐨𝐯𝐞 𝐭𝐡𝐞 𝐩𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞.

The decoding="async" attribute will tell the browser that it is OK for image decoding to be done at a later moment so that the browser can continue displaying content even if the images are not fully loaded.

𝐓𝐡𝐞𝐫𝐞 𝐚𝐫𝐞 𝟑 𝐚𝐜𝐜𝐞𝐩𝐭𝐞𝐝 𝐯𝐚𝐥𝐮𝐞𝐬 𝐟𝐨𝐫 𝐭𝐡𝐞 𝐝𝐞𝐜𝐨𝐝𝐢𝐧𝐠 𝐚𝐭𝐭𝐫𝐢𝐛𝐮𝐭𝐞:
1- 𝐬𝐲𝐧𝐜: the rendering will continue only after the image is ready; preferred for a "complete experience".

2- 𝐚𝐬𝐲𝐧𝐜: continue the rendering and as soon as image decoding is complete, the browser will update the presentation; preferred
for performance.

3- 𝐚𝐮𝐭𝐨: will let the browser do what it determines is best approach (not sure who it decides that)

Web 1.0 vs Web 2.0 vs Web 3.0

Do you know about :is() in CSS?

It's pretty handy!

Learn more: https://lnkd.in/gk3vVZNF
Browser support: https://lnkd.in/gT2RsRqB

Flex Align Content 👌

JavaScript Tip: Short Circuit Operator

Short circuit operator (&&) always return something. If left side is truthy then do the stuff of right side and return it otherwise returns the left side itself.

So, never use something which return a value in the left side of short circuit operator.

In the first example, whenever it gets falsy value it doesn't go to the right side but return the 0 from left side. What if you use that operator in jsx? It'll return value (0) in Jsx and show 0 in specific HTML Section).

How can we avoid this?
Always use boolean on the left side of the short circuit operator. Whenever it gets falsy value it return false and doesn't affect on Jsx.

Thanks

Complete Guidelines for those who want to join FAANG or master class companies...!

Website: https://www.techinterviewhandbook.org/

JSON doesn't support comments.

So here's how I comment npm scripts in package.json. 😎