DEV Community: TAQUI ⭐

Save your system !

TAQUI ⭐ — Sat, 17 Oct 2026 08:04:29 +0000

Taqui

Oct 17

Why Your LLM Prompts Break in Production (And How to Fix Them)

#ai #programming #beginners #llm

5 min read

Great reading

TAQUI ⭐ — Wed, 30 Sep 2026 05:39:15 +0000

Taqui

Sep 28

My Craziest Side Project Yet: Drawva

#mlhacks #devchallenge #hackathon #ai

4 min read

If you want to learn Agentic Ai, must read this

TAQUI ⭐ — Tue, 29 Sep 2026 05:32:17 +0000

Taqui

Sep 28

My Craziest Side Project Yet: Drawva

#mlhacks #devchallenge #hackathon #ai

4 min read

Build My First Gen Ai Project 😅

TAQUI ⭐ — Thu, 16 Oct 2025 14:47:39 +0000

So… I built my first generative AI project. i know not a very good project but that's what i built by my own.

The Project is simple, User upload their PDF and can extract important points and can chat with it.

The only new here is -> i had Added a Nodes and Flow interface kind of Drag and Drop.

Also You can chat with it.

Take A Look 🚀

The Idea 🧠

It started simple.

I want to learn Gen Ai so i started with Langchain and Langraph and playing with it, So you know that just by watching tutorial no body can properly learn and understand its concept,

So decided to build any simple project, i explored some to get any simple project idea and there is very common Genai project in the market is and it is Chat with PDF.

The Tech Stack 🛠️

Let’s talk about the serious side of things (before it interrupts me again).

Star it in Github⭐

Frontend: Next.js + Tailwind + Shadcnui
AI Core: OpenAI API (GPT model for generation)
Storage: Supabase (for saving chats, feedbacks, and “judgement” logs)
Logic Layer: A custom evaluation function that calls another model instance to “judge” what the main model said.

I know the code is not very production level, i am currently working on it more that's why i need your feedback to make it more exciting and cool project.

That's it guys 😅

The only Purpose of writing this Blog post is to get honest Feedback and suggestion on how to become a Fullstack Gen Ai developer,

I started this to learn about generative AI pipelines.
Now I have a bot that:

Responds faster than my friends
Corrects my grammar
And rates my emotional intelligence

I built my first Gen AI project… And it built my self-doubt.

Thankyou For Reading, i hope no hate comments😅

Checkout this dev's

TAQUI ⭐ — Mon, 07 Jul 2025 09:50:50 +0000

Is Self-Taught Coding Still Worth It?

Random ・ Jul 7

#programming #ai #career #learning

⭐5 Beginner Project with "Nextjs + Shadcn = 🔥"

TAQUI ⭐ — Mon, 20 Nov 2023 03:00:00 +0000

Hello everyone, this is Md Taqui Imam here!

I wanted to share some really cool projects that use Next.js and Shadcn UI. Next.js and Shadcn UI are awesome tools for building websites and apps.

These👇 5 projects are perfect for beginners to check out.

1. Portfolio ✨

Star it in Github⭐

A portfolio website shows off all your cool projects and skills to employers. It was made using Next.js and Shadcn UI. It has pages for an about section, projects they worked on, a contact form, and a blog. I really like how clean and simple it looks. The navbar is responsive too so it looks good on mobile.

2. skateshop

Star it in Github⭐

Nextup is e-commerce platform by sadmann7. This Project is made with Nextjs, shadcn and Typescript, its site performance is awesome. Sadman really pushes himself to learn hard technologies. His projects are very advanced but you can learn a lot just by looking at the code.

3. itZmyLink

Star it in Github⭐

The third project is itZmyLink. This one is super handy, this app is basically a tool where you can make a shareable single page where you can give all you important and social links. They used Next.js, Shadcn UI, Typescript and deploy it with Vercel.

4. Taxonomy

Star it in Github⭐

Next up is the Shadcn UI taxonomy app. Shadcn UI is a component library for Next.js made by the company Shadcn. The taxonomy app is a site they built to demo Shadcn UI. It allows you to browse plants and animals in a catalog.

As a beginner, it's cool to see what other people build using the same tools as you.

5. Modifio

Star it in Github⭐

This is the Last one Modifio – the ultimate online tool for unlimited and free multimedia conversion. Transform images, audio, and videos effortlessly, without restrictions. Start converting now and elevate your content like never before!

End 👋

Thanks for learning with me today! Feel free to share any other questions you have. I'll do my best to explain clearly. Wishing you the best as you work on your next web project. Until next time!

Don't forget to Drop "🦄🔥💖" and Share it .

Follow me in Github✅

Happy Coding 😊

✨13 HTML Attributes you must know about ✔

TAQUI ⭐ — Fri, 17 Nov 2023 13:53:18 +0000

Hello everyone, this is Md Taqui Imam here!

✨13 HTML Attributes every developer must know about.

I'm excited to share some really useful HTML attributes that I think will improve your web devlopment skills. And

Follow me in Github✅

HTML provides many handy attributes that can enhance your web pages without writing any additional code. In this post, I'll go over 13 attributes that are super helpful to know.

Let's get started! These basics will serve you well in all your HTML projects. 👇

1. Multiple Attribute 👨‍👨‍👦‍👦

<input type="file" multiple />

<select multiple >
<option value="Mango">Mango</option>
<option value="Banana">Banana</option>
<option value="Apple">Apple</option>
<option value="Lemon">Lemon</option>
</select>

multiple attribute with <input/> and <select> elements allow users to select/enter multiple values at once.

2. Spellcheck Attribute 🥓

<input type="text" spellcheck="false" />

Spellcheck attribute is very useful attribute when you want to disable spell checking and not want red underline in text in your <input/>, content-editable or <textarea/>.

3. Title Attribute ✒

<a href="document.pdf" title="Click To Download"> Download Pdf </a>

Title Attribute is used like a Tooltip to provide additional information about an element which is displayed when you hover the element.

4. Poster Attribute 🖼

<video controls poster="thumbnail.png" width="1000">
<source src="video.mp4" type="video/mp4" />
</video>

Poster Attribute is used with the video element to display an image like "thumbnail on youtube video" until user play the video.

5. Srcset Attribute ⚙

<img src="image.png" srcset="image.jpg, image-2x.jpg, image-3x.jpg" />

Srcset attribute is used with <img/> and <source/> element to provide a list of image sources.

6. Autocomplete Attribute 💀

<input type="text" name="fullname" autocomplete="on"  />

autocomplete attribute is used with <form>, <input> and <textarea> element to control enable and control the autocomplete feature .

7. Accept Attribute ✔

<input type="file" accept=".jpg, .jpeg, .png" />

accept attribute is used with <input/> element with (file type only) to specify the file type should be accepted.

8. loading Attribute ⏳

<img src="image.png" loading="lazy" />

loading attribute is used with the img element to control how the browser loads the image. It has different options like ["eager", "auto", "lazy"].

9. Readonly Attribute 📖

<input type="text" value="This is for read only" readonly />

readonly Attribute is used with <input/> element to specify that element is only for read not editable.

10. Download Attribute ⬇

<a href="resume.pdf" download="resume.pdf" > Download Resume </a>

download attribute is used with <a> element to specify that the link resource is to download file not to navigate page .

11. Hidden Attribute 👓

<div hidden >This is hidden content .</div>

hidden attribute is for hidding element on the web page. This is one of the very useful attribute for controlling visibility through *Javascript and CSS *.

12. Contenteditable Attribute 📝

<div contenteditable="true">Click Here to edit this Content .</div>

contenteditable attribute is used to make a content editable. It allows users to modify the content within the element.

13. Alt Attribute ⭐

<img src="image.png" alt="A Man image"  />

alt attribute is used with <img/> element to specify alternate text that should be shown in place of image in case when image can't be loaded or displayed .

End 👋

Thanks for learning with me today! Feel free to share any other questions you have. I'll do my best to explain clearly. Wishing you the best as you work on your next web project. Until next time!

Don't forget to Drop "🦄🔥💖" and Share it .

Follow me in Github✅

Happy Coding 😊

1000+ HTML templates you can use in your Project for FREE 🤩

TAQUI ⭐ — Thu, 09 Nov 2023 16:15:28 +0000

Hey everyone! 👋

If you're just starting out with web development like me, finding beautiful HTML website templates can be hard. Most good ones cost money! 💸 Luckily, there are some awesome free options out there if you know where to look.

In this post, I'll share 5 amazing HTML templates websites where you get 1000+ templates for totally FREE! ✨ These will help you create a professional looking site without spending a dollar. Let's get started!

So, let's start with 👇

1. htmlrev

My first recommendation is htmlrev.

They have 1000+ free HTML templates Discover selected free templates for websites, landing pages, blogs, portfolios, ecommerce and dashboards with bunch of modern and creative templates made with HTML, CSS, and JavaScript. Most are fully responsive too, so they'll look great on mobile.

They have 1000+ free HTML templates on each Framework :

I really like their landing page templates! They have some with cool scrolling animations and big image headers. Perfect for creating a slick homepage for your app or business. 😎

2. uideck

Next up is uideck. These guys have some gorgeous HTML website themes with unique designs.

One of my favorites from uideck is their photography portfolio template. It has a stylish grid layout with big images that would be ideal for showcasing your best pics. 📷

3. html5up

The next option is html5up. This site is home to a huge collection of open source HTML5 and CSS3 templates that you can download for free!

I especially like their responsive templates with cool hover effects and animations. Their "Spectral" template is one of my favorites - it has an awesome animated menu with transparent overlays.

4. templatemo

If you need a template for an online store or business website, templatemo has lots of great options.

Their templates come with all the pages you would need for an ecommerce site, like product listings, checkout, contacts, and blogs. I used their "Insight" template for a school project and was able to create a fake shoe shop super easily! 👟

5. web3templates

Last but not least is web3templates. This site has a wide selection of fantastic HTML templates for things like blogs, portfolios, and more.

One of their best free templates in my opinion is their "Eduwell" education site template. It has multiple color schemes and would be great for a school or learning platform.

The - End

There you have it - 5 awesome sources for finding the best FREE HTML templates and themes! With these sites, you should be able to find a design that fits your needs.

Let me know if you end up using any of these templates for your website! I'd love to see what you create.

Follow me in Github✅

Happy coding! ❤️

10 JavaScript Shorthand Techniques To Improve Efficiency 💡

TAQUI ⭐ — Wed, 01 Nov 2023 13:33:31 +0000

Hi friends! 👋 its me Md Taqui Imam, welcome to my new blog.

Today I want to share ✨10 cool ways to shorten your JavaScript code and make it more efficient.

These tricks will help you write less code while still getting the job done ✔.

Let's get started!🔥

1. Use `let` and `const` instead of `var` ✔️

The let and const keywords allow you to declare block scoped variables in JavaScript. This means the variable only exists within the nearby curly braces { } instead of the whole function like var does. Less scope means less chances of bugs!

// var is function scoped
var x = 1;

// let and const are block scoped 
{
  let y = 2;
  const z = 3;
}

console.log(x); // 1
console.log(y); // ReferenceError
console.log(z); // ReferenceError

2. Object Destructuring 📦

Destructuring lets you unpack values from arrays or properties from objects into distinct variables.

// Old way
const user = { 
  name: 'John',
  age: 30
};

const name = user.name; 
const age = user.age;

// With destructuring
const { name, age } = user;

So much shorter!

3. Spread Syntax ...

The spread syntax ... lets you expand arrays and objects. Useful for passing props or making copies without mutations.

// Old way
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = arr1.concat(arr2); 

// With spread
const combined = [...arr1, ...arr2];

Easy! There are so many more use cases for spread too.

4. Template Literals ``

Template literals use backticks `` instead of quotes '' to create strings. They allow easier string interpolation like this:

const name = 'John';

// Old way 
const greeting = 'Hello ' + name + ', how are you?';

// With template literal
const greeting = `Hello ${name}, how are you?`;

No more concatenation!

5. Arrow Functions =>

Arrow functions provide a shorter syntax for writing function expressions.

// Old way
function sum(a, b) {
  return a + b;
}

// Arrow function  
const sum = (a, b) => a + b;

The syntax removes the need for function and return keywords in many cases.

6. Optional Chaining ?.

The optional chaining operator ?. allows you to access nested properties on an object without throwing errors if the parent is undefined or null.

const user = {
  name: 'John',
  address: {
    street: '123 Main St' 
  }
};

// Old way
const street = user.address && user.address.street;

// With optional chaining
const street = user.address?.street;

No more complicated logic!

7. Nullish Coalescing ??

The nullish coalescing operator ?? is similar to || but only considers null and undefined as falsy values. Useful for setting default values.

// Old way
const name = user.name || 'Guest'; 

// With nullish coalescing
const name = user.name ?? 'Guest';

8. Logical Operators && and ||

The logical operators can be used for shorthand conditionals by leveraging their boolean evaluation behavior.

// Old way
let age = 25;
if (age >= 18) {
  drive();
}

// With Logical AND
age >= 18 && drive();

// Old way
if (!age) {
  age = 18;
}

// With Logical OR
age || (age = 18);

9. Array Methods map(), filter(), reduce() 🗺

These array methods provide simpler syntax for transforming, filtering, and reducing arrays to new values instead of traditional loops.

const numbers = [1, 2, 3];

// Old way
const doubled = [];
for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2); 
}

// With map()
const doubled = numbers.map(n => n * 2);

So much more declarative! filter() and reduce() work similarly.

10. Ternary Operator ? :

The ternary operator provides shorthand syntax for basic if/else conditional logic.

// Old way
let accessAllowed;
if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}

// With ternary operator
const accessAllowed = age > 18 ? true : false;

🎉 Bonus 🎉

11. DOM Manipulation abbreviations methods ⭐

addEventListener → addEvent
removeEventListener → removeEvent
getElementById → getElem
getElementsByTagName → getElems
classList → class

For example:

getElem('btn').addEvent('click', handleClick);

String Methods

toUpperCase → toUpper
toLowerCase → toLower
includes() → incl()
indexOf() → indOf()
substring() → substr()
split() → spli()

For example:

let name = 'johnDoe'.toLower();

Array Methods

push() → push
pop() → pop
shift() → shift
unshift() → unshift
slice() → slic()
splice() → spli()

For example:

names.push('mike');

Object Methods

Object.keys() → keys()
Object.values() → vals()
Object.entries() → entr()

For example:

const keys = Object.keys(user);

Hope these additional examples help! Let me know if any other common methods come to mind.

These were just 10 abbreviation techniques you can use to write cleaner JavaScript code!

Let me know if you have any other favorites.

Don't forget to Drop 💖🔥🦄🤯

Follow me in Github✅

Happy coding! 😊

5 Github Repositories To Master Next.js 😎

TAQUI ⭐ — Tue, 31 Oct 2023 06:47:31 +0000

Hey everyone! 👋 Today I want to share 5 awesome Github repos that will help you master Next.js.

Next.js is so cool - it makes building React apps easy and fun! 🤩

So, let's see them 👇

1. Taxonomy

shadcn-ui / taxonomy

An open source application built using the new router, server components and everything new in Next.js 13.

Taxonomy

An open source application built using the new router, server components and everything new in Next.js 13.

Warning This app is a work in progress. I'm building this in public. You can follow the progress on Twitter @shadcn See the roadmap below.

About this project

This project as an experiment to see how a modern app (with features like authentication, subscriptions, API routes, static pages for docs ...etc) would work in Next.js 13 and server components.

This is not a starter template.

A few people have asked me to turn this into a starter. I think we could do that once the new features are out of beta.

Note on Performance

Warning This app is using the unstable releases for Next.js 13 and React 18. The new router and app dir is still in beta and not production-ready Expect some performance hits when testing the dashboard. If…

View on GitHub

This repo by shadcn-ui is an open source app built with Next.js 13

Give a Star ⭐

It uses all the latest features like the new router, server components, and more. You'll learn a ton studying this code! It also looks super modern and has nice UI components. 💅

2. Skateshop

sadmann7 / skateshop

An open source e-commerce skateshop build with everything new in Next.js.

Skateshop

This is an open source e-commerce skateshop build with everything new in Next.js 14. It is bootstrapped with create-t3-app.

Warning This project is still in development and is not ready for production use.

It uses new technologies (drizzle ORM) which are subject to change and may break your application.

Tech Stack

Framework: Next.js
Styling: Tailwind CSS
User Management: Clerk
ORM: Drizzle ORM
UI Components: shadcn/ui
Email: React Email
Content Management: Contentlayer
File Uploads: uploadthing
Payments infrastructure: Stripe

Features to be implemented

Authentication with Clerk
File uploads with uploadthing
Newsletter subscription with React Email and Resend
Blog using MDX and Contentlayer
ORM using Drizzle ORM
Database on PlanetScale
Validation with Zod
Storefront with products, categories, and subcategories
Seller and customer workflows
User subscriptions with Stripe
Checkout with Stripe Checkout
Admin dashboard with stores, products, orders, subscriptions, and payments

Running Locally

Clone the repository

git clone https://github.com/sadmann7/skateshop.git

Install dependencies using…

View on GitHub

If you want to build an ecommerce store, check out this open source skateshop by sadmann7:

Give a Star ⭐

It uses Next.js 13 and has a real storefront, products, cart and checkout! I want to build a shop just like this someday. 🛹

3. Portfolio Website

ByteGrad / portfolio-website

Build & Deploy a modern React / Next.js portfolio website from scratch!

Watch video here

What you will learn

Latest Next.js 13 features
Next.js App Router
Next.js Server Actions
Client & Server Components
TypeScript (Beginner & Intermediate)
Tailwind CSS
Context API
Advanced Animations with Framer Motion
React.Email & Resend
Custom React hooks
Fresh, modern UI design
Light & Dark mode
Responsive website

Important

If you want to be a professional developer, you have to know the fundamentals like JavaScript and CSS really well. I highly recommend you go through my Professional JavaScript and Professional CSS courses.

I'm close to releasing a complete React & Next.js course. Get on the email list to receive early-bird pricing: link.

Setup

Add RESEND_API_KEY environment variable in .env.local
In the send-email.ts action file, change the "to" email to your own email

View on GitHub

Looking to create a personal portfolio? Follow this project by ByteGrad

Give a Star ⭐

It shows how to make a fast, good-looking portfolio site with Next.js and React. You'll pick up tips for animations, design, configs, and more! 🎨

4. Friendz

taqui-786 / project-friendz

A Social Media Platform made with Nextjs, Redis and Authjs etc.

This is a Next.js project with Shadcn ui create-next-app.

Best Project To Begineer to learn =>

Nextsjs

Typescript

Shadcn ui [https://ui.shadcn.com/]

Editorjs [https://editorjs.io/]

@mantine/hooks [https://www.npmjs.com/package/@mantine/hooks]

useform-hooks

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

View on GitHub

Here's a social app for learning Next.js basics

Give a Star ⭐

It uses TypeScript, Mantine hooks, form handling and other neat stuff. Nice for beginning your Next.js journey! 🚀

5. ItzmyLink

taqui-786 / itZmyLink

The Project is Live at

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

View on GitHub

This simple link shortener app by taqui-786 is great for practice

Give a Star ⭐

It's built with Next.js, TypeScript, and API routes. Check it out to get ideas for your own projects! 🌐

So that's my list of 5 awesome Github repos for leveling up your Next.js skills.
Clone them, play around with the code, and have fun building! ✨

Don't forget to Drop 💖🔥🦄

Happy Coding😊

What's new in Nextjs 14 ✨

TAQUI ⭐ — Sun, 29 Oct 2023 18:06:11 +0000

TL;DR

Next.js , a popular JavaScript framework, has just released its latest version, Next.js 14. This update brings a host of new features and improvements, making it even more powerful and developer-friendly.

Next.js Official Documentation✅

In this blog post , we will explore the key features of Next.js 14, provide examples to illustrate their usage, and discuss the pros and cons of these new additions.

Follow me in Github🙌

Let's dive in! 👇

Key Features of Next.js 14

1. Turbopack for Faster Development

One of the standout features of Next.js 14 is Turbopack. It brings significant improvements to local server startup and code updates with Fast Refresh. Developers can expect up to a 53% faster local server startup and a remarkable 94% boost in code update speed. This is especially beneficial for large applications with complex module graphs, providing a smoother and more efficient development experience.

Example: To experience the faster development, you can upgrade to Next.js 14 and create a new project using the command: npx create-next-app@latest.

2. Server Actions for Backend Functionality

Next.js 14 introduces Server Actions, a powerful feature that simplifies the creation of API routes. It enables you to define functions that run securely on the server, eliminating the need for manual API route creation. This feature is built on web fundamentals like forms and the FormData Web API, making it accessible and user-friendly.

Example🔥: Instead of manually creating an API route, you can define a function that runs on the server and call it directly from your React components, as shown in the example in the Next.js documentation.

3. Partial Prerendering for Dynamic Content .

Partial Prerendering is a compiler optimization that enhances the performance of dynamic content. It combines the benefits of server-side rendering (SSR) and static-site generation (SSG) without introducing complexity. This feature streamlines the rendering process and reduces the need for multiple runtimes and configurations.

Example🔥: Partial Prerendering generates a static shell based on Suspense boundaries, replacing fallbacks with dynamic components. This allows for fast initial static responses without additional network roundtrips.

4. Metadata Improvements

Next.js 14 improves metadata handling by decoupling blocking and non-blocking metadata. This ensures a smoother user experience by sending essential metadata about the viewport, color scheme, and theme before rendering the page. Deprecated metadata options have been replaced with new APIs, enhancing flexibility and performance.

Example🔥: You can adopt the new viewport and generateViewport options to control metadata, ensuring a more efficient loading process.

Pros of Next.js 14 ✔

Improved Development Speed: The enhancements in Turbopack and Server Actions significantly speed up the development process, reducing development time and increasing productivity.
Simplified API Creation: Server Actions simplify the creation of API routes, making it easier for developers to add backend functionality to their applications.
Efficient Dynamic Content Rendering: Partial Prerendering improves the rendering of dynamic content, providing a fast and smooth user experience.
Enhanced Metadata Handling: The new metadata options ensure a better user experience by optimizing metadata delivery.

Cons of Next.js 14 ❌

Learning Curve: While the new features are beneficial, they may require developers to learn and adapt to the changes, especially if they are familiar with earlier versions of Next.js.
Compatibility: Existing projects may require some adjustments to work seamlessly with the new features, which could lead to migration challenges.

In Conclusion ✨

Next.js 14 brings a range of exciting features and improvements that enhance the development experience for web developers. While there may be a learning curve and migration challenges, the benefits in terms of speed, efficiency, and user experience are worth the investment.

As with any new release, it's essential to explore and experiment with the new features to fully harness the power of Next.js 14 in your web development projects.

Stay updated with Next.js and explore the possibilities it offers for your next web application.

Don't Forget to Drop 💖🔥🦄

Written By Md Taqui Imam

Happy coding😊

💡Note: This blog is a simplified version of the original content found on the Next.js 14 release page.

30 Killer JavaScript One-Liners That’ll Make You Look Like a Pro 😎

TAQUI ⭐ — Sun, 29 Oct 2023 06:52:33 +0000

TL;DR

JavaScript has some really cool abilities that allow you to do amazing things with just a single line of code. Here are 30 useful JavaScript one-liners explained simply for both beginners and pros alike! Get ready to impress your friends with your JavaScript skills. 😎

Hey friends, its me Md Taqui Imam self taught full stack developer and tech writer. This Blog is specially for beginners.

Follow me in Github

So, let's get started🎉

Sure, here are in-depth one-liner JavaScript tricks for each of the 30 tasks:

1️⃣ Copy content to the clipboard:

   const copyToClipboard = text => { const el = document.createElement("textarea"); el.value = text; document.body.appendChild(el); el.select(); document.execCommand("copy"); document.body.removeChild(el); };

2️⃣ Shuffle an array:

   const shuffleArray = arr => arr.sort(() => Math.random() - 0.5);

3️⃣ Generate a random password:

   const generatePassword = length => Array.from({ length }, () => String.fromCharCode(Math.floor(Math.random() * 94) + 33)).join('');

4️⃣ Get the mouse selection:

   const getSelectedText = () => window.getSelection().toString();

5️⃣ Check if a string is a palindrome:

   const isPalindrome = str => str === str.split('').reverse().join('');

6️⃣ Calculate the sum of all prime numbers up to a given number:

   const isPrime = num => { for(let i = 2; i < num; i++) if(num % i === 0) return false; return num > 1; };
   const sumPrimes = n => Array.from({ length: n }, (_, i) => isPrime(i) ? i : 0).reduce((a, b) => a + b);

7️⃣ Create a simple countdown timer:

   const countdown = (seconds, callback) => { const interval = setInterval(() => { if (seconds === 0) { clearInterval(interval); callback(); } seconds--; }, 1000); };

8️⃣ Implement a basic calculator:

   const basicCalculator = (a, operator, b) => operator === '+' ? a + b : operator === '-' ? a - b : operator === '*' ? a * b : operator === '/' ? a / b : 'Invalid operator';

9️⃣ Validate an email address:

   const isEmailValid = email => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

🔟 Checking that is the number is even or odd:

const isEven = num => num % 2 === 0;

11. Generate a UUID (Universally Unique Identifier):

const generateUUID = () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => (Math.random() * 16 | 0).toString(16));

12. Extract the file extension from a URL:

const getFileExtension = url => url.split('.').pop();

13. Calculate the distance between two coordinates (latitude and longitude):

const calculateDistance = (lat1, lon1, lat2, lon2) => { const rad = x => x * Math.PI / 180; const R = 6371; const dLat = rad(lat2 - lat1); const dLon = rad(lon2 - lon1); return R * 2 * Math.asin(Math.sqrt(Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(rad(lat1)) * Math.cos(rad(lat2)) * Math.sin(dLon/2) * Math.sin(dLon/2))); };

14. Encode and decode a URL:

const encodedURL = encodeURIComponent("your_url");
const decodedURL = decodeURIComponent(encodedURL);

15. Find the intersection of two arrays:

const intersection = (arr1, arr2) => arr1.filter(value => arr2.includes(value));

16. Sort an array of objects by a specific property:

const sortByProperty = (arr, prop) => arr.sort((a, b) => a[prop] > b[prop] ? 1 : -1);

17. Remove duplicate values from an array:

const removeDuplicates = arr => Array.from(new Set(arr));

18. Create a simple to-do list with local storage:

const todoList = JSON.parse(localStorage.getItem('todos')) || [];
    // Adding a new task to the Todo-list
    todoList.push(newTask);
    // Save the updated list in local storage
    localStorage.setItem('todos', JSON.stringify(todoList));

19. Convert rgba to hexadecimal:

const rgbaToHex = (r, g, b, a) => `#${(1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)}`;

20. Find the longest word in a sentence:

const findLongestWord = sentence => sentence.split(' ').reduce((longest, word) => word.length > longest.length ? word : longest);

21. Calculate the age based on a birthdate:

const calculateAge = birthdate => Math.floor((new Date() - new Date(birthdate)) / 31557600000);

22. Check if a number is prime number or not:

const isPrime = num => { for(let i = 2; i < num; i++) if(num % i === 0) return false; return num > 1; };

23. Convert a timestamp to a human-readable date:

const formatDate = timestamp => new Date(timestamp).toLocaleDateString();

24. Get the average of multiple numbers:

const calculateAverage = numbers => numbers.reduce((total, num) => total + num, 0) / numbers.length;

25. Display a random quote on a webpage:

const quotes = ["Quote 1", "Quote 2", "Quote 3"];
const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];

26. Implement a basic digital clock:

const updateClock = () => { const now = new Date(); const time = now.toLocaleTimeString(); document.getElementById("clock").textContent = time; };
    setInterval(updateClock, 1000);

27. Perform basic CRUD operations with local storage:

    // Create
    localStorage.setItem('key', 'value');
    // Read
    const value = localStorage.getItem('key');
    // Update
    localStorage.setItem('key', 'new_value');
    // Delete
    localStorage.removeItem('key');

28. Convert hexadecimal to rgba:

    const hexToRGBA = hex => { const bigint = parseInt(hex, 16); const r = (bigint >> 16) & 255; const g = (bigint >> 8) & 255; const b = bigint & 

255; return `rgba(${r}, ${g}, ${b}, 1)`; };

29. Generate a QR code from text:

const generateQRCode = text => { const qr = new QRCode(document.getElementById("qrcode"), { text: text, width: 128, height: 128 }); };

30. Display a "Hello, World!" popup on a webpage:

    alert("Hello, World!");

The End 🚀

i hope you find this blog helpful and learned something new .

Don't forget to Drop 💖🔥🦄,

Written By Md Taqui Imam

Follow me in Github

DEV Community: TAQUI ⭐

Save your system !

Why Your LLM Prompts Break in Production (And How to Fix Them)

Great reading

My Craziest Side Project Yet: Drawva

If you want to learn Agentic Ai, must read this

My Craziest Side Project Yet: Drawva

Build My First Gen Ai Project 😅

The Idea 🧠

The Tech Stack 🛠️

That's it guys 😅

Checkout this dev's

Is Self-Taught Coding Still Worth It?

Random ・ Jul 7

⭐5 Beginner Project with "Nextjs + Shadcn = 🔥"

1. Portfolio ✨

2. skateshop

3. itZmyLink

4. Taxonomy

5. Modifio

End 👋

Happy Coding 😊

✨13 HTML Attributes you must know about ✔

1. Multiple Attribute 👨‍👨‍👦‍👦

2. Spellcheck Attribute 🥓

3. Title Attribute ✒

4. Poster Attribute 🖼

5. Srcset Attribute ⚙

6. Autocomplete Attribute 💀

7. Accept Attribute ✔

8. loading Attribute ⏳

9. Readonly Attribute 📖

10. Download Attribute ⬇

11. Hidden Attribute 👓

12. Contenteditable Attribute 📝

13. Alt Attribute ⭐

End 👋

Happy Coding 😊

1000+ HTML templates you can use in your Project for FREE 🤩

1. htmlrev

They have 1000+ free HTML templates on each Framework :

2. uideck

3. html5up

4. templatemo

5. web3templates

The - End

Happy coding! ❤️

10 JavaScript Shorthand Techniques To Improve Efficiency 💡

1. Use let and const instead of var ✔️

2. Object Destructuring 📦

3. Spread Syntax ...

4. Template Literals ``

5. Arrow Functions =>

6. Optional Chaining ?.

7. Nullish Coalescing ??

8. Logical Operators && and ||

9. Array Methods map(), filter(), reduce() 🗺

10. Ternary Operator ? :

🎉 Bonus 🎉

11. DOM Manipulation abbreviations methods ⭐

String Methods

Array Methods

Object Methods

Happy coding! 😊

5 Github Repositories To Master Next.js 😎

1. Taxonomy

shadcn-ui / taxonomy

An open source application built using the new router, server components and everything new in Next.js 13.

Taxonomy

About this project

Note on Performance

2. Skateshop

sadmann7 / skateshop

An open source e-commerce skateshop build with everything new in Next.js.

Skateshop

Tech Stack

Features to be implemented

Running Locally

3. Portfolio Website

ByteGrad / portfolio-website

1. Use `let` and `const` instead of `var` ✔️