DEV Community: Awais Zafar

Using Active Storage To Handle Image Uploads In Ruby On Rails

Awais Zafar — Sun, 28 Apr 2024 11:19:42 +0000

Active Storage is a framework that handles file uploads, allowing you to store them as attachments locally or on a third-party cloud storage service (like Amazon s3 or Microsoft Azure Storage). It then links those attachments to an Active Record object.

Active Storage isn’t just useful for storing images — it can also generate image representations for non-image uploads, such as videos or PDFs. By combining it with ImageMagick, you can even manipulate image uploads. For now, I just want users to upload a profile picture when they register, and for my app to store that picture locally.

Setting up Active Storage

To begin implementing Active Storage, I opened up the Rails dating application I had already created. Then, I ran rails active_storage:install. This created a migration file that set up two tables, active_storage_attachments and active_storage_blobs.

Active Storage stores information about each file — such as filename, size, and metadata — in active_storage_blobs. active_storage_attachments is a join table that connects those blobs to a model (in this case, my user model). Active Storage’s polymorphic associations spare me from having to add columns to the models I already created. I used rails db:migrate to run this migration.

Adding Active Storage To A Model

To add an Active Storage association to a model, I added has_one_attached:profile_pic to my user.rb model. If I was storing multiple user images, I would’ve used has_many_attached:image alternatively.

Now in user registration_controller.rb file, I added the following code to update method

Configuring Active Storage

Next, I had to indicate where images would be stored. If I was using Amazon s3 or Google Cloud, this is where I’d declare those services. I chose to store my files locally so in config/storage.yml, I added:

Then, in config/environments/development.rb, I added config.active_storage.service = :local within Rails.application.configure do:

Allowing Users To Upload On The Front-End

Finally, I added a file upload field to my pre-existing user registration form.

I added a new f.label and f.file_field for :profile_pic, which inserted a “Choose File” button within the form. Clicking “Choose File” opens a Finder/File Explorer window where the user can select a profile image on their device.

Displaying User Images

Once the user successfully upload the profile picture, I would display the image as shown below

What’s New in React 19? React Canaries, Actions, and React Compiler

Awais Zafar — Sat, 27 Apr 2024 09:48:23 +0000

React 18 was announced in March 2022 and with this many new and amazing features were added. For instance, automatic batching wasn’t available in the previous versions. But in React 18, it was added. And now, as per the React blog, React 19 is also coming.

React Compiler

Manual memoization is done whenever there’s too much re-rendering in case a state changes. But you see this very action is not right. Because it can make your code a bit messy. Just one wrong step and you’ll go down the rabbit hole. Even React considers manual memoization just a compromise.
They want React to re-render itself whenever there’s a state change. So, now they are developing a React compiler. It will prevent unnecessary renders. Instagram is already using it in its production. But what’s the advantage of React compiler? Well, it renders the right parts wherever a state is changed. In fact, it will also compile code as per the rules of JavaScript and React. In other words, this means that it will detect the code that isn’t aligned with the rules of React and JavaScript.

Actions

In React 19, Server Actions are extended to include client-only apps. The APIs are also extended so that data handling is supported in client-only apps. But wait. What are Actions?

Well, as per React’s official website, Action allows you to pass a function to DOM elements. Further, Actions work both synchronously and asynchronously. They can also be defined on the client side.

Apart from this, two new hooks are also added in React. They are: useFormStatus and useFormState.

useFormStatus()

The useFormStatus Hook provides status information of the last form submission.

To get status information, the Submit component must be rendered within a form. The Hook returns information like the pending property which tells you if the form is actively submitting.

useFormState()

This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form applications.

dirtyFields is an object with the user-modified fields. Make sure to provide all inputs' default values via useForm, so the library can compare against the default values.

Further, another feature called useOptimistic will also be added in React 19. This hook will show a different state even when an async action is in progress.

3.React Canaries

Finally! React thought of something really amazing: React Canary.

Using this, you can test new features even when they are in the design stage. So, this means you can use new features without even waiting for React’s next version release.

Result of all this? The community will be involved in deciding and finalizing features. So, if you want to include yourself in finalizing features of React, make sure you check the React Labs Blog Series. For now, React has added React Server Component, Asset Loading, Document Metadata, and Actions in React Canary.

Apart from these, in React 19, you will also find:

Directives namely use client and use server. Using these directives, you’ll be able to write reusable components.
Built-in support when it comes to rendering title, meta, and link tags. Further, their work will be similar in every environment.
Resource Loading APIs as well as Suspense integrated with resources like stylesheets, fonts, and scripts.

In short, in React 19, directives, built-in support for varying tags, two hooks, automatic rendering, and react canaries are all new!

TURBO Rails

Awais Zafar — Fri, 26 Apr 2024 23:34:36 +0000

Turbo Rails was released in December 2020, the first line of the README was: "Turbo gives you the speed of a single-page web application without having to write any JavaScript". I was blown away by how easy it was to work with. And the best part? No more React, no more Redux, no more Formik! Instead, I could work with the tools I love and know well: Ruby on Rails and Simple Form. Boring? Yes, but I could benefit from React with a tenth of the effort. Turbo and its integration for Ruby on Rails are brand-new tools with impressive features.

All clicks on links and form submissions are now AJAX requests, which speeds up our applications thanks to Turbo Drive. We get this benefit for free as it does not require any work; we only have to import the library.
Second, it is now effortless, with just a few lines of code to build dynamic applications by slicing pages into different pieces with Turbo Frames. We develop our CRUD controllers just like before, and just by adding a few lines of code, we can replace or lazy-load independent parts of the page!
Third, it becomes trivial to add real-time features with the help of Turbo Streams. Want to add real-time notifications to your application, build a real-time multiplayer game, or a real-time bug monitoring system? The real-time part is just a few lines of code with Turbo!

Turbo speeds up Rails applications reduces the amount of Javascript we have to write, and makes it easy to work with real-time features

Understanding what Turbo Drive is

Turbo Drive is the first part of Turbo, which gets installed by default in Rails 7 applications, as we can see in our Gemfile and our JavaScript manifest file application.js:

With Turbo Drive, our Ruby on Rails applications will be fast by default because the HTML page we first visit won't be completely refreshed. When Turbo Drive intercepts a link click or a form submission, the response to the AJAX request will only serve to replace the

of the HTML page. In most cases, the of the current HTML page won't change, resulting in a considerable performance improvement: the requests to download the fonts, CSS, and JavaScript files will only be made once when we first access the website.

Disabling Turbo Drive

We may want to disable Turbo Drive for certain link clicks or form submissions in some cases. For example, this can be the case when working with gems that don't support Turbo Drive yet.
To disable Turbo Drive on a link or a form, we need to add the data-turbo="false" data attribute on it.
On the Articles#index page, let's disable Turbo Drive on the "New article" link:

Now let's refresh the page and click on the "Create article" link. We will notice the unpleasant white "blink" of the full HTML page refresh. If we perform this action again with the dev tools opened on the "Network" tab, we will notice that the browser makes four requests to the server:

One HTML request to load the Quotes#new HTML page
One request to load the CSS bundle
One request to load the JavaScript bundle
One request to load the favicon of the page

Now let's add Turbo Drive back by removing the data-turbo="false" from the "New quote" link, refresh the page, and experiment again. We won't see the unpleasant white "blink" because the browser does not fully reload the page. Under the hood, Turbo Drive converts the click into an AJAX request and swaps the

of the page with the response's .

What are Turbo Frames?

Turbo Frames are independent pieces of a web page that can be appended, prepended, replaced, or removed without a complete page refresh and writing a single line of JavaScript!

Let's create our first Turbo Frame. To create Turbo Frames, we use the turbo_frame_tag helper. Let's wrap the content on the Articles#index page in a Turbo Frame with an id of "new_form":

This HTML tag does not exist in the HTML language. It is a custom element that was created in the Turbo JavaScript library. It intercepts form submissions and clicks on links within the frame, making those frames independent pieces of your web page!

Now let's click on the "Create article" button and... The frame disappears from the page, and there is an error in the console: Response has no matching element. Let's explain this strange behavior.

When clicking on a link within a Turbo Frame, Turbo expects a frame of the same ID on the target page. It will then replace the Frame's content on the source page with the Frame's content on the target page otherwise will give a content missing error.

To make this work we will add a turbo frame tag with the same ID on the target page as well

See it worked as expected, When clicking on a link within a Turbo Frame, if there is a frame with the same ID on the target page, Turbo will replace the content of the Turbo Frame of the source page with the content of the Turbo Frame of the target page.

When clicking on a link within a Turbo Frame, if there is no Turbo Frame with the same ID on the target page, Turbo will remove the content of the Turbo Frame from the source page and log an error.

A link can target another frame than the one it is directly nested in thanks to the data-turbo-frame data attribute.

A link can target a Turbo Frame it is not directly nested in, thanks to the data-turbo-frame data attribute. In that case, the Turbo Frame with the same id as the data-turbo-frame data attribute on the source page will be replaced by the Turbo Frame with the same id as the data-turbo-frame data attribute on the target page.

There is a special frame called _top that represents the whole page. It's not really a Turbo Frame, but it behaves almost like one, so we will make this approximation for our mental model.

For example, if we wanted our "Create article" button to replace the whole page, we could use data-turbo-frame="_top" like this:

Of course, every page has the "_top" frame by default. When using the "_top" keyword, the URL of the page changes to the URL of the target page, which is another difference from when using a regular Turbo Frame.

As we can notice, Turbo Frames are a significant addition to our toolbox as Ruby on Rails developers. They enable us to slice up pages in independent contexts without writing any custom JavaScript.

Editing quotes with Turbo Frames

The first thing we need to achieve is that when clicking on the "Edit" button of an article on the Articles#index page, the card containing the article will be replaced by a card containing the edition form. Replacing pieces of a web page is precisely the kind of job Turbo Frames can do for us! But what ID should we give our Turbo Frames?

On the Articles#index page, each Turbo Frame around each quote card should have a unique ID. A good convention is to use the singular name of the model followed by the id of the quote.

With our Turbo Frames appropriately named, when clicking on the "Edit" button of the article on the Articles#index page, the content of the Turbo Frame containing the form should replace the content of the Turbo Frame containing the second article.

The Turbo Stream format

Forms in Rails 7 are now submitted with the TURBO_STREAM format. Let's destroy a quote and inspect what happens in the log of our Rails server:

As we can see, the ArticlesController will process the #destroy action with the TURBO_STREAM format. Let's explore what we can do with this format by making our destroy action only remove the Turbo Frame containing the deleted quote while leaving the rest of the page untouched.

In the controller, let's support both the HTML and the TURBO_STREAM formats thanks to the respond_to method:

As with any other format, let's create the corresponding view:

When the browser receives this HTML, Turbo will know how to interpret it. It will perform the desired action on the Turbo Frame with the ID specified by the target attribute. In our case, Turbo removes the Turbo Frame corresponding to the deleted quote leaving the rest of the page untouched. That's exactly what we wanted!

Note: As of writing this chapter, the turbo_stream helper responds to the following methods so that it can perform the following actions:

With the combination of Turbo Frames and the new TURBO_STREAM format, we will be able to perform precise operations on pieces of our web pages without having to write a single line of JavaScript, therefore preserving the state of our web pages.

Title: Understanding Stimulus in Rails: A Guide to Interactive Web Development

Awais Zafar — Wed, 27 Mar 2024 21:17:34 +0000

In the ever-evolving landscape of web development, creating dynamic and interactive user interfaces has become increasingly important. As developers, we strive to enhance user experience by incorporating rich interactions seamlessly into our web applications. One powerful tool for achieving this goal in Rails development is Stimulus.

Stimulus is a JavaScript framework designed to augment your HTML with just enough JavaScript to make your UIs come to life without the complexity of a full-fledged front-end framework like React or Angular. Developed by Basecamp, Stimulus seamlessly integrates into Rails applications, allowing developers to enhance their views with interactive components while adhering to Rails' conventions and principles.

Getting Started with Stimulus

One of the key principles behind Stimulus is its simplicity and ease of integration. Let's walk through the basic steps of getting started with Stimulus in a Rails application:

1. Installation

To start using Stimulus in your Rails application, you need to include the Stimulus library. You can do this by adding it to your Gemfile:

Then, run bundle install to install the gem.

2. Setting up Stimulus

After installing the gem, you need to set up Stimulus in your application. Rails makes this process straightforward by including the necessary Stimulus assets automatically.

3. Creating Controllers

In Stimulus, controllers are used to encapsulate behavior and manage interactions within specific elements in your HTML. To create a Stimulus controller, you can use the Rails generator:

This command will generate a new controller file in the app/javascript/controllers directory.

4. Writing JavaScript

Inside your controller file, you can define the behavior you want to attach to your HTML elements using JavaScript. For example:

Here,I have defined the targets and actions that we will be using.

5. Binding Controllers, actions and targets to HTML Elements

Finally, you need to bind your controller to HTML elements in your views.

Here we have connected our controller and using actions and targets.

Advantages of Stimulus in Rails

1. Lightweight Integration

Stimulus seamlessly integrates into Rails applications without introducing unnecessary complexity. Since it operates primarily within the confines of standard HTML and JavaScript, there's no need to restructure your entire application to incorporate Stimulus.

2. Progressive Enhancement

Stimulus follows the principle of progressive enhancement, allowing you to enhance your UIs with interactive features while ensuring that your application remains functional even for users without JavaScript enabled.

3. Familiarity and Convention

For Rails developers, Stimulus feels right at home. It leverages Rails conventions and works well with existing Rails patterns, making it easy to adopt and maintain in your projects.

Conclusion

Stimulus provides Rails developers with a powerful yet lightweight framework for adding interactivity to their web applications. By embracing the principles of simplicity, convention, and progressive enhancement, Stimulus empowers developers to create dynamic user interfaces while staying true to the ethos of Rails development.

Whether you're building a simple CRUD application or a complex web platform, consider incorporating Stimulus into your Rails projects to enhance user experience and streamline development. With its intuitive approach and seamless integration, Stimulus opens up a world of possibilities for crafting modern, interactive web applications in Rails.

Simplifying State Management in React with useContext Hook

Awais Zafar — Wed, 27 Mar 2024 20:01:21 +0000

In React, managing a state can sometimes feel like a juggling act. As your application grows in complexity, passing state down through multiple layers of components can become cumbersome and lead to what's commonly known as "prop drilling". This is where React's useContext hook comes to the rescue, offering a simpler and more elegant solution to manage state across your application.

Understanding the Context

The useContext hook is one of React's built-in hooks. It allows functional components to consume context created by a Provider component higher up in the tree. This means that instead of passing props down through intermediate components, you can directly access the context you need within any component.

Basic Usage

Create a context

In your App component

In your Counter function component

In this example, we create a context using React.createContext() and then define a provider component (CounterProvider) that wraps around the part of the component tree where we want to share the context in the App component. The App functional component simply imports the CounterProvider component. Here we also used our custom hooks that return the state directly to our functional component without importing useContext from React again in the Count component hence, making our components cleaner.

Benefits of useContext

Simplified Prop Drilling: With useContext, you can avoid passing props down through multiple layers of components, making your codebase cleaner and more maintainable.
Keep Context Small and Focused: Instead of creating a single monolithic context for your entire application, consider breaking it down into smaller, more focused contexts based on the specific needs of your components.

Conclusion

The useContext hook provides a simple and elegant solution for managing the state in React applications. By leveraging context, you can avoid prop drilling and make your code more modular and maintainable. However, it's important to use useContext judiciously and follow best practices to ensure that your code remains clean and scalable. With useContext, state management in React has never been easier!