David Morales

Sign in

Ruby on Rails & Tailwind CSS

I’m going to show you how to create a project with Rails 6.1 and its default Webpacker version (4.5), and configure Tailwind CSS with its dependencies and JIT mode enabled.

You’ll end up with a project that compiles the final CSS automatically, and refreshes the browser for you as well, after every change.

Create a Rails application:

Install the Tailwind CSS dependencies. Open the terminal and run:

Create the file app/javascript/stylesheets/application.scss (you will have to create the stylesheets directory).

Now open application.scss and add the Tailwind CSS directives:

Frontend vs Backend

Frontend and backend are two different specializations in web development. In the 2000s, a frontend developer was the same person who designed the site, while the rest were backend developers.

Now in a medium or big company there are many more roles involved. But in small companies (also called start-ups), it is normal to have two types of developer: one for the frontend and one for the backend.


The frontend developer is not a designer. This is a misconception. The designer is the professional who draws the design on paper or uses an application like Photoshop. …

Gear wheels

You are developing a Ruby application where the user can sign up, and after submitting the form, the user has to receive an email. Will you send it immediately? If so, the user will have to wait while the application connects to the email server and sends the actual email. That’s bad for the user experience.

To solve that problem, the email should be sent in the background. That way it could be enqueued to be sent later, and the user sees the confirmation page quickly. Much better!

This is accomplished by a queue system, which runs in the background…

The Amazon Simple Email Service is a cloud service inside AWS (Amazon Web Services) to send and receive email. I have used it to send emails, and it worked flawlessly. It has a reasonable maximum sending quota, and it’s pretty fast for a modest web application.

It has serious competitors, especially the service from MailChimp: Mandrill. But since they switched it to an add-on for MailChimp premium users, Amazon SES is, in my opinion, the first choice for small and medium web applications.

Initially, all users are placed in the Amazon SES sandbox (a test environment) to ensure the quality…

Pile of books

A web stack is like a pile of books.

  • The top element is the application with which the user can interact, while the bottom element is the base: the operating system.
  • The other elements in between are the technology necessary for both the application and the operating system to communicate with each other.

They all form a team with a common goal: to provide everything the application may need to work.

The first popular web stack was the PHP stack: LAMP. Each letter refers to an item in the stack:

  • L for Linux, the operating system.
  • A for Apache, the…

Database server

A website can be static or dynamic. For any web application with a minimum of complexity a database management system (abbreviated as DBMS) is required.

It’s important to note that I will talk about public web applications such as e-commerce sites, social networks, classified ad sites, blogs, and so on (the kind of projects I have worked on, talking from my experience). I will not talk about intranets or extranets, which are closed environments that do not take into consideration the same speed and security concerns that a public site must manage.

In my opinion (and what I have seen…

Redis logo

Redis is an in-memory data structure store used to help building high-performance and scalable web applications, similar to Memcached, but with these main differences:

  • Redis can persist data to disk, making it a kind of NoSQL database, so data won’t disappear when restarting the server. This feature can be optionally disabled.
  • Redis can store more data types besides strings, such as Hashes, Lists, Sets and Sorted Sets. I will talk about them later.

The persistence feature is interesting, but some applications may be affected if there is some power failure and Redis didn’t have time to persist the latest data…

iMac with an external monitor

When I learnt C in 1995 I used a DOS editor by Borland. Since graphical environments became popular and more used, programming editors were also evolving.

Nowadays we have two different kind of editors: text editors and IDEs. The first ones are lightweight, while the second kind focus on providing as many tools as possible to unify everything we would need.

In order to develop for the major operating systems, brands usually provide an official IDE. For instance, if you want to develop iOS or macOS applications you should use Xcode from Apple. If you want to develop for Android

Memcached is a free and open-source high-performance memory caching system. It’s typically used to cache database data, API calls or page rendering chunks in RAM to increase the application performance.

It can store data as little as a number, or as big as a finished HTML page.

The system is designed to be accessed through TCP so it can work in a separate server, and can also be distributed among several servers, summing up a big hash table to store data.

When running out of space, the older data is overwritten. So it must be treated as a transitory (not-persisted)…

Gear wheels

When facing frontend development, we start with the browser and its available features supported by CSS and JavaScript. But with backend development the field is much bigger.

First, we will need to think about the language, because that will determine the operating system to install in the server. For example, choosing ASP.NET will make Windows Server mandatory, although there are alternatives like Mono that would let us work with Linux, but it’s not as complete as Windows libraries.
Any other language will let us work with Linux or Windows, although Linux is preferred because of its good packaging system.


David Morales

Computer engineer. Working as a web developer since 2000.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store