DEV Community: Marc

How my blog got almost perfect lighthouse results

Marc — Sun, 06 Jun 2021 11:59:23 +0000

Lighthouse is an open source tool that is integrated in the chrome browser per default. If you open up your developer tools (F12) you will see a tab “Lighthouse” which lets you generate a report for the current page you are on.

Performance

My Blog has a performance rating of 99 which is not easy to reach. Lets compare that to the “simpleprogrammer” blog which has a 77 percent performance rating in lighthouse.

The performance rating is calculated by a few factors like “First Contentful Paint”, “Largest Contentful Paint”, “Time to Interactive” and so on. Most of these indicators depend on the amount of files your site loads for example Images, JavaScript files, CSS files and so on. The less the better. Then it also depends on how big these files are. If you have megabytes of data that need to be loaded in order for your page to render, that will decrease the performance heavily.

As you can see, my blog only makes 11 requests and only transfers 80 kilobytes of data for a blog post to load. (Unless the blog post includes images obviously)

Compare that to the 71 requests and 887 kilobytes of data transferred in order to load the “simpleprogrammer blog”.

You can read more about the performance scoring on the official documentation if you are interested.

Best practices

There are many best practice checks in lighthouse which you can see once you generate a report. One of them is serving your page via HTTPS. My blog is built with Rails and uses the Puma web server which then gets served via NGINX. I use LetsEncrypt for free SSL certificates. As you can see, a SSL Labs test gives my blog an “A” rating.

This test checks if your site implements SSL correctly and makes sure that your webserver doesn’t use weak or outdated standards.

Long story short

Long story short, my blog is a custom built rails application that has almost no bloat in it unlike many wordpress blogs. I use plain JavaScript and very little of that. I use Tailwind CSS 2.0 with the purge function which reduces the CSS bundle to only 16.8 kilobytes.

One thing I might need to improve in the future depending on if someone reads my posts and if they life far away from the location of the server hosting my blog is implementing a CDN like Amazon’s Cloudfront.

A nice default button CSS animation

Marc — Fri, 04 Jun 2021 13:45:40 +0000

Whenever I create a new project and I want to keep it lightweight without adding any component libraries and so on, I just fiddle together some styles for a button but I rarely take the time to make it look really nice and responsive.

So I spent 15 minutes in creating a button style which looks nice in my opinion. If you like it too, feel free to use it in your project! This is how it looks like:

<style>
  button {
    background-color: rgb(37, 99, 235);
    font-weight: bold;
    color: white;
    padding: 10px 16px;
    font-size: 1rem;
    border-radius: .5rem;
    transition: all .15s cubic-bezier(0.4,0,0.2,1);
    border: none;
    cursor: pointer;
  }

  button:hover {
    background-color: rgb(29,78,216);
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }

  button:active {
    position: relative;
    top: 1px;
    right: 1px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  }
</style>

<div style="margin: 6rem;">
  <button>Click me</button>
</div>

First some general rules, deep blue background, white bold font, padding, rounded corners, no border and pointer cursor.

Next a hover effect which makes the background color a little darker and adds a box shadow which makes it look like the button elevates up a little bit.

Lastly an active state that does two things in order to make it look like you actually press that button down:

It changes the position slightly towards the bottom left
It reduces the box shadow we set earlier in the hover effect

That way it looks like it is less elevated i.e. pressed down.

How to add a RSS feed to a rails blog

Marc — Thu, 03 Jun 2021 12:32:22 +0000

RSS Feeds are publicly accessible URLs of websites that can be consumed by other software in order to utilize the content of a site. If you write posts on your own blog like I do and then want to crosspost your posts to other sites like dev.to, a RSS feed might be helpful in doing so.

The RSS feed of my blog is available at /feed. It gets generated dynamically so it always includes my latest posts.

How to add a RSS feed with Rails

The way I implemented this RSS feed is very similar to the way I implemented my Sitemap.xml first lets add a route to our config/routes.rb file:

get 'feed', to: 'home#feed', format: 'xml', as: :feed

As you can see, it expects to find a controller home with an action feed, so either create this controller too yourself or point to a different one in your application. The action itself is empty:

class HomeController < ApplicationController
  def feed
  end
end

The last thing we need is the view file views/home/feed.xml.builder which generates the xml code. It iterates through published posts, paginates them and then renders XML for each of them.

xml.instruct! :xml, version: "1.0"
xml.rss :version => "2.0" do
  xml.channel do
    xml.title "WebDevChallenges"
    xml.description "A blog about the lessons learned as a Web Developer"
    xml.link root_url

    Post.published.order('created_at DESC').page(1).each do |post|
      xml.item do
        xml.title post.title
        xml.description post.html_content
        xml.pubDate post.created_at.to_s(:rfc822)
        xml.link show_post_url(post.slug)
        xml.guid show_post_url(post.slug)
      end
    end
  end
end

As mentioned earlier, some sites like dev.to offer the possibility to enter your own RSS feed which then gets fetched regularly. If it detects a new post, it will land in your dashboard as a draft which you then can use to easily release your post there aswell which is exactly what I do.

Important to note here is that posting your content on multiple platforms might be negative in terms of SEO if google cannot find out which of the websites is the original creator of the content. dev.to offers you the option to set a canonical URL so it won’t affect your SEO negatively. The canonical URL gets set automatically if import your posts via RSS.

Hope that helped :)

How to add a dynamically generated sitemap with rails

Marc — Tue, 01 Jun 2021 21:13:18 +0000

The sitemap.xml file on my blog is generated dynamically because I want it to include my latest posts in it.

The way I did that is that in a controller (in my case the HomeController) I added an action which is empty:

class HomeController < ApplicationController
  def sitemap
  end
end

The config/routes.rb file defines route route and explicitly sets the format:

get 'sitemap.xml', to: 'home#sitemap', format: 'xml', as: :sitemap

The app/views/home/sitemap.xml.builder file then defines some static routes and also defines routes depending on database entries like posts.
These routes simply render the urls of static pages and dynamic ones (posts). Note how you can use the .xmlschema method on date objects which returns the correct format for sitemaps.
Also we are using the .find_each method because if we have a massive amount of posts later, loading them to memory with .each
might result in problems later.

xml.instruct! :xml, :version=>"1.0"
xml.tag! 'urlset', 'xmlns' => 'http://www.sitemaps.org/schemas/sitemap/0.9', 'xmlns:image' => 'http://www.google.com/schemas/sitemap-image/1.1', 'xmlns:video' => 'http://www.google.com/schemas/sitemap-video/1.1' do
  xml.url do
    xml.loc root_url
  end
  xml.url do
    xml.loc imprint_and_privacy_policy_url
  end
  xml.url do
    xml.loc impressum_und_datenschutzerklaerung_url
  end

  Post.published.find_each do |post|
    xml.url do
      xml.loc show_post_url(post.slug)
      xml.lastmod post.updated_at.xmlschema
    end
  end
end

Make sure your robots.txt file then points to that sitemap like this for search engines to find that file correctly.

Sitemap: https://webdevchallenges.com/sitemap.xml

How to Deploy a Rails 6 Application with Capistrano, Nginx, Puma, Postgresql, LetsEncrypt on Ubuntu 20.04

Marc — Mon, 31 May 2021 10:14:11 +0000

What are we going to do

So whenever I start a new project and want to deploy it to production, I need to research from scratch how to setup a Ubuntu Server including Firewall, how to setup Capistrano, get NGINX to work with Puma etc. That’s why I summarize everything I do to get a Project deployed.

Create the Rails project

Make sure you have postgresql installed and running locally.

rails -v
# Rails 6.1.3.2
rails new mysite --database=postgresql
rake db:setup
rails db:migrate
rails s

Now you should be able to visit http://localhost:3000 in your browser.

Server Setup

First of all, purchase a Ubuntu 20.04 Server from your favorite host. I always use Hetzner for my Projects. Their servers start at 2,96€ per Month for 1vCPU, 2GB of RAM and a 20GB local SSD.You can use my referral link if you want to check it out too.

SSH Config

I always make sure to select my public key when I create the server so that one is already entered in the ~/.ssh/authorized_keysfile for the root user.

If you provide an SSH key, Hetzner will automatically disable Password authentication which provides an extra layer of security.

Make sure your /etc/ssh/sshd_config file does not allow password authentication (#PasswordAuthentication yes see the hash at the start of the line).

If you would need to change that, make sure to restart the ssh daemon afterwards (systemctl restart sshd).

Set the A record

Once you purchased your server, you will receive a IPv4 Address. When you already purchased a domain for your project, make sure to point the A Record of that domain to your newly purchased Server’s IPv4 Address. I always do that before setting up my server because that might take a few minutes to propagate through the DNS Servers.

This A record needs to be fully propagated once we try to aquire LetsEncrypt certificates later on.

Update packages

Run

apt-get update

to update your packages.

Firewall setup

Install ufw (uncomplicated firewall) and allow ssh, http and https.

apt-get install ufw
ufw status
ufw allow ssh
ufw allow http
ufw allow https
ufw enable
ufw status

Create the rails user

Let’s create a new user called rails just for running the application.

adduser rails

This will create an interactive input for creating the user, set a password and just confirm the rest (ENTER).

We want to be able to ssh into our rails user. Lets copy our ~/.ssh/authorized_keys file from the root user.

mkdir -p /home/rails/.ssh
cp ~/.ssh/authorized_keys /home/rails/.ssh
chown -R rails:rails /home/rails/.ssh/

This user needs to be a sudo user in order to restart the puma systemctl service we are going to create later on.

usermod -aG sudo rails
vi /etc/sudoers
# add the following line at the bottom
# rails ALL=(ALL) NOPASSWD: ALL

You should be able to ssh into your server with the rails user now.

ssh rails@mysite.com

Install postgres

apt-get install postgresql postgresql-contrib libpq-dev
su postgres
cd
createdb mysite_production
psql
create user rails with password 'mypassword';
grant all privileges on database mysite_production to rails;
exit # exit psql shell
exit # back to root user

Install more dependencies

Next we need to install more dependencies

Node
Yarn
RVM
NGINX

Node & Yarn

# see https://github.com/nodesource/distributions/blob/master/README.md
curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
apt-get install -y nodejs
node -v
npm install --global yarn
yarn -v

RVM

su rails
cd
# see https://rvm.io/rvm/install
gpg --keyserver hkp://pool.sks-keyservers.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB
curl -sSL https://get.rvm.io | bash -s stable --ruby

Check on your local machine which ruby version is used in your project (3.0.1 for me)

cd mysite
cat Gemfile | grep ruby

Then install that same version on the server using RVM.

# as root
/home/rails/.rvm/bin/rvm install ruby-3.0.1
su rails
cd
source ~/.rvm/scripts/rvm
rvm use ruby-3.0.1
rvm use --default ruby-3.0.1
rvm -v
ruby -v

Install nginx

apt-get install nginx
systemctl start nginx
systemctl enable nginx

Install nginx

apt-get install git

Install capistrano

Add the following gems to your group :development do block inside the Gemfile.

gem 'capistrano', require: false
gem 'capistrano-rvm', require: false
gem 'capistrano-rails', require: false
gem 'capistrano-bundler', require: false
gem 'capistrano3-puma', require: false

Install the gems and install cap.

bundle install
cap install

Add the following to your Capfile

...
require "capistrano/rails"
require "capistrano/bundler"
require "capistrano/rvm"
require 'capistrano/puma'
install_plugin Capistrano::Puma
install_plugin Capistrano::Puma::Systemd
...

Adjust your config/deploy.rb file to look like this

lock "~> 3.16.0"

# replace obvious parts
server 'mysite.com', port: 22, roles: [:web, :app, :db], primary: true
set :application, "mysite"
set :repo_url, "git@github.com:me/mysite.git"

set :user, 'rails'
set :puma_threads, [4, 16]
set :puma_workers, 0

set :pty, true
set :use_sudo, false
set :stage, :production
set :deploy_via, :remote_cache
set :deploy_to, "/home/#{fetch(:user)}/apps/#{fetch(:application)}"
set :puma_bind, "unix://#{shared_path}/tmp/sockets/#{fetch(:application)}-puma.sock"
set :puma_state, "#{shared_path}/tmp/pids/puma.state"
set :puma_pid, "#{shared_path}/tmp/pids/puma.pid"
set :puma_access_log, "#{release_path}/log/puma.access.log"
set :puma_error_log, "#{release_path}/log/puma.error.log"
set :ssh_options, { forward_agent: true, user: fetch(:user), keys: %w(~/.ssh/id_rsa.pub) }
set :puma_preload_app, true
set :puma_worker_timeout, nil
set :puma_init_active_record, true # Change to false when not using ActiveRecord

append :linked_files, "config/master.key"
append :linked_dirs, "log", "tmp/pids", "tmp/cache", "public/uploads"

Commit and push your changes.

Copy your master.key to the shared dir.

ssh rails@mysite.com
mkdir -p apps/mysite/shared/config
# back on your machine
cd mysite
scp config/master.key rails@mysite.com:apps/mysite/shared/config

Adjust your config/database.yml file.

production:
  <<: *default
  database: mysite_production
  host: localhost
  username: rails
  password: mypassword

Test a production deploy

cap production deploy

If you are on mac os, you might encounter this error.

Your bundle only supports platforms ["x86_64-darwin-19"] but your local platform is x86_64-linux. Add the current platform to the lockfile with 'bundle lock --add-platform x86_64-linux' and try again.

In that case just run

bundle lock --add-platform x86_64-linux
# commit & push

Puma systemd service

The deploy should fail in the end with the message Failed to restart puma_mysite_production.service: Unit puma_mysite_production.service not found.

So let’s create this service.

vi /etc/systemd/system/puma_mysite_production.service

Enter the following

[Unit]
Description=Puma HTTP Server for mysite (production)
After=network.target

[Service]
Type=simple
User=rails
WorkingDirectory=/home/rails/apps/mysite/current
ExecStart=/home/rails/.rvm/bin/rvm default do bundle exec puma -C /home/rails/apps/mysite/shared/puma.rb
ExecReload=/bin/kill -TSTP $MAINPID
StandardOutput=append:/home/rails/apps/mysite/current/log/puma.access.log
StandardError=append:/home/rails/apps/mysite/current/log/puma.error.log
Restart=always
RestartSec=1
SyslogIdentifier=puma

[Install]
WantedBy=multi-user.target

Create the directory for the puma sockets to live in:

mkdir apps/mysite/shared/tmp/sockets

You should be able to run the service now.

systemctl start puma_mysite_production.service
systemctl enable puma_mysite_production.service
systemctl status puma_mysite_production.service

Try to deploy again, this time it should work fine.

cap production deploy

NGINX Setup

We need a webserver to proxy httpp and httpps requests to puma. NGINX does this nicely.

vi /etc/nginx/sites-enabled/mysite

Add the following

upstream puma {
  server unix:///home/rails/apps/mysite/shared/tmp/sockets/mysite-puma.sock;
}

server {
  server_name mysite.com;

  root /home/rails/apps/mysite/current/public;
  access_log /home/rails/apps/mysite/current/log/nginx.access.log;
  error_log /home/rails/apps/mysite/current/log/nginx.error.log info;

  location ^~ /assets/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
  }

  try_files $uri/index.html $uri @puma;
  location @puma {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-Ssl on; # Optional
    proxy_set_header X-Forwarded-Port $server_port;
    proxy_set_header X-Forwarded-Host $host;

    proxy_redirect off;

    proxy_pass http://puma;
  }

  error_page 500 502 503 504 /500.html;
  client_max_body_size 100M;
  keepalive_timeout 10;
}

Check if the config is valid & restart nginx.

nginx -t
systemctl restart nginx

In case you get a permissions error, running the following should fix that:

sudo chown rails:rails -R apps/mysite/

Adding LetsEncrypt

You should be able to access your page now via http.

You need SSL Certificates in order to run your site via https. LetsEncrypt is free and easy to setup with nginx.

apt-get install certbot python3-certbot-nginx
certbot --nginx

Follow the interactive installer, I always choose redirect in the end and you should probably too. Refresh your page, you should be redirect to https now.

Debugging

Errors can occurr in a few places here are a few hints:

# check if nginx is running
systemctl status nginx
journalctl -u nginx

# check if puma is running
systemctl status puma_mysite_production.service
journalctl -u puma_mysite_production.service

# application logs
tail -f apps/mysite/current/log/*

Hope you find it useful. Have a nice day ;)

Add Tailwind 2 to Rails 6.1

Marc — Sun, 30 May 2021 14:40:13 +0000

Originally posted on my blog: https://webdevchallenges.com/add-tailwind-to-rails

How to add Tailwind to Rails 6.1

New Rails Project

rails new myproject
cd myproject

Install dependencies

yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@7 autoprefixer@9

Generate tailwind config

npx tailwindcss init --full

Add purge paths to the newly generated file (tailwind.config.js) to reduce the css file dramatically.

purge: [
  "./app/**/*.html.erb",
  "./app/helpers/**/*.rb",
  "./app/javascript/**/*.js",
  "./app/javascript/**/*.vue",
],

Create a scss file for the application

mkdir app/javascript/stylesheets
touch app/javascript/stylesheets/application.scss

Import some basic tailwind stuff in there

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Import that file in app/javascript/packs/application.js

import "stylesheets/application";

Require tailwindcss in postcss

Add the following require to the postcss.config.js file

require('tailwindcss'),

Import the tailwind stylesheet pack

Import the stylesheet_pack_tag in your layouts (app/views/layouts/application.html.erb)

<%= stylesheet_pack_tag 'application', media: 'all' %>

Try it out

Uun the rails server in one terminal

rails s

And the webpack dev server in another one

./bin/webpack-dev-server