DEV Community: TAQUI ⭐

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

Happy Coding👋

😎 Get Hired FASTER With These 10 CSS Skills ✨

TAQUI ⭐ — Sat, 28 Oct 2023 06:25:08 +0000

Hello Frontend Developres 👋,

its me Md Taqui Imam and Welcome to my Blog post.

Today in this beginner-friendly blog post, I will share 10 powerful yet easy-to-learn CSS skills that can impress employers and help you get hired faster for web dev roles.

Follow me in Github✅

Let's get started!👇

First clear What is CSS ?

CSS (Cascading Style Sheets) is an essential skill for any aspiring web developer or designer. Mastering CSS can help you create visually appealing and interactive websites and web apps.

1. Learn CSS Layouts 🔽

CSS layout skills allow you to arrange elements on a webpage. Some key layout skills are:

Flexbox - Place items in rows or columns easily
Grid - Divide a page into major regions
Positioning - Absolute, Relative, Fixed, Sticky
Floats and clears
Responsive design with @media queries

Here's a quick snippet to center a div using margin: auto;

.center-div {
  margin: auto;
  width: 50%; 
  border: 3px solid green; 
}

2. Master CSS Selectors ✅

CSS selectors allow you to target specific HTML elements to style them.

Some commonly used CSS selectors are:

Type selectors (h1, p, div)
Class selectors (.intro)
ID selectors (#heading)
Universal selector (*)
Descendant selectors (div p)
Pseudo-classes (:hover, :focus)

Here's how to make all paragraph text bold:

p {
  font-weight: bold; 
}

3. Learn How to Style Text ✏️

With CSS, you can style text on a webpage in endless ways. Important text styling properties are:

font-family
font-size
font-weight
line-height
letter-spacing
text-align
text-decoration
text-transform

Let's center align and underline a heading:

h2 {
  text-align: center;
  text-decoration: underline;  
}

4. Use CSS Colors 🎨

Colors make websites pop! Ways to use color in CSS:

Color names - red, blue
HEX values - #ffffff
RGB values - rgb(255,255,255)
HSL values - hsl(360,100%,100%)
Opacity/alpha channel - rgba(255, 255, 255, 0.5)

Here's how to make a div with 50% transparent red background:

.red-div {
  background-color: rgba(255, 0, 0, 0.5);
}

5. Style Images 🖼️

CSS can transform basic images into eye-catching ones. Useful image styling properties:

width
height
object-fit - cover, contain
object-position
filter - grayscale(), blur(), etc
border-radius

For example:

img {
  width: 400px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

6. Learn CSS Animations 🎥

CSS animations let you create delightful interactions without JavaScript. Some key animation skills:

Transitions - animate changes on hover/active
Keyframes - define complex animations
transform - scale, rotate, skew, translate

Here's a simple fade in effect on hover:

button:hover {
  transition: opacity 0.3s;
  opacity: 0.5;
}

7. Use Responsive Design 📱

Responsive design allows websites to adapt to different screen sizes. Media queries are the key:

/* Extra large screens */
@media (min-width: 1200px) {
  .container {
    width: 1170px; 
  }
}

/* Small screens */
@media (max-width: 576px) {
  .container {
    width: 100%;
  }
}

Responsiveness will make your websites accessible on any device!

8. Learn CSS Variables 💬

CSS variables allow you to reuse values like colors, font-sizes, etc:

:root {
  --brand-color: #4285f4;
}

h1 {
  color: var(--brand-color);
}

No more hardcoding repetitive values!

9. Use CSS Frameworks 🧰

CSS frameworks like Bootstrap provide pre-built components that make development faster. Learn to:

Install and setup a framework
Use predefined classes like .btn, .card, .navbar
Override styles by specificity

Frameworks help you build professional sites quickly.

10. Practice Flexbox & CSS Grid 💪

Mastering flexbox and CSS grid will give you layout superpowers!

Use flexbox for 1-dimensional layouts
CSS grid for 2-dimensional layouts
Learn grid template areas, gap, autofill/autofit, etc.

Just 30 minutes of focused practice daily can make you a flexbox/grid ninja quickly.

Thanks for reading!

I hope these CSS skills help boost your career. Feel free to reach out if you have any other questions. Wishing you the very best in your web development journey!

Don't forget to Drop a 💖🔥🦄.

Happy Coding😊

Follow me in Github✅

Wasp Auth: New Authentication For Your React/Nextjs App ✨

TAQUI ⭐ — Fri, 27 Oct 2023 15:56:49 +0000

Hey Guys, its me Md Taqui Imam. And Today,

🎉 @wasplang has launched their new Auth in product hunt!🎉

Check out their official documentation🔥 And,

Show Support in Producthunt 💖

Wasp Auth allow you to rock on a Full-stack auth for your React/Next.js app in no time, all based on a simple config!

Let's see what's new ✨

Wasp recently released enhancements to its authentication system making it even more poweful and simpler to use for React developers. Let's take a look at what's new and how to leverage it.

Key Features✨

The updated Wasp Auth system provides:

Built-in support for common auth flows like email/password, social logins with Google/GitHub etc out of the box. No need to setup and configure third party libraries.
Protect routes automatically by setting authRequired: true. Only logged in users can access these protected pages.
Centralized user object available everywhere for authentication check. Easy front-end conditional rendering based on auth status.
Signup customization allows adding extra fields to signup process and customizing signup form UI.
Centralized state management with React Context and Hooks. Removes need for external state management libraries.
Validation handling for common cases but also support for custom validations.

Integrating In A React App 🛠

Setting up authentication in a React app with Wasp is pretty straightforward:

1. Configure Auth Methods ⚙

In your main.wasp file, specify the user entity and enabled auth methods under the auth field. For example:

app MyApp {
  auth: {
    userEntity: User
    methods: {
      email: {},
      google: {} 
    }
  }
}

2. Protect Routes 🔐

Set authRequired: true for routes that need authentication. Wasp will redirect unauthorized users.

3. Access User Object

In React components, use the useAuth() hook or user prop (if passed from protected page) to conditionally show UI based on auth status.

4. Build Auth Screens 💻

Use the generated Auth UI components like SignupForm or build custom screens leveraging the auth context/actions.

5. Customize As Needed 😊

Ensure your user entity matches requirements, add extra signup fields, customize validations etc.

Wasp handles everything else!

Pros ✔

Simple integration. Covers common cases out of box.
Centralizes auth state. Removes external dependencies.
Automatically protects routes and redirects users.
Signup customization allows capturing additional user data.
Uniform API surface across backend and frontend.

Cons ❌

Less configurable than standalone libraries. Some customization still needed.
Adds dependency on Wasp framework overall.

In summary

Wasp Auth is a very developer friendly way to add full-featured authentication to React apps with minimal configuration needed. Great for basic to intermediate use cases.

Thankyou for reading this Article🤝, Don't forget to Drop 💖🔥🦄.

Follow me in Github✅

Happy Coding 👋

💥 10 Ways React Made Me a Faster Developer 💪

TAQUI ⭐ — Fri, 27 Oct 2023 09:36:09 +0000

Hey Friends,

its me Md Taqui Imam

Follow me in Github 🤝

Welcome to my blog, in this blog post i to tell you the importance of react how react make you a faster developer .

So, Here are 10 importance and feature of react ⚡

Let's Start 👇

💡 Scaffolding Code is Super Easy

When I first started with React, I was amazed at how quick it was to set up a basic project! With just a few commands like npx create-react-app my-app, I had the folder structure and files I needed to start building components. No more wasting hours configuring webpack or fighting with module bundlers.

🎉 Components Make Code Reusable

Components are the coolest part of React! Being able to build reusable pieces of UI and compose them together saves so much time. For example, instead of copying and pasting header and footer code on every page, I can define them as <Header /> and <Footer /> components. Any changes are then automatically reflected everywhere.

🤯 JSX Makes HTML and JavaScript Easy to Read

Writing HTML tags in JavaScript took some getting used to, but now I love how readable JSX makes code! Being able to write HTML directly in JS files near related event handlers and logic keeps everything neatly organized. No more picking DOM elements with confusing IDs and classes.

😎 State Makes UIs Interactive

Managing state and re-rendering components based on state changes allows me to build very interactive UIs. For example, a dropdown that opens and closes can easily be coded with a few lines of state logic instead of lots of complex DOM manipulation.

🎊 Props Avoid Duplicate Code

Passing data between components using props cleans things up a ton compared to alternatives like having public component variables. When a parent needs to provide dynamic data to multiple children, it avoids the kids having duplicate code to retrieve that data separately.

💃 Hooks Are Amazing

React hooks make classes redundant for many use cases. Things like useState, useEffect and useRef allow me to write function components that are every bit as capable as classes but more readable. No more repetitive render method definitions or binding contexts.

🍎 Testing is a Breeze

Testing React code is so straightforward compared to testing jQuery code I wrote in the past. Jest and React Testing Library make it easy to isolate and render components, simulate user events, and make assertions on output. This finding and fixing bugs super fast.

👍 Error Handling Rocks

Dealing with errors gracefully in React is now second nature. Tools like try/catch, error boundaries and developer tools panel pinpoint issues immediately. Printing out props, state and error messages at various steps helps troubleshoot problems that would have taken hours before.

🔥 deployment is a cinch

Getting React apps onto servers used to involve lots of configuration. But with tools like GitHub Pages, Netlify, Vercel etc., deploying changes is as simple as git push. Automatic deploys on every commit, optimized builds and global CDN caching take the pain out of launching updates.

🎁 The community is Amazing!

One of the best things about React is the community! Whenever I get stuck, a quick search uncovers countless Stack Overflow answers and blog posts. Reactiflux chat, meetups and conferences help me level up constantly. It's so easy to take advantage of all the free learning resources because React is so widely popular.

So in summary,
React's focus on components, JSX syntax, powerful state handling and robust ecosystem have truly changed my workflow for the better. It's made me a faster and more efficient developer!

Thankyou for reading😊

i hope you find it usefull and learned something new in this blog 🔥

and Don't forget to Drop Like 💖🔥🦄

and Follow me in Github 🤝

DEV Community: TAQUI ⭐

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

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

Watch video here

What you will learn

Important

Setup

4. Friendz

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