DEV Community: Jude

Turn a checkbox into a button without any javascript.

Jude — Sun, 02 Jul 2023 05:44:45 +0000

Sometimes checkboxes aren't the best UI/UX for your users, especially if you have a lot of options that you need to give to a user to choose from.

This technique allows you to turn a checkbox into a button, creating a larger click area and also giving better context to what the user is selecting.

NOTE: In the HTML it's important that the input comes before the label.

And that's it. If you have any questions or it's not clear what's going on, or even if you have a better way of achieving this, feel free to comment below.

Stimulus JS - Accessing an action in another controller

Jude — Mon, 19 Jun 2023 15:44:13 +0000

If you've used Stimulus before, you should know that controllers are scoped. This can be useful, but you might come across a case where we want to trigger an action in a controller that is out of scope.

We can do this with a custom event.

I'll start off with a tl;dr version and will follow with an explanation

TL;DR

// The javascript
const trigger = new CustomEvent("event-name");
window.dispatchEvent(trigger);
// or js inline 
<button onclick="window.dispatchEvent(new Event('event-name'))"> Button </button>

<!-- The HTML attribute -->
data-action="event-name@window->controller#action"

Explanation

Here's a contrived example, to give you an idea of how to get this working. Here are some circles we want to turn red when we click a button.

<div data-controller="controller1">
  <button data-action="click->contoller1#turnCircleRed">
    Button 1
  </button>
  <div 
    class="round-square" 
    data-controller1-target="circle">
  </div>    
</div>

<div data-controller="controller2">
  <button data-action="click->contoller2#turnCircleRed">
    Button 2
  </button>
  <div 
    class="round-square" 
    data-controller2-target="circle">
  </div>
</div>

Now let's create the controllers

// app/javascript/controllers/controller1
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="controller1"
export default class extends Controller {
  static targets = [ "circle" ]

  turnCircleRed() {      
    this.circleTarget.style.backgroundColor = "red";
  }
}

and here's the second one.

// app/javascript/controllers/controller2
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="controller2"
export default class extends Controller {
  static targets = [ "circle" ]

  turnCircleRed() {      
    this.circleTarget.style.backgroundColor = "red";
  }
}

Now when we click on either of the buttons, the background of the circle next to the button will turn red. Even though both targets are called "circle", because each stimulus controller only has access to elements inside of the div (or element) where it was declared, it cannot see or interact with the other circle.

Now, what we want to happen is that when we click on the second button, we want BOTH circles to turn red.

To do this, we add a custom event to controller2's turnRed action.

// app/javascript/controllers/controller2
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="controller2"
export default class extends Controller {
  static targets = [ "circle" ]

  turnRed() {        
    this.circleTarget.style.backgroundColor = "red";

    // Custom event we will use as our trigger
    const trigger = new CustomEvent("trigger-red");
    window.dispatchEvent(trigger);
  }
}

and to our view, we want to add an action that will listen for this event.

<div data-controller="controller1">
  <button data-action="click->contoller1#turnRed">
    Button 1
  </button>
  <div id="circle1" class="round-square" 
    data-controller1-target="circle" 
    data-action="trigger-red@window->contoller1#turnRed"> 
  </div>
</div>

<div data-controller="controller2">
  <button 
    id=circle2" 
    class="round-square" 
    data-action="click->contoller2#turnRed"
  >
    Button 2
  </button>
  <div class="round-square" data-controller1-target="circle">
  </div>
</div>

Now when we click on Button 2 the following will happen

controller2#turnRed action will run and #circle2 will turn red.
Then an event called "trigger-red" will be attached to the "window" element
"trigger-red@window" will see this, and run controller1#turnRed

A mild word of warning

Now we know how to do this, I think it's a good idea to use this sparingly as it does add some complexity to our code and makes us use a little more mental gymnastics to read and update our code in the future.

Let me know if this was helpful, if you have any questions, or spotted some mistakes/errors or got something completely wrong.

Thanks for reading, and happy coding!

References

https://stimulus.hotwired.dev/handbook/introduction

Ruby On Rails Beginners - Demystify the magic. Part 3: The link_to method

Jude — Wed, 26 Apr 2023 15:13:19 +0000

In our two last posts, we went over how ruby methods in Rails are usually written without parentheses, and that they really are just plain old ruby methods.

Now we are going to dive into the Rails documentation to get a better understanding of what the link_to helper method is used.

Finding the documentation

Visit https://edgeapi.rubyonrails.org/ and bookmark this page, if you haven't already.

Note: when you google Rails methods, be aware that sometimes it will take you to an older version of the API docs.

In the top left search field type in link_to, not only does it give us the link_to, but it also shows us there's a link_to_if helper and some link_to_unless helpers too! Let's stick to the link_to helper for now.

https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to

Breaking it down

To start lets look at the breakdown of an anchor tag in HTML

Pretty straightforward.

Now the Rails docs start off with this first line.

link_to(name = nil, options = nil, html_options = nil, &block)

That looks OK, it's just a method that takes in 4 arguments, which are effectively 3 arguments, with the &block meaning when we call the method we have the option to follow it with a do block (we will cover this later).

Let's take a look at each of the arguments and see what they do.

name = nil

In the link_to description, it says "Creates an anchor element of the given name using a URL created by the set of options."

Straight off, this sounds a little bit cryptic. "name" or "options" don't really make sense in the context of an HTML anchor link.

Luckily if we continue reading, we get a little bit more context.

It breaks it down into the context of the actual output, so we see that
`link_to(name = nil, options = nil, html_options = nil, &block)
is actually
link_to(body, url, html_options = {})

So the name = nil is actually the body of the anchor link, ie: the text between the <a> and </a> tags.

Also, if it's not passed in as an argument, it defaults to nil (that's what the = nil means). But when would you ever create an empty anchor element? Well, you wouldn't, but we need this for when we pass the method a block, which we will cover later.

options = nil

Again, options = nil doesn't really tell us much about what this is for, but looking at the example we see that the second argument is the URL link_to(body, url, html_options = {}). We will usually put in a string of the URL we want or we use a path helper thats rails gives. eg: root_path, which will return a string of our site's root path. Pretty easy so far.

html_options = nil

Now this one is a little trickier. Even the given example doesn't really give us any more information.

To figure out what this is let's actually experiment with the method in a Rails app.

Let's start off with a basic link that has a body and a URL.
<%= link_to "Dev Blog", "http://dev.to" %>

This will return an anchor link like this
<a href="http://dev.to">Dev Blog</a>

OK, so let's see what the html_options do, remembering that we need to pass in a hash, so each element has a key with a value.
<%= link_to "Dev Blog", "http://dev.to", {beep: "boop"} %>

returns
<a beep="boop" href="http://dev.to">Dev Blog</a>

So html_options allows us to create attributes for our anchor tag. We can add a class, an id, and any other attribute our link needs.

<%= link_to "Dev Blog", "http://dev.to", {class: "link primary", target: "_blank"} %>

returns
<a class="link primary" target="_blank" href="http://dev.to">Dev Blog</a>

note: target="_blank" will open the link in a new window.

We can even change the request from a GET to any of the other request methods. (GET being the default action of a link)
<%= link_to "Delete", "listing/24",{method: :delete, class: 'btn-secondary'} %>

returns:
<a class="btn-secondary" rel="nofollow" data-method="delete" href="/listing/24">Delete</a>

Now here you will notice that the method attribute has turned into data-method, Rails sees you are changing the method attribute and automatically prefixes it with data-.
This is something that is required for Hotwire and Turbo to work.

You also see that now there is a rel="nofollow" attribute. Again, this is something that Rails adds for us automatically and this tells search engines to ignore the link when they are indexing your website. There's no page or content when you click on a link that sends a delete request, so there's nothing for a search engine to index.

See more details here:
https://backlinko.com/nofollow-link

&block

Now this is easy to implement but a little tricky to understand how it's doing it, so today let's just stick with the implementation side of things. (Look up ruby callback methods if you want a better understanding of how this works.)

Sometimes we need a link to be more than just a text link, like a button or a card component, this is where the &block comes in.

So now when we call the link_to method, we follow it with a do block, with the required HTML written inside the block.

example:
<%= link_to "http://dev.to" do %> <div class="card"> This is a link block </div> <% end %>

returns:
<a href="http://dev.to"> <div class="card"> This is a link block </div> </a>

This allows us to make card components that are links themselves. Pretty cool.

It's all pretty clever stuff but can be a little confusing if you don't know what it's doing.

One last thing

Just as we covered in Part 1, there's also a way of writing the link_to method arguments without wrapping the options in curly braces. So instead of writing this

<%= link_to "Dev Blog", "http://dev.to", {class: "link primary", target: "_blank"} %>

you can write, and will quite often see this:
<%= link_to "Dev Blog", "http://dev.to", class: "link primary", target: "_blank" %>

Again, Ruby is smart enough to know that if you have a method that requires 3 arguments, and when we call it we pass in 6 arguments, all the arguments after the second argument will become a hash that gets passed in as the third argument.

I prefer to use the curly braces, as it makes it more explicit when you are reading the code.

Conclusion

Now we know how to use the API docs and we understand the link_to helper method a little bit better. Next, we will look at the actual source code for Rails to get an even better understanding.

Multiple Images with Rails 7: Making Images Sortable

Jude — Thu, 26 Jan 2023 06:44:21 +0000

Note: This post will eventually be part of a series about a complete solution for users to upload and manage multiple images that are attached to a record.

At this point, you should have image hosting set up, you can upload multiple images, and they should persist when editing the record.

Next, we want to add the ability to re-arrange the order of the images and for the order to persist.

To do this we are going to use a few tools:
Importmaps, stimulus, RequestJS, acts_as_list gem, and a js library called sortable_js.

We will start off by setting up all of the required dependencies.

acts_as_list setup

https://github.com/brendon/acts_as_list

Add gem 'acts_as_list', '~> 1.0.4' to your Gemfile, and run bundle install
Add a position column to ActiveStorageAttachments table.
rails g migration AddPostionColumnToActiveStorageAttachments position:integer.

This is what the acts_as_list gem will use to manage the order of the images.

Crate an initializer so act_as_list can access the ActiveStorage Model

# config/initializers/active_storage_acts_as_list.rb
module ActiveStorageAttachmentList
  extend ActiveSupport::Concern

  included do
    acts_as_list scope: %i[record_id record_type name]
    default_scope { order(:position) }
  end
end

Rails.configuration.to_prepare do
  ActiveStorage::Attachment.send :include, ActiveStorageAttachmentList
end

Don't forget to restart the server whenever you add or update your initializers.

sortable_js setup

https://github.com/rails/requestjs-rails

Run bin/importmap pin sortablejs
Create the stimulus controller. run rails g stimulus sortable
Setup the controller

// app/assets/javascript/controllers/sortable_controller.js
import { Controller } from "@hotwired/stimulus"
import Sortable from "sortablejs" // Add this line, to access the sortablejs library
// Connects to data-controller="sortable"
export default class extends Controller {
  connect() {
    console.log("Sortable controller connected") // I add this for testing purposes. Once everything is working you can comment this line out.
  }
}

Connect the view to the controller

# app/views/cars/_form.html.erb
<div class="images-wrapper" data-controller="sortable" >
   <% @car.images.each do |image| %>
      <div class="form-image-card">
         <%= image_tag image, class:"form-image" %>
      </div>
   <% end %>
</div>

Now when you load the page, in the browser console, you should see Sortable controller connected

RequestJS Set up

https://github.com/rails/requestjs-rails

Add the requestjs-rails gem to your Gemfile: gem 'requestjs-rails'
Run ./bin/bundle install.
Run ./bin/rails requestjs:install
Add import { FetchRequest } from '@rails/request.js' to the sortable controller.

// app/assets/javascript/controllers/sortable_controller.js
import { Controller } from "@hotwired/stimulus"
import Sortable from "sortablejs"
import { FetchRequest } from '@rails/request.js'

// Connects to data-controller="sortable"
export default class extends Controller {
   ...

And that's it for setting up our dependencies. Now it's on to the code.

Adding drag and drop functionality

In our sortable stimulus controller, we want to connect the parent element that contains the images we want to sort. So in our view file, we already have:

# app/views/cars/_form.html.erb
<div class="images-wrapper" data-controller="sortable" >
   <% @car.images.each do |image| %>
      <div class="form-image-card">
         <%= image_tag image, class:"form-image" %>
      </div>
   <% end %>
</div>

Now we want to create a sortable element out of the "images-wrapper" div.

// app/assets/javascript/controllers/sortable_controller.js
...
// Connects to data-controller="sortable"
export default class extends Controller {
  connect() {
    console.log("Sortable controller connected") # I add this for testing purposes. Once everything is working you can comment this out.
    // 'this' is the element in the view that is connecting to this controller. 
    this.sortable = Sortable.create(this.element, {
      animation: 150,
    })
  }
}

Now, back in your view, you should now be able to drag and drop the images, to change their order. Huzzah! The only issue is that it doesn't persistent yet, so as soon as you reload the page the image order won't have saved.

Persisting the order

This is where acts_as_list gem comes into play. To start off, we will create a route that we will use to trigger the controller action that will save the updated order of the images when an image has been dragged and dropped.

routes

# config/routes.rb
resources cars do
   member do
      patch :move_image
   end
end

This will give us a path of /cars/:id/move_image that will run the action move_image in the car controller.

controller

Next, we will set up the controller by adding the following action

# app/controllers/cars_controller.rb
...
   # /cars/:id/move_image
   def move_image
    #Find the car who's images we are re-arranging
    @car= GeneralListing.find(params[:id])
    #Find the image we are moving
    @image = @car.images[params[:old_position].to_i - 1]
    # Use the insert_at method we get from acts_as_list gem
    @image.insert_at(params[:new_position].to_i)
    head :ok
  end
...

stimulus controller

When an image is dropped we want our stimulus controller to send the :move_image patch request.

import { Controller } from "@hotwired/stimulus"
import Sortable from "sortablejs"
import { FetchRequest } from '@rails/request.js'

// Connects to data-controller="sortable"
export default class extends Controller {

  static values = {
    url: String,
    test: String
  }

  connect() {
    console.log("Sortable controller connected")
    this.sortable = Sortable.create(this.element, {
      animation: 150,
      ghostClass: "sortable-ghost",
      chosenClass: "sortable-chosen",
      dragClass: "sortable-drag",
      onEnd: this.end.bind(this)
    })
  }

  async end(event) {
    console.log("Sortable onEnd triggered")

    const request = new FetchRequest('patch', `${this.urlValue}?old_position=${event.oldIndex + 1}&new_position=${event.newIndex + 1}`)
    const response = await request.perform()
    console.log(response)
  }

}

and that should be it. The user should now be able to drag and drop images, and the order should persist.

Starting out in Rails can be intimidating so if I've missed anything or if you are unsure of any of the steps, comment below and I will update the post for clarity.

References
Gorails Tutorial
https://gorails.com/episodes/sortable-drag-and-drop
https://github.com/gorails-screencasts/sortable-drag-and-drop

Gorails Forum
https://gorails.com/forum/sorting-images-using-active-storage

Drifting Rails Tutorial - Setting up Import Maps
https://www.driftingruby.com/episodes/importmaps-in-rails-7

Code with Pete Tutorial
https://www.youtube.com/watch?v=FKAMRLQpypk

Request JS
https://www.youtube.com/watch?v=ACChhA4GdfM

Request JS
https://github.com/rails/requestjs-rails

Adding acts_as_list to active storage
https://gist.github.com/kwent/050b0a580fa635e5aaa225ea3a1dd846

Sortable JS
https://sortablejs.github.io/Sortable/

Ruby On Rails Beginners - Demystify the magic. Part 2: It's just a ruby method

Jude — Thu, 12 Jan 2023 19:16:32 +0000

Part 1 | Part 3

Following on from part 1, we are going to break down the link_to method. It's something you'll use almost as soon as you start working on a rails app, and it's fairly easy to understand.

The link_to method is referred to as a helper. A helper is just a ruby method that is available to use in Rails view files. Rails comes with built-in helpers, like link_to, but you can also create your own.

<%= link_to "Apple", "http://apple.com" %>

or if you prefer to use parentheses

<%= link_to("Apple", "http://apple.com") %>

Which will render out the following HTML code.

<a href="https://apple.com">Apple</a>

To get an idea of what's going on here, we can recreate a basic version of the method ourselves.

def link_to(text, url)
   "<a href='#{url}'>#{text}</a>".html_safe
end

And that it's. The built-in helper is more complex than this, but at it's most basic version this is all it does.

The built in helper can also take in a third argument, which is a hash where you can pass in HTML options, which you can learn more about here

In the next part we'll dive in to the rails api docs, and learn a little more about the link_to method.

Ruby On Rails Beginners - Demystify the magic. Part 1: The Ruby looks a little different

Jude — Thu, 12 Jan 2023 11:23:34 +0000

This is a series where we try and look past the Ruby 'magic' and understand how to demystify Rails, starting from 0 to reading Rails source code! Scary stuff.

Part 2 | Part 3

When you first start learning Rails, it's usually after learning some basic programming in Ruby. This is still the best way to get into rails for a beginner, but making the jump can be a little bit confusing.

For me, the Ruby in Ruby on Rails looked different to what I was used to when I was writing Ruby, and when I was starting out I found it hard to understand what was going on. One of the reasons is that my eyes were used to seeing method arguments wrapped in parentheses method_name(arg1, arg2). Something which you commonly don't use in rails.

So to hopefully help demystify Rails for someone (anyone?) going through the same confusion, I'm going to use the link_to method, as it's one of the first things you will work within a Rails app.

What is link_to

Link_to is a method used in Ruby on Rails to create HTML links that point to a specific web address (url). It’s a powerful and flexible tool and it's an essential part of any Rails application.

It takes two arguments (it can also take a third argument and a block which we will cover later), the text to be displayed, and the target URL.

This is how you would usually see it, in a view file

<%= link_to “Home”, root_path %>

This is what it looks like with parentheses

link_to("Home", root_path)

For me on my first RoR day/week, this would have made a lot more sense. I think I missed the explanation that when you call a method in ruby that requires arguments, even if you don't use parentheses, ruby is smart enough to figure out that they must be arguments, so they are treated as such.

Because I missed that, I just put it down to that Rails magic that everyone keeps talking about.

This may seem really silly, and maybe it is, but if this helps anyone, even just a little bit, then I'm more than happy to look a little bit silly.

In part 2, I'll try and drive home that Rails is just plain old ruby, and we'll look at re-creating a basic version of the link_to method.

part 2 >>

Creating an External, Bootable, MacOS Installer

Jude — Thu, 27 Oct 2022 06:03:17 +0000

For every major MacOS release, I've gotten in to the habit of formatting my computer and doing a fresh OS install. I've done this a few way over the years, but my current process starts with creating a bootable external drive I can boot from.

My current process to create a bootable MacOS drive, is as follows.

Step 1. Find an external USB drive with at least 16GB of free space, and plug it in. This drive will be wiped, so make sure there is no data on it that you need.

Step 2. Open the terminal and enter the following command

softwareupdate --list-full-installers

This will give you a list of available installers.

Step 3. In the terminal enter the following command using the version number of the OS version you want to download.

softwareupdate --fetch-full-installers --full-installer-version 13.0

This will take a while to download...

Step 4. Once the download has finished, back in the terminal write the following command.

sudo /Applications/Install\ macOS\ [macOS VERSION NAME].app/Contents/Resources/createinstallmedia --volume /Volumes/[USB DRIVE NAME]

Replace [macOS VERSION] with the version name you have downloaded, and replace [USB DRIVE NAME] with the name of the external drive you are making bootable.
eg:

sudo /Applications/Install\ macOS\ Ventura.app/Contents/Resources/createinstallmedia --volume /Volumes/untitled

This will also take a while, but once it has finished, you will now have an external drive you can boot from!

To boot from an external drive, you will need to boot to the boot option screen and select the drive you just created.

To get to the boot option screen:
Intel Mac - Restart Holding down the Option key.
Apple Silicon -Shut down the computer, then press and hold the power button.

Reference
https://support.apple.com/en-us/HT201255