DEV Community: Ahmad khattab

Representing boolean conditions as domain concepts

Ahmad khattab — Thu, 29 Dec 2022 10:25:37 +0000

Booleans. These program control switches, they introduce branching in code and do not allow to have linear path for code execution. That is fine, because in the real world, everything is the result of another action prior to itself.

A boolean method is a method that returns a boolean result, either true or false, or truthy or falsey values. You rarely see methods being created just for the sake of in/equality checks. It is preferred to perform the check inside the code as it's more obvious what attribute are we checking the equality for.

Writing equality checks inside boolean statements does not give any context as to why this attribute is checked and not another attribute. In other words, the domain knowledge is lost.

The domain is the problem which the code tries to solve.

Imagine a set of objects that looks like this,

class Person
  attr_accessor :name

  def initialize(name)
    @name = name
  end
end

class Car
  attr_accessor :person

  def initialize(person)
    @person = person
  end
end

If we want to determine if a car is owned by a business. We usually perform a check against the person attribute of the Car object.

john = Person.new "John Doe"
alyn = Person.new "Alyn Oakenfist"
ford = Car.new person

Given these three objects above. To determine if ford belongs to john or alyn, we can write a conditional that looks like this.

if ford.person.name == john.name
  puts "owned by John"
else
  puts "owned by Alyn"
end

Notice the condition we're checking. There is no context given around the code as to why we're checking the person attribute. Some domain logic is lost here, we know why we're checking. But what about someone who did not write the code, or even, our future self.

I've grown very fond of the idea of representing these conditions as domain concepts--methods of an object. I like to ask myself why the check is performed? The answer is: the check is performed to determine if car is owned by a person. In the answer, i can extract the domain concept, i.e ownership of a car, and give it a (method) name.

Let's do that, let's add a method inside the Car object that determines if this Car is owned by a person or not.

class Car
 def owned_by?(person)
    self.person.name == person.name
 end
end

The condition above then, can be simplified into

if ford.owned_by? john
  puts "owned by John"
else
  puts "owned by Alyn"
end

Not only the resulting code is simpler. It also saves the caller the pain of having to memorize attribute names .person.name, they can simply call the owned_by? method without having any knowledge of it's underlaying implementation. Another bonus is that this code is more maintainable. Because the reference to person is only made inside the Car object, in the future, if this attribute is changed, or the attribute we check the equality for changes, it's a simple one-line change instead of finding and replacing everywhere we're accessing person.name.

Some domain concepts are bidirectional. Both objects can perform the equality check. In this example, a Car can be owned by a Person. Also, a Person can own a Car. In these cases, i like to add the method to both objects. At first glance it might seem like duplication. But as with everyday life, the context in which the code is written differs. So, having different methods exposed on different objects enriches the vocabulary used inside the code.

class Person
 def owns?(car)
    name == car.person.name
 end
end

Instance methods that return a boolean results are an important part of the program. They allow to capture domain concepts and gives the a name inside the code as opposed to letting them float inside the codebase.

Hope you enjoying this. Have a wonderful time coding.

Opinions on Programming: Eliminating one-off variables with Object#then

Ahmad khattab — Sat, 17 Sep 2022 22:42:12 +0000

Ruby is a pretty versatile language. It can be used to write OOP and Functional code at once. Ruby provides multiple meta-programming facilities as well.

One of the features of Ruby's Objects that i've come to like, is a method, namely #then.

It accepts a block, proc, or a lambda. That receives the object itself as the only argument, these "callbacks" then can modify or "tap" into the object's state. Eventually, it returns the last line from the passed lambda, which can be used to store inside a variable(which it's sibling #tap would not do)

Every Object in ruby responds to a then method. It evaluates the passed proc in the context of the caller(i.e the Object itself), then returns the last line executed inside the block. Take this class

class Person
  attr_reader :first_name, :last_name

  def initialize(first_name, last_name)
    @first_name = first_name
    @last_name = last_name
  end

  def name
    "#{first_name} #{last_name}"
  end
end

Given this Person class above, let's say we want to get the name of the person. We could do this,

user = Person.new "John", "Doe"

user_full_name = user.name

Here we're storing the new Person object inside the user variable, which we're only using in a single place(to log the name to the console). With then, we can do

user_full_name = Person.new("John", "Doe").then(&:name)

The code gotten shorter. Because we're not storing an extra variable(the user), after this code execute, the garbage collector can safely remove this Object since no reference to it exists anymore.

This really shines inside conditionals, this snippet assumes you have Rails installed(or any other database-backed table)

@buyer = if Buyer.find_by(id: 123).nil?
  SomeExternalService.api(...).then do |response|
    Buyer.create(response.body)
  end
else
  ## do something else
end

We don't need to store the response into a variable then do Buyer.create from the response. Here is how it might look like without using then.

@buyer = if Buyer.find_by(id: 123).nil?
  response = SomeExternalService.api(...)
  Buyer.create(response.body)
else
  ## do something else
end

Personally, i've grown to like Object#then more and more, not to mention it's sibling, Object#tap.

Thanks for staying until the end. Hope you enjoyed this, have a wonderful day, and happy coding.

Resources

Object#then

Add font-size controls to Trix's toolbar

Ahmad khattab — Fri, 08 Apr 2022 23:12:53 +0000

This is a third blog-post on extending Trix with some new abilities. You can read the previous ones here

Adding Custom Attributes to Trix's toolbar

Ahmad khattab ・ Mar 12 '22

#trix #rails #javascript

Adding Underline, Underline color tools to Trix

Ahmad khattab ・ Apr 3 '22

#rails #javascript #ruby

Off we go

In this part we will add another ability to our Trix's attributes. This time we will try adding a font-size controls, much like Google Docs does it. Onwards.

Registering the extension

As with all other extensions we added, we need to inform trix that to recognise the new attribute we are adding, and so, we modify setupTrix method, and add the following.



setupTrix() {
 Trix.config.textAttributes.fontSize = {
   styleProperty: "font-size",
   inheritable: 1
 }

 this.trix = this.element.querySelector("trix-editor")
}

Now, because the font-size value is a dynamic value, i.e it's from user input, and the value isn't a constant, we use the form which is used for dynamic extensions. See this for more information.

Adding Markup

Next up, we add some markup that makes the font-size controls visible to the user.

Stimulus Controller

The logic for handling the font-size is a bit too much to place inside the Trix controller, it's already growing, and we should strive to put each tool into it's own controller.



export default class extends Controller {
  static targets = ["input"]
  static values = {
    size: { type: Number, default: 14 }
  }

  onKeyPress(e) {
    if(e.key === "Enter") {
      e.preventDefault()
      this.submit()
    }
  }

  increase() {
    this.dispatch("change", {
      detail: new Font(++this.sizeValue),
    })
  }

  decrease() {
    this.dispatch("change", {
      detail: new Font(--this.sizeValue)
    })
  }

  // private

  submit() {
    this.sizeValue = this.inputTarget.value
    this.dispatch("change", {
      detail: new Font(this.sizeValue),
    })
  }

  sizeValueChanged() {
    this.inputTarget.value = this.sizeValue
  }
}

The class is simple, it has two public methods, increase and decrease, each whom will add one or deduct one from the value.

When the value changes we dispatch an event that the trix_controller listens to. The Font class is a simple object that allows the trix_controller to either get the value in px or rem.



class Font {
  constructor(size) {
    this.size = size
  }

  get rem() {
    return `${this.size * 0.0625}rem`
  }

  get px() {
    return `${this.size}px`
  }
}

It uses JavaScript's getters to return the size in either px or rem, as the client wishes so.

Now, let's listen for the event inside the Trix controller.

First up, we need to listen to the event,



<div
data-action="color-picker:change->trix#changeColor font-size:change->trix#changeSelectionFontSize"

notice that on font-size:change event, we invoke changeSelectionFontSize



changeSelectionFontSize({ detail: font }) {
  this.trixEditor.activateAttribute("fontSize", font.px)
}

Notice, we are simply getting the font-size in pixels by calling Font#px getter.

Syncing

Now, it can happen that different parts of the content have different font-sizes. We need to update the font-size <input> with the font-size at the current cursor location.

This should also be very straightforward. We need to listen to each keypress on the editor. Then, determine if the current Piece has the fontSize attribute, if so, we notify font_size controller to sync it's state with cursor position. Translated into code, it looks like this, we add to the TrixController#sync, which is called on each keystroke.



sync() {
  if (this.pieceAtCursor.attributes.has("fontSize")) {
    this.dispatch("font-size:sync", {
      target: this.fontSizeControlsTarget,
      detail: this.pieceAtCursor.getAttribute("fontSize")
    })
  }
}

get pieceAtCursor() {
  return this.trixEditorDocument.getPieceAtPosition(this.trixEditor.getPosition())
}

When we detect that the current piece has the fontSize attribute, we alert FontSizeController to sync it's internal state with the editor. The payload(detail) will be font-size of the piece, which we get by calling Piece#getAttribute.

Next, let's wire the FontSizeController to correctly update it's internal state.



sync({ detail: fontSizeString }) {
  this.sizeValue = Font.rawNumberFrom(fontSizeString)
}

class Font {
  static rawNumberFrom(fontSizeString) {
    return Number.parseInt(fontSizeString)
  }
}

The payload will be a font-size string, i.e in the format of number{type}, so we call Font.rawNumberFrom static methods which gets the number in the string. We make use of JavaScript's built in Number.parseInt which correctly extracts the number from the string.

Via input

It can happen that the user enters a specific font-size into the input, and when they press Enter we submit by dispatching a change event.

Because the font-size input, when focused, will steal the active state from the trix editor, we need to remember the user's selection, so that next time we activate the font-size attribute, we activate it on the user's original selection.

First, let's listen for the focus event



<input type="number"
  data-trix-target="fontSizeInput"
  data-font-size-target="input"
  data-action="focus->trix#markSelection keydown->font-size#onKeyPress"

Notice the focus->trix#markSelection



  markSelection() {
    this.trixEditor.activateAttribute("frozen")
    this.fontSizeInputTarget.focus()
    this.trix.blur()
  }

Because calling activateAttribute will cause trix to focus, after activating the frozen attribute we blur.

Gotcha: the frozen attribute ships by default in Trix. It's a simple attribute that allows to communicate visual feedback to the user and give the impression that the selected text is in fact still selected.

Notice that, when the font-size input is focused, the "Frozen" text is still highlighted, that is because we activated the frozen attribute.

To remove the frozen attribute after the font-size was applied on the selection, we simply tell trix to remove it.



changeSelectionFontSize({ detail: font }) {
  this.trixEditor.activateAttribute("fontSize", font.px)
  this.trixEditor.deactivateAttribute("frozen")
}

If we don't remove the frozen attribute, we will end up with a weird UI state, see below gif.

After the font-size is applied and the user continues writing, the "Frozen" text still appears to be selected, however because we are explicitly telling Trix to remove the attribute. We end up with something far better, like this.

There are still a few more edge-cases to cover. But, that should be enough for you to add font-size controls to your Trix toolbars.

You can clone the repository here

Hope you enjoyed this one. Good day, and Happy Coding!.

Resources

JavaScript getters
Heroicons

Adding Underline, Underline color tools to Trix

Ahmad khattab — Sun, 03 Apr 2022 09:20:06 +0000

In the previous post. We managed to add a couple of new attributes to Trix's toolbar, text-color and background-color, respectively.

Here is the link to the first part, where we added color and background color tools to Trix.

Adding Custom Attributes to Trix's toolbar

Ahmad khattab ・ Mar 12 '22

#trix #rails #javascript

Before we continue, here is the list of terminologies to be aware of.

Terminologies

Editor: The Trix editor.

Document: The Trix document.

Piece: A substring of a text in the Document(see above)

Attribute: a transformation to apply on the selection

Activate attribute: apply attribute

Deactivate attribute: remove attribute

In this post, we will add another attribute, which is underline.

First of all, we need to add the extension to Trix. We modify the setupTrix method and add this bit of code.

setupTrix() {

   Trix.config.textAttributes.foregroundColor = {
      styleProperty: "color",
      inheritable: 1
    }

    Trix.config.textAttributes.backgroundColor = {
      styleProperty: "background-color",
      inheritable: 1
    }

    // new attribute
    Trix.config.textAttributes.underline = {
      style: { textDecoration: "underline" },
      parser: function(element) {
        return element.style.textDecoration === "underline"
      },
      inheritable: 1
    }

    this.trix = this.element.querySelector("trix-editor")
  }

Notice, there is a slight difference between the way we add the underline color and both textColor and backgroundColor.

The first difference is that in the underline extension, there is the style object. But, in the previous two attributes there was only styleProperty. Because both textColor and backgroundColor were being set dynamically, i.e a random color through the color picker. We need to extend it like so, the extension object should have the styleProperty which corresponds to a valid CSS property(kebab-case and not camelCase).

However, because the underline tool is static, i.e it's only one property being applied to the selection, then we can use the latter form.

    Trix.config.textAttributes.underline = {
      style: { textDecoration: "underline" },
      parser: function(element) {
        return element.style.textDecoration === "underline"
      },
      inheritable: 1
    }

style is an object that contains the list of attributes you want this extension to apply. In our case, we need to apply underline as the textDecoration property of the underline extension. Notice here we use the camelCase version instead of the kebab-case we used in the previous two.
parser is an optional function that returns a boolean indicating if this attribute is applied or not. When calling this.trix.attributeIsActive, trix will call the parser methods of the attributes. If you see yourself not needing to determine if this attribute is active or not, you can omit this callback.
inheritable determines if child nodes of this element who have other attributes applied on them can inherit this attribute or not.

Next, let's add a method that toggles the underline attribute we just added.

  toggleUnderline() {
    if(this.trixEditor.attributeIsActive("underline")) {
      this.trixEditor.deactivateAttribute("underline")
    } else {
      this.trixEditor.activateAttribute("underline")
    }

    this.trix.focus()
  }

We first determine if the attribute is active by calling attributeIsActive method, if so we toggle it off, and vice-versa. Unfortunately, Trix does not provide a toggleAttribute method. At the end, we give focus back to the editor.

Finally, let's add a button to allow for such behaviour, inside home/index.html.erb

      <button data-action="click->trix#toggleUnderline" class="w-5 h-5 flex items-center justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 360 360" style="enable-background:new 0 0 360 360;" xml:space="preserve">
          <g>
            <rect x="62.877" y="330" width="234.245" height="30"/>
            <path d="M180,290c61.825,0,112.123-50.298,112.123-112.122V0h-30v177.878C262.123,223.16,225.283,260,180,260   s-82.123-36.84-82.123-82.122V0h-30v177.878C67.877,239.702,118.175,290,180,290z"/>
          </g>
        </svg>
      </button>

And, voila. It looks like this

Underline Color

It might make sense to add another tool aside from underline. Which is underline color. Adding it is also relatively straightforward, let's add another extension to setupTrix method.

    Trix.config.textAttributes.underlineColor = {
      styleProperty: "text-decoration-color",
      inheritable: 1
    }

Remember, because this attribute is a dynamic attribute, meaning each color is a random value, a value which will be determined by the user. We use the same object as we used for textColor and backgroundColor.

Next, let's add the icon to the UI.

  <button disabled data-controller="color-picker dropdown" data-trix-target="underlineColorPicker"   data-action="click->dropdown#toggle" class="relative text-gray-300">
        <span class="w-5 h-5 flex items-center justify-center">
          <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 360 360" style="enable-background:new 0 0 360 360;" xml:space="preserve">
            <g>
              <rect x="62.877" y="330" width="234.245" height="30"/>
              <path d="M180,290c61.825,0,112.123-50.298,112.123-112.122V0h-30v177.878C262.123,223.16,225.283,260,180,260   s-82.123-36.84-82.123-82.122V0h-30v177.878C67.877,239.702,118.175,290,180,290z"/>
            </g>
          </svg>
        </span>

        <span data-dropdown-target="menu" data-action="click@window->dropdown#hide" class="hidden absolute -right-[20rem] bg-indigo-700 rounded-md p-2 shadow-xl">
          <span data-color-picker-target="picker">

          </span>
        </span>
      </button>

This button is disabled by default. Because to apply underlineColor, the selection needs to have underline attribute as active.

Notice, the second underline icon is disabled.

We need to listen to the keypress and determine if the current cursor location has the underline attribute as active, first let's hook up some event listeners to <trix-editor> element.

    <%= rich_text_area_tag "content", "", class: "w-full no-toolbar", data: { action: "keydown->trix#sync keyup->trix#sync" } %>

Next, let's add the sync method.

  sync() {
    if(this.trixEditor.attributeIsActive("underline")) {
      this.underlineColorPickerTarget.disabled = false
      this.underlineColorPickerTarget.classList.remove("text-gray-300")
    } else {
      this.underlineColorPickerTarget.disabled = true
      this.underlineColorPickerTarget.classList.add("text-gray-300")
    }
  }

It simply checks if underline is active, if so, it enables the second underline icon, else it will disable it again.

Notice, when the cursor enters the text that is underlined, it enables the underline color icon. But, if the text does not have the underline attribute active. It disables the underline color icon again.

Now, we need to select the text in the cursor location when the user opens the underline color picker. Because it's a button, when clicked, it will steal the focus from the editor.

What we need to do is, when the color picker modal is opened

Get the piece at the current cursor location.
Determine if the piece has underline attribute active.
- if active, set the selection as the current piece.

  toggleUnderlineColorPicker() {
    const piece = this.trixEditorDocument.getPieceAtPosition(this.trixEditor.getPosition());

    if (piece.attributes.has("underline")) {
      const indexOfPiece = this.trixEditorDocument.toString().indexOf(piece.toString())
      const textRange = [indexOfPiece, indexOfPiece + piece.length]
      this.trixEditor.setSelectedRange(textRange)
    }

    this.underlineColorPickerModalTarget.classList.toggle("hidden")
  }

Piece: A substring of text in the Document.

First, we get the current piece(substring) at the cursor location. A piece is simply a Piece class that encapsulates some logic and makes our lives easier.

After getting the piece(an instance of Piece class) we check if it has the underline attribute, thanks to Trix's well named methods, it reads naturally as piece.has(attributeName).

If the piece has the underline attribute. We get the index of the piece, we get the string representation of the document through this.trixEditorDocument.toString(). After that, we construct a range(an array of two elements). Typically, a range in the context of using Trix is an array of two elements

const range = [start_index, end_index]

After constructing the textRange range, we inform trix to mark the range as active by calling this.trixEditor.setSelectedRange(textRange). Eventually, we will toggle the color picker modal.

Because we already have two other color pickers, we need to determine the source of the color change, it's simply another condition to check for

  changeColor(e) {
    this.colorValue = e.detail
    if(this.backgroundColorTarget.contains(e.target)) {
      this.trixEditor.activateAttribute("backgroundColor", e.detail)
    } else if(this.textColorTarget.contains(e.target)) {
      this.trixEditor.activateAttribute("foregroundColor", e.detail)
    } else {
      this.trixEditor.activateAttribute("underlineColor", e.detail)
    }
  }

Finally, we end up with this.

Thank for reading this. Have a good day, and Happy Coding.

Resources

Adding Custom Attributes to Trix's toolbar

Ahmad khattab — Sat, 12 Mar 2022 13:14:07 +0000

We will be adding a color picker that allows to change the text color of a selection. A color picker that allows to change the background color. And Bold and Italic versions with custom UI elements instead of Tri'x default toolbar.

Terminologies

Editor: The Trix editor.
Document: The Trix document.
Piece: A substring of a text in the Document(see above)
Attribute: a transformation to apply on the selection
Activate attribute: apply attribute
Deactivate attribute: remove attribute

Trix editor is a rich text editor, i.e a glorified <input> tag that allows to add styles to the text written inside of it. Think of typing applications, such as Google Docs, MS Word, etc.

I really liked the simplicity that Trix provides out of the box and it's Document model. And of course, it has seamless integration with Ruby on Rails.

Here is a very abstract way of how Trix is designed

In this post we will work with second, the <trix-editor>.editor.

Every text passed through the trix editor will be converted into a Piece class. Which represents a piece of text in the Document.

Trix comes with a beautiful toolbar that allows to most of the things you want.

But, sometimes you need to adjust the styles to match the design that your team has given you. Or, you need to have some type of "Custom action" that needs to act and change a Piece of the Document. Then you would need to do some manual configuration(although Trix makes it really easy to add another action!, you'll see).

In this post. We will add a custom toolbar that allows to change the text color and background color of a selection. In future posts, we will add the ability to change the text size of a selection!.

After creating the project and installing the libraries, we end up with this

First things first. Let's hide the default trix toolbar. Open up app/assets/stylesheets/application.css.



trix-toolbar {
    display: none;
}

and add our custom toolbar. It looks like this initially,

To offer a color picker. We use a color picker package and encapsulate the logic into a color_picker_controller Stimulus Controller.

The color picker controller looks like this



import {Controller} from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["picker"]

  connect() {
    this.colorPicker =  new window.iro.ColorPicker(this.pickerTarget, {
      width: 280,
      color: this.defaultValue,
      layout: [
        {
          component: iro.ui.Box,
          options: {
            boxHeight: 160
          }
        },
        {
          component: iro.ui.Slider,
          options: {
            sliderType: "hue",
          }
        },
      ]
    })


    this.colorPicker.on("input:change", (color) => {
      this.dispatch("change", {
        detail: color.hexString
      })
    })
  }
}

It sets up an Iro instance that will dispatch a change event whenever the color was changed via the mousewheel.

The real thing happens inside the trix_controller. To add a custom attribute to trix, you need to register the attribute in Trix's configuration. Luckily, it's a simple task doing so,



    Trix.config.textAttributes.foregroundColor = {
      styleProperty: "color",
      inheritable: 1
    }

    Trix.config.textAttributes.backgroundColor = {
      styleProperty: "background-color",
      inheritable: 1
    }

We access the Trix.config.textAttributes object which contains all of the already provided action's attributes in Trix's toolbar, then set the backgroundColor and foregroundColor. The styleProperty needs to correspond to a valid CSS property. This tells trix that this transformation will apply this css property on the selection.

To activate the text or background attribute, we listen to the color-picker:change event emitted by color_picker_controller, eventually it reaches this method



  changeColor(e) {
    this.colorValue = e.detail
    if(this.backgroundColorTarget.contains(e.target)) {
      this.trixEditor.activateAttribute("backgroundColor", e.detail)
    } else {
      this.trixEditor.activateAttribute("foregroundColor", e.detail)
    }
  }

Because we have two different color pickers that will change the text color and background color, we need to know which one has emitted the event. Simply checking which one of the targets contains the event will suffice.

If it's the background, then we activate the attribute and pass the value for the attribute for Trix to apply.



this.trixEditor.activateAttribute("backgroundColor", e.detail)

It's just like calling a method, i.e the attribute and passing an argument, i.e the e.detail. Only Trix does that behind the scene, we only need to call activateAttribute method.

Same is true for text color, we simply have to tell Trix to apply the correct attribute(foregroundColor) and apply the color on the selection.

Eventually, we end up with this

You can clone the repository here

Thank you for reading, and Happy Coding!.

You can also view other articles where we add new content to Trix's toolbar

Add font-size controls to Trix's toolbar

Ahmad khattab ・ Apr 8 '22

#rails #javascript #ruby #trix

Adding Underline, Underline color tools to Trix

Ahmad khattab ・ Apr 3 '22

#rails #javascript #ruby

Resources

Rails: Easily allow Capybara to find elements with a helper method.

Ahmad khattab — Mon, 21 Feb 2022 10:01:40 +0000

Capybara is the testing framework for writing E2E(end-to-end) tests in Ruby.

It has multiple helper methods to allow you to write neat system specs. You can use id, .class, or any normal valid css selector that you can think off.

But, sometimes Capybara does not find the element, although the selector you wrote is correct.

I have came up with a small helper method that will add an HTML id to the tag that is only used in testing environment. So that it will not be visible in production when being inspected.

# app/helpers/capybara_helper.rb

module CapybaraHelper
  def capybara_can_find_by(id)
    "id='#{id}'".html_safe if Rails.env.test?
  end
end

This method appends an HTML id to the element that is called on. For example, it can be used like this in your erb files.

<div <%= capybara_can_find_by "element-id" %>>

</div>

Now. When writing capybara specs, you can simply use the id selector to easily find the element you are looking for.

within "#element-id" {  }
find "#element-id"

This was inspired by Laravel Dusk's selectors

References

Discoveries in Ruby(and Rails): List local/global_variables in the current scope, and the (_) in irb sessions.

Ahmad khattab — Sat, 12 Feb 2022 15:50:23 +0000

Ruby provides a mechanism for tapping into the program at runtime to determine the list of defined local and global variables. Ruby provides two methods to get all declared variables in a local or global scope.

Kernel#local_variables

The local_variables is available globally in your ruby programmes.

x = 5
puts local_variables
# => [:x]

the local_variables method will get the variables in the current local scope. So, for something like

y = 6
def do_something
  x = 5
  puts local_variables
end

do_something
local_variables

The first line printed to the console will be the local variables inside do_something. The second print will be the local variables in the current scope, namely y.

Kernel#global_variables

In Ruby, a global variables is a variable that starts with a dollar sign $. Ruby has a set of built-in globals available for us already.

puts global_variables

You can add to the list of global variables by creating your own global variables, tho you might not want to do that.

$my_global_variable = "Custom global"
global_variables.find { |glob| glob == :$my_global_variable }
 # => :$my_global_variable

Notice: All variables are stored as a Symbol.

Bonus content, the `_` local variable in irb sessions.

When you launch an irb session and log the local_variables you get an _ in the list. The _ provides a way to access the last return value in case it's lost forever.

You can access the return value of the previous line by using _ in your irb sessions.

x = 5
y = _

puts x 
puts y

Running this through irb you get 5 logged two times. That is because _ stores the last return value, which is the assignment of 5 to the variable x.

Resources

Discoveries in Ruby(and Rails): Array#*

Ahmad khattab — Wed, 19 Jan 2022 19:19:50 +0000

Sometimes when you need to join the elements of an array you would end up calling Array#join and pass the argument to the method.

["one", "two", "three"].join "-"

If we run the code above in an irb session. You effectively get one-two-three returned.

Ruby provides various sets of syntactical sugar. Another example in Ruby's elegancy is that you can also do the same operation as join by calling Array#* method.

["one", "two", "three"] * "-"

The result from running this snippet is the same as the first code. To confirm this, run the following code in an irb session. The result returned to you should be true.

["one", "two", "three"].join("-") == ["one", "two", "three"] * "-"

Thank you for reading. Happy Coding!.

References

Discoveries in Ruby(and Rails): Give classes the ability to be compared using the Comparable module

Ahmad khattab — Sat, 15 Jan 2022 09:26:00 +0000

The equality-test operators is a set of members that consist of ==(equals), !=(not equal), > (greater than), <(less than), >=(greater or equal), and <= (less or equal), with the most common being the == operator.

We can see that with both Integer and Float which are subclasses of the Numeric class. Objects of both classes can be compared using the equality-test operators because they include the Comparable module, and override the comparison method <=>, also called the spaceship operator or spaceship method.

Let's imagine in an e-commerce sight we have Products. A product can have many different Price per customer/conuntry. The modeling might look like this

class Price
  attr_accessor :amount_cents

  def initialize(amount_cents)
    self.amount_cents = amount_cents
  end
end

Let's imagine that we need to compare the price of two products(for whatever reason we need to). To compare the amount_cents we might do something like

if price_1.amount_cents < price_2.amount_cents
  puts "price_1 is less than price_2"
elsif price_1.amount_cents > price_2.amount_cents
  puts "price_1 is greater than price_2"
else
  puts "both prices are equal"
end

To compare the price objects we simply need to do so on the amount_cents attribute, since it's an instance of Numeric(either float or integer) it can be compared using the equality-test operators mentioned above.

But, we cannot do something like this

if price_1 < price_2
  puts "price_1 is less than price_2"
elsif price_1 > price_2
  puts "price_1 is greater than price_2"
else
  puts "both prices are equal"
end

Because our class Price does not include the Comparable module, thus it does not support this. If we try to we get

 undefined method `<' for #<Price:0x00007fbd98992de0 @amount_cents=10> (NoMethodError)

The ruby interpreter tells us that the class does not have support for the < method. Because we did not define this.

Lo! and behold the `Comparable` module in action.

Let's allow our Price class to work nice with the equality-test operators. To do that we need to do

include the Comparable module
override the <=> method

Let's rewrite the Product class to support that.

class Price
  include Comparable
  attr_accessor :amount_cents

  def initialize(amount_cents)
    self.amount_cents = amount_cents
  end

  def <=>(other_price)
    if self.amount_cents < other_price.amount_cents
      -1
    elsif self.amount_cents > other_price.amount_cents
      1
    else
      0
    end
  end
end

Notice the return value for the <=> method.

-1 means that it's less than the passed argument.
1 means that it's greater than the passed argument.
0 means both prices are equal.

Now, we can run this code

if price_1 < price_2
  puts "price_1 is less than price_2"
elsif price_1 > price_2
  puts "price_1 is greater than price_2"
else
  puts "both prices are equal"
end

and get the output

price_1 is less than price_2
=> nil

Including the Comparable module provides us with more methods more than just the equality-test operators. For example, using the Price class determine if a price is between two other price

price_1 = Price.new 100
price_2 = Price.new 200
price_3 = Price.new 150

price_3.between? price_1, price_2

The output would be true

We can also sort them!

[price_3, price_1, price_2].sort
[<Price:0x00007fa65e225d38 @amount_cents=100>,                          
 <Price:0x00007fa65e0be9b8 @amount_cents=150>,                          
 <Price:0x00007fa661b965e0 @amount_cents=200>]

Note

We can piggy-back the method call to the attribute itself. Since it's an instance of Numeric. We can shorten the method to

class Price
  include Comparable
  attr_accessor :amount_cents

  def initialize(amount_cents)
    self.amount_cents = amount_cents
  end

  def <=>(other_price)
    self.amount_cents <=> other_price.amount_cents
  end
end

Conclusion

We can allow our classes to work well with the equality-test family members and save ourselves much time trying to access attributes for comparison. And as a side-effect our Ruby code becomes more natural and ruby-ish, and we type less :).

Thanks for reading, and Happy Coding!.

Resources

Comparable docs

Discoveries in Ruby(and Rails): Case equality operator

Ahmad khattab — Sun, 09 Jan 2022 11:52:35 +0000

Ruby provides mechanisms for controlling the control-flow of a program. They consist of the if-statement families, if, elsif, else, and unless. Along with case/when.

“The basic idea of the case/when structure is that you take an object and cascade through a series of tests for a match, taking action based on the test that succeeds.”. Black, D. A., & Leo, J. (2019). The well-grounded Rubyist. Manning.

A typical case statement looks like this

tool = "google"

case tool
when "google"
   puts "tool is google"
when "basecamp"
   puts "tool is basecamp"
else
  puts "unknown tool"
end

Every ruby object has a case equality method, called ===, triple equal sign, sometimes called as case subsumption or threequal operator

instead of doing when tool.=== "google". The when "google" keyword provides a syntactical sugar over the previous approach.

The threeequal operator is defined everywhere on every built-in class. You can also implement in classes that you define.

Let's define a Car class.

class Car
  attr_accessor :brand, :type
  def initialize(brand, type)
    self.brand = brand
    self.type = type
  end

  def ===(other_car)                               
    self.brand == other_car.brand
  end
end

Now, we can use them along with case/when.

ford = Car.new "Ford", "F-150"
jeep = Car.new "Jeep", "Wrangler"
tesla_model_x = Car.new "Tesla", "Model-X"
tesla_model_y = Car.new "Tesla", "Model-Y"

case tesla_model_x
when ford
    puts "It's a ford"
when jeep
    puts "It's a Jeep"
when tesla_model_y
    puts "Both are Tesla made"
else
    puts "unknown manufacturer"
end

running this through a ruby session, we get the following

Both are Tesla made
=> nil

Underneath, the ruby interpreter makes a call to the === method on the object, which we defined inside the Car class

  def ===(other_car)                               
    self.brand == other_car.brand
  end

With tripleequal sign operator or case subsumption operator you can allow your classes to work elegently with Ruby's case/when control-flow operators.

Thanks for reading, and Happy Coding.

Resources

The Well-Grounded Rubyist

Discoveries in Ruby(and Rails): String#squish

Ahmad khattab — Thu, 09 Dec 2021 17:26:12 +0000

How many times have you had a string that has some extra whitespace in the start/mid/end of a string. To remove them you would have to use strip that would successfully remove the whitespace at the end of a string. Let's see

"   Hello,    World     ".strip
 => "Hello,    World"

It has successfully removed the whitespaces at the start and end. But what about the middle ones?. Usually you would have to write a regex for that

"   Hello,    World     ".strip.gsub(/[[:space:]]+/, " ")
 => "Hello, World"

When using Rails. This method is available as String#squish
which does the same thing!

"Hello,      World    ".squish
 => "Hello, World"

Resources

Discoveries in Ruby(and Rails): Partial indexes with Postgres

Ahmad khattab — Fri, 26 Nov 2021 15:25:46 +0000

Rails has support for partial indexes when used with Postgres. According to Postgres a partial index is defined as "A partial index is an index built over a subset of a table".

What it is used for?. Imagine you provide users of your app to delete their account. But, for some reason you want to soft delete the account, maybe for data analysis purposes, or to give the user a grace period where they can undo it. A soft-deleted email is considered to be not taken, because although there is a record with the email in the database, but it is not used(soft deleted)

Then, it does not make sense to include that record's index(which contains a pointer to the original row in the users table) in the index file. This speeds up queries by ignoring soft-deleted users records.

Adding partial indexes with Postgres could look like this in SQL

CREATE UNIQUE INDEX users_email_deleted_at_is_not_null
ON users (email) WHERE deleted_at IS NULL;

Thankfully, you can pass a where: condition as an argument to add_index. So, the above code will look like this in rails's migration

add_index :users, :email, unique: true, where: "(deleted_at IS NULL)"

Thanks for reading, happy coding!.

DEV Community: Ahmad khattab

Representing boolean conditions as domain concepts

Opinions on Programming: Eliminating one-off variables with Object#then

Resources

Add font-size controls to Trix's toolbar

Adding Custom Attributes to Trix's toolbar

Ahmad khattab ・ Mar 12 '22

Adding Underline, Underline color tools to Trix

Ahmad khattab ・ Apr 3 '22

Registering the extension

Adding Markup

Stimulus Controller

Syncing

Via input

Adding Underline, Underline color tools to Trix

Adding Custom Attributes to Trix's toolbar

Ahmad khattab ・ Mar 12 '22

Underline Color

Resources

Adding Custom Attributes to Trix's toolbar

Terminologies

Add font-size controls to Trix's toolbar

Ahmad khattab ・ Apr 8 '22

Adding Underline, Underline color tools to Trix

Ahmad khattab ・ Apr 3 '22

Resources

Rails: Easily allow Capybara to find elements with a helper method.

References

Discoveries in Ruby(and Rails): List local/global_variables in the current scope, and the (_) in irb sessions.

Kernel#local_variables

Kernel#global_variables

Bonus content, the _ local variable in irb sessions.

Resources

Discoveries in Ruby(and Rails): Array#*

References

Discoveries in Ruby(and Rails): Give classes the ability to be compared using the Comparable module

Lo! and behold the Comparable module in action.

Note

Conclusion

Resources

Discoveries in Ruby(and Rails): Case equality operator

Resources

Discoveries in Ruby(and Rails): String#squish

Discoveries in Ruby(and Rails): Partial indexes with Postgres

Bonus content, the `_` local variable in irb sessions.

Lo! and behold the `Comparable` module in action.