DEV Community: Matias Carpintini

Creating a Project Brief: Key Elements and Best Practices for Effective Planning

Matias Carpintini — Sun, 11 Dec 2022 22:17:53 +0000

A project brief is a document that outlines the key details of a project. It's typically used to communicate the project's goals, objectives, and deliverables to stakeholders and team members. A well-crafted project brief can help ensure that everyone involved in the project is on the same page and working towards the same goals.

Here are some steps to help you build a project brief for your next project:

Identify the project's purpose and goals. What is the project trying to achieve, and why is it important? Be as specific as possible when defining the project's purpose and goals.
Outline the project's objectives. What are the specific steps or tasks that need to be completed in order to achieve the project's goals? Make sure that each objective is clear, measurable, and achievable.
Define the project's deliverables. What will be produced as a result of the project? This could include things like reports, presentations, prototypes, or finished products. Be sure to specify who will be responsible for each deliverable and when it is due.
Identify the project's stakeholders. Who will be impacted by the project, and who will need to be involved in its planning and execution? This could include clients, customers, team members, or other individuals or groups who have a vested interest in the project's success.
Establish the project's timeline and budget. When will the project start and end, and how much money will be needed to complete it? Be sure to include any major milestones or deadlines in the timeline, and to allocate sufficient resources to ensure that the project can be completed on time and within budget.
Outline the project's risks and challenges. What are the potential obstacles or challenges that could arise during the course of the project? Identify these upfront and develop strategies for mitigating or addressing them.
Include information about the communication channels, ticket boards, mockups, and other resources that will be used during the project. This could include things like Slack for team communication, Asana for tracking project tasks, and mockups or inspiration to guide the design process. Be sure to specify the technology stack that will be used to build the project.

By following these steps, you can create a comprehensive project brief that will help ensure that your project is well-planned and executed. By clearly communicating the project's goals, objectives, and deliverables, a project brief can help ensure that everyone involved in the project is working towards the same goals and that the project stays on track and within budget.

If you want to create a project brief for your next project, you can download my template.

I also created a new app called Glivo, to help you with this kind-of things, maybe you find it useful, it's free! :)

How to generate OG links preview like Dev.to (for free) with Rails 7

Matias Carpintini — Thu, 28 Apr 2022 23:41:55 +0000

Hey hey heyyyyyy
Quick article on how to have beauty link previews, just like Dev.to does

You're gonna get something like this:

Yup, was being literal with the "like dev.to" 😛
I've build something similar for my new project workby.io, here's how i've build it...

Almost every guide that i found was using htmlcsstoimage.com, in fact, dev.to uses it. It's pretty popular, and efficient, BUT, i don't want to pay $14 bucks for each 1k images 😂🐁

So, i'm going to use Grover: A Ruby gem to transform HTML into PDFs, PNGs or JPEGs using Google Puppeteer and Chromium.

If you want to build this with, let's say, Node.js, you can also follow me. Puppeteer is popular and easy to use.

Long story short: We're going to build a HTML view and take an screenshot of it.

You can create a blank Rails project, or just add additional functionality to your current app.

Setup

Install Grover gem with
bundle add grover

And the dependency of Grover, Puppeteer, with:
yarn add puppeteer

Then create an empty controller where you can respond with different link preview templates:
rails g controller og-imager dev_to

In the dev_to action, let's call Grover and let him do the magic
app/controllers/og_imager_controller.rb

class OgImagerController < ApplicationController
  # GET /og_imager/dev_to
  # @param {string} title
  # @param {string} avatar
  # @param {string} username
  # @param {string} timestamp
  # @param {array} logos
  # @returns image/png
  def dev_to
    # Get params and set to variable
    # TODO: Retrieve your object instead :p
    @title = params[:title]
    @avatar = params[:avatar]
    @username = params[:username]
    @timestamp = params[:timestamp]
    @logos = params[:logos]

    # Grover.new accepts a URL or inline HTML and optional parameters for Puppeteer
    grover = Grover.new(
      render_to_string
    )

    # Get a screenshot
    png = grover.to_png

    # Render image
    send_data(png, type: 'image/png', disposition: 'inline')
  end
end

Here's our view, just simple HTML/CSS
app/views/og_imager/dev_to.html.erb

<div class="container">
  <div class="card">
    <h1 class="title">
      <%= @title %>
    </h1>
    <div class="details">
      <div class="user">
        <img src="<%= @avatar %>" class="avatar">
        <p class="username">
          <%= @username %> - <%= @timestamp %>
        </p>
      </div>
      <div class="logos">
        <% @logos.each do |logo| %>
          <img src="<%= logo %>" class="logo">
        <% end %>
      </div>
    </div>
  </div>
</div>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

  *{
    font-family: 'Roboto', sans-serif;
    color: #cd685f;
  }

  .container{
    width: 1128px;
    height: 600px;
    display: flex;
  }

  .card{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin: 2.8rem 4rem 4rem 2.8rem;
    border: 3px solid #c56b61;
    border-radius: 25px 25px 0px 0px;
    box-shadow: 7px 10px 0px 1px #c56b61;
    padding: 3.8rem 1.8rem 1.8rem 1.8rem;
  }

  .title{
    margin: 0px;
    font-weight: 500;
    font-size: 5rem;
    line-height: 80px;
  }

  .details{
    display: flex;
    justify-content: space-between;
  }

  .user{
    display: flex;
    align-items: center;
  }

  .avatar{
    border: 3px solid #c56b61;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .username{
    margin: 0;
    font-size: 2.5rem;
  }

  .logos{
    display: flex;
    justify-content: space-between;
  }

  .logo{
    width: 60px;
    height: 60px;
    margin-left: 20px;
    transform: rotate(5deg);
  }
</style>

And finally, create an initializer to set our Browser viewport (final image size).

initializers/grover.rb

Grover.configure do |config|
  config.options = {
    viewport: {
      width: 1128,
      height: 600
    },
  }
end

If you have created a blank project, and want to use this as a micro-service, here's a guide on how to deploy this thing to Heroku.

Create the app on your Heroku account (T'm assuming you already have the cli installed): heroku create your_app_name
Warn Heroku of our JS library (Puppeteer): heroku buildpacks:add heroku/nodejs --index=1
And also help him to setup Puppeteer dependencies 😛: heroku buildpacks:add jontewks/puppeteer --index=2
Tell Grover to run Puppeteer in the "no-sandbox": heroku config:set GROVER_NO_SANDBOX=true

To make use of this image on the link preview, you will need The Open Graph protocol. Just simple meta tags that browsers will look for.

Meta tags are always on

so,
app/views/layouts/application.html.erb

<%= yield(:head) %>

And then ask ERB to fill previous block with

<%= content_for :head do %>
  <meta property="og:title" content="<%= @article.title %>">
  <meta property="og:image" content="<%= article_link_preview(@article) %>">
  <meta property="og:image:type" content="image/png" />
  <meta property="og:image:width" content="1128">
  <meta property="og:image:height" content="600">
  <meta name="twitter:card" content="summary_large_image" />
<% end %>

at your details view. Like: /articles/:id

The twitter:card thing it's because they are more fancy on link previews, you can read more about that here

The previous article_link_preview method it's a simple helper that generates the URL that we are looking for.

app/helpers/articles_helper.rb

def article_link_preview article
  uri = URI.parse('https://your_app_name.herokuapp.com/ogimage')
  uri.query = URI.encode_www_form(
    title: article.title,
    'images[]': article.tags.collect(&:image),
    timestamp: article.created_at.to_formatted_s(:short),
    ...
  )
  uri.to_s
end

You will get something like this:
https://your_app_name.herokuapp.com/og_imager/dev_to?title=Real%20Time%20Notification%20System%20with%20Hotwire,%20in%20Rails%207&avatar=https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/369241/a0111bcb-a046-4398-98cd-f4cf0e2f8d0d.png&username=Matias%20Carpintini&timestamp=13%20April&logos[]=https://img.icons8.com/office/80/000000/ruby-gemstone.png&logos[]=https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png

Here's the repo of the whole thing.

Interesting libraries, fonts and more

Matias Carpintini — Thu, 14 Apr 2022 23:11:52 +0000

Share yours below! 😉

Web Tools, libraries and more

Typescale: Great tool for all devs that are obsessed with getting the typography right
UI Colors: Create Tailwind CSS color family
DaisyUI: The most popular, free and open-source Tailwind CSS component library
Confetti: Performant confetti animation in the browser
Mantime: React UI Library
Nocodb: Open Source Airtable Alternative - turns any MySQL, Postgres database into a collaborative spreadsheet with REST APIs.
Meilisearch: Powerful, fast, and an easy to use search engine
Zinc: Zinc Search engine. A lightweight alternative to elasticsearch that requires minimal resources, written in Go.
Partytown: Relocate resource intensive third-party scripts off of the main thread and into a web worker.
Asciinema: Record and share your terminal sessions, the simple way.
Not paid: Client did not pay? Add opacity to the body tag and decrease it every day until their site completely fades away

Fonts

Jobs search

Relocate.me: Niche job board for techies looking to relocate
Workby.io: Hiring remote devs around the globe (self-promotion 😛)

Real Time Notification System with Hotwire, in Rails 7

Matias Carpintini — Wed, 13 Apr 2022 15:18:20 +0000

DISCLAIMER
Time ago i wrote an article here, on how to build a notifications system with Rails and Redis, from scratch. This new one it's a quick update of that one.

If you don't know what i'm talking about, and are curious on how to accomplish same thing without Hotwire, here you go:

Real Time Notification System with Sidekiq, Redis and Devise in Rails 6

Matias Carpintini ・ Apr 25 '20

#rails #ruby #redis

Rails 7 was a huuuge update. I'm not going to talk about that in this post but Hotwire. Hotwire became -officially- part of Rails 7. Now you can have real-time interactions, SPA looking Rails projects, without even write a single line of JS.

TL;TR
Hotwire can be understood as an umbrella/approach. Inside this thing you will find 2 little boys, Turbo, that replaces TurboLinks, and Stimulus, which is in their own words: A modest JavaScript framework for the HTML you already have or, the thing that we're going to use when we need to listen some button clicks :p

Hands on 👊

I'm going to use a clean project, you can skip this if you want. Therefore:
$ rails new notifications_with_hotwire -d=postgresql -T

???
-d=postgresql specify the DB that we're going to use. By default, Rails uses sqlite3.

-T skips test files.

To make it more real, let's include Devise, and Tailwind with their icons library, Heroicons:


 bundle add devise tailwindcss-rails heroicon

Now we need to setup that gems...
For tailwind and heroicons just run $ rails tailwindcss:install && rails g heroicon:install

For Devise, run $ rails g devise:install && rails g devise User and follow their notes.

I'm also going to create a resource that will dispatch notifications later on: $ rails g scaffold Post title body:rich_text user:references. Don't forget to assign user on create,



before_action :authenticate_user!, except: [ :index, :show ]
def create
  @post = current_user.posts.new(post_params)
  ....

And of course, specify the relationship on the User model with:



has_many :posts

Finally, let's move to what you're looking for 😉

How to notifications

I want to create notifications for different resources, such as posts, comments or likes. For this, i'm using a polymorphic reference. If you're not familiar with, read about that here.


 rails g model Notification item:references{polymorphic} user:references viewed:boolean

Just add a default value for viewed field on the migration:



t.boolean :viewed, null: false, default: false

Build a basic nav and place the notifications count badge on it with something like:



<%= link_to notifications_path, class: "bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" do %>
  <span class="sr-only">View notifications</span>
  <%= heroicon "bell", variant: :outline, options: { class: "h-6 w-6" } %>
  <%= tag.div id: :notifications_count do %>
    <%= render "notifications/count", count: current_user.unviewed_notifications_count %>
  <% end %>
<% end %>

You may noticed that unviewed_notifications_count doesn't exists on our User model so, let's define that as a class method
on user.rb:



has_many :notifications
def unviewed_notifications_count
  self.notifications.unviewed.count
end

And the app/views/notifications/_count partial is needed for Turbo. Going to explain this below.



<%= tag.div id: :notifications_count do %>
  <% if count > 0 %>
    <span class="h-6 w-6 flex items-center justify-center bg-red-500 rounded-md text-sm">
      <%= count > 9 ? "+9" : count  %>
    </span>
  <% end %>
<% end %>

Here's the thing of the whole article (notification.rb). Turbo actions. Let's take the first callback to explain what's going on.

broadcast: now turbo handle the sttuff we built on the previous article. TD;TR: ApplicationCable to stablish connection between the user and the server, create and send jobs to the background to be performed async with Redis.
prepend/replace/remove: simple JS actions
to: the target (AKA stream). In this case, i'm establishing connection with the specific signed user.
target: simple HTML (or turbo_frame) element used to perform the JS action.



scope :unviewed, ->{ where(viewed: false) }
default_scope { latest }

after_create_commit do 
  broadcast_prepend_to "broadcast_to_user_#{self.user_id}", 
    target: :notifications
end

after_update_commit do 
  broadcast_replace_to "broadcast_to_user_#{self.user_id}", 
    target: self
end

after_destroy_commit do 
  broadcast_remove_to "broadcast_to_user_#{self.user_id}", 
    target: :notifications
end

after_commit do
  broadcast_replace_to "broadcast_to_user_#{self.user_id}", 
    target: "notifications_count", 
    partial: "notifications/count", 
    locals: { count: self.user.unviewed_notifications_count }
  end
end

Yup, the latest scope didn't exists either, i like to define that on application_record.rb.



scope :latest, ->{ order("created_at DESC") }

In application.html.erb create the stream that allows the previous snippet "talk" with the signed user (without this everyone's getting everyone's notifications 😛)



<% if user_signed_in? %>
  <%= turbo_stream_from dom_id(current_user, :broadcast_to) %>
<% end %>

Now let's put notifications-related stuff on concerns/notificable.rb.

included will append where we import this concern. It sets a relationship and have a simple callback that runs once we create a new resource (post in this case) object.
If that resource model have the user_ids method, it will create the notifications for that users. ```ruby

module Notificable
extend ActiveSupport::Concern

included do
has_many :notifications, as: :item, dependent: :destroy
after_create_commit :send_notifications_to_users
end

def send_notifications_to_users
if self.respond_to? :user_ids
self.user_ids&.each do |user_id|
Notification.create user_id: user_id, item: self
end
end
end
end


So then, when we want to create notifications for a new resource, we just need to include that concern on our resource model, in this case `post.rb`
```ruby


include Notificable

def user_ids
  User.where.not(id: self.user_id).ids
end

Finally, to show the notifications on our application UI, let's respond to /notifications path on notifications_controller.rb



class NotificationsController < ApplicationController
  before_action :authenticate_user!

  def index
    @notifications = current_user.notifications
    @notifications.update(viewed: true)
  end
end

Don't forget to notify the controller about this new path on config/routes.rb



resources :notifications, only: [ :index ]

And there you go. The notifications index :)
views/notifications/index.html.erb



<div class="space-y-4">
  <p class="text-lg leading-6 font-medium text-gray-900 flex justify-between">
    Notifications
  </p>
  <ul class="border-t border-b border-gray-200 divide-y divide-gray-200" id="notifications">
    <%= render @notifications %>
  </ul>
</div>

The previous render @notifications will look for the views/notifications/_notification.html.erb partial.
And i like to render a new partial here, since we have a polymorphic relation.



<li class="py-4" id="<%= dom_id(notification) %>">
  <%= render "notifications/#{notification.item_type.downcase}", notification: notification %>
</li>

That previous render will look for views/notifications/_post.html.erb (in this case). If you create notifications for, let's say, likes then you need to create a new partial, called _like. And customize the notification for that new resource.



<p class="text-gray-900">
  <%= notification.item.user.email %> just posted:
  <%= link_to notification.item.title, notification.item, class: "underline font-medium" %>
</p>

Here's the repo with everything :)

Oh, and i'm building a job board for devs that want to work remotely. There's already couple job offers for Rails devs, if you're looking for job, check this out.

Bye.

Spam filtering system - Bayes classifier

Matias Carpintini — Mon, 11 Apr 2022 01:26:35 +0000

What the f*ck is a Bayes Cassifier?

The Bayes Rule, "The theory that never died"

A simple 17th century theory for the evaluation of knowledge, criticized for most of the 20th century.

It helps people evaluate their initial ideas, update and modify them with new information, in order to make better decisions.

Initial beliefs + recent objective data = A new improved belief.

The theory is very robust. In practice, Bayes rule requires multiple calculations, and powerful computers that reintegrate millions of times the probability of an initial belief each time new information arrives. Bayes rule does not generate an absolutely true (exact answer), instead, it uses probability to move step by step toward the most likely conclusion.

It was discovered and published by two clergymen and amateur mathematicians, the Englishman Thomas Bayes and his Welsh friend Richard Price, during the 18th century.

The French mathematician Pierre-Simon Laplace developed it in the form in which it is used today. Now we could call it the Bayes-Price-Laplace theory, or GLP for short.

Part of the initial controversy is due to the fact that during the 40's of the 18th century a harsh controversy had opened about the improbability of Christian miracles. The question was whether there was evidence in the natural world that would help us reach rational conclusions about God the creator, which in the 18th century was known as "the cause" or "the first cause".

We do not know if Bayes was trying to prove the existence of God as a cause. But we do know that he tried to deal mathematically with the problem of cause and effect;

During the Cold War, the United States Air Force lost a hydrogen bomb off the coast of Palomares, and the United States Navy began to secretly develop the Bayesian theory for finding underwater objects.

In 2009, Air France Flight 447 disappeared in the South Atlantic Ocean with 228 people on board. The United States Navy had developed Bayesian search theory enough to end two years of unsuccessful search for AF447 in a week's underwater search.

Today we use it for an immense amount of things, such as filtering spam and training autopilot systems.

If you want to know more about the history behind it, take a look to this video.

Ok, nice. But you haven't answered the previous question!

Naive Bayes Classification

The Naive Bayes classifier is a machine learning technique that can be used to classify objects such as text documents into two or more classes. A new object it's classified by the similarity between others.

Despite its "naivete", the naive Bayes method tends to work very well in practice.

“all models are wrong, but some are useful” - George Box

Cool, go for it!

So, for our purpose (spam filtering), we need data (a lot of emails), classify each email as spam or ham (legitimate) and then analyze the words independently, in order to get the most common words in each of those classes.

P.S: You can have many classes as you want. Like Gmail does with Promotions, Updates, Forums or Social.

Initial beliefs: For simplicity, let says that the half of emails we get are spam. 1:1.

Now we need to obtain the probability that each of those words appears in spam or ham. The simplest way is to count how many times each word appears in the data and divide the number by the total word count.

word	spam	ham
Free	184	12
total	104342	294554

In this example, the probability that the word "Free" in a spam message appears is 1 out of 567 words. Same exercise for ham: 1 in 24

Recent objective data: If we found the word "Free" in our message, it will increase the probability of being spam in 23.6 (567/24)

1/1 (initial beliefs: half messages we receive are spam) * 23.6 (we just found the world "Free" in our email) = 23.6.

There are on the average about 23.6 spam messages for each ham message, or to use whole numbers, 236 (23.6*10) spam messages for every 10 ham messages. So, the probability would be: 236 / (236 + 10) * 100 = 95.9%

To handle the rest of the words in a email, we can use exactly the same procedure. The posterior odds after one word (what we just calculated), will become the prior odds (or the initial belief) for the next word, and so on.

You may have noticed that how whole thing will be biased. Since once we are going to analyze the second word, it already have a strong belief that the email is spam, due it has the free world on it, and same with next words.

That's known as the base rate fallacy, and you can read more about here.

But let's keep it simple,

"Land-and-Expand"

How can i play with this?

I just found classifier-reborn, a gem that keeps it pretty simple. And this dataset.

Here you go:

require 'classifier-reborn'
require 'csv'

# Load dataset
dataset = CSV.parse(File.read("spam_ham_dataset.csv"), headers: true)

# Create our Bayes / LSI classifier
classifier = ClassifierReborn::Bayes.new('Spam', 'Ham')

# Train the classifier
dataset[1..-1].each_with_index do |email, index|
  if dataset[index]["label"] == "spam"
    classifier.train "Spam", dataset[index]["text"]
  else
    classifier.train "Ham", dataset[index]["text"]
  end
end

# Play with it
puts "Insert your email here (txt)"
puts classifier.classify gets

You can also check this repo, to see how it looks without the gem :p

Speaking of spam... I'm going to launch a job board for devs that want to work remotely, and i'm looking for feedback, take a look!

Bye.

Building a Rails Recommendation Engine

Matias Carpintini — Sun, 24 May 2020 23:33:51 +0000

Just to give you some context, we were working on the new Diabecarp App a few days ago. I can't talk much about the new features, but I am going to extrapolate 2 interesting solutions during the process, give you why, explain a bit and, as always, put together a demo with Rails ♥️.

First Requirement -

Recommendation engine

Without giving many details about the case itself, we have a very large amount of content. Various resources (such as Articles or Recipes). Therefore, we must find a way to organize it efficiently according to the user's interest. Come on, nothing new, right?

So, the first thing we did was ask ourselves, what do we have at our disposal to better understand the user and their interests? At this point, due to early stage, we can only use: likes and views.

The next thing we did was go over the different ways of understanding our user. And we opted for the one that seems simpler, and not for that less elegant.

🌎 Collaborative Filtering

It is based on the premise that we all have certain similarities, and therefore, likes and interests. And precisely this simplicity is what makes this algorithm extremely elegant.

Wikipedia: Collaborative filtering is a method of making automatic predictions (filtering) about the interests of a user by collecting preferences or taste information from many users (collaborating).

Most websites like Amazon, YouTube, and Netflix use collaborative filtering as a part of their sophisticated recommendation systems. You can use this technique to build recommenders that give suggestions to a user on the basis of the likes and dislikes of similar users.

Let's see with an illustration, surely they understand me instantly.

It is also very common to see this with Content Based Filtering, the same as with users, only here we compare the relationship of the content. Something like that:

DISCLAIMER: For the rest of the article I will touch on both options, I just want to make it clear that the concept is the same, the similarity.

👉 Let's see an example of how to recommend similar content (in this case, songs).

First, we take each pair of songs in our database and calculate a similarity between the two songs. To find this similarity, we compared the lists of users who liked the two songs. If many people liked both songs, it is likely that they are quite similar. And if not many people liked both songs, they are probably less similar. A table of similarities could look like this:

	Another Brick in the Wall	Hey You	Time
Another Brick in the Wall	1
Hey You	0.7	1
Time	0.2	0.1	1

Once we have this list of similarity scores between songs, it's pretty easy to provide recommendations. If a user is listening to a song, we can provide a "Similar Songs" list by simply finding the most similar songs in our previous metric.

Challenges with Collaborative Filtering

Basically, there are 2 big problems.

1.- Cold Start:
Starting without enough data, such as users and reactions of those users that allow us to multiply matrices and reach a good result (later).

This clear problem has a solution, only that we find a much simpler return. Basically, in the index of each resource (eg. Articles) we have a top section with 10 recommended articles and below the rest ordered by 'most recent'.

This is how we get those recent ones to get the traction they deserve. Here it can be automatically filtered to the top section or disappear completely. Finally, we filter those that the user already read and end.

2.- Scalability:
The more users and more data, the more expensive it becomes to compare these matrices.

As we do not have much time or resources, we decided to take this technical debt, considering that very possibly in the future we will have to migrate.

Now let's see a real implementation so that you can understand me.

There are already several gems developed for this need, yet several are old. I'm not 100% sure they still work, at the end of the day at Diabecarp we have another stack. Maybe we can write a new one in the future 😉

I choose the last one because the rest works with Redis and I no longer want to extend the post. Let's go! 👊

To find the similarity of two songs, we need to take the user IDs that liked each of the two songs, and compute: (size of intersection of sets) / (Jaccard similarity coefficient). Because we have to do this computation for every pair of songs, performance becomes important.

One strategy used by the Redis-based gems is to push the similarity computation into our datastore– we want to avoid the overhead of sending each pair of ID sets back and forth to our application server, especially if those are large sets. We also get extra performance points if our datastore has primitives that help make the similarity computation faster.

Fortunately, these are both problems that can be solved with a relational database. SQL is totally flexible enough to express a single query that computes many item similarities at once. Also, postgres happens to have a convenient extension called intarray which provides efficient intersection and union operations for arrays of integers.

Setup the gem...
Specify an ActiveRecord association to use for recommendation (./app/models/song.rb):

class Song < ActiveRecord::Base
  has_many :likes
  has_many :users, through: :likes

  include SimpleRecommender::Recommendable
  similar_by :users
end

And then you can call similar_items to find similar items based on who liked them:

song = Song.find_by(title: "Another Brick in the Wall")
song.similar_items(n_results: 3)
# => [#<Song id: 2, name: "Time">,
      #<Song id: 3, name: "Hey You">,
      #<Song id: 4, name: "Wish You Where Here">]

This scope is composing a query that operates on its join table, like a Like table with user_id and song_id. It uses common table expressions to create a temporary table with one row per pair of songs, and computes the similarity for each row of that table. That temporary table looks something like this:

Song 1 Name	Song 1 User IDs	Song 2 Name	Song 2 User IDs	Similarity
Another Brick in the Wall	{1, 2, 3, 4, 5}	Hey You	{1, 3, 4, 5, 6}	0.7
Another Brick in the Wall	{1, 2, 3, 4, 5}	Time	{3, 8, 10, 12, 13}	0.1

Then it just looks for the highest singularity and returns it.

Ok, that's it for today. In the following article I would like to talk about how we are using Bayesian Networks or even how we prepare for onboarding.

BTW, if you are interested in the project, we are still looking for devs!

👋 Bye

Real Time Notification System with Sidekiq, Redis and Devise in Rails 6

Matias Carpintini — Sat, 25 Apr 2020 03:06:11 +0000

DISCLAIMER
Just published a new article on how to do this in Rails 7, with Hotwire.

Real Time Notification System with Hotwire, in Rails 7

Matias Carpintini ・ Apr 13 '22 ・ 5 min read

#hotwire #rails #redis

You can read this one anyways, here i'm going to explain things that in the new one we didn't see ;)

In this post, we are going to talk a lot about asynchronous functions, something very fashionable nowadays, but not so much just a few years ago.

With this I do not mean that it is something necessarily new, but I believe that thanks to the JS ecosystem today the world happens in real time.

In this post, I want to teach the key concepts of this. But as always, we do not stay in theory and we are going to see a real implementation, such as real-time notifications from our application.

I will try to be as brief and simple as possible.

Definitions and concepts -

Asynchronous programming: refers to the occurrence of events that happen in our program. They are executed independently of our main program, and never interfere with their execution. Prior to this, we were forced to wait for a response to continue execution, seriously impairing the user experience.

Concurrency, Parallelism, Threads, Processes, Async and Sync — Related? 🤔

WebSockets: WebSockets represent a long awaited evolution in client/server web technology. They allow a long-held single TCP socket connection to be established between the client and server which allows for bi-directional, full duplex, messages to be instantly distributed with little overhead resulting in a very low latency connection. Keep reading

In other words, it allows us to establish a peer-to-per connection between the client and the server. Before this, the client was only the one who knew where the server was, but not vice versa.

Thanks to this, we can send a request to the server, and continue executing our program, without waiting for your response. Then the server knows where the client is, and can send you the response.

Let's do it 👊

All of the above already makes sense for our notification system, right?
Before continuing, make sure you have Redis installed. Sidekiq uses Redis to store all of its job and operational data.

👋 If you do not know what Redis is, you can discover it on its official site

Sidekiq helps us to work in the background in a super simple and efficient way. (Also, one of my favorite gems ♥️)

I created this project for this article in order to focus directly on what interests us. The project is a simple blog with user authentication and the necessary front to display our notifications. You can download it and follow the article with me.

NOTE: you can see the full implementation in the "notifications" branch

Init configuration...

In config/routes.rb we will mount the routes of ActionCable (framework for real-time communication over websockets)

Rails.application.routes.draw do
  # everything else...
  mount ActionCable.server => '/cable'
end

Now, do you remember how WebSockets works? A peer-to-peer connection, well in other words, is also a channel (as we call it in Rails), and within that channel, we have to always identify each user. This so that the server can know who to reply to, and know who made a request. In this case, we will identify it with the user.id (I am using devise)

So, in app/channels/application_cable/connection.rb:

module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def connect
      self.current_user = find_user
    end

    def find_user
      user_id = cookies.signed["user.id"]
      current_user = User.find_by(id: user_id)

      if current_user
        current_user
      else
        reject_unauthorized_connection
      end
    end
  end
end

We are going to save the user who logged in a cookie (it will help us to obtain it from other places, we will see), an interesting solution for this (at least with Devise) is using Warden Hooks

For that, we can create an initializer on our application, config/initializers/warden_hooks.rb

  Warden::Manager.after_set_user do |user, auth, opts|
    auth.cookies.signed["user.id"] = user.id
    auth.cookies.signed["user.expires_at"] = 30.minutes.from_now
  end

  Warden::Manager.before_logout do |user, auth, opts|
    auth.cookies.signed["user.id"] = nil
    auth.cookies.signed["user.expires_at"] = nil
  end

Now, let's create a table in our database to save every notification we create, for this, $ rails g model Notification user:references item:references viewed:boolean

NOTE: :item is a polymorphic association, I do it this way so they can add various types of notifications)

Let's specify this and other details in our migration (db/migrate/TIMESTAMP_create_notifications.rb):

class CreateNotifications < ActiveRecord::Migration[6.0]
  def change
    create_table :notifications do |t|
      t.references :user, foreign_key: true
      t.references :item, polymorphic: true
      t.boolean :viewed, default: false

      t.timestamps
    end
  end
end

and, $ rails db:migrate

In app/models/notification.rb we are going to do a couple of things that we will see on the go

class Notification < ApplicationRecord
  belongs_to :user
  belongs_to :item, polymorphic: true # Indicates a polymorphic reference

  after_create { NotificationBroadcastJob.perform_later(self) } # We make this later

  scope :leatest, ->{order("created_at DESC")}
  scope :unviewed, ->{where(viewed: false)} # This is like a shortcut

  # This returns the number of unviewed notifications
  def self.for_user(user_id)
    Notification.where(user_id: user_id).unviewed.count
  end
end

Let's create a concern, remember that one of the most respected Rails philosophies is DRY (Don't Repeat Yourself), currently, each notification requires the same to work (in models)(again, in this project we only have publications, but We could have many other things that we want to integrate with our notification system, so with this form it is super simple).

For that, app/models/concerns/notificable.rb

module Notificable
  extend ActiveSupport::Concern # module '::'

  included do # this appends in each place where we call this module
    has_many :notifications, as: :item
    after_commit :send_notifications_to_users
  end

  def send_notifications_to_users
    if self.respond_to? :user_ids # returns true if the model you are working with has a user_ids method
      NotificationSenderJob.perform_later(self)
    end
  end
end

Now we can include it in our app/models/post.rb. Remember that our send_notifications_to_users expects the method user_ids to reply to you with the respective fix. Let's do that (app/models/post.rb):

class Post < ApplicationRecord
  include Notificable
  belongs_to :user

  def user_ids
    User.all.ids # send the notification to that users
  end
end

We are going to create the job in charge of sending the notifications, this is what we will send to the background and we will handle with Sidekiq. For that, $ rails g job NotificationSender

Inside the job (app/jobs/notification_sender_job.rb):

class NotificationSenderJob < ApplicationJob
  queue_as :default

  def perform(item) # this method dispatch when job is called
    item.user_ids.each do |user_id|
      Notification.create(item: item, user_id: user_id)
    end
  end
end

Finnally, we need to install Sidekiq (and Sinatra for make few things a little more easier), so, in out Gemfile:

# everything else...
gem 'sinatra', '~> 2.0', '>= 2.0.8.1'
gem 'sidekiq', '~> 6.0', '>= 6.0.7'

Don't forget, $ bundle install

We are going to tell Rails that we will use Sidekiq for jobs on the queue adapter (config/application.rb):

# everything else...
module Blog
  class Application < Rails::Application
    # everything else...
    config.active_job.queue_adapter = :sidekiq
  end
end

We are also going to set up the routes that Sidekiq provides us, among them, a kind of backoffice for our background (later you can have acces from localhost:3000/sidekiq), very interesting. In config/routes.rb:

require 'sidekiq/web'
Rails.application.routes.draw do
  # everything else...
  mount Sidekiq::Web => '/sidekiq'
end

Now we are going to create the channel through which we will transmit our notifications. $ rails g channel Notification

In the backend of this channel (app/channels/notification_channel.rb), we will subscribe users:

class NotificationChannel < ApplicationCable::Channel
  def subscribed
    stream_from "notifications.#{current_user.id}" # in this way we identify to the user inside the channel later
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end
end

And in the frontend of the channel (app/javascript/channels/notification_channel.js) it would be interesting to send a push notification to the browser, there are many JS libraries that make that very easy (like this), but in order not to make the post much heavier, we are going to print a simple message on the console. So:

// everything else...
consumer.subscriptions.create("NotificationChannel", {
  // everything else...
  received(data) {
    if(data.action == "new_notification"){
      cosole.log(`New notification! Now you have ${data.message} unread notifications`) 
    } // we will define action & message in the next step
  }
});

At this point, we already have a lot running, let's send that notification to the user! For this we are going to create another job that just does this, remember, the previous job is in charge of creating the notifications, this one does the broadcast. So, $ rails g job NotificationBroadcast

Inside app/jobs/notification_broadcast_job.rb:

class NotificationBroadcastJob < ApplicationJob
  queue_as :default

  def perform(notification)
    notification_count = Notification.for_user(notification.user_id)

    ActionCable.server.broadcast "notifications.#{ notification.user_id }", { action: "new_notification", message: notification_count }
  end
end

Fantastic, we already have everything working! 🎉
I'm going to add a few things to the backend to end the example.

First of all, I'm going to add a method to my user model so I can count the notifications I haven't seen yet. And the model is a good place to do this query. In app/models/user.rb:

class User < ApplicationRecord
  # everything else...
  def unviewed_notifications_count
    Notification.for_user(self.id)
  end
end

I'm also going to create a controller, $ rails g controller Notifications index. Inside the controller (app/controllers/notifications_controller.rb) i'm going to add some methods:

class NotificationsController < ApplicationController
  def index
    @notifications = Notification.where(user: current_user).unviewed.leatest

    respond_to do |format|
      format.html
      format.js
    end
  end

  def update
    @notification = Notification.find(params[:id])

    message = @notification.update(notification_params) ? "Viewed notification" : "There was an error"

    redirect_to :back, notice: message
  end

  private
  def notification_params
    params.require(:notification).permit(:viewed)
  end
end

I will create a js view to be able to respond remote and display the latest notifications in my dropdown in the nav. In app/helpers/notifications_helper.rb:

module NotificationsHelper
  def render_notifications(notifications)
    notifications.map do |notification|
      render partial: "notifications/#{notification.item_type.downcase}", locals:{notification: notification}
    end.join("").html_safe
  end
end

Add the link in your nav, in my case (app/views/partials/notifications.html.erb):

<%= link_to notifications_path, remote: true, data:{ type:"script" } %>

Let's not forget to add the paths (app/config/routes.rb) for this new controller.

# everything else...
Rails.application.routes.draw do
  # everything else...
  resources :notifications, only: [:index, :update]
end

Just create a partial for this item (like app/views/notifications/_post.rb). They can include a link to 'mark as seen', in this way:

<%= link_to notification_path(id: notification, notification:{viewed: true}), method: :put %>

To run this locally you will have to run Redis ($ redis-server) and Sidekiq ($ bundle exec sidekiq) + $ rails s, have 3 terminal windows open with these 3 commands running in parallel.

That is all, I hope it is useful to you 👋

Magic Links with Ruby On Rails and Devise

Matias Carpintini — Sat, 18 Apr 2020 21:47:35 +0000

Passwords are a problem for users. A good practice to skip this is by sending an access link to your account by email, that link has a token that we will use to validate and finally, sign in to the user to their account. Next, I'm going to show you an implementation in Ruby On Rails 6 with Devise.

NOTE: I am going to create an application from 0 for avoid mistakes.

Setting up

Create the project: $ rails new magicLinks -T --skip-turbokinks --database=postgresql

Installing dependencies...

Add this to your Gemfile.rb

gem 'devise', '~> 4.7', '>= 4.7.1'
group :development, :test do
  gem 'letter_opener', '~> 1.7' // For open emails in the browser
end

Then, $ bundle install
Let's install Devise: with $ rails g devise:install && rails g devise User && rails db:create && rails db:migrate

config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
config.action_mailer.delivery_method = :letter_opener

Devise asks us for a root path, let's do that: $ rails g controller welcome index.
Add this in your app/config/routes.rb:

root 'welcome#index'

Let's do it 👊

First, we need to create a table for save the generated tokens on our db.
So, $ rails g model EmailLink token expires_at:datetime user:references && rails db:migrate

Now we are going to generate the token and send the email when this happens, for that, in app/models/email_link.rb:

class EmailLink < ApplicationRecord
  belongs_to :user
  after_create :send_mail

  def self.generate(email)
    user = User.find_by(email: email)
    return nil if !user

    create(user: user, expires_at: Date.today + 1.day, token: generate_token)
  end

  def self.generate_token
    Devise.friendly_token.first(16)
  end

  private
  def send_mail
    EmailLinkMailer.sign_in_mail(self).deliver_now
  end
end

Let's generate the controller to trigger the previous callback when the user gives us their email and sends the form, rails g controller EmailLinks new create.

Let's add the necessary routes in our app/config/routes.rb.

root 'welcome#index'
get 'email_links/new', as: :new_magic_link
post 'email_links/create', as: :magic_link
get 'email_links/validate', as: :email_link

Now, let's give functionality to our controller:

class EmailLinksController < ApplicationController
  def new

  end

  def create
    @email_link = EmailLink.generate(params[:email])

    if @email_link
      flash[:notice] = "Email sent! Please, check your inbox."
      redirect_to root_path
    else
      flash[:alert] = "There was an error, please try again!"
      redirect_to new_magic_link_path
    end
  end

  def validate
    email_link = EmailLink.where(token: params[:token]).where("expires_at > ?", DateTime.now).first

    unless email_link
      flash[:alert] = "Invalid or expired token!"
      redirect_to new_magic_link_path
    end

    sign_in(email_link.user, scope: :user)
    redirect_to root_path
  end
end

At this point, our program is capable of generating the token, validating it and logging in. What we have left is to send the email and the view where the user gives us their email.

NOTE: If you want to see these alerts, you must add them in app/views/layouts/application.html.erb, inside the body tag:

<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>

Sending the email

Very easy, first we are going to generate our mailer, $ rails g mailer EmailLinkMailer and then we give it functionality:

class EmailLinkMailer < ApplicationMailer
  def sign_in_mail(email_link)
    @token = email_link.token
    @user = email_link.user

    mail to: @user.email, subject: "Here is your magic link! 🚀"
  end
end

Let's edit our email (app/views/email_link_mailer/sign_in_mail.html.erb) a little:

<p>Hello, <%= @user.email %>!</p>
<p>Recently someone requested a link to enter your account, if it was you, just press the button below to log in</p>

<%= link_to "Sign in to my account", email_link_url(token: @token) %>

Brilliant! At this point our program is already capable of sending the email, we just need the main view, where the user will give us their email and we can fire all this backend.

Just add this simple form in app/views/email_links/new.html.erb:

<%= form_with(url: magic_link_path, method: :post) do %>
  <%= label_tag :email, "E-mail address" %>
  <%= email_field_tag :email, nil, placeholder:"carpintinimatias@gmail.com", autofocus: true, required: true %>
  <%= submit_tag "Send!" %>
<% end %>

To validate on the front that this works, we can add this dummy example in app/views/welcome/index.html.erb:

<% if user_signed_in? %>
  <p>Hello, <%= current_user.email %></p>
  <%= link_to "Sign out", destroy_user_session_path, method: :delete %>
<% else %>
  <p>Hey, Sign In with Magic Links!</p>
  <%= link_to "Click here", new_magic_link_path %>
<% end %>

All right, that's it. Thanks for reading. 👋