DEV Community: Wizard Health

Metaprogramming, ancestors chain and super.

Dino — Mon, 13 Mar 2023 08:07:09 +0000

Let's imagine we are building DSL similar to ActiveRecord associations.

class Person
  associated_with :account
end

Person.new.account # => "Account associated with a Person"

In order to build this feature, we will create a new module that dynamically defines association methods.

module Associations
  def associated_with(name)
    define_method(name) do
      puts "associated #{name}"
    end
  end
end

class Person
  extend Associations

  associated_with :account
end

Person.new.account #=> "associated account"

define_method creates an instance method on a receiver, which is exactly what we need.

define_method basically has done this;

class Person
  ...

  def account
    "associated account"
  end
end

We can easily validate this theory by inspecting the ancestors chain and instance methods:

Person.ancestors # => Person,Object,Kernel,BasicObject
Person.instance_methods(false) # => [account]

Overwriting dynamically defined method

If we wish to overwrite a dynamically defined method we can do it without any problems since this is just a "regular" instance method (albeit defined with some metaprogramming)

class Person
  extend Associations

  associated_with :account

  def account
    "overridden"
  end
end

Person.new.account #=> "overridden"

But, calling a super when overriding will fail

def account
  super
  "overridden"
end

Person.new.account # => `account': super: no superclass method `account' for ...

This makes sense since we are calling super on the method we've completely overwritten.

In order for super to work the method need to be defined in Persons ancestors chain.

We can do this by generating a new module on the fly, including that module in the class and define dynamic methods on that module instead of the class itself.

module Associations
  # Create new module on the fly.
  # Include that module in the ancestor chain
  def generated_association_methods
    @generated_association_methods ||= begin
                                         mod = const_set(:GeneratedAssociationMethods, Module.new)
                                         include mod
                                         mod
                                       end
  end

  def associated_with(name)
    mixin = generated_association_methods

    # define methods on the newly created module
    mixin.define_method(name) do
      puts "associated #{name}"
    end
  end
end

class Person
  extend Associations

  associated_with :account
end

Now dynamically defined methods live inside the Person::GeneratedAssociationMethods, which is part of ancestors chain.

Person.ancestors # => Person,**Person::GeneratedAssociationMethods**, Object,Kernel,BasicObject
Person.instance_methods(false) # => []

So calling super will work fine:

def account
  super
  "overridden"
end

Person.new.account
  #=> "associated_account"
  #=> "overridden"

I've seen this pattern used in Rails codebase in multiple places where this kind of behaviour is needed.

✌️

ActiveRecord associations, scoped

Dino — Fri, 17 Feb 2023 05:39:19 +0000

ActiveRecord as a neat trick/ability which a lot of folks are not aware of.

You can pass a block to association, for example:

class Account < ApplicationRecord
 has_many :users, -> { where(admin: true) }
end

class User < ApplicationRecord
 belongs_to :account
end

What makes this even more interesting is that you can have multiple associations to the same model with different name and conditions.

class Account < ApplicationRecord
 has_many :users
 has_many :admin_users, -> { where(admin: true) }, class_name: "User"
end

Calling @account.users will return collection of all users, but calling @account.admin_users will return collection of only admin users.

To make things even more interesting, when creating a new record through the association will comply with the association condition.

@account.admin_users.create(name: "Admin User")

creates a new user with admin set to true.

Since, condition executes in the context of the association object, you can also use scopes.

class Account < ApplicationRecord
  has_many :users
  has_many :admin_users, -> { admins }, class_name: "User"
end

class User < ApplicationRecord
 belongs_to :account

 scope :admins, -> { where(admin: true) }
end

@account.admin_users # Works the same as examples above

This associations will also work for eager loading also, calling
Account.includes(:admin_users) will eager load admin users.

ActiveRecord can accomplish this because associations are built from Relation objects, and you can use Relation syntax to customize them.

Isn't this neat!

Install Ruby 3.2.0 with YJIT

Sinan Mujan — Mon, 09 Jan 2023 13:08:40 +0000

Ruby 3.2.0 is here and it offers some nice additions to the language.
One of the most exciting new things is the addition of a compiler, YJIT. YJIT was created by the folks from Shopify and has been producion tested for a while, so it is safe to use in your environment.
Some benchmarks show the difference in speed compared to Ruby without YJIT. I'll put some links if you want to know more:
https://speed.yjit.org/
https://www.solnic.dev/p/benchmarking-ruby-32-with-yjit

I will show you the steps necessary to install Ruby using rbenv as it is the most popular Ruby version manager.

Install Rust

To install Ruby 3.2.0 with YJIT, the first step is to install Rust. Rust is necessary if we want to add YJIT to our Ruby installation.
The easiest way to install Rust is using Rustup, which is also the recommended way:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

You'll be asked which type of installation you want, you can use the default.
If you want alternative installation methods you can follow this link.

After that, update your $PATH variable. You can do this in many ways, I will show you how to do it by updating your bashrc or zshrc (depending which shell you use).

Just open ~/.bashrc or ~/.zshrc using your preferred editor and at the end of the file just add the following:

export PATH="$HOME/.cargo/bin:$PATH"

This will add the rust bin folder to your path, so you can check if rust was installed correctly easier. After that you have to source your file:

source ~/.bashrc or source ~/.zshrc

Then you can check if the Rust installation was successful:

rustc --version

You should get an output like this that shows the version of Rust:

rustc 1.66.0 (69f9c33d7 2022-12-12).

Upgrade Ruby build

Before you install Ruby 3.2.0 using rbenv, first you should update your ruby-build tool.

brew update && brew upgrade ruby-build

This command could take some time, just so you know. :)

Install Ruby

You are now ready to install Ruby 3.2.0 with YJIT.
Enter the following command:

RUBY_CONFIGURE_OPTS="--enable-yjit" rbenv install 3.2.0

You notice the RUBY_CONFIGURE_OPTS variable where you explicitly say that you want to enable YJIT. You can also add the --with-jemalloc flag as well to install jemalloc, the general purpose malloc implementation that performs better at memory usage than the standard malloc.
Many benchmarks showed how much better your applications perform using jemalloc, I can also confirm that from my personal experience.
Here are a few links that show the performance gain from using jemalloc:
https://engineering.binti.com/jemalloc-with-ruby-and-docker/
https://engineering.appfolio.com/appfolio-engineering/2018/2/1/benchmarking-rubys-heap-malloc-tcmalloc-jemalloc
https://medium.com/motive-eng/we-solved-our-rails-memory-leaks-with-jemalloc-5c3711326456

You can set the new Ruby version for your local project or even on your entire environment using the local/global flags:

rbenv local 3.2.0 rbenv global 3.2.0

Don't forget to run the rehash command for rbenv:

rbenv rehash

The last step is to ensure that everything went right. Check your ruby version this way:

ruby -v --yjit

With the --yjit option, we should get the following output:

ruby 3.2.0 (2022-12-25 revision a528908271) +YJIT [x86_64-darwin21]

The +YJIT shows that YJIT has been enabled in your Ruby 3.2.0 installation.

Nice work!

I hope this little tutorial will help you. :)

Stimulus MultiSelect

Vernes Pendić — Tue, 22 Nov 2022 15:54:39 +0000

The problem

Every developer had to struggle with choosing the right plugin/package for things that are time consuming or have already been done in ways that suit their needs. Juggling 🤹‍♂️ between a package that is smaller in size or has certain features that we need can be frustrating.

But what happens when there are no packages to choose from? On top of that, what if there is a feature that millions of developers need, but struggle to find answers or make custom solutions for every app they make.

I am, of course, talking about the atrocious implementation of the multiple select feature built into every major browser 😫

The solution

Since this frustrated my colleagues and me for a long time we decided to make our own implementation and open source it.

We are not pioneers in this, naturally. There is many a plugin trying to solve the same problem. But what stuck with me when researching is none of them seem to quite scratch the perfectionist itch (now always a good thing 😅). Some of them require big dependencies like vue.js or jQuery, while some of them just lack the features or the ability to be customized.

Stimulus Multiselect

You are going to need stimulus.js as a dependency for this package to work. It is a minimal, easy to understand javascript flavor for handling HTML.

If you are using a js bundler with node_modules support (such as esbuild, rollup.js or Webpack) install the package from npm:

yarn add @wizardhealth/stimulus-multiselect

If you're using importmap-rails, you'll need to pin @wizardhealth/stimulus-multiselect:

./bin/importmap pin @wizardhealth/stimulus-multiselect

Usage

Load your stimulus application as usual and the register the multiselect
controller with it:

import { Application } from '@hotwired/stimulus'
import { Multiselect } from '@wizardhealth/stimulus-multiselect'

const application = Application.start()
application.register('multiselect', Multiselect)

The multiselect has many modes of working. You can fetch data remotely or load a static json collection of items. An example of this static approach:

<div data-controller="multiselect" data-multiselect-items-value='[{ "value": "cuckoo", "text": "Cuckoo 🐦"}, { "value": "macaw", "text": "Macaw 🦜"}, { "value": "rooster", "text": "Rooster 🐓"}]' data-placeholder="Search for birds...">
  <select multiple="multiple" class="multiselect__hidden" data-multiselect-target="hidden" name="form[test_ids][]" id="form_test_ids"></select>
</div>

Let's build an app

We are gonna build a Rails app (since Stimulus is mostly used with Rails) that has a backend of different sports. We are gonna search through these sports with the help of the multiselect and return the results back to show in the dropdown.

The setup

Create a new app rails new multiselect_test
Scaffold Sports so we can search through them rails g scaffold Sport name:string
Migrate it! rails db:migrate
Start up the server rails s and get to creating some sports
Add the package yarn add @wizardhealth/stimulus-multiselect

The implementation

We are going to use the sports#index page for testing. So we need to make the following changes to the controller and view.

We are going to make use of a simple where for the purposes of this example. The index needs to like like this. The parameter that contains the search term from the select input is inside params[:q]

# app/controllers/sports_controller.rb

def index
  @sports = Sport.where("name LIKE ?", "%#{params[:q]}%")

  respond_to do |format|
    format.json
    format.html
  end
end

The response that the select needs is JSON. So let's change the json response views that are inside app/views/sports/

# app/views/sports/index.json.jbuilder

json.array! @sports, partial: "sports/sport", as: :sport

The select needs a json that contains the value (usually the id) and the text value (what is shown when selecting)

# app/views/sports/_sport.json.jbuilder

json.value sport.id
json.text sport.name

Lastly, we need to put the select HTML somewhere. Let's use the sports/index.html.erb for this

<!-- app/views/sports/index.html.erb -->

<div data-controller="multiselect" data-multiselect-search-url-value="/sports" data-placeholder="Search for sports...">
  <select multiple="multiple" class="multiselect__hidden" data-multiselect-target="hidden" name="sports[]" id="sport_ids"></select>
</div

Add the contents of this file to your css

/* app/assets/stylesheets/application.css */

// The css contents from the file mention above go HERE

When going to localhost:3000/sports we should see this

The end product

Now just search any sport you like:

Why Stimulus Multiselect ❓

Easy to set up
Lightweight
Good documentation
Lot of options for loading data and handling selected items
Design is customizable (css file is extracted so you can make the select suit your application look)
Accessible
Contributions and issue raising are welcome on our GitHub page

The finish line 🔚

Would love to know what you think. Comment, review the code, try the select and tell us how we can improve 💚

Rails snack - Upgrade to Ruby 3

Vernes Pendić — Thu, 31 Mar 2022 09:02:58 +0000

There are a couple of posts I found online for the upgrade of Ruby to version 3. Very few of them mentioning Rails and its issues during the upgrade.

My versions prior to the upgrade:

rails -v
Rails 7.0.2.3

ruby -v
2.7.5

gem list
sidekiq (6.2.2)

I'm mentioning sidekiq since it is the most commonly used background processing for Rails (and I had problems when updating 😅).

The two problems I had (not mentioned anywhere):

1. ActionCable.server.broadcast
This one went under the radar but without this change ActionCable won't work. Rails contributors fixed the issue but here it is for everyone

2. Sidekiq (and gems connected to it)
I had to upgrade sidekiq to the newest version because of the issue of log clutter. Specifically, this deprecation message. This has since been fixed (so update sidekiq). But not all gems connected to sidekiq have since caught up (sidekiq-statistic, sidekiq-cron... to mention a few). This is very annoying, especially for anyone using foreman, makes the logs unreadable. So keep an eye for updates if you are using any of these.

Would love for anyone who did the update to contribute with a comment below. Add any problems you had that were not mentioned anywhere so we can help as many people as possible in one place ❤️

Dynamically direct routes for polymorphic associations - Ruby on Rails

Harun Sabljaković — Tue, 12 Oct 2021 12:01:28 +0000

Have you ever struggled with polymorphic associations? We all have, don’t worry.
Here’s an example of a polymorphic relationship.

I’ve recently bumped into a problem where I had to list out all subjects (employees and products in this case) and when user interacted with one list item, it would redirect to that subject’s show page.

You can see the problem, right? The obvious solution here would be to check the type of imageable and set the path helper accordingly. But, there’s a slightly more advanced technique for this use-case: direct method.
In your routes.rb file simply add this:

And now you can use imageable_path(imageable) as a path helper that will dynamically resolve to imageable’s show page.
Now our example above becomes:

Aaaand voilà, we’ve got a path helper that resolves to any imageable show page without the need to manually check for the type of imageable.

Effortlessly install TailwindCss in a Rails app with Webpack (minimum configuration)

Vernes Pendić — Sun, 22 Aug 2021 14:26:28 +0000

A while back DHH decided to created a gem for easily installing TailwindCss into rails apps 🙌🏻. This gem could be used to install Tailwind through the asset pipeline as well as using webpack. This changed later on as contributors wanted to focus their attention to what was the heart of the gem 🥺.

Well, since a lot of people used this gem to get a new Rails app going with Tailwind without the hassle of configuring everything from scratch (including colleagues from my company), we decided to create a new gem 🎉. This gem installs Tailwind with Webpack and has production purging enabled. Other Webpack specific problems are to be addressed as well.

Meza: Extract text from file

Sinan Mujan — Thu, 16 Jan 2020 13:52:20 +0000

If you ever have a situation where you have a huge file and want to extract a certain portion from this file (e.g. a log file or database dump), you can use the sed command.

Sed is a stream editor that is used to perform basic text transformations on a file or input stream.

👇

Extract between two patterns (or words):

sed -n '/beginning_pattern/,/end_pattern/p'

Extract from a pattern (word) to the end of the file:

sed -n '/beginning_pattern/,$p'

For more information about sed, check out this link.

Tailwind CSS

Vernes Pendić — Mon, 02 Dec 2019 14:49:36 +0000

Introduction

When creating a new website within a tiny amount of time or with a small development team most people look towards Bootstrap to help with the design. Taking into account the ease of use, an abundance of documentation and plenty of predefined css components it is not a mystery why Bootstrap is so popular.

However, when the project gets bigger and more users start using the application concerns of page load and developer performance arise. While using Bootstrap it is very unlikely that all available utility classes are going to be used resulting in a considerable amount of css bloat as well as unused components. Enter Tailwind.

Tailwind is a CSS framework for rapid-fire UI development. When mentioning CSS frameworks first thing that comes to mind is Bootstrap, Material Design or even Bulma. However, even though Tailwind is considered a framework it doesn't fit under the same philosophy as the others. Tailwind is primarily a utility 🛠 framework or rather a utility bundle.

Tailwind doesn't provide a default theme or any predefined UI components. Also, with Tailwind, it is rather unlikely to get two similarly looking pages. This is due to there being no imposed design decisions (like with vanilla css, the limit is our imagination).

Tailwind provides tools for rapid development 🏃🏼‍♀️💨, while at the same time allowing the developer to maintain identity. Even though there is no limit to imagination with Tailwind, designing is structured in a way so that the developer can make a self-imposed ruleset to avoid css bloat or repeated properties (i.e. making 10 colors that all look similar).

There are three main approaches when CSS and UI design is in question. Every one of them has pros and cons shown below:

The table above has an error in the Utility frameworks column. The error is that it suggests that the Utility frameworks have "Little Control" which is not true in the case of Tailwind because inside it everything is configurable.

Utility classes

When taking into account that the main goal of Tailwind is not providing users predefined components but tools for rapid component development it is clear why we won't find a ".btn" class like in Bootstrap. Instead, we will find utility classes. All predefined utility classes can be found in the official documentation and in the configurable javascript file tailwind.config.js in the root of the project after installation. Every available class can be configured for individual purposes or the purposes of a larger project. An example of styling a button using tailwind:

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="flex h-screen justify-center items-center">
      <button type="button" class="bg-green-500 p-3 border-2 outline-none border-black rounded">
        Adam
      </button>
    </div>
  </body>
</html>

vs Bootstrap:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  </head>
  <body>
    <div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
      <button type="button" class="btn btn-primary">Adam</button>
    </div>
  </body>
</html>

Output:

Tailwind CSS	Bootstrap

Using Bootstrap a predefined button design is achieved. To achieve a custom look we need to write custom css. While using utility classes it is possible to achieve any look and feel of the button without writing any css.

This is important for reasons below:

There won't be 10 different colors that look the same
The application will have a uniform look (i.e. same padding for lists or containers)
The ability to create a personal UI design, identity, branding without writing a bunch of custom CSS (we don't have to be CSS experts)
Speed 🏎🏎🏎💨💨💨

Utility first 🥇

In the above example of the button, there is a large number of added classes in order to achieve the wanted look. One of the reasons for this is the recommended way of creating components, and that is the utility first method. In short, this means:

Add an appropriate HTML element
Add appropriate utility classes
Profit 💰?

This method achieves the main goal of Tailwind: Rapid UI development. This means making the UI components look as intended without adding any custom styling. Of course, sometimes it is inevitable to write CSS, but with this approach, it is reduced to a minimum.

Looking at the above mentioned button example:

<button type="button" class="bg-green-500 p-3 border-2 outline-none border-black rounded">
  Adam
</button>

One thing that immediately sticks out is the number of classes needed to create this button. Sometimes it looks unreadable and seems like clutter. This is a problem when taken into account real scenarios in which there might be multiple buttons or other repeating components on the same page.

Extracting components

Extracting components is a process of extracting utility classes into new, clearly defined and readable classes. Two things give meaning to this process:

The problem of bloating HTML with utility classes
Separation of concerns or reusable components

Again, when looking at the above mention button, there is no need to extract the utility classes into a new class if we are looking at the button as a single occurring component. However, if we look at the button in the context of a bigger project which will certainly have more than one similarly or identically looking button then copying a large number of utility classes seems like an unnecessary obstacle. Besides, if there is a need to change the style of a certain UI component that is repeated it would be a major problem.

How to extract utility classes? Tailwind gives us a very useful function for this: "@apply". In the example below we have the CSS for the same button as above but with extracted classes:

<button type="button" class="btn-wizard">Adam</button>

<style>
  .btn-wizard {
    @apply bg-green-500 p-3 border-2 outline-none border-black rounded;
  }
</style>

The output:

As you can see the output is the same as before, but the HTML is cleaner and more readable. The .btn-wizard class can now be used multiple times across the website.

Responsiveness

Every Tailwind utility class has its responsive behaviour. This allows for effortless creation of responsive components without writing additional CSS. Tailwind provides a simple method of putting already existing utility classes into a responsive context. Using the prefix {screen}:{class}. If we look at the above example of the button and want to change its color depending on the screen size (i.e. if it is a monitor, laptop or mobile screen) we have to add the following:

<button type="button" class="bg-green-500 sm:bg-red-500 p-3 border-2 outline-none border-black rounded">
  Dagi
</button>

We will get the appropriate output.

Tailwind responsiveness implies that the page is going to be created for mobile screens first. Adding the sm:bg-red-500 tells the background of the element changes to red if the size of the screen is larger than the predefined value (which is configurable). If the size of the screen is smaller than the size which the "sm:" represents the colors of the background go back to the default, in this case, green.

There are a couple of predefined screen size options in Tailwind:

Flexbox

When comparing the responsiveness of Tailwind and Bootstrap there is one convenience lacking in Tailwind. That's the Grid functionality that we are so used to with Bootstrap. Tailwind doesn't come with predefined grid classes but provides the tools to achieve the same thing using Flexbox (additional resource) and Tailwind width utility. An example of a grid using a combination of flexbox and tailwind:

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="flex h-64">
      <div class="w-1/2 bg-grey-500"></div>
      <div class="w-1/2 bg-pink-500"></div>
    </div>
    <div class="h-16"></div>
    <div class="flex h-64">
      <div class="w-1/3 bg-grey-500"></div>
      <div class="w-1/3 bg-pink-500"></div>
      <div class="w-1/3 bg-grey-500"></div>
    </div>
  </body>
</html>

Output:

The divs above are completely responsive. It is possible to create an endless amount of columns while Bootstraps grid is limited to 12.

Elements inside the div that have display: flex; follow the x or y-axis for direction (x is the default). This means that the direction of elements inside the flex div can be changed by adding a simple "flex-col" class. This changes the above example to look like this:

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="flex h-64">
      <div class="w-1/2 bg-grey-500"></div>
      <div class="w-1/2 bg-pink-500"></div>
    </div>
    <div class="h-16"></div>
    <div class="flex flex-col">
      <div class="p-6 bg-grey-500"></div>
      <div class="p-6 bg-pink-500"></div>
      <div class="p-6 bg-grey-500"></div>
    </div>
  </body>
</html>

Output:

Configurability

One of the biggest strengths of Tailwind is its configurability. In the center of every Tailwind project is the tailwind.config.js JavaScript file located in the root of the project (by default). It contains all the configurable utility classes and colors. This file doesn't exist unless the user opts to generate it. If there is no config file the utility classes are the same as mentioned in the official documentation.

By default, Tailwind provides a very useful configuration with predefined values to start with. These values are fully configurable and are not required to be used. The documentation, as well as the creator of Tailwind, encourages changing the default values to fit the individual design needs.

Note: Unlike other CSS frameworks, the Tailwind configuration is not co-dependent. This means that any utility class can be deleted without affecting the rest of the configuration.

The configuration file is divided into parts depending on the CSS options it affects. The example bellow shows how a set of utility classes looks for the height property and how to use it inside HTML:

 /*
  |-----------------------------------------------------------------------------
  | Height                                  https://tailwindcss.com/docs/height
  |-----------------------------------------------------------------------------
  |
  | Here is where you define your height utility sizes. These can be
  | percentage based, pixels, rems, or any other units. By default
  | we provide a sensible rem based numeric scale plus some other
  | common use-cases. You can, of course, modify these values as
  | needed.
  |
  | Class name: .h-{size}
  | CSS property: height
  |
  */

  height: {
    'auto': 'auto',
    'px': '1px',
    '1': '0.25rem',
    '2': '0.5rem',
    '3': '0.75rem',
    '4': '1rem',
    '5': '1.25rem',
    '6': '1.5rem',
    '8': '2rem',
    '10': '2.5rem',
    '12': '3rem',
    '16': '4rem',
    '24': '6rem',
    '32': '8rem',
    '48': '12rem',
    '64': '16rem',
    'full': '100%',
    'screen': '100vh',
  },

On top of the configuration for the height property there is a short example of how to use the utility. In order to set the height to '4rem' inside HTML we will add the "h-16" class to the element. If inside the configuration we don't have the desired value, lets say '1.75rem' we can add it and name it however we please. Following the already set pattern it would make sense to call this value '7', but you can use whatever you want:

 /*
  |-----------------------------------------------------------------------------
  | Height                                  https://tailwindcss.com/docs/height
  |-----------------------------------------------------------------------------
  |
  | Here is where you define your height utility sizes. These can be
  | percentage based, pixels, rems, or any other units. By default
  | we provide a sensible rem based numeric scale plus some other
  | common use-cases. You can, of course, modify these values as
  | needed.
  |
  | Class name: .h-{size}
  | CSS property: height
  |
  */

  height: {
    'auto': 'auto',
    'px': '1px',
    '1': '0.25rem',
    '2': '0.5rem',
    '3': '0.75rem',
    '4': '1rem',
    '5': '1.25rem',
    '6': '1.5rem',

    '7': '1.75rem', //<------This was added

    '8': '2rem',
    '10': '2.5rem',
    '12': '3rem',
    '16': '4rem',
    '24': '6rem',
    '32': '8rem',
    '48': '12rem',
    '64': '16rem',
    'full': '100%',
    'screen': '100vh',
  },

On top of the configuration file there is a colour section. It doesn't affect the generated CSS, but provides a way of centralising all colours without the need for a separate file containing only colours. The colours can be used with every utility with which it makes sense to use them:

    colors: {
 |       transparent: 'transparent',
 | 
 |       black: '#000',
 |       white: '#fff',
 | 
 |       gray: {
 |         100: '#f7fafc',
 |         200: '#edf2f7',
 |         300: '#e2e8f0',
 |         400: '#cbd5e0',
 |         500: '#a0aec0',
 |         600: '#718096',
 |         700: '#4a5568',
 |         800: '#2d3748',
 |         900: '#1a202c',
 |       },
 |       red: {
 |         100: '#fff5f5',
 |         200: '#fed7d7',
 |         300: '#feb2b2',
 |         400: '#fc8181',
 |         500: '#f56565',
 |         600: '#e53e3e',
 |         700: '#c53030',
 |         800: '#9b2c2c',
 |         900: '#742a2a',
 |       },
 |       orange: {
 |         100: '#fffaf0',
 |         200: '#feebc8',
 |         300: '#fbd38d',
 |         400: '#f6ad55',
 |         500: '#ed8936',
 |         600: '#dd6b20',

 ...

Again, looking at the button we created, if we want to change its colour to be a bit darker we can use one of the following colours:

<button type="button" class="bg-red-700 p-3 border-2 outline-none border-black rounded">
  Adam
</button>

Summary

It is simple, professionally made, well documented and worth your try. It certainly made my workflow faster, made my UI more uniform and reduced the amount of CSS I wrote over the course of using it. None of my web pages using Tailwind look the same. Additionally, the creator of Tailwind is an experienced guy in the industry and is continuously improving Tailwind. He also wrote a useful book for anyone interested in design (highly recommend!).

NOTE: This post applies to the current version of Tailwind which at the time of writing is v.1.1.2.

Reference:

Useful Heroku CLI commands

Sinan Mujan — Tue, 19 Nov 2019 08:48:36 +0000

Many of us use Heroku on a daily bases but are not aware of some interesting and useful CLI commands that may help you in your everyday work. Here we will take a look at some useful Heroku CLI commands.

heroku apps:info

OPTIONS
  -a, --app=app        app to run command against
  -j, --json
  -r, --remote=remote  git remote of app to use
  -s, --shell          output more shell friendly key/value pairs

If you want to check some basic information about your app that is running on Heroku, you can do so from your CLI. The command and output look something like this:

heroku apps:info -a name-of-your-app

=== name-of-your-app
Addons:         heroku-postgresql:standard-0
                heroku-redis:premium-0
                timber-logging:free
Auto Cert Mgmt: false
Dynos:          web: 2, worker: 1
Git URL:        https://git.heroku.com/name-of-your-app.git
Owner:          owner@heroku.com
Region:         eu
Repo Size:      234 MB
Slug Size:      234 MB
Stack:          heroku-18
Web URL:        https://name-of-your-app.herokuapp.com/

heroku buildpacks:search [term]

ARGUMENTS
  TERM  search term that searches across name, namespace, and description

OPTIONS
  --description=description  buildpack description to filter on

  --name=name                buildpack names to filter on using a comma
                             separated list

  --namespace=namespace      buildpack namespaces to filter on using a comma
                             separated list

You probably know that you can add or remove buildpacks but one useful command is the buildpack search command. Let's say you want to search for the elastic buildpack, you can find it easily:

heroku buildpacks:search elastic

Buildpack                                   Category  Description
──────────────────────────────────────────  ────────  ───────────────────────────────────
doctolib/heroku-buildpack-ci-elasticsearch  tools     Installs an in-dyno ElasticSearch …

1 buildpack found

Then you can eventually add the buildpack you just found and see that it is added to the bottom of your buildpacks list. One thing to notice is that this newly added buildpack will be applied to your app the next time you deploy, not instantly:

heroku buildpacks:add doctolib/heroku-buildpack-ci-elasticsearch -a name-of-your-app

Buildpack added. Next release on your-app-name will use:
  1. heroku/nodejs
  2. https://github.com/mojodna/heroku-buildpack-jemalloc
  3. heroku/ruby
  4. doctolib/heroku-buildpack-ci-elasticsearch

heroku ci

OPTIONS
  -a, --app=app            app name
  -p, --pipeline=pipeline  name of pipeline
  --json                   output in json format
  --watch                  keep running and watch for new and update tests

If you want to check the latest test runs for a given app or pipeline, you can do so with this command:

heroku ci -a name-of-your-app

=== Showing latest test runs for the lab pipeline
✓  2961  last_commit                fbe70c8  succeeded
✓  2960  second_commit              4615132  succeeded
✗  2959  first_commit               a3563a9  failed

heroku:ci debug

OPTIONS
  -a, --app=app            app to run command against
  -p, --pipeline=pipeline  pipeline
  -r, --remote=remote      git remote of app to use
  --no-cache               start test run with an empty cache
  --no-setup               start test dyno without running test-setup

One problem that some of you might have seen is tests that pass locally but fail on your Heroku CI. This command opens a new debug test run. This enables you to inspect the Heroku CI environment and the execution of tests inside a test dyno. It will first start the test setup script (if one is present) and then open a new terminal window from inside the new debug dyno, so you can run your tests from inside the CI.

heroku ci:debug -a name-of-your-app

Preparing source... done
Creating test run... done
Running setup and attaching to test dyno...
...
~ $

heroku config:edit [key]

ARGUMENTS
  KEY  edit a single key

OPTIONS
  -a, --app=app        (required) app to run command against
  -r, --remote=remote  git remote of app to use

If you want to quickly edit a config variable that you have in your app, this is a great way. It opens the default text editor set by $VISUAL or $EDITOR. After editing and saving your file, you will be asked to confirm your edit by typing "yes" at the prompt.

heroku config:edit APP_DISTRIBUTOR -a name-of-your-app

Fetching config... done

Config Diff:
APP_DISTRIBUTOR=test
APP_DISTRIBUTOR=test-new

Update config on ⬢ name-of-your-app with these values?:
Update config on ⬢ name-of-your-app with these values?: yes
Updating config... done

heroku ps:scale

OPTIONS
  -a, --app=app        (required) app to run command against
  -r, --remote=remote  git remote of app to use

To resize your dynos you can use the ps:scale option. If you enter the command without any options you will see the current dyno formation:

heroku ps:scale -a name-of-your-app

console=0:Standard-1X rake=0:Standard-1X release=0:Standard-1X web=2:Standard-1X worker=1:Standard-1X

Let's say you want to scale your worker count up, you can do this in 2 ways:

heroku ps:scale worker=2:Standard-1X -a name-of-your-app

Scaling dynos... done, now running worker at 2:Standard-1X

heroku ps:scale worker+1 -a name-of-your-app

Scaling dynos... done, now running worker at 2:Standard-1X

The same goes for scaling down, you can type the exact dyno formation you want or you can decrease it with the dash ( - ) sign.

heroku logs

OPTIONS
  -a, --app=app        (required) app to run command against

  -d, --dyno=dyno      only show output from this dyno type (such as "web" or
                       "worker")

  -n, --num=num        number of lines to display

  -r, --remote=remote  git remote of app to use

  -s, --source=source  only show output from this source (such as "app" or
                       "heroku")

  -t, --tail           continually stream logs

  --force-colors       force use of colors (even on non-tty output)

To check your application logs you can use the logs command. You can filter by dyno type, edit the number of lines you want to see, continually stream logs etc.

heroku logs -n=4 -a name-of-your-app

2019-11-04T13:34:02.024374+00:00 heroku[web.1]: Restarting
2019-11-04T13:34:02.097510+00:00 heroku[web.1]: State changed from up to starting
2019-11-04T13:34:02.191176+00:00 heroku[worker.1]: Restarting
2019-11-04T13:34:02.264730+00:00 heroku[worker.1]: State changed from up to starting

heroku pg:backups:capture [database]

OPTIONS
  -a, --app=app                  (required) app to run command against
  -r, --remote=remote            git remote of app to use
  -v, --verbose
  --wait-interval=wait-interval

To create a new database backup file, you can use this command. You have to enter the name of your database config variable (in this example it is HEROKU_POSTGRESQL_ORANGE_URL). You can find out the correct name for your database by checking the heroku config command. Then just enter the command like this:

heroku pg:backups:create HEROKU_POSTGRESQL_ORANGE_URL -a name-of-your-app

 ▸    Continuous protection is already enabled for this database. Logical backups of large databases are likely to fail.
 ▸    See https://devcenter.heroku.com/articles/heroku-postgres-data-safety-and-continuous-protection#physical-backups-on-heroku-postgres.
Starting backup of add-on-name... done

Use Ctrl-C at any time to stop monitoring progress; the backup will continue running.
Use heroku pg:backups:info to check progress.
Stop a running backup with heroku pg:backups:cancel.

Backing up ORANGE to b002... done

To download you newly created backup, first check the backup_id:

heroku pg:backups -a name-of-your-app

=== Backups
ID    Created at                 Status                               Size      Database
────  ─────────────────────────  ───────────────────────────────────  ────────  ────────
b002  2019-11-04 13:56:58 +0000  Completed 2019-11-04 14:02:24 +0000  397.92MB  ORANGE

and then you can download it:

heroku pg:backups:download b002 -a name-of-your-app

Getting backup from ⬢ name-of-your-app... done, #2
Downloading latest.dump... ████████████████████████▏  100% 00:00 397.92MB

heroku pg:bloat [database]

OPTIONS
  -a, --app=app        (required) app to run command against
  -r, --remote=remote  git remote of app to use

To show information about table and index bloat in your database, you can use this command:

heroku pg:bloat HEROKU_POSTGRESQL_ORANGE_URL -a name-of-your-app

 type  | schemaname |             object_name             | bloat |   waste    
-------+------------+-------------------------------------+-------+------------
 table | public     | table_1                             |   1.1 | 41 MB
 table | public     | table_2                             |   1.1 | 7360 kB
 table | public     | table_3                             |   1.1 | 4656 kB
 table | public     | table_4                             |   1.0 | 2480 kB

The bloat column shows the bloat factor, which is the fraction of the original table that exists as bloat. Because it is a ratio, there are no units. The waste column shows the total bloat (in bytes) in each table and index in the system.

heroku pg:psql [database]

OPTIONS
  -a, --app=app            (required) app to run command against
  -c, --command=command    SQL command to run
  -f, --file=file          SQL file to run
  -r, --remote=remote      git remote of app to use
  --credential=credential  credential to use

You can access a psql shell of your database this way:

heroku pg:psql HEROKU_POSTGRESQL_ORANGE_URL -a name-of-your-app

--> Connecting to add-on-name
psql (11.3, server 11.5 (Ubuntu 11.5-1.pgdg16.04+1))
SSL connection (protocol: TLSv1.2, cipher: cipher-code, bits: 256, compression: off)
Type "help" for help.

name-of-your-app::HEROKU_POSTGRESQL_ORANGE=>

You can now query your database with standard SQL commands, do insert, update or delete statements if you need to.

heroku pg:pull source target

OPTIONS
  -a, --app=app                            (required) app to run command against
  -r, --remote=remote                      git remote of app to use

  --exclude-table-data=exclude-table-data  tables for which data should be
                                           excluded (use ';' to split multiple
                                           names)

DESCRIPTION
  Pull from SOURCE into TARGET.

  TARGET must be one of:
     * a database name (i.e. on a local PostgreSQL server)  => TARGET must not
  exist and will be created
     * a fully qualified URL to a local PostgreSQL server   => TARGET must not
  exist and will be created
     * a fully qualified URL to a remote PostgreSQL server  => TARGET must exist
  and be empty

This command can come in handy if your local database is not big enough but you want to test some feature. This way, you can copy a staging/production database to a new local database:

heroku pg:pull HEROKU_POSTGRESQL_ORANGE_URL name_of_local_new_db -a name-of-your-app

heroku-cli: Pulling add-on-name ---> name_of_local_new_db
...
heroku-cli: Pulling complete.

You can also do the opposite, to push one of your local databases to Heroku, with pg:push.

heroku pipelines:diff

OPTIONS
  -a, --app=app        (required) app to run command against
  -r, --remote=remote  git remote of app to use

If you want to check if your staging and production app are in sync, you can do so with the pipelines:diff command:

heroku pipelines:diff -a name-of-your-staging-app

Fetching apps from pipeline... done
Fetching release info for all apps... done

⬢ name-of-your-staging-app is up to date with ⬢ name-of-your-production-app

If they are not in sync, you will get a detailed commit diff with the differences:

heroku pipelines:diff -a name-of-your-staging-app

Fetching apps from pipeline... done
Fetching release info for all apps... done

=== ⬢ name-of-your-staging-app is ahead of ⬢ name-of-your-production-app by 2 commits
SHA      Date                  Author        Message
some-sha 2019-10-23T11:56:47Z  sinanmujan    Update Ruby version to 2.6.5
some-sha 2019-10-10T07:00:08Z  sinanmujan    Fix redirect middleware

heroku ps

OPTIONS
  -a, --app=app        (required) app to run command against
  -r, --remote=remote  git remote of app to use
  --json               display as json

To get information about all the dynos in your application, their startup command and up time, you can do this:

heroku ps -a name-of-your-app

=== web (Standard-1X): jemalloc.sh bundle exec puma -C config/puma.rb (1)
web.1: up 2019/11/05 00:40:48 +0100 (~ 10h ago)

=== worker (Standard-1X): bundle exec sidekiq -e production -C config/sidekiq.yml (1)
worker.1: up 2019/11/04 17:44:06 +0100 (~ 17h ago)

heroku ps:exec

OPTIONS
  -a, --app=app        (required) app to run command against
  -d, --dyno=dyno      specify the dyno to connect to
  -r, --remote=remote  git remote of app to use
  --ssh                use native ssh
  --status             lists the status of the SSH server in the dyno

If you want to connect to one of your dynos through SSH, you can do so like this:

heroku ps:exec -a name-of-your-app

Establishing credentials... done
Connecting to web.1 on ⬢ name-of-your-app...
~ $

heroku redis:cli

OPTIONS
  -a, --app=app          (required) app to run command against
  -c, --confirm=confirm
  -r, --remote=remote    git remote of app to use

You can access the Redis resource of your application:

heroku redis:cli -a name-of-your-app

Connecting to redis-horizontal-35620 (REDIS_URL):
some-redis-url:20099>

Copy database between Heroku apps

If you want to copy the entire database from one Heroku application to another, you can do it this way:

heroku pg:copy source_app::source_db_name destination_db_name -a destination_app

Copy ENV variables between Heroku apps

If you want to copy ENV variables between 2 Heroku apps, there is an easy way to do this. First, we need to copy the settings from the current app to a text file on your local machine:

heroku config -s -a existing-heroku-app > config.txt

Then you can add the contents of this config file to your new Heroku app:

cat config.txt | tr '\n' ' ' | xargs heroku config:set -a new-heroku-app

Summary

These were just some interesting and hopefully helpful Heroku commands. You may find more useful tips and tricks in the official Heroku documentation.

Meza: From PostgreSQL table to a JSON file

Dino — Sun, 17 Nov 2019 10:21:01 +0000

Ever wanted to export data from the PostgreSQL table into a JSON file?

👇

pg_cmd="\\copy (select row_to_json(r) from (select * FROM table_name) r ) to
table.json"
psql -w -h host -U username -d database_name -c $pg_cmd
sed -i -e 's/\\\\/\\/g' table.json # clean up extra '\' characters

After executing these commands you will have two JSON files

table.json - initial JSON exported data file
table.json-e - file which contains cleaned up JSON, without extra \ characters

✌️

Introduction to Ruby blocks

Dino — Tue, 12 Nov 2019 13:09:42 +0000

Blocks are ubiquitous in Ruby. They are one of the defining and most powerful characteristics of the Ruby language. It is almost impossible to write any meaningful Ruby code without the blocks. They appear everywhere from ruby core library methods such as enumerations to Rails to Rake to almost every gem out there.

# Core lib
10.times { puts "Ruby" }

# Rails
Rails.application.routes.draw do
  resources :people
end

# Rake
task :test do
  ruby "test/unittest.rb"
end

# Bundler
group :development do
  gem 'pry-byebug'
end

Blocks, all over the place 😰😱

Yet, they can be so hard to understand for beginners and even experienced programmers that are just starting with Ruby.

In this post, we will look at what are the closures, blocks and basic usage patterns.

Let's begin!

Scopes

Lexical scope

Lexical scope serves to answer one important question: What is the value of this variable at this line?

def speak
  message = "in the bottle"
  message
end

speak
# => "in the bottle"

In this example, we created a local variable inside the method, the variable is in the scope of the method, it is created there.

message = "in the bottle"

def speak
  message
end

speak
# => NameError (undefined local variable or method `message' for main:Object)

In this example, we created the variable outside the method scope. When we call the variable inside the method we get an error: Variable is out of the scope.

Local variables are tightly scoped, we can't access a variable outside itself unless it's passed as an argument, or we define an instance variable but that is a story for another day.

Inherited scopes

Yeah, yeah...we got it scoping rules explained above are nothing new and they are easy to grasp. But, wait how does this work then:

message = "in the bottle"

2.times do
  puts message
end

# => in the bottle
# => in the bottle

Blocks, Procs, Lambdas are different. Blocks create scope between do..end(same as method), but they inherit references to the local variables in the context where they are created.

In our example we have 2 scopes

Outer/parent - where variable message is defined
Inner/child - scope inside the block

Our block is created in the context of parent scope and he will carry a reference to the local variable defined in that scope, thus making message variable accessible from within the inner scope.

When block calls variable from the outer/parent scope, that variable is called a free variable.

Turns out, when function whose body(lexical scope) references a variable(free variable) that is declared in the parent scope we got a CLOSURE.

Blocks

Blocks are effectively a type of closure. Blocks capture pieces of code that can be passed into methods to be executed later, they act like anonymous functions.

The ability to encapsulate behavior into blocks and pass it to the methods is an extremely useful technique. This lets you separate general and specific pieces of your code.

Let us imagine we are developers for the NBA. We are building a register of the most popular players:

class Player
  attr_reader :name, :team, :salary, :age

  def initialize(name, team, salary, age)
    @name   = name
    @team   = team
    @salary = salary
    @age    = age
  end
end

players = []
palyers << Player.new("Lebron James", "Lakers", salary: 5000, age: 34)
palyers << Player.new("Kevin Durant", "Nets", salary: 4000, age: 31)
palyers << Player.new("James Harden", "Rockets", salary: 6000, age: 30)

We have a requirement to display players sorted by age or salary or name.

Instead of tying our class with specific sorting implementation we can leverage the power of blocks and separating general from specific like this:

players.sort_by { |player| player.age }
players.sort_by { |player| player.salary }
players.sort_by { |player| player.name }

Executing blocks

Whenever you see yield keyword that means execute the block, for example

def speak
  yield
end

speak method will execute any block we give it

speak { puts "Y" }
#=> Y

If we don't pass the block to the method, ruby will raise an exception.

speak 
# => LocalJumpError (no block given (yield))

Luckily ruby gives as a nice way to check whether the block was passed with block_given?

def speak
  if block_given?
    yield
  else
    "No block is given"
  end
end

speak { puts "Y" }
#=> Y 

speak
#=> No block is given

We can also pass arguments to the block to get similar behavior to this

speak("ruby") { |message| puts "Hello #{message}" }

def speak(message)
  yield(message)
end

Those with a sharp eye will notice that message variable is a free variable here.

That is all for now, in the next posts I will talk more about procs, lambdas, and interesting patterns that we can leverage procs, lambdas, and blocks for.

✌️