DEV Community: Renzo Diaz

What are my day-to-day tools as a full-stack developer?

Renzo Diaz — Sat, 20 Jun 2020 00:26:50 +0000

I've divided a list of tools that I use every day working as a full-stack developer by category.

Design

Graphic link:

I can't afford Illustrator monthly so I found this alternative, I paid once and it worth all. I can edit vectors, AI files, export everything that you can do with Illustrator.

SketchApp link:

When it comes to design mockups I use Sketch, it has a friendly interface that makes it easy to design.

Zeplin link:

If you are developing an application you should have quick access to the mockup assets like images, colors, icons, etc. Zeplin is a design collaboration tool that allows uploading your mockups to the cloud you all the development team can access them quickly and easily.

Development

Iterm2 link

An alternative to default terminal on macOS

Vim link

I use Vim as the code editor, I've customized shortcuts and plugins for fast development.

Docker link

Docker to containerize my apps

Xcodelink

When I need to develop an IOS app I use Xcode with Swift.

TMUX link

When I'm developing a web application I need quick access to different terminals, for example, to run a server, to use my Vim editor all in just one terminal in a single session.

Homebrew link

A package manager for macOS.

Repl link

Sometimes I need to write quick methods to see what returns on the console.

Services

Gitlab link

I'm a fan of Gitlab, private repositories, CI/CD and you can also use the community edition to install in your own server.

HEROKU link

Where I deploy my personal projects.

AWS S3 link

When I'm working on a big application I store the resources in a bucket in AWS S3, and when I need to create a CDN as well.

PivotalTracker link

Every developer should use a tool to track progress on the development or specific task, I use PivotalTracker for big projects and Gitlab board for small.

Utilities

1Password: My generate and store passwords.
Boostnote: Save my snippets or documentation.
Workspace: I organize my apps in workspaces, so I can access them in one click.
Toggle Alfred: Enhanced spotlight in mac.
ExpressVPN: A VPN to navigate safely.

I'm not a Rich guy that can afford a Mac, I use a Mac because I feel more comfortable work design, develop Web and iOS applications. I work for years to get a MacBook 2017 before I used to go to my university to use design tools.

I would appreciate it if you can share the tools you use in your day-to-day.

Have a nice day!

How to use ULID as primary key Rails

Renzo Diaz — Thu, 21 May 2020 19:54:29 +0000

A short story

Ruby on Rails is a powerful framework it is easy to create APIs and fast website development, one thing that came when I was developing an API was how to change the Integer auto-increment primary key because having a predictable Id can be risky in terms of security if you share it for a client-size application, the user can guess ids and modify the database in the worst of the case, at that moment I had to research some alternatives and I found UUID a non-sequential data type that can be easily be implemented in Rails, so I've tried it and everything was ok until I had to sort ASC and DESC, I realize that the methods Model.first and Model.last doesn't work as expected because Rails by default uses them with the integer sequential id type, so as UUID is non-sequential it generates a random Hash like this 123e4567-e89b-12d3-a456-426614174000 as it doesn't have a sequence Rails can't figure out how to sort the data, then I researched a little bit more to see if there is any other solution and I found that we can use self.implicit_order_column = "created_at" in the Model, with this, those methods work ok it sorts depending on the DateTime created and I was happy. Not for a long time, when another problem came up! When I used seeds to fill a bulk of fake data into the database, all the data had the same DateTime and the sorting failed again, it was the same issue as the initial one. I've decided to look for another alternative and I found ULID, using this I had everything I've needed the sorting works as expected, it isn't predictable and the store in memory is pretty good. I'm still using it and I don't have any issues.

How to implement ULID in Rails?

There is already a gem for ruby add it to your Gemfile

#Gemfile
...
  gem 'ulid'
end

Then run bundle install to install it. Then update your migration or if you are creating a new one should look like this.

# migration
class CreateUsers < ActiveRecord::Migration[6.0]
  def change
   # id: false, to not use id int as default
   create_table :users, id: false do |t|
     # here we create our id
     t.binary :id, limit: 16, primary_key: true

     t.string :given_name
     t.string :family_name
     t.string :email, unique: true, index: true
     t.string :username, unique: true, index: true
     t.string :password_digest
     ...
     t.timestamps
   end
  end
end

First, we disable the autogenerated id by putting id: false and create our own id t.binary :id, limit: 16, primary_key: true what we need to do is fill the id before create, we can do it on each Model but my approach was to create a concern to just include it in the application_record.rb file so it will apply for all the models.

# app/models/concenrs/ulid_pk.rb
require 'ulid'

module UlidPk
  extend ActiveSupport::Concern

  included do
    before_create :set_ulid
  end

  def set_ulid
    self.id = ULID.generate
  end
end

Then in the application_record.rb include it.

# app/models/concenrs/ulid_pk.rb
class ApplicationRecord < ActiveRecord::Base
  include UlidPk
  self.abstract_class = true
end

That's it, now it will autogenerate the id before create.

Note

if you need to create an association you should put the type on it.

# migration
class CreateEvents < ActiveRecord::Migration[6.0]
  def change
   # id: false, to not use id int as default
   create_table :users, id: false do |t|
     # here we create our id
     t.binary :id, limit: 16, primary_key: true

     t.string :name
     t.string :description
     ...
     # Specify the type: binary
     t.references :user, type: :binary, foreign_key: true, index: true

     t.timestamps
   end
  end
end

Hope this can help you, I'll try to make it more autogenerated when I get the chance to avoid put type: :binary or id: false manually. If you have any question feel free to reach me out. Cheers!

How to Architect Rails Project - Part 2

Renzo Diaz — Sun, 08 Dec 2019 21:15:59 +0000

In the previous article, we've done setting up our Surface module
How to Architect Rails Project - Part 1

In this article, we'll cover the following features:

Module Admin
Layouts
Front-End Scaffolding

So, let's kick off...

For our Admin module, we want to get these routes

'domain.com/admins' # Overview, basic reports, charts
'domain.com/admins/blog' # Articles CRUD
'domain.com/admins/work' # Work CRUD

Let's add them to our routes.

# config/routes.rb
Rails.application.routes.draw do
  ...
  namespace :admins do
    resources :blogs
    resources :works
  end
end

Why admins and not admin in singular? Because this module was thought to have multiple user types, users that only can publish articles and won't have permissions to publish works.

Moving on, we need to create the views for our Admin module according to our routes.

Create these files inside app/views folder

app/views
  ├── admins/blogs
  │   └── index.html.erb
  │   └── show.html.erb
  ├── admins/works
  │   └── index.html.erb
  │   └── show.html.erb
  └── layouts 
      └── admin.html.erb

Let's add our markup to admin.html.erb layout, for now, let's copy the content from application.html.erb. Our layout would look like this...

<!DOCTYPE html>
<html>
  <head>
    <title>Portfolio</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <%= render "partials/header" %>
    <%= yield %>
  </body>
</html>

Cool right? We have our Admin layout.

Hold on your horses... We are still using the assets from our Surface module (application), we want to isolate Admin/Surface and make them to not depend on each other, so, let's isolate our Admin assets out of the Surface module.

Create these files under app/assets/stylesheets...

app/assets/stylesheets
  ├── admin/base
  │   └── _base.scss
  │   └── _variables.scss
  ├── admin/components
  │   └── _header.scss
  │   └── _sidebar.scss
  └── admin.scss

So our admin.scss would look like this...

// Base theming
@import "admin/base/variables";
@import "admin/base/base";

// Components
@import "admin/components/header";
@import "admin/components/sidebar";

Next, add this line to our base_controller.rb under controller/admins folder

class Admins::BaseController < ApplicationController
  layout 'admin'
end

We need also to tell rails that we want to use admin.css|admin.js in our initializer, so add the following line to config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( admin.js admin.css )

Now let's change our admin.html.erb layout to use admin.css and remove the current header stylesheet which comes from the Surface module.

<!DOCTYPE html>
<html>
  <head>
    <title>Portfolio</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'admin', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

Well done! now if we run rails s and navigate to http://localhost:3000/admins/blogs we should see a blank page. If we inspect elements in the browser we'll see that our styles are coming from admin and not application anymore.

Alright, Renzo, this is cool but I don't see any component and styles on the page yet. Besides the javascript still comes from the Surface module.

Before deep into the components and styles, let's add an Admin module for our javascript files, this is pretty much the same as what we did with styles.

So, let's create an admin.js file under app/javascript/packs folder and add the following lines...

// app/javascript/packs/admin.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()

Change <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> to <%= javascript_pack_tag 'admin', 'data-turbolinks-track': 'reload' %> in our admin.html.erb layout

<!DOCTYPE html>
<html>
  <head>
    <title>Portfolio</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'admin', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'admin', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

Let's restart our server and see what we got, we should see the same blank page if we navigate to http://localhost:3000/admins/blogs. If we inspect the page we'll see that now our javascript comes from admin.

Now we have our js/css isolated from the Surface module, let's add Bulma to our project and start building our components.

Add Bulma gem to our Gemfile at the bottom

gem "bulma-rails", "~> 0.8.0"

Then run bundle install in the terminal.

In this article we are going to use Bulma in both modules Surface/Admin, just to not make this article too long. Remember that we can also isolate to use Bulma for the Admin and any other framework for our Surface.

Now let's build our layout markup correctly for the Admin module.

<!Doctype html>
<html>
...
  <body>
    <%= render "patials/admin/header" %>
    <div class="columns is-fullheight">
      <div class="column is-2 is-sidebar-menu is-hidden-mobile">
        <%= render "partials/admin/sidebar" %>
      </div>
      <div class="column is-main-content">
        <%= yield %>
      </div>
    </div>
  </body>
</html>

Create a admin folder under app/views/partials add these files...

app/views/partials/admin/_header.html.erb

<nav class="navbar">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      Logo
    </a> 
    <div class="navbar-burger burger" data-target="navMenubd-example">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>

  <div id="navMenubd-example" class="navbar-menu">
    <div class="navbar-start">
    </div>

    <div class="navbar-end">
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          <figure class="avatar image is-32x32">
            <img class="is-rounded" src="https://bulma.io/images/placeholders/32x32.png" alt=""/>
          </figure>
          username
        </a>

        <div class="navbar-dropdown is-right">
          <a class="navbar-item">
            Logout
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>

app/views/partials/admin/_sidebar.html.erb

<aside class="menu">
  <p class="menu-label">
    General
  </p>
  <ul class="menu-list">
    <li><%= link_to 'Overview', admins_blogs_path %></li>
  </ul>
  <p class="menu-label">
    Administration
  </p>
  <ul class="menu-list">
    <li>
      <%= link_to 'My Work', admins_works_path %>
    </li>
    <li><%= link_to 'My Work', admins_blogs_path %></li>
    <li><a>Users</a></li>
  </ul>
</aside>

Add some styles

app/assets/stylesheets/admin/base/_variables.scss

$body-size: 16px !default;

// Responsiveness
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
$tablet: 769px !default;
// 960px container + 40px;
$desktop: 1000px !default;
// 1152px container + 40;
$widescreen: 1192px !default;
// 1344px container + 40;
$fullhd: 1384px !default;

$white: #fff !default;
$orange: hsl(17, 83%, 57%);
$primary: $orange !default;
$primary-invert: $white !default;

// Link colors
$link: $primary !default;
$link-invert: $white !default;
$navbar-height: 3.25rem;

app/assets/stylesheets/admin/base/_base.scss

body {
    overflow-x: hidden;
}
.columns {
    &.is-fullheight {
        min-height: calc(100vh - ( #{$navbar-height} - .75rem ) );
        max-height: calc(100vh - ( #{$navbar-height} - .75rem ) );
        height: calc(100vh - ( #{$navbar-height} - .75rem ) );
        display: flex;
        flex-direction: row;
        justify-content: stretch;

        .column {
            overflow-y: auto;
        }
    }
}    
.is-main-content {
    background: $grey-lighter;
    padding: 1rem  2.5rem 1rem 2rem;
}

app/assets/stylesheets/admin/components/_sidebar.scss

.is-sidebar-menu {
    padding: 2.5rem;
    background: $grey-dark;
    li {
        a {
            color: $white;
        }
    }
}

app/assets/stylesheets/admin/components/_header.scss

.navbar {
    .navbar-item {
        .avatar {
            margin-right: .65rem;
            .is-rounded {
                max-height: 100%;
            }
        }
    }
}

Alright, if we restart our browser at this point and navigate to http://localhost:3000/admins/blogs our dashboard should look like this.

If you got any error through this setup, feel free to drop me a line dev.renzo.diaz@gmail.com I’ll try to answer all your doubts asap.

In part 1 of this article, I mentioned this part 2 will cover CRUDS and Authentication, and React as well.

We'll, we will cover those points in part3, I don't want to make this article too long and don't mix with Rails back-end stuff.

How to Architect Rails Project - Part 1

Renzo Diaz — Wed, 04 Dec 2019 16:31:57 +0000

When I started to build web applications with ruby on rails, I had a lot of questions that I figured out through the years of using the framework. Now in this article, I’m going to share the base structure to start building a web application.

Depending on the requirements our structure could slightly change, in this scenario, I’m going to build a simple portfolio app with a blog of articles.

Before start building our project, let’s imagine two layers one to administrate the site and the other for public access (front pages). Here is how it should look.

Admin (Dashboard):
Only admin users have access and permissions to post articles, add portfolio jobs, see reports, etc.
There are many ways to build modules, for example using ActiveAdmin gem we can crate the admin module, another way is creating engines, but we are going to set up our dashboard module from scratch.

Surface (front pages):
In this module, we’ll put all the public pages like home, about, portfolio, blog, and contact.
Once we have clear this concept, let’s kick-off creating or project…

rails new portfolio -d postgresql -T

-T = skip testing modules. We’ll focus on test and design in other article

Move under the Portfolio directory and run the following commands to create the database and migrations…

rails db:create
rails db:migrate

Until here, we have a clean project with no custom pages or modules. So, let’s start creating our project architecture.
First, under controllers create 2 folders called (admins, surface). Our tree would look like this.

app/controllers
  ├── admins
  └── surface
  └── application_controller.rb

Create these controllers under admins and surface folders base_controller.rb, blogs_controller.rb, works_controller.rb and pages_controller.rb

app/controllers
  ├── admins # Portfolio blog and work management
  │   └── base_controller.rb
  |   └── blogs_controller.rb
  |   └── works_controller.rb
  └── surface # Public pages
  │   └── pages_controller.rb
  └── application.rb

Let’s add some code to our admin controllers…

# admins/base_controller.rb
class Admins::BaseController < ApplicationController
  # Define what users can access to this module
  # Define what view layout to use 
end

#admins/works_controller.rb
# here we are extending from our Admins::BaseControler
class Admins::WorksController < Admins::BaseController
end

# admins/blogs_controllers
# Inherits from Admins::BaseController
class Admins::BlogsController < Admins::BaseController
end

Let’s add some code to our surface controller…

# surface/pages_controller.rb
class Surface::PagesController < ApplicationController
  #define our pages
  def home
  end

  def about
  end
  def work
  end

  def blog
  end

  def contact
  end
end

Next, we are going to add some routes to our app un config/routes.rb.

Rails.application.draw do
  # Define our root page
  root to: 'surface/pages#home'

  # Frontend pages

  # scope module 'surface' to get this format url `domain.com/about, domain.com/work...` 
  # and not `domain.com/surface/about...`
  scope module: 'surface' do
    get '/about', to: 'pages#about', as: 'surface_about'
    get '/work', to: 'pages#work', as: 'surface_work'
    get '/blog', to: 'pages#blog', as: 'surface_blog'
    get '/contact', to: 'pages#contact', as: 'surface_contact'
  end
end

These routes also can be isolated in files, we’ll isolate these routes in the next article.

Now, we should create our views according to our modules, let’s focus first in our Surface module, so let’s create the following folders and views.

app/views
  ├── surface/pages # Write in each file <h1>Page Name</h1> 
  │   └── home.html.erb     # I.e <h1>Home</h1>
  │   └── about.html.erb    # I.e <h1>About</h1>
  |   └── work.html.erb     # I.e <h1>Work</h1>
  |   └── blog.html.erb     # I.e <h1>Blog</h1>
  |   └── contact.html.erb  # I.e <h1>Contact</h1>
  └── partials   
  │   └── _header.html.erb
  |   └── _footer.html.erb
  └── layouts 
  |   └── application.html.erb

Now let’s edit application.html.erb under the layout folder and add the header and footer partials.

Partials are the components that will be used across the site.

Let’s add some Html links to our _header.html.erb under the partials folder...

<header>
  <h1>Logo</h1>
  <nav>
    <ul>
      <li><%= link_to 'Home', root_path %></li>
      <li><%= link_to 'About', surface_about_path %></li>
      <li><%= link_to 'Work', surface_work_path %></li>
      <li><%= link_to 'Blog', surface_blog_path %></li>
      <li><%= link_to 'Contact', surface_contact_path %></li>
    </ul>
  </nav>
</header>

Next, add the header partial to our layout applicaton.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Portfolio</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <%= render "partials/header" %>
    <%= yield %>
  </body>
</html>

Alright! we have our surface module working perfectly 💯 if you go tho http://localhost:3000 you will be able to navigate between the pages.

If you got any error through this setup, feel free to drop me a line dev.renzo.diaz@gmail.com I’ll try to answer all your doubts asap.

In the next Part 2, will cover the admin module, authentication users, dashboard layout, CRUDS, and some of the front-end stuff.