DEV Community: Justin J Daniel

How a .gitattributes File Fixed Broken Images (and Why You Should Use One Too!)

Justin J Daniel — Tue, 20 May 2025 16:24:56 +0000

Recently, I ran into an issue where images in a documentation repository wouldn't render locally. After some digging, I realized the problem was that Git wasn't treating image files as binary, causing them to break, even in VSCode. The fix? Adding a .gitattributes file!

This post explains why .gitattributes matters, what problems it solves, and how you can use it to avoid file mishandling in your own projects.

What is a `.gitattributes` File?

A .gitattributes file is a simple text file you add to your repository to tell Git how to handle specific files or patterns. Each line specifies a pattern (like *.png) and one or more attributes (like marking a file as binary).

Example:

*.png binary
*.jpg binary
*.md text

Why is `.gitattributes` Important?

Prevents Broken Images and Binaries: Without proper attributes, Git might treat images or other binaries as text, corrupting them during commits or merges.
Consistent Line Endings: Handles differences between Windows (CRLF) and Unix (LF) systems, avoiding annoying diffs and merge conflicts caused by inconsistent line endings.
Improves Diffs and Merges: You can tell Git to ignore diffs for generated files, or use custom merge strategies for complex file types.
Better Collaboration: Ensures everyone on your team, regardless of OS or editor, works with files in the correct format.

What Files Should You Add to `.gitattributes`?

Images and Binaries: Mark all image, audio, video, and compiled files as binary:

  *.png binary
  *.jpg binary
  *.gif binary
  *.pdf binary
  *.zip binary

Text Files: Enforce consistent line endings:

  *.js eol=lf
  *.jsx eol=lf
  *.md text

Large Files: For large assets, consider using Git LFS and mark them in .gitattributes:

  *.psd filter=lfs diff=lfs merge=lfs -text

Generated or Vendor Files: Hide from diffs or language stats:

  /dist/* linguist-generated=true

Sample `.gitattributes` for a Documentation Repo

# Treat images as binary
*.png binary
*.jpg binary
*.gif binary
*.svg binary # SVGs are text-based (XML) but often treated as binary to prevent line-ending/merge issues.

# Treat markdown as text
*.md text

# Enforce LF for code files
*.js eol=lf
*.jsx eol=lf
*.json eol=lf

# Hide build files from diffs and stats
/dist/* linguist-generated=true

How to Add and Commit a `.gitattributes` File

Create a .gitattributes file in your repo's root.
Add the patterns and attributes you need.
Commit the file:

   git add .gitattributes
   git commit -m "Add .gitattributes for correct file handling"
   git push

Extra Tips

Use .gitattributes to set custom merge strategies or encoding for special file types.
For existing repos, you may need to re-add files with git add --renormalize . to apply new attributes.
For really big files (like Photoshop files), look into Git LFS.

Useful Links

Thank you for reading, and have a beautiful day! ❤️

Effortless Token Refresh in React Using Axios Interceptors

Justin J Daniel — Mon, 19 May 2025 04:26:05 +0000

Keeping users logged in securely is essential for any modern web app. One way to achieve this is with token rotation, a method that automatically refreshes expired access tokens using a refresh token, all without interrupting the user experience. In this beginner-friendly guide, you'll learn how to implement token rotation in a React app using Axios interceptors, without interfering with your server logic. We'll also compare common token storage options so you can choose what's best for your project.

What is Token Rotation?

Token rotation is a technique where, instead of keeping a refresh token forever, you get a new refresh token each time you use it. This makes your app more secure because even if a refresh token is stolen, it can only be used once before it becomes invalid.

How Does Axios Interceptor Help?

Axios interceptors let you run logic before a request is sent or after a response is received. Here, we'll use a response interceptor to detect when an access token has expired and automatically fetch a new one using the refresh token-without the user noticing.

Step-by-Step Example: Token Rotation with Axios

Below is a simple implementation.

// api.js
import axios from 'axios';

// Create an Axios instance
const api = axios.create({
  baseURL: 'https://your-api-url.com', // Replace with your backend URL
});

// Function to get tokens from storage
const getTokens = () => {
  return {
    accessToken: localStorage.getItem('accessToken'),
    refreshToken: localStorage.getItem('refreshToken'),
  };
};

// Function to save tokens to storage
const setTokens = ({ accessToken, refreshToken }) => {
  localStorage.setItem('accessToken', accessToken);
  if (refreshToken) localStorage.setItem('refreshToken', refreshToken);
};

// Add the access token to every request
api.interceptors.request.use((config) => {
  const { accessToken } = getTokens();
  if (accessToken) {
    config.headers.Authorization = `Bearer ${accessToken}`;
  }
  return config;
});

// Handle token expiration and rotation
api.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config;
    // If the access token has expired, try to refresh
    if (
      error.response &&
      error.response.status === 401 &&
      !originalRequest._retry
    ) {
      originalRequest._retry = true;
      const { refreshToken } = getTokens();
      if (refreshToken) {
        try {
          // Request new access token
          const res = await axios.post('/auth/refresh', {
            refreshToken,
          });
          // Save new tokens
          setTokens(res.data);
          // Retry the original request with new token
          originalRequest.headers.Authorization = `Bearer ${res.data.accessToken}`;
          return api(originalRequest);
        } catch (refreshError) {
          // Refresh token invalid, force logout or redirect to login
          localStorage.clear();
          window.location.href = '/login';
        }
      }
    }
    // Any other error
    return Promise.reject(error);
  }
);

export default api;

How it works:

Visual Flow

User clicks "Profile" →
  Access token expired →
    401 error →
      Interceptor calls refresh endpoint →
        Success? →
          Retry original request →
            User sees profile (no error)
        Failure? →
          Show login prompt (user sees error)

Every request includes the access token.
If the server returns 401 (Unauthorized), the interceptor tries to refresh the token using the refresh token.
If successful, it retries the original request with the new access token.
If refresh fails, it logs the user out.

Token Storage Options: Pros & Cons

Storage Option	Pros	Cons
Local Storage	Easy to use, persists after reload	Vulnerable to XSS attacks
Session Storage	Safer than localStorage, cleared on tab close	Still vulnerable to XSS, not persistent
HttpOnly Cookies	Protected from XSS, sent automatically	More complex setup, vulnerable to CSRF

Summary:

Local Storage: Simple, but less secure.
Session Storage: Slightly safer, but data is lost on tab close.
HttpOnly Cookies: Most secure, but requires backend changes and CSRF protection.

Conclusion

With Axios interceptors, you can easily implement token rotation in your React app. This keeps users logged in seamlessly and securely, without extra hassle. Remember to choose the token storage method that best fits your security needs and app requirements.

Thank you for reading, and have a beautiful day! ❤️

Unleash Your Inner Musician with AI-Powered Music Creation: Suno.ai

Justin J Daniel — Fri, 29 Mar 2024 18:30:00 +0000

Have you ever dreamt of creating your own song, but felt held back by a lack of musical training or equipment? The world of music creation is undergoing a revolutionary shift thanks to Artificial Intelligence. Today, I'd like to introduce you to Suno.ai, a platform that empowers anyone to create music using AI.

Suno.ai: Your AI Music Creation Playground

Suno.ai, a revolutionary AI-powered music creation platform, that turns your imagination into reality. With the release of their latest version, v3, users can now produce radio-quality music in mere seconds. This remarkable capability to generate full, two-minute songs almost instantaneously is a testament to the rapid advancements in AI technology and its application in creative fields.

Remember when Microsoft integrated the Suno plugin into their Copilot system last year? It opened the door to creating songs through simple prompts, a feature that continues to captivate users worldwide. The ease of transforming a musical idea into a tangible tune is simply magical.

Beyond the Basics: Exploring, Learning, and Refining Your Music

As a seasoned Suno.ai user, I've witnessed the platform's incredible evolution. One of the most praised features is the ability to seamlessly continue a song with a new prompt or even remix existing creations. This flexibility allows you to experiment and refine your tracks, pushing the boundaries of traditional music production.

Here's a deeper look at some of Suno.ai's powerful features:

Multilingual Support: Unleash your creativity in over 50 languages!
Free and Paid Plans: Choose from the free Basic plan (with 50 daily credits for 10 songs) or explore the Pro and Premier options for even more features.
Advanced Song Crafting: Take your music creation to the next level with Suno.ai's meta tags, allowing for precise control over the style and direction of your song.
Seamless Song Development: Craft unique sonic journeys by using subsequent prompts to create continuations or remixes of your existing tracks.

Suno.ai's documentation offers valuable insights on optimizing song creation using metatags. These guidelines unlock the platform's full potential, helping you craft tunes that resonate with your target audience.

Speaking of global appeal, Suno.ai's support for over 50 languages makes it a truly inclusive tool, accessible to a diverse user base. Additionally, their subscription plans cater to various needs, from the free Basic plan (perfect for beginners) that provides 50 credits daily for creating up to 10 songs, to Pro and Premier plans for more serious creators.

The "Explore" section on Suno.ai's website showcases an array of songs crafted using the platform, serving as both inspiration and a testament to the creative possibilities unleashed by AI in music.

The Future of Music is Here: AI and Creativity in Harmony

As we look towards the horizon, it's clear that AI will continue to play a transformative role in the arts. Platforms like Suno.ai aren't just tools; they're collaborators, empowering artists and enthusiasts to explore uncharted territories in the realm of music. The melody of innovation is undeniable, and it sings of a world where technology and creativity come together in perfect symphony.

Thank you for reading, and have a beautiful day! ❤️

Unlocking the Power of Mongoose Schemas: Enhancements for Better Data Handling

Justin J Daniel — Thu, 07 Mar 2024 17:17:34 +0000

In the world of MongoDB and Node.js, Mongoose stands as a powerful Object Data Modeling (ODM) library that simplifies the interaction with MongoDB. It provides a straightforward, schema-based solution to model your application data, ensuring validation, type casting, query building, and business logic encapsulation. But what if we could take it a step further? What if we could leverage Mongoose's features to not only model our data but also to enhance our application's functionality, security, and maintainability? Let's dive into the enhancements that can be made in Mongoose schemas to unlock their full potential.

The Power of Indexes

First on our list is the power of indexes. Indexes are like the backbone of any database, providing a way to speed up data retrieval. In Mongoose, you can define indexes on your schema fields to optimize query performance. For instance, if you frequently query users based on their last login time, adding an index on the lastLogin field can significantly reduce the time it takes to fetch the most recently logged-in users.

userSchema.index({ lastLogin: -1 });

Example Usage in Controller:

const recentUsers = await User.find().sort({ lastLogin: -1 }).limit(10);

This simple line of code tells MongoDB to create an index on the lastLogin field, sorted in descending order. Now, when you perform a query to find the most recently logged-in users, MongoDB can quickly locate the documents without scanning the entire collection.

Validation: The Cornerstone of Data Integrity

Next, let's talk about validation. In any application, data integrity is paramount. Mongoose allows you to define validation rules directly in your schema. This ensures that only valid data is saved to the database, preventing potential bugs and security vulnerabilities.

userSchema.path('email').validate(function (value) {
 // Custom validation logic here
 return true; // or false, depending on the validation result
}, 'Email validation failed');

Example Usage in Controller:

try {
 const user = new User(req.body);
 await user.save();
} catch (error) {
 if (error.name === 'ValidationError') {
    // Handle validation error
 }
}

With this setup, Mongoose will automatically validate the email field before saving a document. If the validation fails, Mongoose will throw a validation error, allowing you to handle it gracefully in your application.

Virtuals: Computed Properties for Enhanced Readability

Virtuals are a powerful feature in Mongoose that allows you to define computed properties on your documents. These properties are not stored in the database but are computed on the fly when accessed. This is particularly useful for combining fields or formatting data in a way that's more readable or useful for your application.

userSchema.virtual('fullName').get(function () {
 return `${this.firstName} ${this.lastName}`;
});

Example Usage in Controller:

const user = await User.findById(userId);
console.log(user.fullName); // Outputs the full name of the user

With this virtual property, you can easily access the full name of a user without having to concatenate the firstName and lastName fields every time.

Methods and Static Methods: Encapsulating Business Logic

Mongoose schemas allow you to define methods that can be executed on instances of your models. This is perfect for encapsulating business logic that operates on individual documents.

userSchema.methods.hasRole = function (role) {
 return this.role === role;
};

Static methods, on the other hand, are defined on the model itself and can be used for operations that don't require an instance of the model.

userSchema.statics.findByUsername = function (username) {
 return this.findOne({ username });
};

Example Usage in Controller:

const user = await User.findByUsername('johndoe');
if (user.hasRole('admin')) {
 // Perform admin-specific actions
}

Hooks: Automating Actions at Key Lifecycle Stages

Hooks, or middleware, are functions that are executed at various stages of a document's lifecycle. They can be used to perform actions automatically, such as data transformation, validation, or logging.

userSchema.pre('save', function (next) {
 // Perform actions before saving
 this.email = this.email.toLowerCase();
 next();
});

Example Usage in Controller:

try {
 const user = new User(req.body);
 await user.save();
} catch (error) {
 // Handle any errors that occurred during the save operation
}

Hooks can be defined for a wide range of events, including find, findOne, findOneAndUpdate, remove, and validate. They provide a powerful way to automate actions and enforce business logic across your application.

Conclusion

By leveraging these enhancements in Mongoose schemas, you can significantly improve the functionality, security, and maintainability of your MongoDB-based applications. From optimizing query performance with indexes to ensuring data integrity with validation, and from encapsulating business logic with methods and static methods to automating actions with hooks, Mongoose offers a comprehensive set of tools to build robust and efficient applications.

In the ever-evolving landscape of web development, staying ahead of the curve is crucial. By mastering these advanced features of Mongoose, you're not just enhancing your schemas; you're unlocking the full potential of your application, ensuring it's not just functional but also efficient, secure, and maintainable.

Have a beautiful day! ❤️

Feel free to connect with me on LinkedIn and GitHub.

DEV Community: Justin J Daniel

How a .gitattributes File Fixed Broken Images (and Why You Should Use One Too!)

What is a .gitattributes File?

Why is .gitattributes Important?

What Files Should You Add to .gitattributes?

Sample .gitattributes for a Documentation Repo

How to Add and Commit a .gitattributes File

Extra Tips

Useful Links

Effortless Token Refresh in React Using Axios Interceptors

What is Token Rotation?

How Does Axios Interceptor Help?

Step-by-Step Example: Token Rotation with Axios

Token Storage Options: Pros & Cons

Conclusion

Unleash Your Inner Musician with AI-Powered Music Creation: Suno.ai

Suno.ai: Your AI Music Creation Playground

Beyond the Basics: Exploring, Learning, and Refining Your Music

Here's a deeper look at some of Suno.ai's powerful features:

The Future of Music is Here: AI and Creativity in Harmony

Unlocking the Power of Mongoose Schemas: Enhancements for Better Data Handling

The Power of Indexes

Validation: The Cornerstone of Data Integrity

Virtuals: Computed Properties for Enhanced Readability

Methods and Static Methods: Encapsulating Business Logic

Hooks: Automating Actions at Key Lifecycle Stages

Conclusion

What is a `.gitattributes` File?

Why is `.gitattributes` Important?

What Files Should You Add to `.gitattributes`?

Sample `.gitattributes` for a Documentation Repo

How to Add and Commit a `.gitattributes` File