DEV Community: Japheth Joepari

Laravel Eloquent on Steroids: From 3s to 300ms

Japheth Joepari — Thu, 02 Oct 2025 10:56:30 +0000

Ever been in a situation where your Laravel dashboard should have loaded instantly but took more than six seconds to load?

Your client questions why they hired you in the first place, the page freezes, and your laptop's fan sounds like it's ready to take off.

I’ve been there. I nearly lost a client when I shipped a dashboard that crawled at eight seconds.

That’s when I realized: performance is survival, not optional.

Let’s fix this.

Step 1: Stop Pretending You Know — Measure It

You can’t fix what you don’t measure. Guessing is for gamblers, not devs. Add a timer and see how long your request actually takes.

Route::get('/test', function () {
    $start = microtime(true);  

    $users = \App\Models\User::all();  

    $time = microtime(true) - $start;  
    return "Query took {$time} seconds and loaded " . count($users) . " users.";  
});

If you just saw 3.452312 seconds — congrats, you’re the proud owner of a slow query. At least now you know.

Step 2: Replace `all()` With Smarter Data Retrieval

One of the biggest performance traps in Laravel is dropping Model::all() everywhere.

all() means: “Give me literally everything.” Every row. Every column.

Got 50k users? You just told Laravel to load 50k models into memory. I once crashed a staging server doing this “just for testing.”

Fix it with pagination:

$users = User::paginate(20); // safe, predictable

Or in jobs:

User::chunkById(100, function ($users) {
    foreach ($users as $user) {
        // process in small batches
    }
});

Step 3: Eliminating the N+1 Query Problem

Here’s the classic mistake:

$users = User::all();  

foreach ($users as $user) {
    echo $user->posts->count();
}

Looks fine, but this is the infamous N+1 problem.

1 query for users
1 query for every user’s posts
100 users = 101 queries

Fix it with eager loading:

$users = User::with('posts')->get();

foreach ($users as $user) {
    echo $user->posts->count();  
}

Now it’s 2 queries total.

Need just counts? Even better:

$users = User::withCount('posts')->get();

foreach ($users as $user) {
    echo $user->posts_count;
}

That’s how you go from 500 queries → 2.

Step 4: Stop Carrying the Whole Database in Your Backpack

Why fetch bio, avatar, reset token, and grandma’s last_login_at if you only want the name?

$users = User::select('id', 'name')->get();

Smaller result sets = faster responses.

Step 5: Count in the Database, Not in PHP

I’ve seen this:

$post = Post::find($id);
$count = $post->comments->count();

That loads every comment into memory just to count them.

Do it right:

$count = Comment::where('post_id', $id)->count();

Or just check existence:

$hasComments = Comment::where('post_id', $id)->exists();

Fast. Efficient. Doesn’t kill memory.

Step 6: Index Your Damn Columns

If your table has 2M rows and you keep querying:

WHERE email = 'bob@example.com'

with no index, the DB scans every row like an unpaid intern flipping files.

Add indexes in your migrations:

Schema::table('users', function (Blueprint $table) {
    $table->index('email');
});

I once forgot to index a busy status column. It slowed production down. After adding the index, queries went from 2s → 20ms.

Step 7: Cache the Heavy Stuff

Your homepage recalculates “Top 10 Most Commented Posts” on every request? That’s cruel.

use Illuminate\Support\Facades\Cache;

$topPosts = Cache::remember('top_posts', 60, function () {
    return Post::withCount('comments')
        ->orderByDesc('comments_count')
        ->take(10)
        ->get();
});

One query per minute instead of per request. Users don’t care if it’s 60s old — they care if it’s fast.

Step 8: Stop Writing Heavy Loops Like an Amateur

This garbage:

$users = User::all();

foreach ($users as $user) {
    $latest = $user->posts()->latest()->first();
    $count = $user->posts()->count();
}

That’s query hell.

Do this instead:

$users = User::withCount('posts')
    ->with(['posts' => function ($q) {
        $q->latest()->take(1);
    }])
    ->latest()
    ->take(50)
    ->get();

One query for users, one for posts. Done.

Step 9: Spy on Your Queries

Curious what your app is really doing? Put Laravel under surveillance:

DB::listen(function ($query) {
    dump($query->sql, $query->bindings, $query->time);
});

Hit the page. If you see 200 queries flying out, you’ve found the problem.

Real-World Before & After

Before (painful):

$users = User::all();

foreach ($users as $user) {
    echo $user->posts->count();
}

101 queries
3 seconds
Client asking if this is built on WordPress

After (fast):

$users = User::withCount('posts')->latest()->take(50)->get();

foreach ($users as $user) {
    echo $user->posts_count;
}

2 queries
300ms
Client actually pays invoice

The Blunt Conclusion

Laravel’s Eloquent is awesome, but if you treat it like a toy, it will slow down your Production.

The difference between a 3s page and a 300ms page usually comes down to:

Don’t abuse all()
Kill N+1 with with()
Select only the columns you need
Let the DB do the heavy lifting
Add indexes where they matter
Cache what doesn’t need to be real-time
Actually inspect your queries

Do this, and you’ll stop getting Slack messages that say:

“Site’s down again.”

Don’t be the dev who ships a dashboard that loads slower than a YouTube ad. Happy Coding.

Fixing Laravel CSS Not Displaying After Deployment

Japheth Joepari — Sun, 26 May 2024 00:56:16 +0000

If you're working with Laravel and notice that your CSS and HTML files are not displaying correctly, especially after deploying your application, you are not alone. This issue is common, particularly when transitioning from a local development environment to a production server. In this article, we'll explore the cause of this problem and provide a straightforward solution.

Understanding the Issue

When your Laravel application is hosted, you might encounter a situation where the CSS and HTML files do not load properly. This often happens due to an incorrect URL scheme being used for your asset links. In a local environment, the application typically runs over HTTP. However, in a production environment, it often runs over HTTPS.

Common Symptoms

Stylesheets (CSS) not applying to your HTML.
HTML files not rendering correctly.
Browser console errors indicating mixed content issues.

These symptoms are usually caused by the application serving assets over HTTP while the site itself is loaded over HTTPS, resulting in blocked resources due to security restrictions.

The Solution

The solution to this problem involves ensuring that all URLs generated by Laravel use the correct scheme (HTTP or HTTPS) based on the environment. This can be achieved by forcing HTTPS in the production environment. Here’s how you can do it:

Step-by-Step Guide

Open the App Service Provider

Navigate to app/Providers/AppServiceProvider.php in your Laravel project.

Modify the App Service Provider

Update the AppServiceProvider class to force HTTPS in non-local environments. Here’s the code you need to add or modify:

   <?php

   namespace App\Providers;

   use Illuminate\Support\ServiceProvider;
   use Illuminate\Pagination\Paginator;
   use Illuminate\Support\Facades\Blade;
   use Illuminate\Support\Facades\URL;

   class AppServiceProvider extends ServiceProvider
   {
       /**
        * Register any application services.
        *
        * @return void
        */
       public function register()
       {
           if (env('APP_ENV') !== 'local') {
               URL::forceScheme('https');
           }
       }
   }

Explanation of the Code

Namespace and Imports: Ensure you have the correct namespace and import statements at the top of your file.
Register Method: In the register method, we check if the application environment (APP_ENV) is not local. If this condition is true, we force HTTPS using URL::forceScheme('https');.
Boot Method: The boot method is where we can perform additional bootstrapping. In this example, we're using Bootstrap for pagination, but you might have other configurations here as well.

Why This Works

By forcing the URL scheme to HTTPS in non-local environments, we ensure that all asset links are correctly generated with the HTTPS scheme. This prevents mixed content issues and ensures that your CSS and HTML files are loaded correctly.

Additional Tips

Environment Configuration: Ensure your .env file is correctly set up with APP_ENV=production for your production environment.
Clear Config Cache: After making changes to your configuration, clear the config cache with php artisan config:cache.

Conclusion

By modifying the AppServiceProvider to force HTTPS in production environments, you can resolve issues with CSS and HTML files not displaying correctly in your Laravel application. This simple yet effective change ensures that your assets are always served over the correct scheme, maintaining the integrity and security of your application.

Feel free to ask any questions or share your experiences in the comments below! Happy coding!

JSON Demystified: A Comprehensive Guide For Beginers

Japheth Joepari — Mon, 15 May 2023 09:48:51 +0000

JSON, short for JavaScript Object Notation, is a popular format for data interchange. It is a lightweight, text-based format that is easy for humans to read and write, and easy for machines to parse and generate. In this article, we will explore everything you need to know about JSON, including its history, syntax, usage, advantages, and disadvantages.

What is JSON?

JSON is a data interchange format that is used to transmit and store data between applications. It is based on the JavaScript programming language and was first introduced in 2001 by Douglas Crockford. JSON is a lightweight alternative to XML, which is a markup language used for data interchange.

How Does JSON Work?

JSON data is represented as a collection of key-value pairs. Each key-value pair is separated by a colon, and each pair is separated by a comma. The keys are always strings, while the values can be strings, numbers, arrays, objects, or Boolean values. Here is an example of a simple JSON object:

{
  "name": "John Smith",
  "age": 30,
  "city": "New York"
}

In this example, the keys are "name", "age", and "city", and the values are "John Smith", 30, and "New York", respectively. This JSON object represents a person's name, age, and city.

JSON Syntax

JSON syntax is relatively simple and easy to understand. It is composed of two main structures: objects and arrays.

Objects

An object in JSON is represented as a collection of key-value pairs enclosed in curly braces. The key-value pairs are separated by commas. Here is an example of a JSON object:

{
  "name": "John Smith",
  "age": 30,
  "city": "New York"
}

Arrays

An array in JSON is represented as a collection of values enclosed in square brackets. The values are separated by commas. Here is an example of a JSON array:

[
  "apple",
  "banana",
  "cherry"
]

Values

JSON values can be of different types, including:

String: a sequence of characters enclosed in double quotes, e.g. "John Smith".
Number: an integer or a floating-point number, e.g. 30 or 3.14.
Boolean: either true or false.
Null: represents a null value.

Usage of JSON

JSON is widely used for data interchange in web applications. It is supported by many programming languages and can be easily parsed and generated using libraries and frameworks. Some common use cases of JSON include:

Storing and transmitting configuration data.
Exchanging data between web servers and clients using AJAX.
Storing and transmitting data in RESTful web services.
Storing and transmitting data in NoSQL databases.

Benefits

JSON has several benefits over other data interchange formats, including:

Lightweight: JSON is a text-based format that is easy to parse and generate, which makes it lightweight and efficient.
Easy to read and write: JSON syntax is simple and easy to understand, which makes it easy for humans to read and write.
Language-independent: JSON is supported by many programming languages, which makes it easy to exchange data between different applications.
Easy to integrate: JSON can be easily integrated with other technologies, such as AJAX, RESTful web services, and NoSQL databases.

How to use JSON

Using JSON is relatively simple. To encode a data structure in JSON format, you can use a library or framework in your programming language of choice. For example, in JavaScript, you can use the built-in JSON.stringify() method to convert a JavaScript object to a JSON string:

var person = {
  name: "John Smith",
  age: 30,
  city: "New York"
};

var json = JSON.stringify(person);

To decode a JSON string back into a data structure, you can use the JSON.parse() method:

var json = '{"name":"John Smith","age":30,"city":"New York"}';

var person = JSON.parse(json);

Best Practices for Using JSON

To use JSON effectively, it is important to follow some best practices, including:

Use descriptive and meaningful keys for JSON objects.
Use consistent and well-defined data structures.
Validate JSON data before parsing or generating it.
Use compression to reduce the size of JSON data.
Avoid circular references in JSON data.

Conclusion

JSON is a popular data interchange format that is widely used in web applications. It is lightweight, easy to read and write, and language-independent. JSON is supported by many programming languages and can be easily parsed and generated using libraries and frameworks. However, JSON has some limitations, such as lack of schema validation and limited data types. To use JSON effectively, it is important to follow best practices and consider its advantages and disadvantages.

FAQs

1 What is the difference between JSON and XML?

JSON is a lightweight, text-based format that is easy to read and write, while XML is a markup language that is more complex and verbose.
JSON is based on the JavaScript programming language, while XML is not tied to any particular programming language.
JSON is often used for data interchange in web applications, while XML is used in a variety of applications, including web services and document formats.

2 Is JSON secure?

JSON itself is not inherently secure, but like any other data format, it can be used securely if proper security measures are taken.
When transmitting JSON data over the internet, it is important to use secure protocols, such as HTTPS, to prevent interception and tampering of data.

3 What is JSON Schema?

JSON Schema is a specification that provides a way to describe the structure and data types of JSON data.
JSON Schema can be used to validate JSON data against a specific schema and ensure that it conforms to a certain structure and data types.

4 Can JSON be used with databases?

Yes, JSON can be used with databases, particularly NoSQL databases that support JSON data.
JSON data can be stored and queried directly in NoSQL databases, making it easy to work with JSON data in web applications.

5 What are some alternatives to JSON?

Some alternatives to JSON include XML, YAML, and MessagePack.
Each of these formats has its own advantages and disadvantages and is suited for different use cases.
In summary, JSON is a versatile and widely-used data interchange format that offers many benefits, such as ease of use, interoperability, and support across multiple programming languages. It is a great choice for web applications that require lightweight, easy-to-read data exchange.

However, JSON does have some limitations, such as lack of schema validation and limited data types. It is important to use JSON carefully and follow best practices to ensure that it is used effectively and securely.

Overall, JSON is a useful and important technology that plays a critical role in modern web development. By following best practices and being aware of its limitations, developers can make the most of JSON and create powerful, efficient, and secure applications.

Understanding Fetch APIs: A Beginner's Guide

Japheth Joepari — Mon, 15 May 2023 09:36:17 +0000

As the world becomes increasingly digital, the need for efficient data exchange between websites and servers has become a crucial aspect of web development. Fetch APIs have become a popular solution for this need, providing a more flexible and modern alternative to traditional XMLHttpRequests. In this beginner's guide, we will explore the fundamentals of Fetch APIs and how they work, their benefits, and best practices for implementation.

What are Fetch APIs?

Fetch APIs are a web API for making HTTP requests, similar to XMLHttpRequests (XHR). They are built on top of Promises, allowing for a more efficient and modern approach to handling asynchronous requests. Fetch APIs provide a simple and consistent interface for fetching resources across the network, enabling developers to build powerful applications with ease.

How do Fetch APIs work?

Fetch APIs use the fetch() method to initiate a request to a server and retrieve a response. The fetch() method takes one mandatory argument, the URL of the resource to be fetched, and returns a Promise. Once the promise is resolved, the response can be manipulated or parsed as needed.

fetch('https://example.com/data')
  .then(response => {
    // manipulate or parse response
  })
  .catch(error => {
    // handle error
  });

Fetch APIs also provide a range of options that can be passed as a second argument to the fetch() method. These options include headers, request methods, and request body, allowing for greater control over the request.

Benefits of Fetch APIs

Fetch APIs offer several benefits over traditional XHRs, including:

Simplicity and consistency

Fetch APIs provide a simple and consistent interface for making HTTP requests, making it easy for developers to work with different APIs and resources.

Promises-based

Fetch APIs are built on top of Promises, enabling more efficient and modern handling of asynchronous requests.

Support for modern web standards

Fetch APIs support modern web standards, including CORS and Service Workers, making them a more powerful and flexible solution for web development.

Better error handling

Fetch APIs provide a more standardized and robust approach to error handling, making it easier for developers to handle errors and debug issues.

Best practices for Fetch API implementation

To get the most out of Fetch APIs, it's important to follow some best practices for implementation, including:

Using the `async/await` syntax

Using the async/await syntax can simplify and improve the readability of your Fetch API code.

async function getData() {
  const response = await fetch('https://example.com/data');
  const data = await response.json();
  return data;
}

Handling errors properly

It's important to handle errors properly when using Fetch APIs, including handling network errors and server responses.

fetch('https://example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Using CORS headers

Cross-Origin Resource Sharing (CORS) headers are required when making requests to a different domain or subdomain. It's important to include the appropriate CORS headers in your requests to ensure proper security and functionality.

fetch('https://api.example.com/data', {
  headers: {
    'Access-Control-Allow-Origin': '*'
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Conclusion

Fetch APIs provide a modern and efficient solution for making HTTP requests in web development. By using Fetch APIs, developers can build powerful and flexible applications that can exchange data with servers seamlessly. With their support for modern web standards and consistent interface, Fetch APIs have become a popular choice for developers.

In summary, Fetch APIs provide a simple and powerful way to make HTTP requests in web development. With their support for modern web standards, error handling, and flexibility, they are an essential tool for building robust and efficient web applications. By following best practices for implementation and taking advantage of their features, developers can create faster, more responsive, and more reliable web applications.

FAQs

1 - What is the difference between Fetch APIs and XMLHttpRequests?

Fetch APIs offer a more modern and efficient solution for making HTTP requests compared to traditional XMLHttpRequests. They use Promises instead of callbacks and provide a simpler and more consistent interface.

2 - What is the syntax for making a request with Fetch APIs?

The syntax for making a request with Fetch APIs is as follows:

fetch('https://example.com/data')
  .then(response => {
    // manipulate or parse response
  })
  .catch(error => {
    // handle error
  });

3 - Can Fetch APIs be used with Service Workers?

Yes, Fetch APIs can be used with Service Workers, making them a powerful tool for offline and progressive web applications.

4 - What are the benefits of using Fetch APIs over traditional XHRs?

Fetch APIs offer a more modern and efficient solution for making HTTP requests, with support for modern web standards and better error handling. They also provide a simpler and more consistent interface.

5 - How can I ensure proper security when using Fetch APIs?

To ensure proper security when using Fetch APIs, it's important to use CORS headers when making requests to a different domain or subdomain. It's also essential to handle errors properly and validate user input to prevent malicious attacks.

React Toast: Adding Quick and Simple Notifications to Your React App

Japheth Joepari — Fri, 28 Apr 2023 16:21:06 +0000

Introduction

As a web developer, you know how important it is to have effective user communication within your application. One way to achieve this is by using React Toast, a simple and efficient notification system. In this article, we will discuss everything you need to know about React Toast, including its installation, customization, advantages, disadvantages, and best practices.

What is React Toast?

React Toast is a notification system that allows developers to display temporary messages or notifications to users. It's a simple way of providing feedback to users, and it can be used for a variety of purposes such as success or error messages, alerts, or updates.

Types of React Toasts

There are three types of React Toasts: Info, Success, and Error. Info toasts provide general information, success toasts indicate successful operations, and error toasts alert users of an error that occurred during a specific action.

How to Install and Use React Toast

To install React Toast, you can use the following command:

npm install react-toastify

Importing and Using React Toast

After installation, you can import React Toast into your project using the following code:

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

To use React Toast, you can call the 'toast' function and pass in a message as a parameter above your return statement. For example:

toast.success('Your changes have been saved.');

the add this to the return statement of your code

return(
  <ToastContainer />
  //some code here
)

This will display a success message to the user.

Customizing React Toast

React Toast can be easily customized to fit the style of your application. You can change the position of the toast container, as well as the color and font size of the messages.

Creating Custom Toast Components

You can also create custom toast components for more personalized messages. This can be done by defining a new component and passing it as a parameter to the 'toast' function.

Why use of React Toast ?

1. User-friendly
React Toast is user-friendly and easy to understand. Users are notified of important information without being overwhelmed by too much text or data.

2. Highly Customizable
React Toast is highly customizable, allowing developers to change the appearance and position of the toasts to fit the style of their application.

3. Saves Time and Effort
React Toast saves developers time and effort by providing a simple way to display temporary messages or notifications without having to write additional code.

FAQs

What is React Toast?
React Toast is a notification system that allows developers to display temporary messages or notifications to users.
How do I install React Toast?
To install React Toast, use the following command: npm install react-toastify.
Can I customize React Toast?
Yes, React Toast can be customized to fit the style of your application. You can change the position, appearance, and even create custom components.
What are the advantages of using React Toast?
React Toast is user-friendly, highly customizable, and saves time and effort.
What are the best practices for using React Toast?
Limit the number of toasts, customize for better user experience, and use consistent styling.

complete guide to React Drag-and-Drop Image Preview with Dropzone.js

Japheth Joepari — Sun, 02 Apr 2023 14:05:50 +0000

As a web developer, creating a user-friendly interface is key to keeping visitors engaged and satisfied. One feature that has exploded in popularity in recent years is the ability to drag and drop files onto an upload field. Not only does this make uploading files a breeze, but it also creates a seamless user experience that keeps people coming back for more.

Enter DropzoneJS, the ultimate solution for implementing drag and drop file uploads with image previews. Whether you're a beginner or a seasoned pro, DropzoneJS is easy to use, customizable, and supports a wide range of file types. In this article, we'll walk you through how to implement this powerful JavaScript library in React, so you can create a truly engaging online experience. So let's dive in and see how DropzoneJS can take your web development skills to the next level!

Prerequisites

Basic knowledge of React.js
Familiarity with HTML, CSS, and JavaScript

Step 1: Setting up the Project
The first step is to create a new React project or use an existing one. You can use the create-react-app CLI tool to create a new project by running the following command in your terminal:

npx create-react-app dropzone-demo

Step 2: Installing Dropzone.js
Next, You need to install Dropzone.js using npm. Run the following command in your terminal:

npm install --save react-dropzone

yarn add react-dropzone

Step 3: Creating a Dropzone Component
To use Dropzone.js with React, we need to create a new component that will serve as our dropzone. Here's a basic implementation of a Dropzone component:

import React, { useCallback } from "react";
import { useDropzone } from "react-dropzone";

const DropzoneComponent = () => {
  const onDrop = useCallback((acceptedFiles) => {
    console.log(acceptedFiles);
  }, []);

  const { getRootProps, getInputProps } = useDropzone({ onDrop });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <p>Drag and drop your files here, or click to select files</p>
    </div>
  );
};

export default DropzoneComponent;

In this component, we import useDropzone and useCallback hooks from React. We also define an onDrop function that will handle the files dropped into the dropzone. We then use the useDropzone hook from Dropzone.js to get the necessary props for our dropzone. The getRootProps function returns an object with properties that we can spread onto our dropzone container element, while the getInputProps function returns an object with properties that we can spread onto our input element.

Step 4: Adding Image Preview
To add image preview functionality, we can use the FileReader API to read the file and convert it to a data URL, which can then be used as the source for an image tag. Here's an updated implementation of our Dropzone component with image preview:

import React, { useCallback, useState } from "react";
import { useDropzone } from "react-dropzone";

const DropzoneComponent = () => {
  const [files, setFiles] = useState([]);
  const onDrop = useCallback((acceptedFiles) => {
    setFiles(
      acceptedFiles.map((file) =>
        Object.assign(file, {
          preview: URL.createObjectURL(file),
        })
      )
    );
  }, []);

  const { getRootProps, getInputProps } = useDropzone({ onDrop });

  const fileList = files.map((file) => (
    <li key={file.name}>
      <img src={file.preview} alt={file.name} />
      <span>{file.name}</span>
    </li>
  ));

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <p>Drag and drop your files here, or click to select files</p>
      <ul>{fileList}</ul>
    </div>
  );
};

export default DropzoneComponent;

In this updated implementation, we use the useState hook to maintain a list of files that have been dropped into the dropzone. We then update the onDrop function to read each file and create a preview URL using the URL.createObjectURL method. Finally, we use the files list to render an unordered list of images with their names.

Step 5: Styling the Dropzone
By default, Dropzone.js provides a basic style for the dropzone container. However, you can customize the style to match your application's design. You can either use CSS to style the dropzone or use Dropzone.js options to customize the appearance. For example, you can set the accepted file types, the maximum file size, and the maximum number of files allowed.

Here's an example of how to set some options in our Dropzone component and some basic styling for your DropZone component:

import React, { useCallback, useState } from "react";
import { useDropzone } from "react-dropzone";

const dropzoneStyle = {
  flex: 1,
  display: "flex",
  flexDirection: "column",
  alignItems: "center",
  justifyContent: "center",
  padding: "20px",
  marginTop: "2rem",
  borderWidth: "2px",
  borderRadius: "2px",
  borderColor: "#eeeeee",
  borderStyle: "dashed",
  backgroundColor: "#fafafa",
  color: "#bdbdbd",
  outline: "none",
  transition: "border 0.24s ease-in-out",
  cursor: "pointer",
};

const activeDropzoneStyle = {
  borderColor: "#00adb5",
};

const DropzoneText = {
  margin: "0",
  fontSize: "16px",
  fontWeight: "600",
  textAlign: "center",
};

const ImagePreview = {
  display: "flex",
  maxWidth: "100%",
  maxHeight: "100%",
  margin: "auto",
  borderRadius: "2px",
};

const FileName = {
  display: "flex",
  fontSize: "14px",
  marginTop: "8px",
};

const DropzoneComponent = () => {
  const [files, setFiles] = useState([]);
  const onDrop = useCallback((acceptedFiles) => {
    setFiles(
      acceptedFiles.map((file) =>
        Object.assign(file, {
          preview: URL.createObjectURL(file),
        })
      )
    );
  }, []);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: "image/*",
    maxSize: 1024 * 1024 * 5,
    maxFiles: 3,
  });

  const fileList = files.map((file) => (
    <li key={file.name}>
      <img style={ImagePreview} src={file.preview} alt={file.name} />
      <span style={FileName}>{file.name}</span>
    </li>
  ));

  return (
    <div
      style={
        isDragActive
          ? { ...dropzoneStyle, ...activeDropzoneStyle }
          : dropzoneStyle
      }
      {...getRootProps()}
    >
      <input {...getInputProps()} />
      <p style={DropzoneText}>
        Drag and drop your files here, or click to select files
      </p>
      <ul>{fileList}</ul>
    </div>
  );
};

export default DropzoneComponent;

In this example, we set the accept option to "image/*" to only allow image files to be dropped into the dropzone. We also set the maxSize option to 5MB and the maxFiles option to 3 to limit the size and number of files that can be uploaded. Finally, we added a "dropzone" class to the dropzone container to apply custom styling using CSS.

Conclusion
In this article, you have learnt you how to implement Drag and Drop with Image Preview using Dropzone.js with React. We covered the basic steps of setting up a new React project, installing Dropzone.js, creating a Dropzone component, and adding image preview and custom styling. You can further customize your dropzone by exploring more options and functionality provided by Dropzone.js. Happy coding🎉!
image credits

Overcoming Developer Shiny Object Syndrome: How to Stay Focused on Your Goals

Japheth Joepari — Sun, 26 Mar 2023 18:59:23 +0000

Have you ever found yourself jumping from one Programming Language, project or technology to another without finishing what you started? Do you have a hard time staying focused and getting things done because you always get sidetracked by other things that catch your attention? If you do, don't worry, because this is something that a lot of developers experience, and it's called Shiny Object Syndrome. As a beginner developer, it's easy to get caught up in the latest and greatest technologies, tools, and frameworks. However, this can lead to a common problem known as Shiny Object Syndrome, where you find yourself constantly jumping from one project or technology to another, without finishing what you started. In this article, we'll explore what Shiny Object Syndrome is, how it affects developers, and how you can overcome it to stay focused on your goals.

Shiny Object Syndrome is the tendency to be easily distracted by new or novel things. In the context of software development, this might manifest as constantly chasing after the latest trends or trying out new technologies without any clear goal or purpose. Although it's very important to keep learning and stay up-to-date with industry trends and advances, it's equally important to choose carefully which technologies you invest your time into.

This syndrome can have a number of negative effects on developers, including wasted time and lost productivity. If you're constantly jumping from one technology to the next, you may never get deep enough to truly master any of them. This can cause you to get stuck, and it may be harder for you to make progress in your career as a software developer. It can also lead to a lack of focus and direction, where you get sidetracked by the latest trends or flashy new technologies.

To overcome Shiny Object Syndrome and stay focused on your goals, there are a few tips you can follow:

- Define Your Goals: The first step is to define your goals. What do you want to achieve in your career? What skills do you want to develop? Having clear goals will help you stay focused on what's important and avoid getting distracted by shiny new technologies.

- Prioritize Your Time : Once you've defined your goals, it's important to prioritize your time. Identify the technologies and skills that are most important for achieving your goals, and focus your time and energy on mastering those.

- Be Strategic About Learning: When it comes to learning new technologies, be strategic about which ones you invest your time and energy into. Ask yourself if this new technology aligns with your goals and whether it's worthy of your time and investment.

The Allure of Shiny Objects

As a personalized example, When I was first starting out as a developer, I fell victim to Shiny Object Syndrome. Driven by a fear of missing out (FOMO), I was constantly chasing after the latest trends and trying out new technologies and programming languages without any clear goal or purpose. As a result, I found myself confused and frustrated and I wasn't making any real progress in my career. I found myself getting caught up in the several programming languages and frameworks. Before I knew it, I had become a "jack of all trades" – proficient in multiple languages and frameworks but lacking the depth of knowledge in any one area to truly excel. While these languages and frameworks were certainly exciting, I realized that they weren't the most important thing for me to learn at that moment. So I decided to focus on mastering the basics of web development and building a strong foundation in HTML, CSS, and JavaScript. It wasn't until I defined my goals and started to prioritize my time that I was able to overcome Shiny Object Syndrome. I identified the technologies and skills that were most important for achieving my goals, and I focused my time and energy on mastering those.

In conclusion, Shiny Object Syndrome is a common problem among developers, but it's one that can be overcome with the right approach. By defining your goals, prioritizing your time, and being strategic about which technologies you invest your time and energy into, you can stay focused on your goals and achieve success in your career. So, stay disciplined, stay focused, and never forget your ultimate objective.

Escaping the Tutorial Addiction: A Guide for Entry-Level Developers

Japheth Joepari — Fri, 24 Mar 2023 10:47:32 +0000

Have you ever found yourself spending lots of time watching videos or reading courses online to learn something new, but at the end of the day, you didn't feel like you learned anything helpful? Well, sometimes people get stuck in this situation, and it's called "tutorial hell." It's when you keep learning but never actually use what you learn in real life. This can happen to anyone, whether they're just starting to learn something new or have been doing it for a while.

The cycle of tutorial hell usually begins with a desire to learn something new. You might have an idea for a project or a new job that requires a specific skill set. You start researching online and find a plethora of courses, tutorials, and videos that promise to teach you everything you need to know.

As a new developer, it's easy to fall into the trap of tutorial addiction. We get so caught up in following step-by-step guides and tutorials that we forget to apply what we've learned to our own projects. It can be hard to break free from the cycle of watching videos and reading articles, but it's crucial if we want to grow as developers.

My own journey into the world of tutorial addiction began when I first started learning to code. At first, it was exciting and everything seemed so new and interesting. However, as I progressed through various courses, I found myself getting stuck. I realized that I wasn't retaining the information as well as I thought I was, and I was struggling to apply what I'd learned to my own projects.

After some reflection, I realized that I had become addicted to tutorials. I was relying too heavily on other people's code and wasn't doing enough experimenting on my own. This realization was a turning point for me, and I decided to take action.

If you're struggling with tutorial addiction, here are some tips that can help you break free:

Start with small projects: Don't feel like you have to jump straight into building a complex app or website. Instead, start with small, manageable projects that you can complete on your own. This will help build your confidence and give you a sense of accomplishment.
Experiment with what you've learned: Don't just follow tutorials blindly. Instead, take what you've learned and try to apply it to your own projects. Experiment with different approaches and see what works best for you.
Join a community: Joining a community of like-minded developers can be a great way to get support and encouragement. Whether it's a local meetup or an online forum, having a group of people to bounce ideas off of can be invaluable.
Take breaks: It's important to take breaks from coding and tutorials. Give your brain time to process what you've learned and recharge your creativity. Go for a walk, read a book, or do something else that you enjoy.
Embrace failure: Failure is a natural part of the learning process. Don't be afraid to make mistakes or try something new. Embrace failure as an opportunity to learn and grow as a developer.

Breaking free from tutorial addiction isn't easy, but it's essential if you want to grow as a developer. Remember to start small, experiment with what you've learned, join a community, take breaks, and embrace failure. By following these tips, you'll be on your way to becoming a confident, independent developer.

DEV Community: Japheth Joepari

Laravel Eloquent on Steroids: From 3s to 300ms

Step 1: Stop Pretending You Know — Measure It

Step 2: Replace all() With Smarter Data Retrieval

Step 3: Eliminating the N+1 Query Problem

Step 4: Stop Carrying the Whole Database in Your Backpack

Step 5: Count in the Database, Not in PHP

Step 6: Index Your Damn Columns

Step 7: Cache the Heavy Stuff

Step 8: Stop Writing Heavy Loops Like an Amateur

Step 9: Spy on Your Queries

Real-World Before & After

The Blunt Conclusion

Fixing Laravel CSS Not Displaying After Deployment

Understanding the Issue

Common Symptoms

The Solution

Step-by-Step Guide

Explanation of the Code

Why This Works

Additional Tips

Conclusion

JSON Demystified: A Comprehensive Guide For Beginers

What is JSON?

How Does JSON Work?

JSON Syntax

Objects

Arrays

Values

Usage of JSON

Benefits

How to use JSON

Best Practices for Using JSON

Conclusion

FAQs

Understanding Fetch APIs: A Beginner's Guide

What are Fetch APIs?

How do Fetch APIs work?

Benefits of Fetch APIs

Simplicity and consistency

Promises-based

Support for modern web standards

Better error handling

Best practices for Fetch API implementation

Using the async/await syntax

Handling errors properly

Using CORS headers

Conclusion

FAQs

React Toast: Adding Quick and Simple Notifications to Your React App

Introduction

What is React Toast?

Types of React Toasts

How to Install and Use React Toast

Importing and Using React Toast

Customizing React Toast

Creating Custom Toast Components

Why use of React Toast ?

FAQs

complete guide to React Drag-and-Drop Image Preview with Dropzone.js

Overcoming Developer Shiny Object Syndrome: How to Stay Focused on Your Goals

The Allure of Shiny Objects

Escaping the Tutorial Addiction: A Guide for Entry-Level Developers

Step 2: Replace `all()` With Smarter Data Retrieval

Using the `async/await` syntax