DEV Community: Coding Dev

Run an LLM Locally to Interact with your Documents

Coding Dev — Sun, 25 Jan 2026 06:19:03 +0000

Imagine using ChatGPT… but fully offline, private, and connected to your own documents.

In this guide, you’ll set up a complete local AI stack using Ollama + OpenWebUI, and make it capable of answering questions from your PDFs, notes, or knowledge base.

No cloud. No API costs. Your data stays on your machine.

What You’ll Build

A local LLM running on your laptop
A ChatGPT‑like web interface
AI that can search and answer using your own documents
Optional memory + custom behavior using system prompts

Prerequisites

You’ll need:

A terminal (Windows / macOS / Linux)
Either:
- Python 3.9+ and pip, or
- Docker
At least 8 GB RAM (16 GB recommended)

Read full step by step article here

Things I Wish I knew before my first GitHub Contribution

Coding Dev — Sun, 11 Jan 2026 08:31:57 +0000

Making your first open-source contribution feels exciting… and scary at the same time.

I remember staring at GitHub issues thinking:

“Am I good enough for this?”
“What if I break something?”
“What if people judge my code?”

After going through it, here are a few things I genuinely wish I had known earlier.

Your first contribution doesn’t have to be code

I thought open source meant writing complex features.

It doesn’t.

You can start with:

Fixing typos in documentation
Improving README files
Updating examples
Reporting bugs

These small things matter a lot — and they help you understand how projects work.

“Good first issue” labels exist for a reason

I wasted time opening random hard issues. Most projects clearly label beginner-friendly tasks as:

good first issue
beginner friendly
help wanted

Start there. Maintainers expect newcomers on these issues.

Your PR doesn’t need to be perfect

I used to polish my code endlessly before opening a pull request.

Truth is:
Maintainers expect revisions.

Feedback is normal.

Changes are part of the process.

Your job is to start, not to be perfect.

Communication matters more than code sometimes

A simple comment like:

“Hi, I’d like to work on this issue. Is it okay?”

can save hours of confusion.

Open source is teamwork. Being polite and clear goes a long way.

Rejections and silence are normal

Some PRs won’t get merged.

Some issues won’t get replies.

It’s not personal.

Projects are maintained by busy humans. Keep going.

Final thought

Your first contribution will feel uncomfortable. That’s a good sign, it means you’re learning something new. Once you make that first PR, everything becomes easier. And one day, you’ll look back and smile at how nervous you were.

If you found this helpful:

→ Read more developer stories on our blog: https://codingdev.in/blog

→ Follow me on Instagram for daily dev content: @coding_dev_

Open Source Programs You Can Join (and How They Help You Grow)

Coding Dev — Sat, 03 Jan 2026 13:07:48 +0000

Open source isn’t just about contributing code - it’s about learning, collaborating, building real-world software, and growing your skills alongside experienced developers. If you’re looking to get involved in open source with structured programs and mentorship, here are some excellent opportunities you can explore.

1. Outreachy - Paid Remote Open Source Internship

What it is:

Outreachy offers paid remote internships where you work with real open source projects alongside mentors from established communities.

Why join:

Work on real open source code, documentation, design, research, and more
Paid stipend for 3 months
Remote and global
Great for building real experience and community connections

When to apply: Twice a year (typically May–August and December–March).

👉 https://www.outreachy.org

2. Google Summer of Code (GSoC) - Long-Term Mentored Projects

What it is:

Google Summer of Code is a global program where you spend ~3 months working on an open source project with guidance from experienced mentors. It’s one of the most recognized open source programs worldwide.

Why join:

Work on meaningful projects with real impact
Learn from experienced open source maintainers
Earn a stipend while coding
Great for students & new contributors

Anyone aged 18+ can participate — it’s not limited to students anymore.

👉 https://summerofcode.withgoogle.com/

3. Hyperledger Mentorship Program - Blockchain Open Source Contributions

What it is:

Hyperledger is an open source blockchain ecosystem under the Linux Foundation that hosts many projects focused on distributed ledgers and decentralized systems. The Hyperledger Mentorship Program (and related Linux Foundation mentorship initiatives) helps new contributors get hands-on experience working on core open source blockchain tools.

Why join:

Work on real distributed systems and blockchain frameworks
Get mentorship from professionals in the field
Learn about open source workflows used in major enterprises
Great for developers interested in blockchain and infrastructure

👉 https://hyperledger.org

4. MLH Fellowship - Structured Open Source Development

What it is:

The MLH Fellowship is a remote, 12-week program where you work in small groups on real open source projects under expert mentorship. It’s designed to give you practical software engineering experience while contributing code that matters.

Why join:

Remote and collaborative
Real open source work with mentors
Includes learning opportunities like workshops and speaker sessions
Earn a stipend in select batches

👉 https://fellowship.mlh.io/

5. FOSSASIA - Open Tech Community & Coding Events

What it is:

FOSSASIA is a global open tech organization that develops software and open hardware projects. They run events, meetups, hackathons, and programs like Codeheat — where contributors can collaborate and compete while building open source projects.

Why join:

Diverse projects (software, hardware, AI, tools)
Global community and tech events
Good for beginner and intermediate contributors
Works well as your first open source experience

👉 https://fossasia.org/

6. CROSS (Center for Research in Open Source Software) - Academic-Industry Bridge

What it is:

CROSS at UC Santa Cruz supports research and open source software development, helping students and recent graduates get funding and mentorship for innovative projects. It’s especially useful if you’re interested in research-oriented open source work and want to build academically impactful software.

Why join:

Combines academic research with real open source work
Offers support and funding opportunities
Helps you build deep technical skills and a portfolio

👉 https://cross.ucsc.edu/

Wrapping up, but don’t forget…

✔ Start contributing early -> even small pull requests count.

✔ Join the project’s Discord/Slack to connect with mentors.

✔ Read contribution guides and issues labeled good first issue.

✔ Be patient, open source is a long-term learning journey.

Enjoyed this? Let’s keep building your confidence together, explore more: codingdev.in

Why Modern Websites feel Faster than Old Ones

Coding Dev — Thu, 01 Jan 2026 06:36:37 +0000

I still remember using the internet a few years ago - clicking a button, watching the whole page go blank, and waiting… sometimes way too long. Every click felt like starting over.

Today, websites feel completely different. They respond instantly. Things load smoothly. Sometimes it feels like the app already knows what I’m going to do next.

So, what changed?

1. Old websites reloaded everything

Earlier websites worked in a very simple way.

You clicked a link → the entire page refreshed → the server sent a new page → the browser rebuilt everything.

Even if only one small part changed, the whole page had to reload.

That’s why it felt slow and jumpy.

2. Modern websites update only what’s needed

Today’s websites are smarter.

Instead of refreshing the whole page, they update only the part that actually changes.

For example, when you like a post or submit a form, the rest of the page stays exactly the same.

This makes websites feel instant and smooth — almost like a mobile app.

3. Caching and lazy loading do the heavy work

Modern websites also remember things.

Images and data are cached so they don’t load again and again
Content loads only when you need it (lazy loading)
Background data loads silently while you’re already using the site

So even if something is still loading, the website never feels “stuck”.

4. Better feedback = better experience

Even when something takes time, modern apps show:

Loaders
Skeleton screens
Subtle animations

These small details make waiting feel shorter — and that completely changes how fast a website feels.

Final thought

Modern websites aren’t always faster because of better internet —

they’re faster because they’re smarter.

They do less, load smarter, and focus on user experience first.

And once you notice this…

you can never unsee it. 🚀

If you enjoy breaking down how modern web apps actually work, follow along at codingdev.in - I share simple, real-world insights on web development, performance, and building better user experiences.

5 Common Mistakes Beginners Make with React Hooks

Coding Dev — Sun, 26 Oct 2025 11:21:32 +0000

React Hooks have revolutionized the way we write React components, but they come with their own set of challenges. Here are five common mistakes beginners often make when working with React Hooks.

1. Breaking the Rules of Hooks

One of the most critical mistakes is violating the Rules of Hooks. These rules state that:

Only call Hooks at the top level (not inside loops, conditions, or nested functions)
Only call Hooks from React function components or custom Hooks

// ❌ Wrong - Hook inside condition
if (condition) {
  const [state, setState] = useState(0);
}

// ✅ Correct - Hook at top level
const [state, setState] = useState(0);
if (condition) {
  // Use state here
}

2. Forgetting Dependencies in useEffect

Another common mistake is omitting dependencies in the useEffect dependency array. This can lead to stale closures and bugs that are hard to track down.

// ❌ Wrong - Missing dependency
useEffect(() => {
  console.log(count);
}, []);

// ✅ Correct - Include all dependencies
useEffect(() => {
  console.log(count);
}, [count]);

3. Overusing useState for Complex State

When your state logic becomes complex, using multiple useState calls can make your code harder to manage. Consider using useReducer instead.

// ❌ Not ideal - Multiple related states
const [name, setName] = useState('');
const [age, setAge] = useState(0);
const [email, setEmail] = useState('');

// ✅ Better - Single state object with useReducer
const [state, dispatch] = useReducer(reducer, {
  name: '',
  age: 0,
  email: ''
});

4. Not Cleaning Up Effects

Failing to clean up side effects can lead to memory leaks and unexpected behavior, especially with subscriptions, timers, or event listeners.

// ❌ Wrong - No cleanup
useEffect(() => {
  const timer = setInterval(() => {
    console.log('tick');
  }, 1000);
}, []);

// ✅ Correct - Proper cleanup
useEffect(() => {
  const timer = setInterval(() => {
    console.log('tick');
  }, 1000);

  return () => clearInterval(timer);
}, []);

5. Confusing useCallback and useMemo

Many beginners struggle to understand when to use useCallback versus useMemo. Remember:

useMemo memoizes the result of a function
useCallback memoizes the function itself

// useMemo - memoizes the computed value
const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);

// useCallback - memoizes the function
const handleClick = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

Conclusion

React Hooks are powerful tools, but they require careful attention to these common pitfalls. By understanding and avoiding these mistakes, you'll write cleaner, more maintainable React code. Keep practicing, and these patterns will become second nature!

Have you encountered any of these mistakes in your React journey? Share your experiences in the comments below!

Animated Movie Card w/ HTML and CSS

Coding Dev — Sun, 01 Dec 2024 12:00:32 +0000

Interactive components are essential in modern web design. This blog will guide you through creating a stylish and animated movie card using HTML and CSS. Although you're a beginner, or (an intermediate developer), this project is perfect for practising your front-end skills.

Let's get started!

Step 1: Setting up files

Let's start by creating the basic project structure. We’ll need an HTML file for the content and a CSS file for styling.

Step 2: HTML

Here’s the basic structure of our movie card. Each card includes:

A movie poster image.
A title box overlay.
The name of the movie displayed interactively on hover.

<div class="content__shows">
  <div><img src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/avengers/p-captmarvel.jpg" alt="Movie Poster" />
    <div class="title-box"></div>
    <div class="name">Captain Marvel</div>
  </div>
  <div><img src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/avengers/p-antmanwasp.jpg" alt="Movie Poster" />
    <div class="title-box"></div>
    <div class="name">Ant-Man and the Wasp</div>
  </div>
  <div><img src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/avengers/p-iw.jpg" alt="Movie Poster" />
    <div class="title-box"></div>
    <div class="name">Avengers: Infinity War</div>
  </div>

</div>

Step 3: CSS

Now let’s style the page to make it visually appealing and interactive. We’ll focus on the layout, hover effects, and overall aesthetics.

Basic Page Styling

We begin with some global styles to center the content and set the background theme.

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap");

body {
  display: grid;
  height: 100vh;
  place-items: center;
  font-family: "Noto Sans", sans-serif;
  background: #282634;
}

Main CSS: This CSS handles the layout and animation of each movie card.

.content__shows {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.content__shows div {
  position: relative;
  width: 200px;
  border-radius: 4px;
  overflow: hidden;
  margin: 0 auto;
}
.content__shows div:hover img {
  transform: scale(1.15);
}
.content__shows div .title-box {
  content: "";
  height: 100px;
  position: absolute;
  transform: translatey(50px);
  transition: 0.3s ease;
  left: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), black);
  width: 100%;
  z-index: 1;
}
.content__shows div img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  transition: 0.3s ease;
}
.content__shows div .name {
  position: absolute;
  width: 100%;
  bottom: 10px;
  color: #fff;
  transform: translatey(50px);
  padding: 10px;
  z-index: 10;
  transition: .3s ease;
  cursor: default;
}
.content__shows div:hover .name,
.content__shows div:hover .title-box {
  transform: translatey(0);
}

Here is the codepen for this project

Conclusion

We’ve successfully created an animated movie card using HTML and CSS. This concept can also be used to showcase projects, products, or anything you want to highlight.

Thanks for reading! 😊

5 Must-Know Libraries to Supercharge your Frontend Development

Coding Dev — Sat, 23 Nov 2024 11:37:16 +0000

In the fast-paced world of web development, staying ahead means using the best tools available. In this blog, we will highlight five key libraries which will change the game for your frontend projects. These powerful tools will enable faster coding, improve the designs of the pages, and enhance the overall satisfaction of the users. Let's dive in and explore how these libraries can transform your projects 🔥

1. SweetAlert2

SweetAlert2 provides responsive, fully customizable alert boxes that seamlessly integrate into your projects.

2. SortableJS

Effortlessly enable drag-and-drop sorting for lists with SortableJS. Its flexibility makes it ideal for building interactive UIs such as Kanban boards.

3. Floating UI

Effortlessly manage complex UI components such as tooltips, dropdowns, and popovers with Floating UI.

4. Tippy.js

A lightweight, extensible library for creating beautiful, highly customizable tooltips, popovers, dropdowns, and more.

5. Swiper

Swiper is a free and powerful tool used to make touch sliders and carousels. It gives smooth transitions and works well on different screen sizes, making it perfect for mobile-friendly projects.

Using these libraries can greatly enhance your frontend development. They offer powerful features that streamline your workflow and improve user experience.

Thank you for reading! If you know more libraries to supercharge your frontend, share in the comments below. Happy coding!

FREE AI Tools for Web Developers

Coding Dev — Wed, 20 Nov 2024 11:18:00 +0000

As a web developer, incorporating Artificial Intelligence (AI) into your projects can enhance functionality, improve user experiences, and streamline development processes. Fortunately, several free AI tools are available that can empower web developers to leverage AI capabilities without breaking the budget.

Today, we will discuss some AI tools that will make your life easier!

1. Uizard.io

Uizard is an AI-powered tool that quickly turns hand-drawn sketches into detailed prototypes, speeding up design, reducing errors, and saving time. It's perfect for creating early versions of websites, apps, and services.

2. GitFluence

Gitfluence is an AI tool that helps developers quickly find the right Git commands. Its Git Command Generator lets users describe their task, and the AI suggests the relevant commands to copy and paste into the terminal, saving time and effort.

3. Mintlify

Mintlify is a platform that helps create and manage software documentation with ease. It offers a user-friendly interface for building, editing, and maintaining docs, with features like AI suggestions, automatic translations, and integrations with tools like GitHub. It’s designed to streamline collaboration between teams, whether developers or technical writers.

4. ChatGPT

ChatGPT is an AI tool that helps web developers with tasks like debugging, generating code templates, writing docs, and creating content. It integrates via API for chatbots and automation, with free and paid options.

Conclusion

The AI technologies are changing the web development by making some tasks easier, increasing productivity, and allowing us to be more creative. Whether it’s debugging, designing, or testing these tools help developers focus on building better projects. Among them, try the tools mentioned, see which one you like, and let me know which is your favourite, or if there are other new ones you have noticed, share in the comments below.

Thanks for reading!

5 CSS Practices that You Should Avoid

Coding Dev — Sun, 17 Nov 2024 10:31:05 +0000

Hey there! It's been a while since my last article, and I've missed connecting with you all. I'm excited to be back and share some helpful tips for your web dev journey!

Today, let's explore five CSS practices you should avoid. I hope you find these insights helpful! Let's go 🚀

1. Overly Specific Selectors

Writing highly specific selectors can make your CSS harder to manage and debug. Keep selectors simple and reusable.

Avoid:

#header .nav .link.active:hover {
    color: red;
}

Better:

.nav-link:hover {
    color: red;
}

Use specificity only where needed to avoid unnecessary complexity.

2. Overloading Global Selectors

Using universal or overly broad selectors can unintentionally affect large portions of your site.

Avoid:

* {
    margin: 0;
    padding: 0;
}

Better:

html, body {
    margin: 0;
    padding: 0;
}

Reduce the usage of global selectors to prevent unexpected side effects.

3. Hardcoding Colors or Values

Hardcoding makes updates difficult. Instead of using random values everywhere, use variables for consistency.

Avoid:

.primary-btn {
    color: #3498db;
    margin: 20px;
}

Better:

:root {
    --primary-color: #3498db;
    --default-margin: 20px;
}
.primary-btn {
    color: var(--primary-color);
    margin: var(--default-margin);
}

4. Inconsistent Units

Mixing units (e.g., px, rem, %) leads to inconsistent designs and responsiveness issues.

Avoid:

font-size: 16px;  
margin: 1rem;  
width: 50%;

Better:

font-size: 1rem;  
margin: 1rem;  
width: 50%;

Use consistent units like rem for fonts and % for layout.

5. Forgetting Browser Compatibility

Using new CSS features without considering browser support can break designs for some users.

Avoid:

div {
    aspect-ratio: 16 / 9;
}

Better:

@supports (aspect-ratio: 1) {
    div {
        aspect-ratio: 16 / 9;
    }
}

Conclusion

By avoiding these common CSS practices, we can write cleaner, more efficient styles and ensure high-performance web pages. Following best practices not only improves the user experience but also makes our code more readable and maintainable for our team.

I hope you found this post helpful! See you in the next article!

How to write a Impressive resume?

Coding Dev — Sat, 29 Jul 2023 06:53:31 +0000

Crafting an effective resume requires presenting your qualifications clearly and concisely, strategically showcasing your skills & work experience.

It should highlight what you can achieve professionally and how you can benefit employers. Keep your resume updated and modern to boost your job search success. Follow these do's and don'ts for writing a great resume.

Resume Writing Do's

✅ Keep your resume clear and concise: An employer takes an average of 30 seconds to skim a resume. You want them to see right away that you are qualified for the position.

✅ Limit your resume to two pages: Place the emphasis of your resume on your most recent experience. Older jobs and experience that are more than 15 years old should either be cut out or minimized. This way, the employer can focus on more relevant information.

✅ Use simple words and action verbs: The person reading your resume might not always be the employer. Resumes can be reviewed by recruiters or Human Resources specialists who may not be familiar with your specific field.

Resume Writing Don'ts

❌ Don't include unnecessary personal information: It is best to leave out any personal details such as age, weight, height, marital status, religious preference, political views, or any other personal attributes that could be controversial. This will prevent any potential bias. Most importantly, never include your Social Insurance Number in your resume.

❌ Don't use too many bullets: Make your resume easy to read by limiting each resume section or sub section to 5–7 bullet points. This will make it easier for the employer to scan your resume and identify your potential. Each bullet point should be used wisely by keeping the information relevant and concise.

❌ Don't include reasons for leaving previous jobs: The main purpose of your resume is to promote you, your skills, experience and achievements. It should be entirely positive, and therefore should not include reasons for leaving as it does not add any value to you as a candidate.

❌ Don't include references: An employer only requires references if they are seriously considering hiring you. Keep references on a separate sheet and provide them only when they are specifically requested.

✨ Download the free resume template from here

Follow https://instagram.com/coding_dev_
Support: https://www.buymeacoffee.com/coding_dev_

How Web Works?

Coding Dev — Mon, 09 Jan 2023 13:01:41 +0000

Web technology is a system of interrelated technologies that power the World Wide Web. It is a combination of hardware, software, protocols and standards that enable the exchange of information, multimedia, and applications across the Internet.

At its core, web technology is made up of three components:

Client-side technology: This refers to the technology used by a user to access the web. This includes browsers, plug-ins, and other tools that allow users to interact with the web.
Server-side technology: This refers to the technology used by web servers to provide the content, applications, and services that users access through the web. This includes web servers, databases, and other tools that allow web servers to host and deliver web content.
Network technology: This refers to the technology used to connect users and web servers. This includes routers, switches, and other networking equipment that allow users and web servers to communicate with each other.

When a user visits a website, their browser sends a request to the web server hosting the website. The web server then responds by sending the requested web page to the user’s browser. The web page is then displayed in the user’s browser.

Thanks for Reading! Follow for more...

Pure CSS Logo: Netflix

Coding Dev — Sat, 07 Jan 2023 09:40:59 +0000

Hey, hope you are doing well!

We can only learn CSS by practicing. CSS is something that you should regularly practice as a Web Developer. So, to learn CSS in advanced way, we will make different company logos. So, let’s get started with our first one.

Netflix Logo

Netflix Logo using pure CSS

Step 1: HTML

<div class="netflix"></div>

In HTML, we only have a div with class “netflix”. Now, let us style it with CSS.

Step 2: CSS

The basic page styling:

body {
  display: grid;
  place-items: center;
  background: black;
  min-height: 100vh;
}

Styling the main logo:

.netflix {
  height: 15rem;
  width: 3rem;
  border-left: 3rem solid #e50914;
  border-right: 3rem solid #e50914;
  position: relative;
}
.netflix:before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: #e50914;
  transform: skewX(21.5deg);
  box-shadow: 0 0 30px black;
}
.netflix:after {
  content: "";
  width: 15rem;
  height: 2rem;
  background: black;
  border-radius: 50%;
  display: block;
  position: absolute;
  left: -200%;
  top: 98%;
}

You can refer to the below Codepen for preview:

So, this is it. Thanks for Reading 😊

Don’t forget to like and follow for more…

Instagram: coding_dev_

Support: coding_dev_