Forem: Giovanni Panasiti

Building Modular Rails Applications: A Deep Dive into Rails Engines Through Active Storage Dashboard

Giovanni Panasiti — Wed, 09 Jul 2025 12:30:14 +0000

I've been building Rails applications for the last 10 years on a daily base and almost all of them use active storage now. Users are uploading files and then the questions start rolling in from the team and they are always the same:

"How much storage are we actually using?"
"Can we see which files aren't attached to anything anymore?"
"What types of files are users uploading the most?"
"Is there a way to browse through all our stored files?"

I usually open the Rails console, write a few queries, and get the answers for the team or for the stakeholders. But you know this isn't sustainable. What I need is a proper dashboard, something visual, something that non-technical team members can use, something that doesn't require SSH access to production servers.

This is exactly the problem I faced, and it led me down a fascinating journey into the world of Rails engines, ultimately resulting in the creation of Active Storage Dashboard, a mountable Rails engine that provides a modern interface for monitoring and managing Active Storage data. Always the same screen for every app, over and over. Easy to mount and easy to use.

Introducing Active Storage Dashboard

Active Storage Dashboard is more than just a simple admin interface. It's a fully-featured Rails engine that seamlessly integrates into any Rails application, providing immediate visibility into your file storage ecosystem. With zero external dependencies (pure vanilla JavaScript and CSS), it offers a beautiful, animated interface that feels natural in modern web applications.

The gem provides comprehensive insights including:

Real-time storage statistics and usage metrics
Browsable interfaces for blobs, attachments, and variant records
Advanced filtering capabilities for finding specific files
Direct download functionality from the dashboard
Maintenance tasks for cleaning up orphaned files
Support for both table and card view layouts
Beautiful visualizations of content type distributions

Active Storage Dashboard is a Rails engine, and understanding Rails engines opens up a whole new world of possibilities for Ruby developers so I used this experience to share my journey and to invite you to do the same and try to use engines more often.

Rails Engines: The Heroes of Modular Design

Rails engines are perhaps one of the most powerful yet underutilized features of the Ruby on Rails framework. At their core, engines are miniature Rails applications that can be mounted inside a host Rails application. They can come complete with their own models, views, controllers, routes, and assets—essentially everything a Rails app has, but designed to be pluggable and reusable.

Think of Rails engines as the Ruby equivalent of microservices, but without the operational complexity. They allow you to build self-contained features that can be shared across multiple applications or extracted from existing monoliths when certain functionalities become too complex or need to be reused.

The Anatomy of a Rails Engine

Looking at the Active Storage Dashboard's directory structure reveals the beautiful symmetry between engines and regular Rails applications:

app/
├── controllers/
├── helpers/
└── views/
config/
├── routes.rb
lib/
├── active_storage_dashboard.rb
├── active_storage_dashboard/
│   ├── engine.rb
│   └── version.rb

This structure should feel immediately familiar to any Rails developer. The app directory contains the MVC components, config holds the routes, and lib contains the engine's core logic. The key difference is the presence of the engine.rb file, which is where the magic happens.

The Engine Class: Where Configuration Meets Convention

Let's examine the heart of any Rails engine: the engine class itself.

module ActiveStorageDashboard
  class Engine < ::Rails::Engine
    isolate_namespace ActiveStorageDashboard

    initializer "active_storage_dashboard.url_options" do |app|
      ActiveStorageDashboard::Engine.routes.default_url_options = 
        app.routes.default_url_options
    end

    config.active_storage_dashboard = ActiveSupport::OrderedOptions.new

    config.before_initialize do
      config.active_storage_dashboard.each do |key, value|
        ActiveStorageDashboard.public_send("#{key}=", value)
      end
    end
  end
end

The isolate_namespace directive is crucial to ensures that all of the engine's components (models, controllers, helpers) are namespaced, preventing naming conflicts with the host application. This isolation is what allows engines to be truly modular and reusable.

Building a Production-Ready Engine: Lessons learned from Active Storage Dashboard

Creating a Rails engine that's both powerful and easy to use requires careful attention to several key areas. Let me walk you through the design decisions and implementation details that make Active Storage Dashboard a joy to integrate and use (or at least I hope so).

1. Routing and URL Generation

One of the trickiest aspects of building engines is handling routing correctly. Active Storage Dashboard uses a sophisticated approach to ensure URLs are generated properly regardless of where the engine is mounted:

# In routes.rb
ActiveStorageDashboard::Engine.routes.draw do
  root to: 'dashboard#index'

  resources :blobs, only: [:index, :show] do
    member do
      get 'download(/:disposition)', action: :download, as: :download
    end
  end

  resources :attachments, only: [:index, :show] do
    member do
      get 'download(/:disposition)', action: :download, as: :download
    end
  end

  resources :variant_records, only: [:index, :show]
end

Notice the optional disposition parameter in the download routes. This allows for flexible file handling—files can be downloaded as attachments or displayed inline in the browser.

2. Configuration Flexibility and Authentication Strategies

A well-designed engine should be configurable without being complicated, and security is often the first concern when integrating admin tools. Active Storage Dashboard provides multiple authentication strategies, allowing developers to choose the approach that best fits their application's existing security infrastructure.

Controller-Based Authentication

The engine allows host applications to customize the base controller class, enabling seamless integration with existing authentication systems:

module ActiveStorageDashboard
  mattr_accessor :base_controller_class, default: "ActionController::Base"
end

This approach means that if your application already has an AdminController with authentication filters, you can simply configure the engine to inherit from it:

# In config/application.rb or config/environments/production.rb
config.active_storage_dashboard.base_controller_class = "AdminController"

This pattern is particularly powerful because it automatically inherits all the authentication logic, authorization rules, and even layout configurations from your existing admin infrastructure. Your AdminController might look something like:

class AdminController < ApplicationController
  before_action :authenticate_admin!
  before_action :set_admin_timezone
  layout 'admin'

  private

  def authenticate_admin!
    redirect_to login_path unless current_user&.admin?
  end
end

By setting this as the base controller, every Active Storage Dashboard controller automatically requires admin authentication without any additional configuration.

Route-Level Authentication Constraints

For applications that prefer to handle authentication at the routing layer, Active Storage Dashboard works seamlessly with Rails route constraints. This approach is often cleaner and more explicit:

# config/routes.rb
authenticate :user, -> (user) { user.admin? } do
  mount ActiveStorageDashboard::Engine, at: "/active-storage-dashboard"
end

For Devise users, the integration is even more sophisticated. You can use complex constraints that check both session and warden authentication:

# config/routes.rb
constraints lambda { |req| 
  req.session[:user_id].present? || 
  (req.env['warden'] && req.env['warden'].user(:user)) 
} do
  mount ActiveStorageDashboard::Engine, at: "/active-storage-dashboard"
end

3. Cross-Rails Version Compatibility

One of the biggest challenges in building Rails engines is maintaining compatibility across different Rails versions. Active Storage Dashboard handles this gracefully, detecting features available in different Rails versions and adapting accordingly:

if defined?(ActiveStorage::VariantRecord)
  @variant_records = paginate(ActiveStorage::VariantRecord.order(id: :desc))
else
  @variant_records = []
end

This approach ensures the engine works seamlessly from Rails 5.2 all the way to Rails 8.x, degrading gracefully when newer features aren't available.

4. Zero External Dependencies Philosophy

In an ecosystem often plagued by dependency hell, Active Storage Dashboard takes a radical approach: zero external dependencies. The entire UI is built with vanilla JavaScript and CSS, featuring smooth animations, responsive layouts, and modern design patterns—all without requiring jQuery, Bootstrap, or any other framework.

This decision pays dividends in several ways:

Faster load times
No version conflicts with host applications
Easier maintenance and debugging
Better long-term stability

5. Database-Agnostic Implementation

The engine's statistics and querying features are carefully designed to work across different database adapters. Here's how the dashboard handles timeline data generation across SQLite, MySQL, and PostgreSQL:

def adapter_specific_timeline_data
  adapter = ActiveRecord::Base.connection.adapter_name.downcase

  if adapter.include?('sqlite')
    result = ActiveRecord::Base.connection.execute(
      "SELECT strftime('%Y-%m', created_at) as month, COUNT(*) as count " +
      "FROM #{table_name} GROUP BY strftime('%Y-%m', created_at)"
    )
  elsif adapter.include?('mysql')
    result = ActiveRecord::Base.connection.execute(
      "SELECT DATE_FORMAT(created_at, '%Y-%m') as month, COUNT(*) as count " +
      "FROM #{table_name} GROUP BY DATE_FORMAT(created_at, '%Y-%m')"
    )
  else # PostgreSQL
    result = ActiveRecord::Base.connection.execute(
      "SELECT TO_CHAR(created_at, 'YYYY-MM') as month, COUNT(*) as count " +
      "FROM #{table_name} GROUP BY TO_CHAR(created_at, 'YYYY-MM')"
    )
  end
end

Efficient Pagination Without Gems

Rather than depending on gems like Kaminari or WillPaginate, the engine implements its own lightweight pagination:

def paginate(scope, per_page = 20)
  @page = [params[:page].to_i, 1].max
  scope.limit(per_page).offset((@page - 1) * per_page)
end

This approach keeps the engine lightweight while providing all the pagination features users need.

Smart File Preview Handling

The engine intelligently handles file previews based on content type and Rails version capabilities:

def previewable_blob?(blob)
  return false unless blob.present?

  content_type = blob.content_type
  image_types = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
  return true if image_types.include?(content_type)

  if defined?(ActiveStorage::Blob.new.preview) && 
     blob.respond_to?(:previewable?) && 
     blob.previewable?
    return true
  end

  false
end

Rake Tasks for Maintenance

One of the most requested feature, that wansn't present in the first versions was the ability to purge orphan files. I found a rake task to be the most efficient way to tackle this problem since every other solution would have required to use a queue system to schedule a massive deletion. I provided powerful maintenance tasks that can be run via command line:

namespace :active_storage do
  namespace :dashboard do
    desc "Purge blobs that have no attachments"
    task purge_orphans: :environment do
      ActiveStorageDashboard::OrphanPurger.call
    end

    desc "Re-analyze blobs that are not yet analyzed"
    task reanalyze: :environment do
      ActiveStorageDashboard::Analyzer.call
    end

    desc "Recreate missing or outdated variants"
    task regenerate_variants: :environment do
      ActiveStorageDashboard::VariantRegenerator.call
    end
  end
end

These tasks showcase how engines can provide not just UI features but also operational tools for maintaining application health.

The Broader Impact: Why Rails Engines Matter

The success of gems like Active Storage Dashboard points to a larger trend in the Rails ecosystem: the need for modular, reusable components that can be easily integrated into existing applications. Rails engines fulfill this need perfectly, offering several advantages:

1. Rapid Feature Development

Engines allow teams to develop features in isolation, with their own test suites and dependencies. This parallel development model can significantly speed up delivery times for complex features. We are using this pattern to build a bunch of specific-features that are shared in all our rails applications. This is basically allowing us to replace expensive microservices with engines.

2. Code Reusability Across Projects

Once built, an engine can be used across multiple applications. Imagine building an authentication engine, a payment processing engine, or an admin dashboard engine once and reusing it across all your projects.

3. Gradual Monolith Decomposition

For teams looking to break apart monolithic applications, engines provide a stepping stone. Features can be extracted into engines while still running in the same process, allowing for gradual decomposition without the operational overhead of microservices.

4. Open Source Contribution Opportunities

Engines make it easier to extract and share functionality with the community. A feature that starts as an internal tool can be polished and released as an open-source engine, benefiting the entire Rails ecosystem. This is the case of active_storage_dashboard

Best Practices for Engine Development I Learned

Based on my experience building Active Storage Dashboard and studying other successful engines, here are key best practices for engine development:

1. Namespace Everything

Always use isolate_namespace and ensure all your classes, modules, and database tables are properly namespaced. This prevents conflicts and makes your engine truly reusable.

module ActiveStorageDashboard
  class Engine < ::Rails::Engine
    isolate_namespace ActiveStorageDashboard
  end
end

This isolation extends beyond just Ruby classes. Consider these namespacing strategies:

Database tables: Prefix all tables with your engine name (e.g., active_storage_dashboard_settings)
CSS classes: Use a unique prefix for all styles (e.g., .asd-dashboard, .asd-card)
JavaScript functions: Wrap all JS in a namespaced object
Helper methods: Ensure helpers don't conflict with common names
Route helpers: The engine's routes are automatically namespaced

Remember that even seemingly unique names can conflict. A method like format_bytes might exist in the host application, so I suggesto you to namespace it within its own helper module.

2. Provide Configuration Options

Make your engine configurable but provide sensible defaults. Users should be able to get started quickly while having the flexibility to customize as needed.

Beyond basic configuration, consider these patterns:

module ActiveStorageDashboard
  # Class-level configuration
  mattr_accessor :base_controller_class, default: "ActionController::Base"
  mattr_accessor :per_page, default: 20
  mattr_accessor :enable_delete, default: false

  # Configuration block pattern
  def self.configure
    yield self
  end

  # Configuration validation
  def self.validate_configuration!
    unless base_controller_class.constantize < ActionController::Base
      raise ConfigurationError, "base_controller_class must inherit from ActionController::Base"
    end
  end
end

This allows for elegant configuration:

ActiveStorageDashboard.configure do |config|
  config.base_controller_class = "AdminController"
  config.per_page = 50
  config.enable_delete = Rails.env.development?
end

3. Document Thoroughly

Include comprehensive README documentation with clear installation instructions, configuration options, and usage examples. Consider including screenshots for UI-heavy engines.

Great documentation should include:

Quick Start Guide: Get users running in under 5 minutes
Detailed Installation: Cover edge cases and troubleshooting
Configuration Reference: Document every option with examples
Screenshots/GIFs: Visual elements dramatically improve comprehension
Upgrade Guides: Help users migrate between versions
API Documentation: If your engine provides programmatic interfaces
Contributing Guidelines: Encourage community involvement

4. Keep Dependencies Minimal

Every dependency you add is a potential source of conflicts for users. When possible, implement functionality yourself rather than pulling in additional gems.

Active Storage Dashboard demonstrates this principle by implementing:

Custom pagination instead of Kaminari/WillPaginate
Vanilla JS instead of jQuery or Stimulus
Pure CSS instead of Bootstrap or Tailwind
Native Rails helpers instead of additional view libraries

When you must add dependencies:

Pin to specific versions cautiously
Document why each dependency is necessary
Consider making optional features that require additional gems
Regularly audit and update dependencies

5. Design for Extension

Provide hooks and extension points where users might want to customize behavior. Use Rails' built-in patterns like concerns and callbacks to make extension natural.

module ActiveStorageDashboard
  module Controllers
    module Blobs
      extend ActiveSupport::Concern

      included do
        before_action :set_blob, only: [:show, :download]
        after_action :track_download, only: [:download]
      end

      # Users can override these methods in their own controllers
      def blob_scope
        ActiveStorage::Blob.all
      end

      private

      def track_download
        # Override this method to add download tracking
      end
    end
  end
end

6. Handle Errors Gracefully

Engines should never crash the host application. Implement robust error handling:

def load_timeline_data
  begin
    # Complex database query
  rescue ActiveRecord::StatementInvalid => e
    Rails.logger.error "Timeline data error: #{e.message}"
    @timeline_data = []
  rescue => e
    Rails.logger.error "Unexpected error: #{e.message}"
    generate_fallback_data
  end
end

7. Security First

Never trust user input and always consider security implications:

Sanitize all user inputs
Use strong parameters
Implement CSRF protection
Validate file types and sizes
Never expose internal IDs in URLs when possible
Rate limit expensive operations

8. Semantic Versioning

Follow semantic versioning religiously:

MAJOR: Breaking changes
MINOR: New features (backward compatible)
PATCH: Bug fixes

Document breaking changes clearly in your CHANGELOG.

Engines as a Path to Better Software Architecture

Active Storage Dashboard demonstrates that Rails engines aren't just a nice-to-have feature. They're a powerful tool for building maintainable and reusable solutions to common problems. By embracing engines, we can build better software architectures that are both monolithic in deployment and modular in design.

The journey of building this engine taught me that the Rails ecosystem still has much to offer in terms of architectural patterns and best practices. Engines provide a middle ground between monolithic applications and microservices, offering the benefits of modularity without the operational complexity.

Go open source if you can

For developers looking to level up their Rails skills, I encourage you to explore engines. Start by extracting a feature from an existing application into an engine. Build tools that solve problems you face repeatedly. Share your solutions with the community. The Rails ecosystem thrives when developers create and share modular, reusable components.

The next time you find yourself building a feature that could benefit other applications, whether it's an admin dashboard, an authentication system, or a domain-specific tool, consider building it as an engine. You might just create the next essential tool that thousands of developers will thank you for.

Active Storage Dashboard is available on GitHub at https://github.com/giovapanasiti/active_storage_dashboard, and I welcome contributions, feedback, and stories about how you're using it in your applications. Together, we can continue to push the boundaries of what's possible with Rails engines and create a more modular, maintainable future for Rails applications.

Forget CSS Tricks and Complicated Design: Why Words and Images Actually Sell Your Landing Page

Giovanni Panasiti — Wed, 25 Jun 2025 09:43:21 +0000

During these last days I'm participating in discussions on a redesign of a landing page for an existing product. It may be perceived by many as an easy task, but it's not. The challenge lies in creating a landing page that not only looks good but also effectively communicates the value proposition of the product.

It's very easy to be dragged into aesthetics, but they are not enough. The landing page must be easy to navigate and to read. It must use a language that is easy to understand and that speaks directly to the target audience. Additionally, the content must be clear, concise, and compelling. It must answer the question "What's in it for me?" and provide a clear call-to-action. The problem is way too often that we forget about the importance of words and images in selling our landing page.

I've been lucky enough to be working for almost 10 years alongside Robin Good during which I've learned a lot but one thing stands above all: the power of words and images, content is king.

It's all about communication

Think about the landing page as a simple conversation. You're meeting someone for the first time. You wouldn't start by shouting random buzzwords at them. Instead, you'd clearly and calmly explain what you do, why it matters, and how you can help them. This is exactly what your landing page should do. This is like the basic of how to sale something.

The words you choose should be clear, direct and honest. Fancy words or complicated jargon won't impress the visitor, they will confuse them or worse they could annoy them enough to leave the website. The best language strategy you can use is speaking about the problem that your product solves and how it can help the visitor; don't focus on how good or beautiful your solution is. This shift in the language will make a total difference from the reader point of view. Avoid vague promises or fluffy statements that don't add anny value. Clarity and honesty will help you build trust while the lack of it will make the visitor feel manipulated and suspicious.

Images communicate

Images and videos matter too. But that doesn't mean stock photos of smiling people around a laptop. Visitors see through that instantly. Use images that actually show your product clearly or reinforce your message in a meaningful way. Real screenshots, clear examples, or even a simple illustration can say much more than a slick, meaningless photo.

What it's true for images is obviously valid for videos too. . A short, clear, and straightforward video can quickly demonstrate how your product works or solve a visitor’s immediate concern. Keep it concise and to the point. A well-made video is often worth thousands of words, but remember, it must be relevant and valuable, not just pretty.

Design sells

"Design sells"; you've probably heard that before, and I think it's true but too often the context is not well understood in this sentence, design doesn't mean just aesthetics. Design should be about creating an experience that resonates with your audience. A well-designed landing page must guide visitors through your message, making it easier for them to understand and engage with your product or service. The whole design should have this goal instead of just mean you need a beautiful design.

Design, of course, matters—but only as support. Great typography and clean layouts won't save a poorly communicated message. Make sure your page is readable, structured simply, and fast to load. Let your words and visuals shine. Good design doesn't scream at the visitor; it quietly guides them through your message.

So before you spend another hour tweaking gradients or padding, ask yourself: Have I clearly told visitors what I offer and why it matters to them? If the answer is no, put away your CSS editor. Open your notes app instead and start finding the right words to communicate your message effectively.

Open Source as Your Resume: Why Your Projects Speak Louder than Your CV

Giovanni Panasiti — Wed, 18 Jun 2025 21:55:59 +0000

When I first started writing the Active Storage Dashboard gem, I wasn't aiming to change the world. I had a simple problem: managing attachments in Rails apps was tedious, error-prone, and not at all visible. But a small personal itch can spark bigger things. Open source isn't just about code, it’s about showing who you are, what you value, and how you solve problems. It’s the ultimate resume.

Think about it. A resume just lists skills. It's you saying “I can do Ruby,” or “I'm familiar with Rails.” But an open-source project says, “Here's how I build things. Here's how I think.” It shows your ability to take something from an idea on a napkin all the way to a tool people actually use.

Scratch your own itch

Begin small. Solve an issue that genuinely irritates you. It doesn’t have to be fancy, it have to be useful. Then you share it online. Other developers will eventually start using it, sharing feedback, and contributing code. Whether your project grows large or stays modest, it remains visible proof of your coding style, your clarity, and your creativity.

Open source teaches essential professional skills

Building in the open taught me more than any job ever did. It taught me how to handle feedback; both positive and harsh. It showed me how to clearly document my ideas. It forced me to write better code because anyone could see it. And, crucially, it taught me to ship features that mattered.

Employers (should) love open source because it reduces uncertainty. If they see you’ve created something useful, maintained it, and grown a community, there's no guessing if you can handle real-world challenges. You've already proven it.

But open source isn't just for job hunting. It’s also about leaving a mark. You will see, eventually, that your project will become more than code. It will become proof that you can turn ideas into reality. That you can work with others. That you can take responsibility for something people relied on.

Open Source means relationships

Moreover, it's about showing empathy. Every contribution, every issue fixed, every pull request merged isn't just technical, it's human. It shows that you understand what others needed, what frustrated them, and how to make things easier for everyone involved.

Creating an open source project also helps you expand your professional network. Collaborating openly online connects you with people you'd never otherwise meet. Developers from different continents, cultures, and industries will offer insights and perspectives. They will improve your thinking, broadened your horizons, and eventually will make you a better developer overall.

Open source teaches humility and collaboration

Managing a project publicly quickly teaches humility. Your way isn't always best, and you'll learn to value diverse approaches. You realize that clarity, simplicity, and readability matter immensely. Great code and great documentation are understandable to anyone.

** If you’re still wondering if your side project is worth sharing you should probably read the post again because the answer is obviously YES!**

Unlock Active Storage: A Beautiful Dashboard for Your Rails App 🚀

Giovanni Panasiti — Fri, 16 May 2025 12:39:20 +0000

Hey Rails devs! 👋

If you're using Active Storage in your Ruby on Rails applications (and let's be honest, it's pretty awesome for handling file uploads!), you've probably experienced its power and simplicity. But have you ever wished you could easily see what's going on under the hood? Like, a proper dashboard to visualize your blobs, attachments, and overall storage usage?

I found myself wanting exactly that. Digging through the console or database to check on files, their metadata, or how much space they're consuming can be a bit tedious. That's why I built Active Storage Dashboard!

What is Active Storage Dashboard?

Active Storage Dashboard is a mountable Rails engine that provides a sleek, modern, and (dare I say) beautiful dashboard to monitor and inspect your Active Storage data. It's designed to be:

Informative: Get an instant overview of your storage stats.
Intuitive: Easily browse and dive into details.
Lightweight: No external JavaScript or CSS dependencies! Just clean, vanilla JS and CSS.

The "Why": Solving a Common Pain Point

Active Storage is fantastic for developers, but it lacks a built-in user interface for administrators or developers to quickly:

See how many files have been uploaded.
Check the total storage consumed.
Quickly find a specific blob or attachment.
Inspect metadata or preview files without writing custom code.
Understand the distribution of content types.

Active Storage Dashboard aims to fill this gap, providing a dedicated space for all things Active Storage within your app.

✨ Key Features You'll Love

📊 Comprehensive Dashboard Overview:
- Total Blobs, Attachments, and Variant Records counts.
- Total storage used (prettily formatted, of course!).
- Distribution of top content types.
- Latest activity feed.
- Average and largest file sizes.
- A cool count-up animation for stats!
🔍 Detailed Browsing & Inspection:
- Blobs List: View all your blobs with key info like filename, content type, size, and creation date. Switch between table and card views!
- Blob Details: See all attributes of a blob, its metadata, associated attachments, and variant records.
- Attachments List & Details: Similarly, browse and inspect all your attachments and their link to records and blobs.
- Variant Records (Rails 6.1+): If you're using variants, you can inspect those too!
🖼️ Media Previews:
- Directly preview images, videos, and audio files.
- Embed and view PDFs.
- See generated previews for other previewable file types.
⬇️ Easy Downloads: Download any file directly from the list or detail views.
📱 Responsive Design: The dashboard looks great on desktop and mobile devices.

🛠️ Installation & Usage: Get Up and Running in Minutes!

Add the gem to your Gemfile:
```
gem 'active_storage_dashboard'
```
Bundle install:
```
$ bundle install
```

Mount the engine in your config/routes.rb:

Rails.application.routes.draw do
  # ... your other routes
  mount ActiveStorageDashboard::Engine, at: "/active-storage-dashboard"
  # Pro-tip: Keep the mount path simple (no special characters)
  # for smooth URL generation within the engine.
end

That's it! Fire up your Rails server and navigate to /active-storage-dashboard (or whatever path you chose) to see the magic.

🔒 A Note on Security

This dashboard provides full visibility into your Active Storage data. For production environments, it's highly recommended to protect this route with authentication. Here's an example using Devise (assuming you have an admin? method on your User model):

# config/routes.rb
authenticate :user, ->(user) { user.admin? } do
  mount ActiveStorageDashboard::Engine, at: "/active-storage-dashboard"
end

Or a more generic approach for other authentication systems:

constraints lambda { |req| req.session[:user_id].present? && User.find_by(id: req.session[:user_id])&.admin? } do
  mount ActiveStorageDashboard::Engine, at: "/active-storage-dashboard"
end

Give It a Spin!

Whether you're debugging file upload issues, monitoring storage growth, or just curious about what's in your Active Storage, this dashboard can be a real timesaver.

I built this because I needed it, and I hope it can be useful to the wider Rails community too!

🔗 Check out the project on GitHub: https://github.com/giovapanasiti/active_storage_dashboard

Feel free to try it out, star the repo if you find it helpful, and open issues or PRs for any bugs or feature suggestions.

Happy coding!

MPM (MyProjectManager): A Simple CLI Tool to Organize and Navigate Your Projects

Giovanni Panasiti — Fri, 25 Apr 2025 07:50:20 +0000

I find managing software projects challenging, especially when dealing with multiple projects at once because I love side projects. I often struggle to quickly switch between projects or locate them on my computer. Sometimes a project is so far away in terms of cd .. that it really annoy me. This is precisely the problem "My Project Manager" (MPM) aims to solve.

This is the link to the repo:
GitHub

MPM is a command-line tool designed for developers who manage numerous projects. It simplifies organizing projects by letting users quickly add, categorize, list, and navigate between different project directories directly from the terminal. The entire user experience centers around efficiency, ease of use, and minimal interaction overhead.

What Exactly is MPM?

MPM stands for My Project Manager. It’s a CLI (Command-Line Interface) tool written in Go, which makes it portable, efficient, and easy to install across different platforms like Linux, macOS, and Windows. Its main goal is straightforward: help users manage project locations effortlessly. Its second goal is because I was getting bored that night.

When you have dozens of projects stored across different locations on your filesystem, remembering each path becomes cumbersome. With MPM, projects are registered once, and then users can navigate to these directories instantly by just typing a simple command.

Key Features

Adding Projects: Projects can be quickly added either manually, by specifying a name and path, or automatically using the current working directory.

mpm add -w -c your category

This adds the project in the current directory as path and folder name as name, but you can also choose name and path like so:

mpm add -n your_project_name -p /path/to/project -c project_category

Categorization: Projects can be grouped into categories for better organization. For example, you might have categories for work projects, personal projects, or open-source contributions.

Removing Projects: Easily remove any registered project without hassle.

mpm remove old_project_name

Quick Navigation

Users can navigate directly to a project's directory with a single command. This functionality significantly speeds up workflow.

mpm go my_project_name

Integration with a shell script wrapper means that MPM can change directories directly in your terminal environment.

Interactive Mode

This is my favorite

mpm i

MPM includes a sophisticated interactive mode, built using the Bubble Tea and Lipgloss libraries, which are specialized for creating beautiful terminal-based user interfaces.

This interactive mode allows browsing through projects visually in the terminal. Users can select a project to see more details or perform actions like opening it directly in an editor.

As you can see it integrates with popular code editors like VS Code, Sublime Text, Neovim, and even specialized editors like Zed or Cursor.

It can also directly open project directories in the native file explorer (Finder for macOS or default file manager on Linux).

I hope many people will find it useful

https://github.com/giovapanasiti/my_project_manager

Bootstrap Isn’t Dead: How Bootstrap Ninja’s “Flavours” Lets You Customize This Old Gem

Giovanni Panasiti — Tue, 21 May 2024 13:05:09 +0000

Introduction

For over a decade, Bootstrap has been the go-to framework for web developers seeking a reliable, responsive, and efficient way to build websites and web applications. Despite the rise of numerous modern frameworks, Bootstrap continues to be relevant and widely used. Since one of the major criticisms Bootstrap gets from other frameworks’ lovers is: “All Bootstrap websites looks the same“; we created Bootstrap Ninja’s “Flavours” to add a fresh layer of customization, making any flavour unique.

Bootstrap Ninja’s “Flavours”

What are “Flavours”?

“Flavours” is a new feature introduced by Bootstrap Ninja, aimed at revitalizing Bootstrap’s customization capabilities. This feature will allow developers to easily customize colors, fonts, and other design elements, giving them more control over the look and feel of their projects. We started with colors since it’s one of the most “impactful” factors on a website.

Try it now

Customizing Colors

The first feature of “Flavours” is the ability to tailor colors to match specific brand identities or design preferences. If you, like me, lack creativity we added an AI to help you generate palettes. Developers can now:

Choose from a palette of predefined color schemes or create their own.
Apply custom styles without diving deep into CSS, thanks to an intuitive interface.
Save the flavours to then retrieve them and also get the SCSS variables to add it to your current web project.

Future Implementations

We plan to expand the customization options even further. Future updates may include:

Pair fonts from a wide selection, ensuring typography aligns with the project’s aesthetic.
Advanced layout configurations for more complex grid systems.
Component styling options that allow deeper integration with existing designs.
Animation and interaction enhancements to bring more dynamism to web projects.
Borders and Buttons customizations.

While modern frameworks offer innovative features, new pipelines, and sometimes a more complex way to do simple things, Bootstrap’s ease of use remains unmatched. Its component-based structure and comprehensive documentation make it accessible to both beginners and experienced developers. Plus NinjaBootstrap fill the gap with Tailwind implementing some crucial utility classes that you may need. All of this plus the robust customization tool we are providing here allows you to have all that you need without learn a whole new CSS framework.

Bootstrap is far from dead. With the introduction of Bootstrap Ninja’s “Flavours,” it continues to evolve and adapt to modern web development needs. The enhanced customization options make it more flexible and versatile, ensuring it remains a viable choice for developers. While modern frameworks offer unique features and approaches, Bootstrap’s simplicity, robust community, and continuous improvements keep it at the forefront of web development. Embrace the new “Flavours” and rediscover the power and potential of Bootstrap in your next project.

https://ui.bootstrap.ninja/flavours/

NinjaBootstrap UI - A Pragmatic Approach To Bootstrap Reusable HTML Components

Giovanni Panasiti — Fri, 12 Apr 2024 09:52:14 +0000

I'm a backend developer long-established in the world of CSS frameworks with the only goal to ship my products faster and build UIs fast without losing focus on what matters the most to me as an engineer. I've always had a bit of a love/hate relationship with the tools of this trade since there's always too much complexity or something's missing depending on the tool itself.

https://youtu.be/UUuGCq4-9Mk

The framework I ended up using, very often, was Bootstrap. It was easy enough to integrate in my projects and I could easily deal with the few missing things. Then came TailwindUI, it caught my eye. Its well-crafted components had my heart and I started switching to Tailwind for almost any project just because of TailwindUI. It allowed me to have a beautiful UI without having to even think about it.

Day by day I was using Tailwind, and somehow I was still missing the old days of Bootstrap. This itch led me down a path of introspection. "Bootstrap, when dialed in just right, is an absolute goldmine" so I started building a team who would share my same vision and the first act was to release the NinjaBootstrap framework, an open-source fork of the original bootstrap with a few scss upgrades. We added the few utilities we felt bootstrap was missing. The idea wasn't to reinvent the wheel but to see if we could spin it with our own pace. And so, the NinjaBootstrap team was born—a collective of like-minded souls embarking on a journey to forge something akin to the craftsmanship of Bootstrap but with our unique spin, built on a foundation that draws inspiration from the best, yet it stands out as our magnum opus—a free tool recognized and appreciated by the giants in the industry.

Now the only real missing piece was the lovely crafted components that TailwindUI offers. We built a CSS Framework that was capable of reaching the same high-quality design but at the same time, we had nothing ready-made. At this point we could have given up, it was the easiest choice, but we decided to embark on an even more adventurous journey, and we're now thrilled to unveil our latest creation, a little gem we hope will resonate with you. Coupled with a CSS master and a UX expert we decided to build our own UI library.

So NinjaBootstrap UI was born. We started crafting component after component with a laser precision quality. Every component is baked by UX studies and pixel perfection. It's not just this. We based every component on the Bootstrap CSS variables so that they would blend in with any design configuration you have chosen.

Using our online customization tool you can even try to change the color variables and check new palettes right in your browser with our components. We even added AI to this so you don't have to come up with a nice palette, AI can do it for you.

Components page

This is a product crafted by developers, for developers. It's our way of giving back to the community, a token of our journey, and an invitation to explore the possibilities of web development without the constraints of traditional frameworks. With NinjaBootstrap UI, we're offering a couple of components on the house, a teaser of what's in store. If this catch your interest, I encourage you to dive deeper and check out the full video.

Pricing Components Showreel

Explore UI Kit

NinjaBootstrap - A Real Tailwind Alternative

Giovanni Panasiti — Mon, 26 Feb 2024 21:10:06 +0000

In the dynamic world of web development, evolution is not just a choice, but a necessity. Today, we're thrilled to introduce NinjaBootstrap, a groundbreaking fork from the official Bootstrap framework, reimagined and revitalized for the modern developer. Our vision? Simple yet profound – to extend and enhance the beloved Bootstrap, making the web not just functional, but phenomenal.

Embracing the Roots, Extending the Branches

Bootstrap has been a cornerstone in web development, a testament to its robustness and adaptability. I remember the first time I tried it, it was magic. Many of you may not remember, or not even know, how the web was before bootstrap came; you had to write all the CSS by yourself and it was hard enough without even considering mobile support. But as the digital landscape shifts, so must our tools. NinjaBootstrap is not just a fork; it's a homage and a leap forward. By meticulously building upon the original framework's SCSS, we've created something familiar yet refreshingly efficient.

A Clean Fork for a Clear Future

Peek into our GitHub repository, and you'll see the essence of Bootstrap, untangled and refined. Unlike other libraries that veer far from their origins, NinjaBootstrap stays true to its roots. Our approach is straightforward – identify the utilities the web needs and integrate them seamlessly. Our commitment is not to diverge but to enhance.

Beyond Monopoly: A Commitment to Diversity

Nowadays, the web has seen a tilt towards monopolistic trends in CSS frameworks, notably with Tailwind's rising dominance. While such trends aren't inherently negative, history teaches us the perils of a monopoly. Our initiative with Bootstrap.ninja is to provide a competitive alternative, diversifying the ecosystem, and preventing a one-size-fits-all scenario. We believe in a web that thrives on choices and innovation.

A Call for Collaboration

The journey of NinjaBootstrap is not a solitary one. We will eventually propose our enhancements back to the original repository with a PR when we will feel the time has come. This isn't a quest for glory but a genuine effort to contribute to make the web a better place. We invite developers, designers, and dreamers alike to join us in this endeavor. Let's write the next chapter of the web together, with Bootstrap.ninja as a catalyst for creativity and collaboration.

Looking Forward

Bootstrap was on the brink of being labeled "outdated", but with NinjaBootstrap, we breathe new life into it. We're not just updating a framework; we're revitalizing a philosophy – that the web should be as diverse as it is dynamic, as creative as it is functional. NinjaBootstrap is our pledge to this belief, a step towards a more vibrant and versatile web.

Join us in this exciting journey. Together, let's shape a web that's not just built, but crafted.

NinjaBootstrap – for a web that's not just good, but great.

Ace Your React Interview: Comprehensive Guide & Key Concepts

Giovanni Panasiti — Wed, 25 Oct 2023 22:42:56 +0000

In today's competitive tech landscape, a successful interview often hinges not just on your skills, but on your preparation. React, as one of the leading libraries in front-end development, frequently sits at the center of such interviews, and the questions can range from basic to deeply intricate. "Ace Your React Interview: Comprehensive Guide & Key Concepts" is tailored for those aspiring to shine in such pivotal moments.

Within this guide, you'll find a curated collection of over 30 pivotal questions that frequently surface in React interviews. But, more than just questions, we provide you with succinct, articulate answers that showcase a profound understanding of React's core principles and advanced nuances. Think of this not just as a study guide, but as a blueprint to articulate your React expertise confidently and convincingly. Whether you're an experienced developer aiming to refresh your knowledge, or you're stepping into the React realm for the first time, this guide is your ally. Let's ensure that when the spotlight is on, you're not only ready but poised to impress.

Questions

Explain what is the Virtual DOM in React
What are the differences between the Virtual DOM and the DOM?
What is JSX?
What do you understand when we talk about Render in React?
Explain the concept of Components in React
What are props in React and what are the main differences with state?
Props:
State:
How can you update the state of a component?
Class Components:
Functional Components:
What are synthethic events in React?
What are refs in React, give an example of when would you use one.
How does React render process work?
What are keys in React and why are they important?
How can you reuse logic in functional components?
What is the difference between a controlled and uncontrolled component in React?
Explain the main difference between server side rendering and client side rendering in React
How would you avoid unnecessary renders in a React component?
What is a Portal in React?
State the main difference between useEffect and useLayoutEffect
Where do you usually fetch data in React?
What are hooks in React?
If you wanted a component to perform an action only once when the component initially rendered how would you achieve it
with a function component?
What is prop-drilling, and how can you avoid it?
How can you reset a component’s state to its initial state?
Explain the difference between useState and useEffect.
If you have to set a key value in a component, from where would you get that value?
Explain the concept of lazy loading React components
Explain the main differences between useMemo and useCallback
Why would you ever use forwardRef in React?
At what point does the useEffect cleanup function run?
Explain the concept of Reducers and Context in React
How would you catch render errors in React components at the global scope?
How does useEffect check changes in its array dependency?

Explain what is the Virtual DOM in React

The Virtual DOM in React is a lightweight representation of the actual DOM elements. The rendering engine can quickly make changes to the Virtual DOM and then subsequently update the real DOM in a more efficient and optimized way. The primary benefit is that it minimizes direct manipulations of the actual DOM, resulting in faster and smoother updates to the user interface.

What are the differences between the Virtual DOM and the DOM?

The Virtual DOM and the DOM are both critical concepts in web development, especially when working with React. Here are their primary differences:

Representation: The DOM (Document Object Model) is a programming interface and structured representation of a webpage, allowing developers to interact with and manipulate the page content, structure, and styles. On the other hand, the Virtual DOM is a lightweight copy of the actual DOM in React, which helps in determining the most efficient way to update the real DOM.
Efficiency: Directly manipulating the DOM can be slow and inefficient, especially with frequent changes. The Virtual DOM enables React to determine the minimal number of DOM changes required by comparing the current Virtual DOM with the next version (a process called diffing) and then applying only the necessary updates.
Existence: While the DOM is a standard that exists in all web browsers, the Virtual DOM is specific to React and certain other modern web libraries or frameworks.

Here's a basic code illustration to emphasize the concept:


// Traditional DOM manipulation:
const element = document.createElement('div');
element.textContent = 'Hello, DOM!';
document.body.appendChild(element);

// React's way using Virtual DOM:
import React from 'react';
function App() {
    return <div>Hello, Virtual DOM!</div>;
}

What is JSX?

JSX, or JavaScript XML, is a syntax extension for JavaScript, predominantly used with React. It allows developers to write HTML-like code within their JavaScript code, leading to a more intuitive and readable way to describe the UI components.

Combination: JSX essentially allows you to combine JavaScript and HTML. This synergy makes it easier to visualize the UI structure directly within the component logic.
Transpilation: Browsers don't natively understand JSX. Therefore, tools like Babel are used to transpile JSX into regular JavaScript code that browsers can interpret.
Components: With JSX, React components can be defined using a syntax that's visually similar to HTML, making it straightforward to define and understand the component's structure.

Here's a simple illustration of JSX in action:


// Without JSX:
React.createElement('div', { className: 'greeting' }, 'Hello, world!');

// With JSX:
<div className="greeting">Hello, world!</div>

Notice how the JSX version is more concise and resembles traditional HTML, offering better readability.

What do you understand when we talk about Render in React?

In React, when we talk about render, we are referring to the process of translating the application's state and props into a visual representation within the browser. Rendering determines how the UI should look based on the data available to the component.

Initial Render: The first time a React component is added to the DOM, it undergoes an initial render, creating the visual output for the user.
Re-rendering: When there are changes in the component's state or props, React determines if an update to the UI is required. If needed, a re-render is triggered to reflect the changes.
Virtual DOM: Instead of making direct changes to the real DOM, React first updates the Virtual DOM. It then compares (or "diffs") the current Virtual DOM with the new one and calculates the most efficient way to make changes to the real DOM.

Here's a basic example illustrating the rendering process in a React component:


import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Every time the button in the Counter component is clicked, the state (count) changes, which triggers a re-render to update the displayed click count.

Explain the concept of Components in React

In React, Components are the building blocks of the user interface. They allow you to split the UI into independent, reusable pieces, and think about each piece in isolation. Components can be likened to custom HTML elements with their own structure, logic, and behavior.

Reusable: Components can be reused across different parts of an application. This promotes a DRY (Don't Repeat Yourself) principle.
Stateful and Stateless: Components can either maintain their own data state (stateful) or receive data entirely through props (stateless).
Class and Functional: Historically, components were primarily class-based, but with the introduction of React hooks, functional components can now manage state and side effects as well.
Composition: Components can be nested within other components, enabling the creation of more complex UIs through composition.

Here's a basic example of a React component:


// Functional Component
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

And using the component:


<Greeting name="John" />

This would render the text "Hello, John!" on the screen. The component encapsulates the logic and structure needed to create this piece of the UI, making it easy to reuse wherever a greeting is needed.

What are props in React and what are the main differences with state?

In React, props (short for "properties") and state are two key concepts that help manage data in a component. While they both hold information that influences the output of a render, they serve different purposes and have distinct characteristics.

Props:

Immutable: Props are read-only. This means a component should never modify its own props.
Passed from Parent: Props are passed to a component from its parent component. They allow components to communicate with each other.
External Data: Think of props as arguments or parameters you pass to a function.

State:

Mutable: State is changeable data. When state changes in a component, the component re-renders.
Internal Data: State represents data that a component's event handlers may change to trigger a user interface update.
Lifecycle: State can have a lifecycle, with mounting, updating, and unmounting phases.

Highlighting the differences:


// Using props
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Using state
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

In the first example, the Welcome component receives the name to display via props. In the second example, the Counter component maintains its own count in the state, which can be changed using the increment function.

How can you update the state of a component?

Updating the state of a component in React is crucial for ensuring that the user interface remains in sync with the underlying data. In React, you should never directly modify the state. Instead, you use the setState method (in class components) or the useState hook (in functional components) to update the state.

Class Components:

In class components, the setState method is used:


class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleIncrement}>Increment</button>
      </div>
    );
  }
}

Functional Components:

In functional components, the useState hook is commonly used to manage state:


import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

In both examples, the state update functions (setState and setCount) trigger a re-render of the component, ensuring the displayed count reflects the updated state.

What are synthethic events in React?

In React, Synthetic Events are wrappers around the browser's native events. They aim to provide a consistent event system across different browsers, ironing out any inconsistencies and ensuring a unified behavior in your application.

Cross-Browser Compatibility: Synthetic Events encapsulate the behavior of native browser events, offering the same interface regardless of underlying browser differences.
Performance: React reuses synthetic event objects for better performance. This reduces the overhead of creating a new event object for every event.
Pooling: After the event callback has been invoked, React "pools" the synthetic events, nullifying their properties. This ensures a reduced memory footprint.
Consistent Properties: Properties and methods on the synthetic event are consistent across different browsers.

Here's an example showcasing the use of a synthetic event:


import React from 'react';

function ClickableComponent() {
  const handleClick = (event) => {
    event.preventDefault(); // Using a synthetic event method
    console.log(event.type); // Outputs: "click"
  }

  return (
    <a href="https://www.example.com" onClick={handleClick}>
      Click Me
    </a>
  );
}

In the example above, the handleClick function receives a synthetic event object when the link is clicked. This ensures that the event behavior is consistent, no matter which browser the code runs in.

What are refs in React, give an example of when would you use one.

In React, refs (short for "references") provide a way to directly access the DOM elements or React elements created in the render method. This is useful in cases where you need to bypass the typical data flow mechanisms of React, such as when you need to focus an input element, trigger imperative animations, or integrate with third-party libraries.

Direct Access: Refs allow direct access to DOM elements, which is generally discouraged in favor of a declarative approach, but can be essential in some situations.
Avoid Overuse: It's important to avoid overusing refs. React's declarative approach usually negates the need for them. Use them as a last resort or in scenarios where their necessity is clear.
createRef and useRef: Refs can be created using React.createRef() in class components and useRef() hook in functional components.

Here's an example showcasing the use of refs to focus on an input element:


import React, { useRef, useEffect } from 'react';

function FocusInput() {
  // Create a ref object
  const inputRef = useRef(null);

  useEffect(() => {
    // Focus the input element when the component mounts
    inputRef.current.focus();
  }, []);

  return (
    <input ref={inputRef} type="text" placeholder="I will be focused on mount" />
  );
}

In this example, as soon as the FocusInput component mounts, the input element is automatically focused using the ref. This illustrates a common use-case for refs: controlling focus programmatically.

How does React render process work?

The React render process is a sequence of steps the library follows to convert React components into a visual representation in the browser. It's optimized for performance and ensures efficient updates to the UI. Here's a simplified breakdown:

JSX Compilation: During the development phase, JSX (an XML-like syntax extension for JavaScript) is compiled into regular JavaScript using tools like Babel. It gets transformed into React.createElement() calls.
Initial Render: When a React application starts, it goes through the initial rendering phase. All components return their defined output (typically other components, HTML elements, etc.).
Virtual DOM Creation: React creates a lightweight representation of the output, known as the Virtual DOM. This allows React to determine changes in an optimized manner.
Reconciliation: When there's a change in state or props, React triggers a re-render. Instead of updating the real DOM directly, React first updates the Virtual DOM.
Diffing: React compares (or "diffs") the previous Virtual DOM with the new one to determine the most efficient series of changes.
Committing Updates: After calculating the necessary changes, React updates the real DOM. This is the phase where users see updates on their screen.
Batching: To further enhance performance, React batches multiple setState() calls together into a single update, reducing the number of DOM manipulations.
Component Lifecycle: Throughout the render process, React components go through a series of lifecycle methods (in class components) or effects (in functional components with hooks) allowing developers to plug in code at specific points.

By following this process, React ensures the UI remains responsive and updates efficiently, avoiding unnecessary computations or DOM updates.

What are keys in React and why are they important?

In React, keys are special attributes you should provide when creating lists of elements. They help React identify which items have been added, changed, or removed, and they play a crucial role in optimizing the performance of updates, especially in lists or dynamic content.

Identity: Keys give elements a stable identity. They should be unique among siblings but don't need to be globally unique.
Reconciliation Process: During React's reconciliation (diffing) process, keys help to correctly match elements in the original tree structure with those in the subsequent tree.
Performance: Without keys, React might need to re-render more components than necessary, leading to decreased performance.
Stateful Components: Using keys ensures that the state associated with an item is maintained even when the order changes or items are added/removed.

Here's a basic example illustrating the use of keys:


import React from 'react';

function ItemList(props) {
  const items = props.items;

  return (
    <ul>
      {items.map(item => 
        <li key={item.id}>{item.name}</li>
      )}
    </ul>
  );
}

In this example, each item has a unique id that is used as the key. This ensures that React can efficiently determine changes in the list and update the DOM accordingly.

Note: It's generally discouraged to use indexes as keys if the list can change over time. This can lead to bugs and negatively impact performance.

How can you reuse logic in functional components?

In React, when working with functional components, the primary way to reuse logic is through the use of custom hooks. Custom hooks allow you to extract component logic into reusable functions.

Custom Hooks: They are JavaScript functions that can use other hooks. By convention, they start with the word use, and they allow you to share and reuse stateful logic across different components.
Isolation: Custom hooks allow for better isolation and testing of logic, making your components cleaner and easier to maintain.
Composition: Multiple custom hooks can be combined to create more complex functionality, making them composable.

Here's a simple example illustrating the use of custom hooks:


import { useState } from 'react';

// Custom hook to handle input changes
function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);
  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return [value, handleChange];
}

function MyComponent() {
  const [username, handleUsernameChange] = useInput('');
  const [email, handleEmailChange] = useInput('');

  return (
    <div>
      <input value={username} onChange={handleUsernameChange} placeholder="Username" />
      <input value={email} onChange={handleEmailChange} placeholder="Email" />
    </div>
  );
}

In the example above, the useInput custom hook manages the state and change logic of an input field. By using this custom hook, we can avoid repeating the same logic for different input fields, showcasing the power of reusable logic in functional components.

What is the difference between a controlled and uncontrolled component in React?

In React, components that handle form elements can be classified into two categories: controlled and uncontrolled components.

Controlled Components:
- In a controlled component, the form data is managed by the React state. The value of the input is always driven by the React state.
- Whenever there's a change in the input, a handler function (like onChange) is invoked to update the state, which in turn updates the input's value.
- It offers more predictability and can be directly influenced by the component's state.
Uncontrolled Components:
- In an uncontrolled component, the form data is managed by the DOM itself, not by the React state.
- To get the value from an input in an uncontrolled component, you'd use a ref to directly access the DOM element.
- They are similar to traditional HTML form inputs and might be simpler for integrating React with non-React code.

Here's a comparison with examples:


// Controlled Component
function ControlledInput() {
  const [value, setValue] = useState('');

  return (
    <input value={value} onChange={e => setValue(e.target.value)} />
  );
}

// Uncontrolled Component
function UncontrolledInput() {
  const inputRef = useRef(null);

  const showAlert = () => {
    alert(inputRef.current.value);
  }

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={showAlert}>Show Value</button>
    </div>
  );
}

Generally, controlled components are recommended in React as they allow for more predictable behavior and better integration with React's declarative nature.

Explain the main difference between server side rendering and client side rendering in React

In the context of React applications, rendering can occur either on the server or the client side. The choice between Server Side Rendering (SSR) and Client Side Rendering (CSR) can significantly impact performance, SEO, and user experience. Here are the primary differences:

Server Side Rendering (SSR):
- The React components are rendered on the server into a static HTML string.
- Users see the content faster as the server sends the rendered page directly. This can result in a faster First Contentful Paint (FCP).
- It can be beneficial for SEO, as search engine crawlers receive a fully rendered page.
- Popular frameworks like Next.js simplify the SSR process for React applications.
- Requires a server to process requests, which can lead to increased server load.
Client Side Rendering (CSR):
- The React components are rendered directly in the browser. Initially, the server sends a blank or loading page, and the actual content is populated as the JavaScript executes.
- It might result in a slower initial page load, as the browser has to load, parse, and execute the JavaScript before displaying content.
- Once loaded, navigating between pages or views can be faster due to the assets and React being already in memory.
- SEO might be more challenging (though search engines have gotten better at indexing JavaScript applications).
- Frameworks like Create React App set up CSR-based React applications.

In practice, many applications leverage a combination of both, known as Hybrid Rendering, to optimize performance, SEO, and user experience. They may use SSR for the initial load and CSR for subsequent dynamic updates.

How would you avoid unnecessary renders in a React component?

Ensuring efficient rendering is key to maximizing the performance of React applications. Unnecessary renders can slow down the app and lead to a poor user experience. Here are ways to avoid them:

Use PureComponent:
- If you're using class components, extend PureComponent instead of Component. This ensures a shallow comparison of state and props, preventing unnecessary renders when data hasn't changed.
Utilize React.memo:
- For functional components, wrap your component with React.memo. It's similar to PureComponent and does a shallow comparison of props.
Optimize state and props:
- Ensure that you're only updating state or props when necessary. Avoid creating new references (objects or arrays) unless there's a change in the data.
Use Callbacks Wisely:
- Use the useCallback hook to memoize callback functions, preventing them from being recreated every render.
```
const increment = useCallback(() => {
  setCount(prevCount => prevCount + 1);
}, []);
```
Memoize Computations:
- If you have computations derived from state or props, use the useMemo hook to ensure they're recalculated only when necessary.
```
const doubledValue = useMemo(() => {
  return value * 2;
}, [value]);
```
Use Context Sparingly:
- Remember that any value change in a React.Context will re-render all components consuming that context. Break contexts into smaller parts if possible or use libraries like react-query for more granular control.
Profile with DevTools:
- Use the React DevTools' profiler to inspect which components are re-rendering and why. This helps in identifying bottlenecks and optimizing renders.

By being mindful of renders and employing optimization techniques, you can ensure a smooth and responsive user experience.

What is a Portal in React?

In React, a Portal provides a way to render children outside the parent DOM hierarchy, yet it retains the same context and event bubbling behavior as if they were inside the parent. This is particularly useful for UI elements like modals, popups, and tooltips which might be visually positioned outside the component but need to stay within the React component logic.

Advantages:
- It can help with CSS styling issues, especially with z-index or overflow problems.
- It ensures that the component's behavior remains consistent, even if visually rendered outside the main UI tree.

Usage:

React provides a ReactDOM.createPortal() method for this purpose.


import ReactDOM from 'react-dom';

function Modal(props) {
  return ReactDOM.createPortal(
    <div className="modal">
      {props.children}
    </div>,
    document.getElementById('modal-root')
  );
}

In the example above, the Modal component renders its children into a modal-root DOM node outside the main app hierarchy.

Using Portals efficiently can greatly simplify the implementation and improve the behavior of overlays and floating UI elements in a React application.

State the main difference between useEffect and useLayoutEffect

useEffect and useLayoutEffect are both hooks in React that allow you to perform side effects in function components. However, they differ primarily in the timing of their execution in relation to rendering:

useEffect:
- It runs asynchronously and after the browser has painted the updated screen.
- Typically used for most side effects, such as data fetching, setting up subscriptions, etc.
- Doesn't block the browser from updating the screen.
useLayoutEffect:
- It runs synchronously after all DOM mutations but before the screen is updated or painted.
- Useful when you need to make DOM measurements or updates and want to ensure they occur before the screen is repainted, preventing flickers.
- Should be used sparingly as it can block the render process.

In most scenarios, useEffect is sufficient and should be preferred due to its non-blocking nature. useLayoutEffect is used for more specific cases where the effect must be synchronized with the layout phase.

Where do you usually fetch data in React?

In React, data fetching commonly occurs in the component lifecycle methods (for class components) or within the effect hooks (for functional components). Here's how it's typically done in each approach:

Class Components:

The componentDidMount lifecycle method is a popular place to fetch data as it ensures that the component is fully mounted in the DOM before making the request.


class DataComponent extends React.Component {
  componentDidMount() {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }
  // ... rest of the component
}

Functional Components:

The useEffect hook is used for side effects, including data fetching, in functional components. To fetch data when the component mounts, you'd use useEffect with an empty dependency array.


function DataComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(fetchedData => setData(fetchedData));
  }, []);  // Empty dependency array means this effect runs once after component mounts

  // ... rest of the component
}

Regardless of the approach, it's essential to handle loading states, errors, and potential side effects efficiently for a seamless user experience. Libraries like react-query and SWR can abstract and optimize many of these concerns, simplifying data-fetching patterns in React applications.

What are hooks in React?

In React, Hooks are functions that allow you to "hook into" React state and lifecycle features directly from function components. They were introduced in React 16.8 and enable developers to use state and other React features without having to write class components.

Benefits:
- Facilitates the creation of cleaner and more readable code.
- Enables better logic encapsulation and reusability.
- Reduces the complexity of components by avoiding the "this" keyword and lifecycle methods.
Common Hooks:
- useState: Allows you to add state to functional components.
```
const [count, setCount] = useState(0);
```
- useEffect: Performs side effects (like data fetching, manual DOM manipulation, etc.) in functional components.
```
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);
```
- useContext: Accesses the value from a React context without using a Context Consumer.
```
const theme = useContext(ThemeContext);
```
Additional Hooks: React also offers hooks like useReducer, useCallback, useMemo, useRef, and useLayoutEffect, among others.
Custom Hooks: You can also create your own hooks, allowing you to extract component logic into reusable functions. Custom hooks are a way to reuse stateful logic, not state itself.

Overall, hooks provide a more intuitive way to use React's features within function components, promoting cleaner and more maintainable code.

If you wanted a component to perform an action only once when the component initially rendered how would you achieve it with a function component?

To ensure a function component performs an action only once upon its initial render, you would utilize the useEffect hook with an empty dependency array. This ensures that the effect runs only once, similar to the componentDidMount lifecycle method in class components.


import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // Action to be performed only on the initial render
    console.log('Component did mount!');

  }, []);  // Empty dependency array ensures this runs once after component mounts

  return (
    <div>
      My Component Content
    </div>
  );
}

By using an empty dependency array in useEffect, the effect does not re-run after the initial execution since no state or prop values are being watched for changes. This is a common pattern for actions that should only occur once, such as initial data fetching or setting up event listeners.

What is prop-drilling, and how can you avoid it?

Prop-drilling, also known as "prop-threading", refers to the process of passing data through multiple layers of components (from parent to descendant) via props, even if some intermediary components don't need the data themselves. This can lead to code that is hard to maintain and trace, especially in deep component hierarchies.


function ParentComponent(props) {
  return <ChildComponent someProp={props.someProp} />;
}

function ChildComponent(props) {
  return <GrandchildComponent someProp={props.someProp} />;
}

function GrandchildComponent(props) {
  return <div>{props.someProp}</div>;
}

Here, even though only GrandchildComponent needs someProp, it's being passed through each layer of the hierarchy.

Ways to avoid prop-drilling:

Context API: Use React's built-in Context API to provide data to components further down the tree.


const SomeContext = React.createContext();

function ParentComponent(props) {
  return (
    <SomeContext.Provider value={props.someProp}>
      <ChildComponent />
    </SomeContext.Provider>
  );
}

function GrandchildComponent() {
  const someProp = React.useContext(SomeContext);
  return <div>{someProp}</div>;
}

Component Composition: Break down complex components and use component composition to avoid passing unnecessary props.
Redux or other state management libraries: For larger applications, use state management solutions to manage and distribute your application's state without prop-drilling.

By using these strategies, you can maintain cleaner, more readable, and more efficient React codebases that are less prone to bugs and easier to refactor.

How can you reset a component’s state to its initial state?

To reset a component's state to its initial state in React, there are several methods you can employ:

Using a Reference: Store the initial state in a reference and reset the state using that reference.


import React, { useState, useRef } from 'react';

function MyComponent() {
  const initialState = { count: 0 };
  const [state, setState] = useState(initialState);
  const stateRef = useRef(initialState);

  const resetState = () => {
    setState(stateRef.current);
  };

  return (
    <div>
      Count: {state.count}
      <button onClick={() => setState({ count: state.count + 1 })}>Increment</button>
      <button onClick={resetState}>Reset</button>
    </div>
  );
}

Using a Function with useState: useState can accept a function to provide an initial state. If you encapsulate the initial state logic in a function, you can call it both for setting the initial state and resetting it.


function MyComponent() {
  const createInitialState = () => ({ count: 0 });
  const [state, setState] = useState(createInitialState);

  const resetState = () => {
    setState(createInitialState());
  };

  return (
    <div>
      Count: {state.count}
      <button onClick={() => setState({ count: state.count + 1 })}>Increment</button>
      <button onClick={resetState}>Reset</button>
    </div>
  );
}

Both approaches are valid and can be used based on the specific use case and developer preference. The key is to maintain the initial state's representation and use it when you want to revert back to it.

Explain the difference between useState and useEffect.

useState and useEffect are both hooks introduced in React 16.8, but they serve very different purposes:

useState:This hook allows you to add state to functional components. Before hooks, state could only be used in class components.


import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // initial value is 0
  
  return (
    <div>
      {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

useEffect:This hook is used to perform side effects (like data fetching, DOM manipulation, setting up event listeners, etc.) in functional components. It can mimic the behavior of various lifecycle methods in class components, such as componentDidMount, componentDidUpdate, and componentWillUnmount.


import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(result => setData(result));
    // This runs after the component mounts and after every update
  }, []); // The empty array means it will only run once, similar to componentDidMount

  return (
    <div>
      {data}
    </div>
  );
}

In essence:

useState is for managing local state in functional components.
useEffect is for handling side effects in functional components.

While both hooks provide essential functionality for modern React development, they cater to different aspects of component logic and behavior.

If you have to set a key value in a component, from where would you get that value?

In React, a key is a special attribute you should provide to elements created dynamically from an array or iterable. It helps React identify which items have changed, been added, or been removed, thus ensuring efficient updates and re-renders. When determining a value for the key:

Unique Identifiers:Often, the best approach is to use a unique identifier from your data. If the items come from a database, they might have a unique ID.


const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  // ...
];

return items.map(item => <div key={item.id}>{item.name}</div>);

Array Index:If there's no unique identifier, you might consider using the array index. However, this isn't recommended unless you're certain the list doesn't undergo reorder operations (like sort or splice), as it can lead to performance issues and bugs.
```
const items = ['Item 1', 'Item 2'];

return items.map((item, index) => <div key={index}>{item}</div>);
```
Generate Unique IDs:If you don't have a natural unique identifier, you can use libraries like shortid or uuid to generate them.

Remember, it's crucial that the key is stable across re-renders for optimal performance. It should not be generated randomly for each render, as this would defeat its purpose.

Explain the concept of lazy loading React components

Lazy loading is a technique in React where components are loaded and rendered only when they're needed (typically when they come into the viewport or upon a particular event) instead of loading them upfront during the initial page load. This strategy can improve the performance and reduce the initial bundle size of your application, leading to faster load times.

React provides a built-in mechanism for lazy loading components using React.lazy() and Suspense.

React.lazy():It allows you to render a dynamic import as a regular component. It automatically takes care of loading the component when it’s needed.
```
const LazyLoadedComponent = React.lazy(() => import('./LazyLoadedComponent'));
```

Suspense:Works in conjunction with React.lazy() and provides a fallback UI (like a loading spinner) while the component is being loaded.


import React, { Suspense } from 'react';

function App() {
  return (
    <div>
      <Suspense fallback=<div>Loading...</div>>
        <LazyLoadedComponent />
      </Suspense>
    </div>
  );
}

For scenarios where you'd like to lazy-load components based on the viewport or other conditions, third-party libraries such as react-loadable or utilities like IntersectionObserver can be leveraged.

In summary, lazy loading React components is a powerful tool for optimizing the performance of your application, ensuring users download only what they need when they need it.

Explain the main differences between useMemo and useCallback

useMemo and useCallback are both React hooks introduced to optimize performance by avoiding unnecessary recalculations and re-renders. While they have similar goals, they're used in different scenarios:

useMemo:It returns a memoized value. This hook is useful when you have computationally expensive calculations that you don't want to execute on every render. Instead, you want them to recalculate only when specific dependencies change.


import React, { useMemo } from 'react';

function Component(props) {
  const computedValue = useMemo(() => {
    // some expensive calculation based on props.data
    return expensiveCalculation(props.data);
  }, [props.data]);

  return <div>{computedValue}</div>;
}

useCallback:It returns a memoized callback function. This hook is particularly useful when passing callbacks to performance-sensitive child components (like those wrapped in React.memo). By ensuring that the callback function reference remains consistent across renders (unless dependencies change), we prevent unnecessary re-renders of those child components.
```
import React, { useCallback } from 'react';

function ParentComponent() {
  const handleChildClick = useCallback(() => {
    // handle click logic
  }, []); // Empty dependency array means the callback will not change across re-renders

  return <ChildComponent onClick={handleChildClick} />;
}
```

In essence:

useMemo is about memoizing values.
useCallback is about memoizing functions.

Both hooks accept a dependency array, and the provided value or function is recalculated/recreated only when values in this array change between renders.

Why would you ever use forwardRef in React?

forwardRef in React is a tool for forwarding refs (references) to a child component. It is particularly useful in situations where you need to access the DOM elements or instance methods of a child component from a parent component. Here are some primary use cases:

Focus Management:Often in user interfaces, after certain actions are completed, you might need to set focus on a particular child element for accessibility and usability purposes.
Animating Components:When using libraries like gsap or anime.js, you might need direct access to the DOM node to perform animations.
Integration with Third-party Libraries:Some external libraries require direct access to DOM nodes, and forwarding refs can be essential in these scenarios.
Reusable Components:If you're building a component library, you might use forwardRef to ensure components are extensible and can pass along refs when needed.


import React, { forwardRef } from 'react';

const CustomInput = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

function App() {
  const inputRef = React.useRef(null);

  const handleButtonClick = () => {
    // Focus the input when the button is clicked
    inputRef.current.focus();
  };

  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={handleButtonClick}>Focus Input</button>
    </div>
  );
}

As shown above, forwardRef allows the parent component (App in this case) to access the underlying input DOM node of the CustomInput child component.

At what point does the useEffect cleanup function run?

The useEffect hook in React provides a way to execute side effects (like setting up event listeners, fetching data, or subscribing to external sources) in functional components. Additionally, useEffect allows for a cleanup function which is used to undo these side effects and prevent potential memory leaks or unwanted behaviors.

The cleanup function of useEffect runs:

Before the component is unmounted from the DOM, ensuring any setup done in the effect is properly cleaned up.
Before re-running the effect when one of its dependencies has changed. This ensures that any previous effect is cleaned up before the new effect is run.


import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Side effect: Setting up an event listener
    const handleDocumentClick = () => {
      console.log('Document was clicked!');
    };
    document.addEventListener('click', handleDocumentClick);

    // Cleanup function
    return () => {
      // Cleaning up the event listener
      document.removeEventListener('click', handleDocumentClick);
    };
  }, [count]); // This effect depends on the 'count' state
}

In the example above:

When count changes, before the new effect is executed, the cleanup function will run, removing the previous event listener.
If the ExampleComponent is unmounted from the DOM, the cleanup function will also run, ensuring that the event listener is removed and preventing potential memory leaks.

In essence, the cleanup function is React's way of ensuring that side effects don't leave behind unwanted behaviors or resources.

Explain the concept of Reducers and Context in React

Both Reducers and Context are powerful concepts in React, often used in tandem to manage global state and pass data throughout components without prop-drilling. Let's dive into each concept separately:

Reducers

A reducer is a pure function that takes the current state and an action, then returns the next state. It follows the concept of the reducer in functional programming, where it "reduces" a collection to a single value. In the context of React (and state management libraries like Redux), reducers are used to handle state transitions in a predictable manner.


function counterReducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

In this example, the counterReducer adjusts the count based on the provided action type.

Context

The Context API provides a way to pass data through the component tree without having to pass props down manually at every level. It is designed to share data that can be considered "global", such as themes, user authentication, or other shared utilities.


import React, { createContext, useContext } from 'react';

// Create a Context
const ThemeContext = createContext();

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ChildComponent />
    </ThemeContext.Provider>
  );
}

function ChildComponent() {
  // Use the Context value
  const theme = useContext(ThemeContext);
  return <div>Current theme is: {theme}</div>
}

In the example, the ChildComponent can access the theme value without receiving it as a direct prop, thanks to the Context API.

Together: These two concepts can be combined using the useReducer hook and the Context API to create a global state management solution. The reducer handles state logic and transitions, while the Context API distributes the state and functions to manipulate it throughout the component tree.

How would you catch render errors in React components at the global scope?

To catch render errors in React components at the global scope, you would use a feature called Error Boundaries. An error boundary is a React component that catches JavaScript errors anywhere in their child component tree, logs those errors, and displays a fallback UI instead of the component tree that crashed.

Creating an Error Boundary

You can define an error boundary by creating a new component with the static method getDerivedStateFromError() and/or the instance method componentDidCatch().


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can log the error to an error reporting service here
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI here
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

Using the Error Boundary

Once you have an error boundary defined, you can wrap your entire application (or parts of it) inside this boundary.


function App() {
  return (
    <ErrorBoundary>
      <MainComponent />
    </ErrorBoundary>
  );
}

If any error occurs inside MainComponent or any of its children, the error boundary will catch it and display the fallback UI, ensuring that the entire application doesn't crash due to a single component's failure.

Note: Error boundaries only catch errors in the components below them in the tree, not within themselves. Therefore, it's a good practice to place them at a high level in your component hierarchy, or around critical sections of your app.

How does useEffect check changes in its array dependency?

The useEffect hook in React triggers side-effects in function components. One of its features is the dependency array, which you can provide to ensure that the effect runs only when the specified dependencies have changed between renders.

useEffect determines whether to re-run its effect based on a shallow comparison of the values inside the dependency array from the previous render to the current render.

Shallow Comparison

A shallow comparison checks if the values at corresponding indexes of the dependency array are the same between consecutive renders. It does not dive into nested objects or arrays, but checks only the top-level references. Here's a breakdown:

Primitives: For primitive values (like numbers, strings, or booleans), it checks if they are the same.
Objects and Arrays: For objects and arrays, it checks the reference, not the content. If you create a new object or array every render, even with the same content, it will cause the effect to run every time.


const [count, setCount] = React.useState(0);

// This effect will run on every render, 
// because a new array is created every time
useEffect(() => {
  console.log('This will run every render');
}, [count, []]);

// This effect will run only when 'count' changes, 
// as the dependency array contains only primitive values
useEffect(() => {
  console.log('This will run when count changes');
}, [count]);

It's crucial to ensure that objects or arrays passed to the dependency array have stable identities across renders, especially if their contents aren't changing. Otherwise, it could lead to unnecessary effect runs. Using state setters, useMemo, or useCallback can help maintain stable object or function references across renders.

original article