<![CDATA[Blogs by Dhruv Raval on dhruvraval.dev]]> en-US Thu, 09 Jan 2025 07:32:29 +0000 <![CDATA[How do I get the value of text input field using JavaScript?]]> https://dhruvraval.dev/how-do-i-get-the-value-of-text-input-field-using-javascript You can use onkeyup when you have more than one input field. Suppose you have four or input. Then  "document.getElementById('something').value" is annoying. We need to write four lines to fetch the value of an input field.

So, you can create a function that store value in object on keyup or keydown event.

Example:

<div class="container">
    <div>
        <label for="">Name</label>
        <input type="text" name="fname" id="fname" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Age</label>
        <input type="number" name="age" id="age" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Email</label>
        <input type="text" name="email" id="email" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Mobile</label>
        <input type="number" name="mobile" id="number" onkeyup=handleInput(this)>
    </div>
    <div>
        <button onclick=submitData()>Submit</button>
    </div>
</div>

<script>
    const data = { };
    
    function handleInput(e){
        data[e.name] = e.value;
    }

    function submitData(){
        console.log(data.fname); // Get the first name from the object
        console.log(data); // return object
    }
</script>
]]> ]]> Thu, 09 Jan 2025 07:31:41 +0000 <![CDATA[Creating a Rough Chart with Chart.js and Rough.js]]> https://dhruvraval.dev/creating-a-rough-chart-with-chart-js-and-rough-js Chart.js is a popular JavaScript library that enables the creation of various types of charts.

Check this example to explore how to use Rough.js with Chart.js, a library that adds a hand-drawn, sketchy effect to charts. You can also use the custom font for chart.  

I am using "Indie Flower" font. You can add your font from google.

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Indie+Flower"><link rel="stylesheet" href="./style.css">
</head>
<body>

<canvas id="myChart"></canvas>

<div class="slidecontainer">
  <h4>Roughness</h4>
  <input type="range" min="0" max="10" value="1" class="slider" id="rnSlider">
</div>

<script src='https://cdn.jsdelivr.net/npm/chart.js@2.8.0'></script>
<script src='https://cdn.jsdelivr.net/npm/roughjs@3.1.0/dist/rough.js'></script>
<script src='https://cdn.jsdelivr.net/npm/chartjs-plugin-rough@0.2.0'></script>

</body>
</html>

Script

Chart.defaults.global.defaultFontFamily = '"Indie Flower", cursive';
Chart.defaults.global.defaultFontSize = 14;

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    datasets: [{
      data: [45, 20, 64, 32, 76, 51],
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      borderWidth: 1,
      label:"Orders"
    }]
  },
  plugins: [ChartRough],
  options:{
    plugins:{
      rough: {
        roughness:1,
      }
    }
  }
});

var slider = document.getElementById("rnSlider");
slider.oninput = function() {
  chart.options.plugins.rough.roughness = this.value;
  chart.update()
}
]]> ]]> Thu, 12 Oct 2023 05:53:15 +0000 <![CDATA[JavaScript Substring: The Hidden Gem to Supercharge Your Web Development Skills]]> https://dhruvraval.dev/javascript-substring-the-hidden-gem-to-supercharge-your-web-development-skills JavaScript is a powerful language for web development, but one feature often goes unnoticed: JavaScript substring. In this blog post, we'll explore how JavaScript substring can enhance your web development skills with ease and provide you with practical examples to get started.

# Extracting a Portion of a String

Let's say you have a string variable called sentence with the "Hello, world!". With JavaScript substring, you can extract a specific portion of this string.

/*
This will give you "Hello", which extracts
characters from index 0 to 4 (inclusive).
*/
var sentence = "Hello";
var sub_str = sentence.substring(0, 5)
console.log(sub_str);

# Example 2: Getting Part of a URL

Imagine you have a URL stored in a variable called URL with the value "https://www.example.com/article/12345". You can easily retrieve the article ID from the URL using a JavaScript substring.

/*
This will give you "12345", extracting the portion
of the string after the last "/" character.
*/
var url = "https://www.example.com/article/12345";
var article_id =  url.substring(url.lastIndexOf('/') + 1);
console.log(article_id);
]]> ]]> Fri, 04 Aug 2023 16:55:13 +0000 <![CDATA[Leveraging the Power of the <template> Tag in HTML for Dynamic Content Creation]]> https://dhruvraval.dev/leveraging-power-template-tag-html-dynamic-content-creation HTML, the backbone of the web, has evolved over the years to accommodate modern web development needs. The <template> tag allows developers to define HTML content that can be easily cloned and used dynamically, enabling the creation of reusable components. In this article, we will explore the benefits of using the <template> tag, illustrated through an example.

Consider the following <template> tag example:

<template id='optionsRowTemplate'>
    <tr>
        <td>
            <input type="text" class="form-control" data-input="english" required>
        </td>
        <td>
            <input type="text" class="form-control" data-input="hindi" required>
        </td>
        <td>
            <input type="checkbox" class="form-control ckb-unset" data-input="is_ans">
        </td>
        <td>
            <a href="javascript:void(0)" class="remove_button remove_option" title="Remove option">
                <img src="<?php echo base_url(); ?>/public/images/remove-icon.png" alt="Remove">
            </a>
        </td>
    </tr>
</template>

Script:

let option_temp_id = 1;
$("#add_options").click(function () {
        var new_temp_id = 'new-' + option_temp_id;
        createOptionRow(new_temp_id);
        option_temp_id++;
})

function createOptionRow(id, option_en = '', option_hi = '', is_ans = false) {

    const tbody = document.querySelector("#optionsTbody");
    const template = document.querySelector("#optionsRowTemplate");

    // Clone the new row and insert it into the table
    const clone = template.content.cloneNode(true);

    let option_row = clone.querySelector('tr');
    let input_en = clone.querySelector('[data-input="english"]');
    let input_hi = clone.querySelector('[data-input="hindi"]');
    let input_is_ans = clone.querySelector('[data-input="is_ans"]');

    option_row.dataset.optionId = id;

    input_en.name = `options[${id}][option_en]`;
    input_en.value = option_en;

    input_hi.name = `options[${id}][option_hi]`;
    input_hi.value = option_hi;

    input_is_ans.name = `options[${id}][correct_ans]`;
    input_is_ans.checked = is_ans;

    tbody.appendChild(clone);
}

In this example, we have a template for an options row in a multi-language quiz application. Each row contains an input field for the English and Hindi translations of an option, a checkbox to mark it as the correct answer, and a remove button to delete the option.

Now, let's delve into the benefits of using the <template> tag:

1. Reusability: The primary advantage of using <template> is reusability. Instead of hard-coding the entire row structure in your JavaScript whenever you need to add a new option dynamically, you can simply clone the template and modify its contents. This reduces redundancy and keeps your code clean and maintainable.

2. Performance: By creating the template beforehand and cloning it, you eliminate the need for repetitive DOM manipulation when adding new options. This leads to improved performance as you're working with lightweight clones instead of constructing elements from scratch every time.

3. Readability and Maintainability: With the template clearly defined in the HTML section, your JavaScript code becomes more readable, focusing on the dynamic aspects rather than constructing HTML elements. Additionally, any changes to the template are reflected instantly across all instances where it is used, making maintenance more straightforward.

4. Data Binding: The template can be customized dynamically by binding data to its elements. In the provided example, the createOptionRow() function takes in data (option_en, option_hi, and is_ans) and populates the cloned template accordingly. This enables data-driven websites, where content can be updated dynamically based on user inputs or fetched data.

5. Separation of Concerns: Using <template> promotes the separation of concerns between HTML structure and JavaScript logic. Designers can focus on the HTML template, while developers handle the dynamic behavior. This division of labor enhances collaboration and streamlines the development process.

In conclusion, the <template> tag in HTML is a powerful tool for creating reusable, dynamic content, contributing to better performance, maintainability, and readability of your code. By leveraging the benefits of the <template> tag, you can enhance the interactivity and user experience of your web applications.

So, the next time you find yourself needing to create dynamic elements, consider using the <template> tag to unlock its full potential and simplify your development process. Happy coding!

Remember to include the necessary JavaScript libraries, such as jQuery, if you plan to use the provided example code in your project.

]]> ]]> Mon, 21 Aug 2023 06:12:35 +0000 <![CDATA[Managing Old Data in Laravel with Mass Pruning]]> https://dhruvraval.dev/laravel-mass-pruning-guide As applications grow, so does their data. Managing old, unnecessary records becomes crucial for maintaining database performance and application efficiency. Laravel, with its constant evolution, introduces the powerful Mass Pruning feature, making it easier than ever to clean up outdated data.

In this blog post, we’ll explore the Mass Pruning feature, its advantages, and how to implement it in your Laravel applications.

Why Prune Old Data?

Over time, applications accumulate data that may no longer be needed. Examples include:

  • Expired user sessions.

  • Old logs or audit trails.

  • Orders or records that exceed a retention period.

Laravel’s Mass Pruning

Laravel’s Mass Pruning simplifies the process of removing old records. By defining a prunable method within your model, you can specify the criteria for data deletion. This method integrates seamlessly with Laravel’s task scheduling and queuing system, ensuring efficient and controlled cleanup processes.

Setting Up Mass Pruning

Step 1: Add the Prunable Trait

Use the Prunable trait in your model. This trait provides the necessary functionality for mass pruning.

Step 2: Define the prunable Method

In the prunable method, define the query logic for selecting records to delete. For instance, let’s prune orders older than one year:

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Prunable;

class Order extends Model
{
    use Prunable;

    /**
     * Get the prunable query.
     */
    protected function prunable()
    {
        return static::where('created_at', '<', now()->subYear());
    }
}

Step 3: Schedule the Pruning

Use Laravel’s task scheduling to automate the pruning process. Open the App\Console\Kernel.php file and schedule the pruning job:

protected function schedule(Schedule $schedule)
{
    $schedule->call(function () {
        Order::prune();
    })->daily();
}

This configuration ensures that old orders are deleted daily.

Step 4: Handle Pruning Events (Optional)

You can handle events during the pruning process, such as logging or notifying administrators. Override the pruning or pruned methods in your model:

protected function pruning()
{
    Log::info('Pruning orders older than a year.');
}

protected function pruned()
{
    Log::info('Pruning completed successfully.');
}

Advantages of Mass Pruning

  • Automation: Set up once and automate the cleanup process.

  • Performance: Improve query speeds by keeping the database lean.

  • Flexibility: Define custom pruning criteria tailored to your application’s needs.

  • Scalability: Handle large datasets without manual intervention.

Use Cases

  • Cleaning up old user-generated content.

  • Removing outdated records from logs or caches.

]]> ]]> Thu, 02 Jan 2025 06:31:42 +0000 <![CDATA[Unveiling the NVIDIA RTX 50 Series: The Next Frontier in Graphics Technology]]> https://dhruvraval.dev/nvidia-rtx-50-series-launch-details Unveiling the NVIDIA RTX 50 Series: The Next Frontier in Graphics Technology

The world of gaming and content creation has just reached a groundbreaking milestone with the launch of NVIDIA’s RTX 50 Series graphics cards. Designed to redefine performance, efficiency, and visual fidelity, these cards leverage cutting-edge technologies to deliver an unparalleled experience for gamers, creators, and professionals. Here’s everything you need to know about the RTX 50 Series lineup.

RTX 50 Series Lineup and Specifications

1. GeForce RTX 5090

Price: $1,999
Key Features:

  • 21,760 CUDA cores

  • 32 GB GDDR7 memory with a 512-bit interface

  • Memory bandwidth: 1,792 GB/s

  • Base clock: 2.01 GHz | Boost clock: 2.41 GHz

  • Up to 2x the performance of the RTX 4090

As the flagship model, the RTX 5090 delivers unmatched performance for ultra-high-resolution gaming, professional-grade rendering, and AI workloads. With the new Blackwell architecture and DLSS 4 technology, it sets a new benchmark for speed and efficiency.

2. GeForce RTX 5080

Price: $999
Key Features:

  • 10,752 CUDA cores

  • 16 GB GDDR7 memory on a 256-bit bus

  • Memory bandwidth: 960 GB/s

  • Base clock: 2.3 GHz | Boost clock: 2.62 GHz

The RTX 5080 is designed for gamers seeking next-level performance without breaking the bank. With advanced ray tracing and AI enhancements, this card excels in 4K gaming and creative workflows.

3. GeForce RTX 5070 Ti

Price: $749
Key Features:

  • 8,960 CUDA cores

  • 16 GB GDDR7 memory with a 256-bit interface

  • Memory bandwidth: 896 GB/s

  • Base clock: 2.3 GHz | Boost clock: 2.45 GHz

Striking a balance between price and performance, the RTX 5070 Ti is perfect for high-performance gaming and demanding creative tasks. It’s a great choice for gamers looking to experience next-gen technology at a mid-tier price.

4. GeForce RTX 5070

Price: $549
Key Features:

  • 6,144 CUDA cores

  • 12 GB GDDR7 memory on a 192-bit bus

  • Memory bandwidth: 672 GB/s

  • Base clock: 2.16 GHz | Boost clock: 2.51 GHz

As the entry-level model in the RTX 50 Series, the RTX 5070 provides exceptional value for 1080p and 1440p gaming while still packing enough power for creative projects and productivity tasks.

Next-Gen Technologies in the RTX 50 Series

1. Blackwell Architecture

The RTX 50 Series introduces the Blackwell GPU architecture, delivering significant improvements in performance, efficiency, and AI processing capabilities. This architecture enables the cards to handle complex workloads with ease, making them ideal for gaming, content creation, and AI research.

2. DLSS 4

NVIDIA’s latest AI-driven upscaling technology, DLSS 4, takes image quality to new heights. Gamers can enjoy smoother gameplay with higher frame rates, even at ultra-high resolutions, without compromising visual fidelity.

3. Advanced Ray Tracing

With improved ray tracing cores, the RTX 50 Series offers more realistic lighting, reflections, and shadows, elevating the immersion in games and 3D applications.

4. Enhanced Efficiency

The RTX 50 Series is designed to be more power-efficient, reducing heat output and enabling quieter operation, even under heavy loads. This makes it a great choice for gamers and professionals who need consistent performance during long sessions.

Release Dates and Availability

  • GeForce RTX 5090 and RTX 5080: Available starting January 30, 2025

  • GeForce RTX 5070 Ti and RTX 5070: Available in February 2025

These cards will be available through NVIDIA’s official website and authorized retailers worldwide.

 

Why Upgrade to the RTX 50 Series?

If you’re a gamer, content creator, or professional looking for the latest and greatest in graphics technology, the RTX 50 Series is a worthy investment. With groundbreaking performance, future-ready features, and improved efficiency, these cards offer something for everyone.

Conclusion

The NVIDIA RTX 50 Series is not just an upgrade—it’s a revolution in graphics technology. Whether you’re chasing ultra-high frame rates, diving into photorealistic virtual worlds, or tackling demanding professional tasks, the RTX 50 Series has you covered.

]]> ]]> Tue, 07 Jan 2025 12:41:55 +0000 <![CDATA[Lazy Load Components with React.lazy: A Beginner’s Guide]]> https://dhruvraval.dev/lazy-load-components-with-react-lazy When building React applications, performance is always a top priority. One powerful technique for improving performance is lazy loading—a method of loading parts of your app only when they are needed, rather than loading everything upfront. This can significantly speed up page load times, especially for larger applications.

In this post, we'll look at how to use React.lazy to easily lazy load components and improve your app’s performance.

What is Lazy Loading?

Lazy loading is a technique where you defer loading certain parts of your app until they are actually required. This is especially useful for large applications that contain many components and libraries. By loading components only when the user interacts with them (such as when they navigate to a certain page), you can reduce the initial loading time of your app.

How React.lazy Works

React.lazy allows you to dynamically import components. Instead of importing components at the top of your file like usual, React will only load them when needed. This can be particularly useful for things like modals, pop-ups, or routes that users may not always visit.

Example of Lazy Loading a Component

Let’s say you have a large component that you don’t want to load immediately, but only when the user interacts with it. Here’s how you can use React.lazy to load that component on demand:

import React, { Suspense } from 'react';

// Lazy load the component
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <h1>Welcome to my app!</h1>
      
      {/* Use Suspense to handle the loading state */}
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

How It Works:

  • React.lazy: This function takes a callback that dynamically imports the component. In this example, the LazyComponent will only be loaded when it is rendered in the UI.

  • Suspense: Since the component is being loaded lazily, we need to wrap it in Suspense. This is a built-in React component that lets you define a fallback UI (like a loading spinner or text) while the lazy-loaded component is being fetched.

Why Use React.lazy?

Lazy loading offers several benefits:

  1. Faster initial load: By loading components only when needed, you can reduce the amount of JavaScript loaded initially. This results in a faster loading time for your app.
  2. Better performance: Lazy loading helps with overall performance by splitting your app into smaller bundles, which can be downloaded as needed.
  3. Improved user experience: Instead of waiting for the entire app to load, users can start interacting with the parts that are immediately available, while other components load in the background.

When Should You Use React.lazy?

React.lazy is most beneficial when:

  • You have large components or libraries that aren’t critical for the initial render.
  • Your app has multiple pages or routes, and some pages are less frequently visited.
  • You want to improve the performance of a large app with many components.

Important Notes:

  • Error boundaries: It's a good idea to wrap lazy-loaded components in Error Boundaries to handle any loading errors gracefully.
  • SEO Considerations: Since React.lazy relies on JavaScript, the content won’t be available for search engines to index unless you use server-side rendering (SSR).
]]> ]]> Thu, 09 Jan 2025 07:32:29 +0000