DEV Community: Bhumi

How Method Lookup and method_missing Works

Bhumi — Thu, 09 Nov 2023 16:00:00 +0000

This post is part of a series on understanding Object Oriented Programming using Ruby.

Subscribe to my free newsletter for more.

Have you ever wondered why we can write Rails.env.production? instead of having to check with equals like Rails.env == "production"?

We'll take a little tour of ActiveSupport code to answer this question about method calls and method_missing. Specifically the StringInquirer class, which is behind this little feature on Rails.env.

On this tour, we'll also see other examples of metaprogramming concepts in Ruby. Such as instance_variable_set for dynamically setting instance variables, class_eval for executing a block in the context of an existing class, etc.

Let's get started!

Let's open up the StringInquirer Class. It's pretty short and there we see method_missing on line 27.

class StringInquirer < String
    private
      def respond_to_missing?(method_name, include_private = false)
        method_name.end_with?("?") || super
      end

      def method_missing(method_name, *arguments)
        if method_name.end_with?("?")
          self == method_name[0..-2]
        else
          super
        end
      end
end

What is method_missing?

Let's review how method calls work in Ruby. When we call a method on an object, Ruby looks for the method definition in the object's class. If it doesn't find it there, it goes up the class's ancestor chain, all the way to a class called BasicObject.

>> String.ancestors
=> [String, Comparable, Object, PP::ObjectMixin, Kernel, BasicObject]

BasicObject is at the top of ruby's class hierarchy. It has an instance method called method_missing, that all objects in ruby inherit. So if ruby can't find the method we're calling anywhere else in the ancestor chain, it admits defeat by calling method_missing.

This implies that we can override method_missing in a new class to 'catch' calls to methods that don't actually exist. These are sometimes called Ghost Methods. Why is this useful?

Let's play with StringInquirer to see.

>> fruit = ActiveSupport::StringInquirer.new("apple")
=> "apple"
>> fruit.apple?
=> true
>> fruit.orange?
=> false
>> fruit.sldjlsd?
=> false

We can call arbitrary methods on fruit and it will return true for apple and false for everything else. Note that these are all predicate methods, ending in a ?

That's all the StringInquirer class does. But how does it reply correctly to arbitrary method names?

StringInquirer Explained

When we call a method apple? on fruit it eventually gets to method_missing of StringInquirer. In method_missing, it checks whether the name of the method ends with a ?. If it does, we want to 'catch' it. If not, we pass it to super.

When we 'catch' the method, we return the value of this comparison self == method_name[0..-2]. The right hand side is just the method name without the ?. The value of self is fruit.

Remember we are in a method call. The value of self during a method call is the receiver (the object that the method was called on). In this case, self is an ActiveSupport::StringInquirer object, which is a subclass of String. (We will cover how the value of self changes in Ruby, in a later post)

If the method_name does not end with a ?, we don't want method_missing to catch that call. It passes to super which will throw 'NoMethodError' error. This is important because we don't want to catch all possible method calls.

>> fruit.grow
/Users/bhumi/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/activesupport-7.0.0/lib/active_support/string_inquirer.rb:29:in `method_missing': undefined method `grow' for "apple":ActiveSupport::StringInquirer (NoMethodError)

We get our NoMethodError if we call grow on fruit.

One more thing, there is also this respond_to_missing in StringInquirer, we'll come back to that one.

But now we're ready to look at the Rails sourcecode that makes calls like Rails.env.development? possible.

    def env
      @_env ||= ActiveSupport::EnvironmentInquirer.new(ENV["RAILS_ENV"].presence || ENV["RACK_ENV"].presence || "development")
    end

    # Sets the \Rails environment.
    #
    #   Rails.env = "staging" # => "staging"
    def env=(environment)
      @_env = ActiveSupport::EnvironmentInquirer.new(environment)
    end

Here are the methods for reading and writing env. It wraps the env name string in a class called EnvironmentInquirer. We haven't seen that class yet. But I bet that's a subclass of our StringInquirer.

Yup it sure is class EnvironmentInquirer < StringInquirer.

The comment tells us that this class is doing some optimization for the three default environments, so it doesn't need to rely on the slower delegation through method_missing that StringInquirer uses.

This class doesn't use method_missing directly but it has two nice examples of dynamic programming concepts for us to explore. instance_variable_set and class_eval.

    def initialize(env)
      raise(ArgumentError, "'local' is a reserved environment name") if env == "local"

      super(env)

      DEFAULT_ENVIRONMENTS.each do |default|
        instance_variable_set :"@#{default}", env == default
      end

      @local = in? LOCAL_ENVIRONMENTS
    end

    DEFAULT_ENVIRONMENTS.each do |env|
      class_eval <<~RUBY, __FILE__, __LINE__ + 1
        def #{env}?
          @#{env}
        end
      RUBY
    end

Here's what the code is doing:

instance_variable_set will create 3 instance variables called @development, @test, @production. And set them to either true or false.
Under the class_eval, we define 3 methods. development?, test?, production?. Those methods simply return the value of the instance variable with a matching name we set up earlier.

Both of these are examples of metaprogramming. We are dynamically setting instance variables and defining methods at runtime.

An aside: the __FILE__, __LINE__ + 1 stuff in the heredoc makes it so if something goes wrong in this dynamically defined methods, the debugger can point us to a file name and line number in the code. I wasn't sure, I had to look it up, but that's what I think this stuff is for.

That's all. We've gotten to the bottom of this code exploration. We can see exactly how Rails.env.production? works now. It's a method that is dynamically defined on the EnvironmentInquirer class (which is a subclass of StringInquirer and has method_missing for all calls that end in a ?).

What is respond_to_missing?

Before we wrap up, I said I'd come back to respond_to_missing. Why is that needed?

Remember that Ruby has duck typing, and we can ask any object if it responds to a given method.

>> fruit.respond_to?("apple?")
=> true
>> fruit.respond_to?("grow")
=> false

It's answering correctly because we are overriding respond_to_missing in StringInquirer. If we didn't, ruby will have no way of knowing that we're catching methods that end in ?. With this line method_name.end_with?("?") || super in respond_to_missing we are telling ruby that we respond to all methods that end in ?.

In general, overriding respond_to_missing whenever you override method_missing is a good thing to do, so our objects don't lie to us.

To wrap up, We confirm that class of Rails.env is ActiveSupport::EnvironmentInquirer which is a subclass of ActiveSupport::StringInquirer and that is why we can call those handy predicate methods.

>> Rails.env.development?
=> true
>> Rails.env.class
=> ActiveSupport::EnvironmentInquirer

Beautiful. It's just a tiny little feature. But in this tiny feature of ActiveSupport, we saw many metaprogramming concepts in action. We used method_missing and respond_to_missing. We talked about method lookup and ancestor chain and the value of self. And we saw instance_varialbe_set and class_eval.

That's all I got. Hope you enjoyed this guided tour of some ActiveSupport code.

Until next time,

Bhumi

Understanding Ruby Objects and Instance Variables

Bhumi — Thu, 09 Nov 2023 03:15:07 +0000

This post is part of a series on understanding Object Oriented Programming using Ruby.

Subscribe to my free newsletter for more.

Ruby is an object oriented language and has classes and objects and methods and instance variables and all those things. But if you are coming from other object oriented languages like Java, there are a few surprising things about how Ruby objects work that are useful to know.

Here are some interesting things about ruby objects and instance variable and methods to keep in mind when you read/write Ruby code:

Objects of the same `class` can carry different instance variables.

In other words, instance variables 'belong to' or 'live in' the object. There is no connection between an object's class and its instance variables.

Imagine we have this class Hello and two objects h1 and h2. h2 has the @last_name instance variable but h1 does not.

?> class Hello
?>   def initialize
?>     @name = "Annie"
?>     @greeting = "Hello"
?>   end
>> end

>> h1 = Hello.new
=> #<Hello:0x00007fa46786a930 @greeting="Hello", @name="Annie">
>> h2 = Hello.new
=> #<Hello:0x00007fa462f059e8 @greeting="Hello", @name="Annie">

>> # Add an instance variable to one of the two objects, h2 but not h1

>> h2.instance_variable_set("@last_name", "Smith")
=> "Smith"
>> h2
=> #<Hello:0x00007fa462f059e8 @greeting="Hello", @last_name="Smith", @name="Annie">
>> h1
=> #<Hello:0x00007fa46786a930 @greeting="Hello", @name="Annie">

So now h1 and h2 are objects of the same class Hello but have different set of instance variables. What do you think will happen if we add an instance method to Hello that uses @last_name? Let's see.

?> class Hello
?>   def greet
?>     puts "#{@greeting}, #{@name} #{@last_name}"
?>   end
>> end

>> h2.greet
Hello, Annie Smith

>> h1.greet
Hello, Annie 

>> h1.instance_variable_get("@last_name")
=> nil
>> h1.instance_variable_get("@blah")
=> nil

Nothing crazy. Things just work as expected. Looks like the value of any instance variables that have not been assigned is nil.

Now let's talk about the instance methods.

Methods of an object 'live in' the object's class.

So unlike instance variables, methods of an object are attached to its class. From the class's perspective they are called instance methods. From the object's perspective they are just methods.

We can list the methods of an object by calling the Object#methods method on the object or the Module#instance_methods method on its class. (these methods are inherited from ruby's Object and Module classes. We'll talk more about ruby's class hierarchy in a later post).

>> class Hello; end

>> h = Hello.new
=> #<Hello:0x00007f843b8c1038>
>> h.methods(false)    # 'false' excludes methods from ancestors
=> []
>> Hello.instance_methods(false)
=> []
>> Hello.instance_methods  # without 'false', many inherited methods
=> 
[:pretty_print,                              
 :pretty_print_inspect,
 ...
 :__send__]

>> h.methods == Hello.instance_methods
=> true

?> class Hello
?>   def greeting
?>     "hello"
?>   end
>> end

>> Hello.instance_methods(false)
=> [:greeting]
>> h.methods(false)
=> [:greeting]

In the above example, we create an empty class Hello and an object h and confirm that the object's methods are same as its class's instance_methods. Then we add a method greeting and see it appear in the list of object's methods / classes's instance_methods.

Aside: note that in Ruby, we can add methods to a single object as well. In that case, they are not called instance methods or methods though. They are called singleton methods. When add methods to an object, that object has methods that no other object of the same class does. (If that sounds wild to you, you're not alone! We'll get to how that works in a later post. It requires learning about the concept of singleton class (aka eigenclass, aka metaclass)).

One more interesting thing about instance variables.

Instance variables spring into action when you assign them.

In other words, they don't have to be 'declared' ahead of time, as part of the class definition.

>* class Hello
>*   def add_instance_var_person
>*     @person = "Joe"
>*   end
> end

> x = Hello.new
=> #<Hello:0x00007fecc46a3160>
> x.instance_variables
=> []
> x.add_instance_var_person
=> "Joe"
> x.instance_variables
=> [:@person]

In the above example, we create a class Hello with an instance method that defines an instance variable @person. An object that is an instance of Hello that calls the method add_instance_var_person will have @person instance variable 'attached' to it. But before it calls that method, it's list of instance variables is empty [].

This implies that another object of Hello that has never called the instance method will not have the instance variable @person. This goes hand in hand with first fact above. Objects of the same class can have different instance variables 'attached' to them.

This may all feel surprising. At least it did to me at first.

To wrap up, what is an object in Ruby? An object is composed of a bunch of instance variables and a link to a class. Object's class carries its instance methods but its instance variables live in the object itself.

Until next time,

Bhumi

Stimulus Rails 7 Tutorial

Bhumi — Thu, 17 Feb 2022 20:33:06 +0000

Hotwire (HTML-over-the-wire) ships by default in Rails 7. Stimulus is one component of Hotwire, the other one being Turbo.

The key promise of the Hotwire approach is to get the benefits of single-page JavaScript applications like faster, more fluid user interfaces without writing much Javascript (certaintly not the amount needed with full-fledge client-side JavaScript frameworks).

But Javascript on-the-page is still needed for modern web app behaviors like show/hide elements, add item to a todo list, etc. This is where StimulusJS comes in.

Simulus is adverstised as a minimal Javascript framework. It has been around since 2017-2018. The latest version, stimulus 3.0 was released in October 2021.

It is small and simple enough that if you try the examples in this post, you should have good handle on how to use Stimulus in the next 15 minutes.

Fun fact - Stimulus use the browser's MutationObserver API to detect DOM chagnes.

Introduction

Let's see some code first. Consider the following html:

<div data-controller="clipboard">
  PIN: <input data-clipboard-target="source" type="text" value="1234" readonly>
  <button data-action="clipboard#copy">Copy to Clipboard</button>
</div>

Some facts to note about Stimilus from the above code:

You can get an idea of what's going on by looking at the HTML alone, without looking at the clipboard controller code. (This is different from other HTML where an external JS file applies event handlers to it.)
Stimulus does not bother itself by creating the HTML. That's still rendered on the server either on page load (first hit or via Turbo) or via Ajax request that changes the DOM.
Stimulus is concerned with manipulating the existing HTML document. By adding a CSS class that hides, animates, highlights an element.
Stimulus can create new DOM elements and that's allowed. But that's minority case. The focus is on manipulating not creating elements.

How Stimulus differs from mainstream JavaScript frameworks:

Other frameworks are focused on turning JSON into DOM elements via template language
Other frameworks maintain state within JavaSripts objects. For Stimulas, state is stored in the HTML, so that controllers can be discarded between page changes, but still reinitialize as they were when the cached HTML appears again.

How Stimulus Works

Stimulus is designed to enhance static or server-rendered HTML by connecting JavaScript objects to elements on the page using simple annotations.

These JavaScript objects are called controllers and Stimulus monitors the page waiting for HTML data-controller attributes to appear. Each attribute's value is a controller class name. Stimulus finds that class, creates a new instance of that class and connects it to the element.

Just like class attribute is a bridge connecting HTML to CSS. data-controller attribute is a bridge connecting HTML to JavaScript.

In addition to controllers, 3 other major Stimulus concepts are:

actions - which connect controller methods to DOM events using data-action attributes
targets - which locate elements of significance within a controller
values - which read/write/observe data attributes on the controller's element

We will see more examples of how controllers, actions, targets, and values are used in the code below.

These examples are from the official Stimulus Handbook, you can find the repo here.

Hello World in Stimulus

This example prints a greeting when user clicks a button, along with the name that was typed into a text box. Demonstrates how actions and targets are used in the code.

<body>
  <div data-controller="hello">
    <input data-hello-target="name" type="text">
    <button data-action="click->hello#greet">Greet</button>
  </div>
</body>

The data-controller connects this HTML to a class in hello_controller.js file. Stimulus also auto initializes this controller object.

The data-action means when this button is clicked, execute the code inside the greet method of the hello controller.

The value click->hello#greet is called an action descriptor.

If you try this you may notice that it works without the click-> part, so just data-action="hello#greet" works too. This is because Stimulus defines default actions for some elements (i.e. click for a button).

The data-[controller-name]-target is a way to connect this HTML element to the controller such that it's value can be accessed inside the controller. In this case data-hello-target. This is what the code looks like inside hello_controller.js:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {

  static targets = [ "name" ]

  greet() {
    const element = this.nameTarget
    const name = element.value
    console.log(`hello, ${name}!`)
  }
}

We create a property for the target by adding name to our controller’s list of target definitions. Stimulus will automatically create a this.nameTarget property which returns the first matching target element. We can use this property to read the element’s value and build our greeting string.

Building Copy to Clipboard Button

You know the little copy button or icon next to some text to make it easy to copy to clipboard. The below code builds that functionality in Stimulus using the browser's Clipboard API.

The HTML looks like this:

<body>
  Example: Copy To Clipboard
  <div data-controller="clipboard">
    PIN: <input data-clipboard-target="source" type="text" value="1234" readonly>
    <button data-action="clipboard#copy">Copy to Clipboard</button>
  </div>
  More than one instance of the clipboard controller on the page
  <div data-controller="clipboard">
    PIN: <input data-clipboard-target="source" type="text" value="5678" readonly>
    <button data-action="clipboard#copy">Copy to Clipboard</button>
  </div>
  Use other HTML elements like link and textarea (instead of button and input)
  <div data-controller="clipboard">
    PIN: <textarea data-clipboard-target="source" readonly>3737</textarea>
    <a href="#" data-action="clipboard#copy" class="clipboard-button">Copy to Clipboard</a>
  </div>
</body>

The clipboard_controller.js looks like this:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {

  static targets = [ "source" ]

  //v1 - with a button, using the browswer Clipboard API
  copy_old() {
     navigator.clipboard.writeText(this.sourceTarget.value)
  }

  //v2 - copy action attached to <a> link, input from a <textarea>
  copy(event) {
    event.preventDefault()
    this.sourceTarget.select()
    document.execCommand("copy")
  }

Some interesting things to learn from the above example:

What does the static targets line do?

When Stimulus loads our controller class, it looks for a static array with the name targets. For each target name in the array, Stimulus adds three new properties to our controller. For the "source" target name above, we get these 3 properties -- this.sourceTarget, this.sourceTargets, and this.hasSourceTarget

We can instantiate the same controller more than once on a page

Stimulus controllers are reusable. Any time we want to provide a way to copy a bit of text to the clipboard, all we need is the markup on the page with the right data- annotations. And it just works.

In the HTML above, we have the exact same div for copying PINs duplicated twice. The 2nd copy has a different value so we can test that both copy button work and copy the right thing. The thing that's implicit here is that we have two different instances of the controller class, and each instance has its own sourctTarget property with the correct value. This is how we keep them separate the copy the corresponding value (and don't get the values mixed up with the other input element annotated with data-clipboard-target="source" on the page). It's because the controller is scoped to the <div>

This implies that if we put two buttons inside the same <div>, things would not work as expect. The below will always copy the value in the first text box:

<div data-controller="clipboard">
    PIN: <input data-clipboard-target="source" type="text" value="1234" readonly>
    <button data-action="clipboard#copy">Copy to Clipboard</button>
    PIN: <input data-clipboard-target="source" type="text" value="this won't get copied" readonly>
    <button data-action="clipboard#copy">Copy to Clipboard</button>
</div>

Actions and Targets can go on any HTML elements

So do we have to use a <button> for the copy to clipboard functionality? No we could use other elements like a link <a> tag. (In which we want to make sure to preventDefatult).

We can also use a <textarea> instead of the <input type="text">. The controller only expects it to have a value property and a select() method.

Designing for Progressive Enhancement

This is about building in support for older browsers as well as considering what happens to our application when there are network or CDN issues.

It may be tempting to write these things off as not important but often it’s trivially easy to build features in a way that’s gracefully resilient to these types of problems.

This approach, commonly known as progressive enhancement, is the practice of delivering web interfaces where the basic functionality is implemented in HTML and CSS. Tiered upgrades to that base experience are layered on top with CSS and JavaScript, progressively, when supported by the browser.

With the clipboard API the idea is to hide the Copy to Clipboard button unless the browser has support for the clipboard API. We do this by adding classes to the HTML, adding a bit of CSS to hide the button, and adding a feature check in our JavaScript controller to toggle the class to show the button if the browser supports clipboard API.

The HTML looks like this:

<div data-controller="clipboard" data-clipboard-supported-class="clipboard--supported">
    PIN: <input data-clipboard-target="source" type="text" value="1234" readonly>
    <button data-action="clipboard#copy" class="clipboard-button">Copy to Clipboard</button>  
</div>

And we add a connect() method to the clipboard_controller.js


static classes = [ "supported" ]

  connect() {
    navigator.permissions.query({ name: 'clipboard-write' }).then( (result) => {
      if (result.state == "granted") {
        this.element.classList.add(this.supportedClass)
      }
    })
  }

An issue I ran into locally on firefox with clipboard-write

This code runs happily on Chrome and does the progressive enhancement. On firefox, I get the error in console:

Uncaught (in promise) TypeError: 'clipboard-write' (value of 'name' member of PermissionDescriptor) is not a valid value for enumeration PermissionName.

So even the code to check whether a given browser has access to a feature, in this case clipboard API, itself has browser specific issues.

Managing State - Slideshow Controller

Most JavaScript frameworks encourage you to keep state in JavaScript at all times. They treat the DOM as a write-only rendering target (using client-side templates after consuming JSON from the server).

Stimulus takes a different approach. A Stimulus application’s state lives as attributes in the DOM; controllers (i.e. the JavaScript parts) are largely stateless. This approach makes it possible to work with HTML from anywhere—the initial document, an Ajax request, a Turbo visit, or even another JavaScript library.

We build a slideshow controller that keeps the index of the currently selected slide in an attribute, to learn how to store values as state in Stimulus.

Lifecycle callbacks in Stimulus

Stimulus lifecycle callback methods are useful for setting up or tearing down associated state when our controller enters or leaves the document.

These methods are invoked by Stimulus:

initialize() - Once, when the controller is first instantiated
connect() - Anytime the controller is connected to the DOM
disconnect() - Anytime the controller is disconnected from the DOM

Using Values in Stimulus

The concept of values is another core thing to Stimulus, similar to the concept of controllers, actions, and targets.

Stimulus controllers support typed value properties which automatically map to data attributes. value is a hash while targets and classes are arrays. When we add a value definition to our controller class like this static values = { index: Number }, Stimulus creates a this.indexValue controller property associated with a data-slideshow-index-value attribute (and handles the numeric conversion for us).

Value change callback

In the code below, notice how we are having to manually call the this.showCurrentSlide() method each time we change the value in this.indexValue. Actually Stimulus will automatically do this for us if we add a method with this name indexValueChanged(). This method will be called at initialization and in response to any change to the data-slideshow-index-value attribute (including if we make changes to it in the web inspector). Once we add indexValueChanged() we can also remove the initialize() method altogether.

The HTML code looks like this:

<div data-controller="slideshow" data-slideshow-index-value="1">
    <button data-action="slideshow#previous"> ← </button>
    <button data-action="slideshow#next"> → </button>

    <div data-slideshow-target="slide">🐵</div>
    <div data-slideshow-target="slide">🙈</div>
    <div data-slideshow-target="slide">🙉</div>
    <div data-slideshow-target="slide">🙊</div>
  </div>

The slideshow_controller.js looks like this:

import { Controller } from "@hotwired/stimulus"

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

  static values = {index: Number}

  initialize() {
    this.showCurrentSlide()
  }

  next() {
    this.indexValue++
    this.showCurrentSlide()
  }

  previous() {
    this.indexValue--
    this.showCurrentSlide()
  }

  showCurrentSlide() {
    this.slideTargets.forEach((element, index) => {
      element.hidden = index != this.indexValue
    })
  }
}

We can use the web inspector to confirm that the controller element’s data-slideshow-index-value attribute changes as we move from one slide to the next. And that the hidden attribute is added and removed from each of the slide elements as we navigate.

Working With External Resources - HTTP Requests and Timers

Sometimes our controllers need to track the state of external resources, where by external we mean anything that isn’t in the DOM or a part of Stimulus.

This example build a simple email inbox where the html for new messages is loaded asychronously (in the example messages.html is just a static file but normally the server would return this html) using fetch and then plopped into the innerHTML of the controller's div. We then also use a timer to refresh and load new messages every 5 seconds.

This timer is started and stopped in the life-cycle methods, connect() and disconnect(), respectively.

The HTML placeholder looks like this, annotated with Stimulus attributes:

<div data-controller="content-loader" data-content-loader-url-value="/messages.html" data-content-loader-refresh-interval-value="5000"></div>

The content_loader_controller.js looks like this:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = { url: String, refreshInterval: Number }

  connect() {
    this.load()

    if (this.hasRefreshIntervalValue) {
      this.startRefreshing()
    }
  }

  disconnect() {
    this.stopRefreshing()
  }

  load() {
    fetch(this.urlValue)
      .then(response => response.text())
      .then(html => this.element.innerHTML = html)
  }

  startRefreshing() {
    this.refreshTimer = setInterval( () => {
      this.load()
    }, this.refreshIntervalValue)
  }

  stopRefreshing() {
    if (this.refreshTimer) {
      clearInterval(this.refreshTimer)
    }
  }
}

Using content-loader controller on multiple elements

params

So far we have seen the concepts of controllers, actions, targets, and values. params is another Stimulus feature. params are associated with the element and not 'attached' at the controller level, unlike values and targets (i.e. there is not a static params = in the controller)

Here is an example:

<div data-controller="content-loader">
    <a href="#" data-content-loader-url-param="/messages.html" data-action="content-loader#load">Messages</a>
    <a href="#" data-content-loader-url-param="/comments.html" data-action="content-loader#load">Comments</a>
</div>

That -url-param can accessed in the controller's load action with params.url, like this:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  load({ params }) {
    fetch(params.url)
      .then(response => response.text())
      .then(html => this.element.innerHTML = html)
  }
}

What happens if you add the same data-controller to nested HTML elements?

I made a goofy mistake of adding data-controller="content-loader" to that 2nd <a> tag above, in addition to it being on the parent <div> already. And got to see some wonderfully weird results. The entire index.html loaded over and over again on the page, I could see the calls piling up in the network tab and the page's scroll bar getting smaller and smaller. Perhaps I can think through this and use it a way to play around with the internal workings of Stimulus. This specific thing was further convoluted by the fact that the above load method was done in parallel with another load method from the original example of getting inbox messages loaded with a 5 second interval timer.

Summary

In the examples above, we have seen the main concepts of Stimulus - controllers, actions, targets and values. Stimulus allows us to add behavior to static or server-rendered HTML by connecting JavaScript objects to elements on the page using simple annotations - the data- attributes on out HTML elements.

For more in-depth posts on all things Rails, Ruby, and Software Development, check out CodeCurious!

All About Hotwire and Turbo

Bhumi — Mon, 14 Feb 2022 19:53:30 +0000

For more in-depth content on web development check out CodeCurious

Surely you've heard of Hotwire by now and perhaps thought "cute name but what the heck is that? and do I need to care about it?"

I went about answering that question for myself and wrote down what I learned. If you have 10 minutes and are curious about Hotwire and Turbo, read on.

You do not need to be Ruby on Rails developer to read this. The ideas around Hotwire and server-side rendering are making waves across different web development stacks - PHP/Laravel, Elixir/Pheonix, Python/Dyango have equivalent tech that implements Hotwire. Even React has added support for server-side rendering it seems.

The following writing is for wrapping our heads around the concepts. So you can sit back with your coffee/tea and just read (not much code to type-along).

What is Hotwire and What is Turbo

HTML-over-the-wire or Hotwire is a technique for building web applications. It's not one technology, it's an umbrella term for Turbo, StimulusJS, and Strada (in the Rails world). Turbo is the actual technology that makes the Hotwire approach possible. Turbo is the actual code.

Yes Turbo is created by the team behind Ruby on Rails and it's an evolution of Turbolinks with bunch of other functionality added. But Turbo can be adapted to other languages and backend frameworks (and already has!). This Turbo thing is not Rails specific.

So what does the Turbo code do? What problem does it solve? How does it help us?

Officially "Turbo is a collection of techniques for creating fast, progressively enhanced web applications without using much JavaScript. All the logic lives on the server, and the browser deals just with the final HTML."

This approach can, of course, be contrasted with the Single Page Application (SPA) approach. Where we'd get JSON from the server, use client-side JavaScript (like a boatload of JS involving frameworks and libraries that need to keep state and do routing) to eventually transform that JSON data into DOM updates.

The promise of Turbo is writing less JavaScript and more of your preferred backend language - Ruby or PHP or Python or what have you. All of your logic for interacting with your domain model and other business logic can live in one place, on your server. The other promise is to sidestep the complexity of full-fledge client-side JavaScript frameworks and the associated tooling (cough webpack). The only JavaScript you need is Turbo.js

Of course we'd want to get these benefits without sacrificing any of the speed or responsiveness associated with modern web applications with rich user experiences. And that is just what hotwire.dev promises.

If we go all the back to AJAX, the official documentation (and by that I mean wikipedia) says

"With Ajax, web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behavior of the existing page...Ajax allows web pages and, by extension, web applications, to change content dynamically without the need to reload the entire page."

So in other words, the big promise of AJAX was to 'update content without full-page reload'. So that it feels smooth and fast for the user. That is still what we are after. With Turbo we can do this in a simpler, more elegant way and automatically get the benefits by including Turbo.js and following some convestions (without writing much if any JavaScript!).

Turbo does its job with the following components:

Turbo Drive speeds up links and form submissions by not requiring page reloads.

Turbo Frames decompose pages into independent contexts, which scope navigation and can be lazily loaded.

Turbo Streams deliver page changes over WebSocket, SSE or in response to form submissions using just HTML and a set of CRUD-like actions.

[aside] SSE is server-sent events. The major difference between WebSockets and Server-Sent Events is that WebSockets are bidirectional (allowing communication between the client and the server) while SSEs are one-directional (only allowing the client to receive data from the server).

Turbo Native lets your majestic monolith form the center of your native iOS and Android apps, with seamless transitions between web and native sections.

Turbo 7.1 was released November 24, 2021 (keeping the Turbolinks versions) and Hotwire ships by default in Rails 7, released December 15, 2022. Let's see how each of the 4 Turbo components work. We also cover some constraints and nuances to keep in mind when building applications with Turbo.

Turbo Drive: Navigate Within a Persistent Process

Turbo Drive gives us the same speed of SPA by using the same persistent process. The persistent process is managed by Turbo (there is no client-side router, no state to carefully manage).

Following Links

This works by intercepting all clicks on <a href> links to the same domain. When you click an eligible link, Turbo Drive prevents the browser from following it, changes the browser’s URL using the History API, requests the new page using fetch, and then renders the HTML response.

[aside] History API - allows manipulation of the browser session history, that is the pages visited in the tab or frame that the current page is loaded in. I see the pushState() function is part of this API (which is what pjax used to update browser URL, etc.)

Form Submission

During rendering, Turbo Drive replaces the current <body> element outright and merges the contents of the <head> element. The JavaScript window and document objects, and the <html> element, persist from one rendering to the next.

The speed with Turbo happens free just by following a few conventions. Though it is possible to interact directly with Turbo Drive to control how visits happen or hook into the lifecycle of the request.

Turbo Frames: Decompose Complex Pages

Turbo Frames is a way to scope independent segments of a page inside a turbo-frame element such that they can be lazily loaded and their navigation be scoped. Scoped navigation means all interaction within a frame (e.g. clicking links, submitting forms) happen within that frame, keeping rest of the page from reloading.

I heard DHH say on Remote Ruby interview that the origins of Turbo Frames are based on making mobile stuff work for Hey email.

[aside] the use case for which this is designed, reminds me of the 'aync dashboard' work I did to speed up the Dashboard of our web app at Castlight. Loading bits of the page 'later', in parallel instead of in-band with the initial page load. I recall using .js.erb files I think and looking at the network tab a lot.

Scoped Navigation

<turbo-frame id="new_message">
  <form action="/messages" method="post">
    ...
  </form>
</turbo-frame>

When we submit the form above, Turbo extracts the matching turbo-frame element with the id of new_messages from the HTML response and swaps its content into the existing new_message frame element. The rest of the page stays as it was.

Deferred Loading

<turbo-frame id="messages" src="/messages">
  <p>This message will be replaced by the response from /messages.</p>
</turbo-frame>

To differ loading we add a src attribute to the turbo-frame element. The HTML response from the URL value will be used to automatically load content into the matching frame id.

Are Turbo Frames like iframes then?

They sound like iframes but no Turbo frames are part of the same DOM, styled by the same CSS, and part of the same JavaScript context. So they don't suffer the weirdness associated with iframes.

Other advantages of Turbo Frames:

Efficient caching - each segment is cached independently, so you get longer-lived caches with fewer dependent keys.
Parallelized execution - each defer-loaded frame is generated by its own HTTP request/response and handled by a separate process. So different segments on a page load in parallel without having to manage the process.
Ready for mobile - Each segment can appear in native sheets and screens without alteration, since they all have independent URLs.

Turbo Streams: Deliver Live Page Changes

While Turbo Frames give us partial page updates in response to direct interactions within a single frame (link clicks, form submits), Turbo Streams let us change any part of the page in response to updates from a WebSocket connection (or SSE).

[aside] Streams is a conceptual continuation of what was first called RJS and then SJR.

The big idea around RJS, JavaScript written in Ruby, from that 2006 post announcing Rails 1.1 is that you don't have to write JavaScript to Ajaxify things in Rails, you can write Ruby. (So yeah, we are still after the same thing!).
The idea behind Server-generated Javascript Response SJR from this post from 2013 is pretty reminiscent of what we have with Turbo. The flow is something like this - a form is submitted via AJAX request, server generates a JavaScript response that includes an updated HTML template, client evaluates the JavaScript returned by the server, which then updates the DOM. We can see how Streams is a conceptual continuation of this flow with eliminating more JavaScript. RJS was a poor man's CoffeeScript and it turned people away from the concept of server-generated JavaScript, but in 2013 rails re-committed to SJR while leaving behind RJS. The last sentence of that 2013 post says:

"The combination of Russian Doll-caching, Turbolinks, and SJR is an incredibly powerful cocktail for making fast, modern, and beautifully coded web applications. Enjoy!"

Unlike RJS and SJR it's not possible to send custom JavaScript as part of Turbo Stream actions, by design! Turbo focuses on sending HTML and updating the DOM and then if needed we can connect additional behavior using Stimulus actions and lifecycle callbacks.

How It Works?

Turbo Streams introduces a <turbo-stream> element with an action and a target attribute. The actions could be append, prepend, replace, update, remove, before, after. We include the HTML to insert or replace in a template tag and Turbo does the rest.

[aside] HTML template tag is a way for holding HTML that is not to be rendered immediately when a page is loaded but may be added to the page later using JavaScript.

Advantages of Turbo Streams

Reuse server-side templates - same templates that created the first-load page are used to generate live page updates (in practice some CSS is needed to show/hide certain elements in the two cases).
HTML over the wire - don't need any client-side JavaScript (other than Turbo.js) and save all the effort it takes to fetch JSON and turn it into HTML.
Simpler control flow - clear to follow what happens in response to WebSocket or SSE by looking at the HTML to be changed. No indirection with client-side routing, event bubbling and such.

Turbo Native: Hybrid apps for iOS and Android

I am not a mobile developer. But here are some points I took away from reading about Turbo Native.

Ideal for building hybrid apps where server-rendered HTML can be used to get baseline coverage of your app's functionality in a native wrapper. Along with a few native screens that can really benefit from the high fidelity.
Going hybrid allows you the freedom to upgrade your app without going through the slow app store release process. Anything done in HTML can be changed in your web application and be instantly available to users.
Turbo Native is not a framework that abstracts native APIs. It also does not try to create native code that's sharable across platforms. (In other words, you still need native devs for iOS and Android, but those devs just have less work do). The part that's sharable is the HTML that's rendered server-side.

So that covers the main concepts around Turbo Drive, Turbo Frames and Turbo Streams. Let's learn about some nuances to keep in mind when building applications with Turbo.

Also by the way, while Turbo is not Rails specific, turbo-rails gem is the reference implementation of Turbo for Ruby on Rails. The Turbo documentation says you don't need a backend framework to use Turbo. (I don't quite get that tbh, doens't the backend need to return HTML with the appropriate elements <turbo-stream>, <turbo-frame> along with the correct ids to replace the right things on the page.)

Constraints and Nuances of Building Turbo Applications

Since there is no full page load, the JavaScript window and document objects retain their sate across page changes (any other objects we leave in memory will stay in memory). We can't rely of full-page reload to reset our environment, our application is a persistent, long-running process in the browser. Below are things we need to be aware of to design our application to gracefully handle this constraint:

1. Script Elements

When navigating with Turbo, <script> elements in the <head> are okay, Turbo Drive appends them to the current <head> and the browser loads and evaluates them.

<script> elements in the <body> are not good. To install behavior, or to perform more complex operations when the page changes, avoid script elements and use the turbo:load event instead.

For <script> elements we don't want Turbo to evaluate after rendering, annotate them with data-turbo-eval="false". The browser will still evaluate those scripts on the initial page load.

For loading our application's JavaScript bundle, do this in the <head> tag always. Also if we add a fingerprint to each script and data-turbo-track="reload" attribute, Turbo can force a full page reload when we deploy a new JavaScript bundle.

2. Caching

Let's define some terms like Restoration visits and Application visits first.

Restoration visits are when you navigate with the Browser's back or forward button. Turbo Drive renders a copy of the page from the cache if possible. (Drive also saves the scroll position of each page before navigating away and automatically returns to this saved position. nice)
Application visits are the onces initiated by clicking a Turbo Drive-enabled link or programmatically calling Turbo.visit(location). Always issues a network request. These result in a change to browser's history, Turbo Drives pushes a new entry onto the browser's history stack using history.pushState. data-turbo-action is the attribute to decide what type of visit it is, default is advance, it could also be replace.
When Turbo Drive saves a copy of the current page to cache, it uses cloneNode(true), which apparently means attached event listeners and data are discarded. (cloneNode clones the DOM node)

Preparing the Page to be cached - we can listen to the turbo:before-cache event with document.addEventListener if we need to do things to the document before Turbo caches it. For example, reset forms, collapse UI elements, etc. so the page is ready to be displayed again.

Detecting when a preview is visible - Turbo Drive adds a data-turbo-preview attribute to the <html> element when it displays a page from cache. We can check for the presence of this if we want to enable/disable behavior.

Opting out of caching - We can control caching behavior on a per-page basis by including a meta element in the page's head. Like this:

<head>
  ...
  <meta name="turbo-cache-control" content="no-cache">
</head>

3. Installing JavaScript Behavior

Since the usual window.onload, DOMContentLoadeded, or JQuery ready events will only fire after initial page load, we need a strategy for installing JavaScript behavior on Turbo page loads. There are two options:

Observing Navigation Events

There is an event, turbo:load that fires after the initial page load and again after every Turbo Drive visit. We can use this like this:

document.addEventListener("turbo:load", function() {
  // ...
})

avoid using turbo:load event to add other event listeners directly to elements on the page body. Instead use event delegation to register event listeners once on document or window.

Attaching Behavior with Stimulus

New DOM elements can appear on the page at any time from frame navigation, stream messages, client-side rendering, or Turbo Drive page loads. Stimulus with its lifecycle callbacks and conventions can handle all of these in a single place.

How Stimulus Works - it connects and disconnects its controller and event handlers whenever the document changes using the MutationObserver API. This allows it to handle all types of DOM updates.

4. Making Transformations Idempotent

The context here is performing client-side transformations to HTML received from the server. The example we can imagine is grouping a collection of elements by date using browser's knowledge of current time zone.

[aside] Making something, a function, idempotent means that regardless of how many times we apply the function to a given input the result will be the same as applying it just once. Meaning there are no more changes beyond its initial application.

We have to think about this because of caching. "Consider what happens if you’ve configured this function to run on turbo:load. When you navigate to the page, your function inserts date headers. Navigate away, and Turbo Drive saves a copy of the transformed page to its cache. Now press the Back button—Turbo Drive restores the page, fires turbo:load again, and your function inserts a second set of date headers."

We can solve this by detecting if the transformation is already present on the HTML before adding it. In this we'd check for the presence of a date divider. (We can also add a flag via data attribute but that's less robust)

5. Persisting Elements Across Page Loads

The context here is that we may not want certain elements to change across page loads. Turbo Drive allows us to mark them permanent. The example we can imagine is a shopping cart icon with a counter. We don't want the counter to change to a previous/lower number if the user navigates with a back button after adding an item to the cart on the current page.

We do this by marking the counter element permanent.

<div id="cart-counter" data-turbo-permanent>1 item</div>

The HTML id is needed as Turbo Drive matches all permanent element by ID before rendering, and transfers them from the original page to the new page. Preserving data and event listeners.

Summary

That's all, that covers most of the concepts for understanding Turbo and Hotwire. It's all about updating things on the page in a way that feels fast and smooth to the user, without needing to write a lot of client-side Javascript.

HTML-over-the-wire or Hotwire is a concept, not a specific technology. The main idea is to send server-rendered HTML to the client, instead of JSON, leaving application logic to the server.

Turbo is the technology that implements Hotwire in the Rails world. And other backend stacks have their own version of Turbo. Turbo consists of Drive, Frames, and Streams.

Turbo Drive is an evolution of Turbolinks. When enabled, it intercepts link clicks and form submission, maintains a persistent process that leaves window and document unchanged, but replaces the <body> element of the response.

Turbo Frames allow different sections of the page to be lazily loaded and elements on the page to be automatically scoped by using <turbo-frame> element so that a response updates only the frame with a matching id, leaving rest of the page untouched. Turbo Frames are similar to iframes but different, in that they're part of the same DOM, styled by the same CSS, and part of the same JavaScript context.

Turbo Streams take things even further. They allow for partial page updates from not only user interactions (like form submission) but also in response to websocket and SSE. <turbo-stream> elements support automatically changing the HTML of a target element by various operations like replace, append, prepend, remove, etc.

When building applications with Turbo we have to keep in mind that our application is a persistent, long-running process in the browser. We can't rely of full-page reload to reset our environment and have to approach a few things with care, like caching, script element, and installing JavaScript behavior, etc.

Finally, it's worth noting that Hotwire and Turbo approach is not suitable for all web applications. Sometimes the complexity of client-side rendering with a JavaScript SPA is needed for a high-fidelity user experience of text editor, for example. (such as the Trix editor from the Rails community). And yet, for many modern web applications it would be worthwhile to reach for Hotwire/Turbo for the conceptual compression of complexity offered.

If you made it all the way to the end, good job! 💜 Hope you learned something!

The above is a conceptual post around Hotwire and Turbo, meant for the job of wrapping our heads around what the big ideas are in the Hotwire approach. Check back for the accompanying 'code' post where we'll build an application using streams and frames and share the code step-by-step.

How to Make Learning Programming Effective and Enjoyable

Bhumi — Mon, 30 Nov 2020 03:50:33 +0000

When you start to learn to code, you typically start with learning a programming language. You learn about variables, functions, statement, loops, control-flow, etc. You may follow tutorials, typing things into a browser or a code editor and learning syntax and how to make the code run and do something. You may watch online courses, videos, etc. And at least some of the times things seem to work out as advertised and you feel awesome for making the computer do things (controlling it with your mind).

Then you decide to work on your own projects to implement your ideas or to build a 'portfolio' to demonstrate what you know. When you start with a blank (IDE) screen you may feel like you don't know where to start. And this is true for new programmers but also to experienced programmers learning a new tech.

Here's a problem. We often confound two different types of learning - tactical learning and conceptual learning. We often jump straight to the tactical learning and forget to ask questions like 'why' and some of the tech tutorials fail to offer context, bigger picture before diving into the 'how'

How To Separate Tactical and Conceptual Learning

Programming consists of two types of learning that need to happen in parallel for it to be effective and enjoyable — tactical and conceptual.

Tactical learning is about the syntax, about what to type, where to type, and how to get the code to do something.

Conceptual learning is about what the Things are, how they’re connected, why things are the way they are, and most importantly, how everything fits together. This book is about conceptual learning.

When learning a new tech, seek out conceptual resources that provide context and explain things like - what are good use cases, what is not a good use case, how this tech fits into the existing model.

Do both tactical learning and conceptual learning in parallel. Interleaving the two until you're making progress making things happen on screen but also connecting the dots in your mind. One way to test your conceptual learning is pose and answer basic questions to yourself or better explain the concepts to someone else, in plain language (without jargon). If you can do that, there is a good chance you've actually understood.

What do you think? How do you approach conceptual learning.

P.S. If you want to read about API, MVC, OOP, SQL, JSON, DOM, and other web programming terms in a conceptual way, I wrote 16 chapters and bundled into a nice PDF (You can get it here connect the dots and start reading for free). I've been mentoring programmers and I wrote this based on common questions from students.

I'm also learning something. Promoting and marketing my work, which is completely new to me as a developer. This quote (from Seth Godin) helped me with my mindset:

"A good idea isn’t worth much if it doesn’t reach people who can benefit from it"

This is my attempt to reach the people that can benefit.

P.P.S. If you're in a country where stripe doesn't work or dollar value is different, send me an email with the subject "I want the book" and I'll take care of it, no explanation needed (my email is in the footer of the page)

Developer Dictionary: API

Bhumi — Fri, 25 Sep 2020 19:16:18 +0000

This is the first paragraph for the API page on Wikipedia. I love Wikipedia but this is not what I'd want to read:

An application programming interface (API) is a computing interface which defines interactions between multiple software intermediaries. It defines the kinds of calls or requests that can be made, how to make them, the data formats that should be used, the conventions to follow, etc. It can also provide extension mechanisms so that users can extend existing functionality in various ways and to varying degrees.[1] An API can be entirely custom, specific to a component, or it can be designed based on an industry-standard to ensure interoperability. Through information hiding, APIs enable modular programming, which allows users to use the interface independently of the implementation.

This description is correct and precise of course but also meaningless to someone trying to quickly get a sense of the Thing called API.

Knowing what the acronym stands for is also not very meaningful. You may know the words application, programming, and even interface individually but putting them together doesn't lead to an immediate 'ah I see what it is now'.
So what is an API? Imagine a function. When you call a function in any programming language, you have some input parameters and you have an expected output value. For example if we have a function called sum we may pass in two numbers as input and expect to receive the mathematical sum of those to numbers as the output response.

Calling an API works similarly. You pass in some parameters as the input and expect to receive some output. The difference between APIs and the function call analogy is that calling an API happens over the Internet. And the response usually contains data that is stored and maintained by the owner of the API.

It's a way of making a precise request to a server. Instead of requesting a webpage (HTML) we're requesting specific data (aka resource). keep reading

Developer Dictionary: HTTP and TCP/IP

Bhumi — Wed, 23 Sep 2020 19:31:21 +0000

Where to Begin! There is a lot to say about this Thing named HTTP. It's a protocol, the Hyper Text Transfer Protocol, but you already know what the acronym spells. It's the way for computers to communicate with each other over the Internet. It's part of this other Thing called TCP/IP Stack. It's how you're reading what I typed many computers away — many hops of network cards, Ethernet cables, routers and switches away. Each of these machines along the way contain some component that implements HTTP as well as other 'layers' of the TCP/IP stack? What does it mean to implement HTTP?

HTTP is a specification. Or in plain English, a document listing out bunch of rules that two or more parties follow in order to play well together and be able to communicate with each other. Computers that want to communicate over The — capital I — Internet have hardware and software that follow these rules. (Side note: But we can also imagine a separate network of computer that choose to communicate in a totally different way using different set of protocols.)

So far this is a bit abstract. An analogy, coming up! First, we need to look at this TCP/IP stack.

TCP/IP Stack

Let's look at HTTP in the context of this Thing called the TCP/IP Stack. It is a stack in that it has layers and each layer has some specific role to play in getting a message from computer A to computer B. keep reading

Developer Dictionary: CLI Command Line Interface

Bhumi — Fri, 18 Sep 2020 19:29:51 +0000

This post is part of a resource called Developer Dictionary. More about why I'm writing this here

What is it

A way for users to interact with the computer directly (i.e. with operating system and computer hardware). Each command is a small software program that takes some input from the user, does some work, and returns some output to the user. The input and output is text — typed or displayed in a terminal window. These small programs (aka commands) are intended to be combined with other commands to accomplish some higher level task or a user's goal. Meaning they are composable.

Why CLI

Mouse pointer, touchscreen, LCD screen, Windows, Icons — these things that we take for granted took decades of research to bring about. Computing didn't start off with graphical user interfaces (GUIs). Before touchscreens and mouse pointers, computing was about typing text and reading text.

So now that we have GUIs why do programmers still use the command line? You may be wondering are there things we can do with the CLI that we can't do with a GUI? Yes. Or rather there are things that are much more convenient to do with command line because it offer more control and it's more expressive. For example let's say we want to:

-- Performing some repetitive tasks on a schedule? Like delete older photos once week.

-- Running a program automatically when you start your computer.

-- Find some text in a bunch of files and or rename a bunch of files at the same time.
All the above can be accomplished nicely with a command line programs (aka scripts) like cron, sed, awk, launchd ,launchctl, etc.

There are many tutorials and cheatsheets on the Internet with details on the above and many other commands — what they do, how to use them, etc. We're not going to focus on that. Let's talk about some concepts that are common to all commands and are useful for understanding the 'big picture' around interacting with a computer using a Command Line Interface.

Big Picture Concepts

If text scrolling on a command line looks like gibberish to you well that's it is a different language. One that can be learned and used effectively. Here we explore some common terms and concepts and make things less mysterious.keep reading

Developer Dictionary: Data Structures

Bhumi — Thu, 17 Sep 2020 18:26:34 +0000

This post is part of a resource called Developer Dictionary. More about why I'm writing this here

When you go to the grocery store, do you make a list of things you need to buy? If it's a physical list on a piece of paper, likely you use that during the trip, mentally check off the items and then recycle the paper once you're done. The list serves as temporary storage of items from our working memory. A data structure serves a similar purpose for a program.

Imagine you're writing a program to keep track of books you've read. You'll eventually need to make a list. Maybe you'll want to go through the list and rate each book. For this you would store the book titles in the computer's working memory for the duration of your program (temporary storage).

Each value stored in a computer's memory has an address so that the operating system can find it later. It has a name as well – a variable name given by our program – so that our program can refer to its value. It looks something like this:

So 0x0001 is the address for the operating system. Within our program, instead of 0x0001 we can use book_one as the name. But typing book_one, book_two feels a bit clunky right. And if we can imagine that we're using a continuous block of addresses, could we just use one variable name but have a way to refer to the entire book list? Yes, that is called an array in most programming languages. If we created an array named books, we could refer to each book with book[1], book[2], book[10], etc. That's all there is to it. An array is one type of data structure. Data structures are a shorthand for referring to memory addresses on the computer.

In addition to being a convenient shorthand, most data structures also support useful operations for adding items, finding an item, removing an item, and going through the entire collection of items Keep reading

Developer Dictionary: Operating System

Bhumi — Wed, 16 Sep 2020 12:14:39 +0000

This post is part of a resource called Developer Dictionary. More about why I'm writing this here

Familiarity – even if it implies no real understanding at all – can dull the sense of mystery. Educators who wish to cultivate the sense of wonder therefore face the challenge, as the education philosopher Kieran Egan noted, of defamiliarising the familiar.*

You may be thinking "operating system? I already know what that is!" And yes, you know about Mac and Windows. You may even recall those goofy commercials where two actors are playing the role of an operating system. You've probably debated the virtues of iOS vs. Android with family members and questioned their smartphone of choice? So you already have an idea of what an operating system is. But why do we need this Thing? What is inside this mysterious box? What does it do?

Why Operating System?

We have computer hardware and we have applications that run on that hardware. If we got a computer without any software on it — just the processor and memory — we wouldn't be able to do much with it. Even if it had keyboard and mouse for user input, when we press those keys nothing would happened. We would see nothing on the screen. We need some software installed that knows how to talk to the hardware, as well as how to interpret use inputs and provide users with output.
Even if we're talking about a server, that does not interact with users directly, we still need some software to manage its various tasks and manage the memory allocated to different type of work.

In Search of an Analogy

What's a good analogy for an Operating System(OS)? I was thinking of air traffic control maybe. The job of an air traffic controller is to direct airplanes in certain airspace – those taking off, those in flight, and those landing — so that no one crashes into anything. This is a difficult job but also very specific and well defined. So nah, too easy.
What about an analogy with the human brain - our brain processes various inputs and generates various outputs. Some of the inputs for consideration might be:

"I'm hungry",
"I need to use the restroom",
"I hear a loud noise in the other room",
"I have a meeting in 30 minutes, better type faster and finish this writing".

Similarly on a computer, something needs to process all these actions:

"User just opened another browser tab, need to allocate some more memory",
"Someone inserted headphones, need to redirect audio output to headphone jack from the speakers",
"Someone is rapidly smacking keyboard keys, better send the correct electric currents to the liquid crystal display (LCD) of the monitor screen. So those letters display on screen and the user can see what they're typing."
"Just launched a zoom meeting need to stream video, audio, process network I/O, schedule this program on the processor with appropriate priority".

And many more. This is what an OS is 'thinking' about constantly. Let's take a look at some of the components of an OS. Keep Reading

Developer Dictionary: Client Server Pattern

Bhumi — Fri, 11 Sep 2020 18:36:27 +0000

This post is part of a resource called Developer Dictionary. More about why I'm writing this here

Client, server, frontend, backend, fullstack, request, response, website, web application — all of these terms are used very frequently in the world of web development. And if you're been learning programming for the web, even few weeks, you've probably been exposed to these terms. Here I illustrate what these words mean so you have a clear picture of the concepts behind the words and how they relate to the structure of the web.

What is the Client Server Pattern?

We can think of a server as a computer that holds data related to our website and code that reads/writes that data. A client is another computer that has a browser — a program capable of running code on behalf of the user (usually Javascript code) and making requests to the server. Server awaits and responds to client requests. One server serves many clients.

The same client could communicate with multiple servers. And the same computer can act both a s client and as a server. These are roles played with the computer based on the context. For example, when you're programming locally and you run a server on your computer and your browswer acts as the client (If you're ever typed localhost in your broswer you know what I mean). Continue Reading

Developer Dictionary: The Story of Git

Bhumi — Thu, 10 Sep 2020 16:18:38 +0000

This post is part of a resource called Developer Dictionary. More about why I'm writing this here

There are many tutorials, videos, books, and blog posts about the internal workings of Git. This writing is more of a story of Git — what it is, why it exists, and how it came to be.

Why Do We Need Git?

Git is an open source distributed version control system. What does that mean? and what is it good for?

Version Control: Imagine you were editing a document or a spreadsheet with your friends or family members. You're planning a trip and everyone is adding different locations. You'd want to combine (aka merge) everyone's changes and have it all available in the final document right? And you'd want to be able to make these changes at the same time without stepping on each other's toes ideally. It would be to see what the document looked like last week and go back to that older version in case someone messed up something. It would also be nice to see who changed what and when.

A version control system allows for all of the above functionality. Git is one such version control system. We talk about Git in the context of tracking code but it can track any collection of files.

Distributed: This means that each peson has their own copy of the code on their local machine. There is no central server that keeps a master copy of the code. (This distinction is relevant to those familiar with other version control systems prior to Git. Many were centralized and had one master copy of the code).

Open Source: This means that the source code for the tool Git is not proprietary. You can see the code for Git here.
A Taste of Git – Sample Workflow
There is an abundance of terminology related to Git. There are precise definitions and detailed descriptions of each of the term I use below, elsewhere. My goal is to paint a picture for you using broad brushstrokes before you get lost in the details.

A Taste of Git – Sample Workflow

There is an abundance of terminology related to Git. There are precise definitions and detailed descriptions of each of the term I use below, elsewhere. My goal is to paint a picture for you using broad brushstrokes before you get lost in the details.

DEV Community: Bhumi

How Method Lookup and method_missing Works

Understanding Ruby Objects and Instance Variables

Objects of the same class can carry different instance variables.

Methods of an object 'live in' the object's class.

Instance variables spring into action when you assign them.

Stimulus Rails 7 Tutorial

Introduction

How Stimulus Works

Hello World in Stimulus

Building Copy to Clipboard Button

Designing for Progressive Enhancement

Managing State - Slideshow Controller

Working With External Resources - HTTP Requests and Timers

Using content-loader controller on multiple elements

Summary

All About Hotwire and Turbo

For more in-depth content on web development check out CodeCurious

What is Hotwire and What is Turbo

Turbo Drive: Navigate Within a Persistent Process

Turbo Frames: Decompose Complex Pages

Turbo Streams: Deliver Live Page Changes

How It Works?

Advantages of Turbo Streams

Turbo Native: Hybrid apps for iOS and Android

Constraints and Nuances of Building Turbo Applications

1. Script Elements

2. Caching

3. Installing JavaScript Behavior

Observing Navigation Events

Attaching Behavior with Stimulus

4. Making Transformations Idempotent

5. Persisting Elements Across Page Loads

Summary

How to Make Learning Programming Effective and Enjoyable

How To Separate Tactical and Conceptual Learning

Developer Dictionary: API

Developer Dictionary: HTTP and TCP/IP

TCP/IP Stack

Developer Dictionary: CLI Command Line Interface

What is it

Why CLI

Big Picture Concepts

Developer Dictionary: Data Structures

Developer Dictionary: Operating System

Why Operating System?

In Search of an Analogy

Developer Dictionary: Client Server Pattern

Developer Dictionary: The Story of Git

This post is part of a resource called Developer Dictionary. More about why I'm writing this here

Why Do We Need Git?

A Taste of Git – Sample Workflow

Objects of the same `class` can carry different instance variables.