DEV Community: Nards Paragas

On Ruby on Rails: My love–hate relationship with a mature framework.

Nards Paragas — Mon, 26 Apr 2021 05:44:35 +0000

One's personal opinions and encounters as an "immigrant" in a foreign domain.

Rails is not as prominent as it was in its glory days. Especially here in the Philippines, after doing a quick research out of curiosity and browsing through PHRUG's Facebook Group (Philippines - Ruby Users Group), it seems like everybody's sunsetting Ruby as their first choice for web development or just uses it for happy path apps and MVPs then leaves it off for something more "scalable".

And, as someone who came in late to the party (2019), I felt so alienated and it was a scary thing to feel when you're in the fast moving world of tech. While there's a lot of fresh hotness coming out almost everyday, I'm now stuck learning an old not-talk-of-the-town programming language which could define my career in the coming years.

When I first touched Rails, I wasn't amazed or even surprised because out of all of the things it offers, Laravel has already shown me or did better. That said, I couldn't shake the constant resistance I'm having while writing code in this framework. I was even annoyed by the idea of autoloading since I was used to importing classes and packages explicitly. Maybe it was also one of the main reasons why I had a hard time transitioning from PHP to Ruby, I just can't stop comparing the two. Rubyists might call me out for this but if you came from PHP and Laravel like me, you won't be able to deny that Taylor Otwell and his community of contributors move fast. They release new and amazing features or even products related to Laravel almost every quarter per year. Although there's this stigma against PHP that people can't seem to forget, their team's persistence is paying off.

BUT, I never felt like I'm composing a song with any other language than Ruby. It lives up to its label, it really is elegant. It has all the right recipes to please a developer. I've written in one of the most hated languages (PHP) and I learned that it's not that bad and now I met Ruby which is just outright beautiful to the eyes at first take. Yes, it does have some quirks but we all know by now that not everything, even in tech, is perfect. It's just that, to me, Ruby is the closest thing to perfection for developer experience. Then you wrap it around an easy to grasp structure that is Rails and voilà! — Now you have a solid and reliable tool at your disposal.

And so, I dug deeper, looked for resources similar to phptherightway or videos like Christoph Rumpel's Laravel Core Adventures which helped me understand how a backend web framework works under the hood. Of course I'm aware that I'm going to have some sort of a hard time looking for resources for something old and mature but I insisted because I thought that if I'm going to learn Rails then I don't want to wing it but do it lovingly.

At first, I found books and video tutorials but they're badly outdated so I continued my search. Then, I learned about none other than the creator of Rails himself, DHH. Which resulted to me falling into a rabbit hole of Basecamp wonderland. One short read lead to another, next thing I know I found myself watching DHH's On Writing Software Well which inspired me to look for more fun stuff. Another series of Google searches happened and suddenly I found myself having fun watching Sandi Metz talk, checking out 99 bottles, visiting refactoring.guru, getting to know about the gang of four and restarting my Ruby journey with poignant.guide.

I'm still finding new stuff but I'm focusing on them one at a time. Now, this made me realize that I might've just fallen in love really. Maybe people left Rails because of its magic and simplicity but few might've remained because it's just comfortable to work with. With all that, here I am, starting again; doing a Ruby refresher and building small web apps using Rails. Treading unknown waters but with enough courage to do so.

Setup a Fresh Rails Project with asdf

Nards Paragas — Sun, 18 Apr 2021 07:48:13 +0000

Right now, almost half of my career was spent writing PHP code in Laravel. It was my first encounter with the MVC world, I fell in love immediately and it was easy to build products with it. The joy of putting up a quick project within minutes by the use of artisan commands and rapid scaffolding generation was definitely hard to reject as a developer. Then, I met Ruby and the mature yet reliable Rails. I discovered that the Build a blog in 15 minutes wasn't a well-known thing until DHH demonstrated how possible it is using a newly introduced web framework back in 2005. In this post, I'm going to share how a developer can spin up a fresh Ruby on Rails project with asdf in 2021.

In this setup guide, I'm working with a WSL2 + Ubuntu 20.04 environment so it might be different to yours. If you're on a UNIX-based system, that shouldn't stop you from following through. In addition, you might want to swap out that SQLite with a fresh PostgreSQL install (I'm not going to teach this now but you can search for a bunch of articles online that will help you out depending on your machine). Now, let's get started!

Let's install asdf on our machine. We need git as it is a dependency before you can get asdf so make sure you have that as well. Also, asdf has a pretty straightforward documentation so definitely check it out if you can.

First, let's clone the latest branch:

  git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.8.0

Then let's add it to our shell.

If you're on Bash or ZSH, add the following to your ~/.bashrc or ~/.zshrc:

  . $HOME/.asdf/asdf.sh

If you're a Fish user, add this to your ~/.config/fish/config.fish instead:

  source ~/.asdf/asdf.fish

We have to do some manual configuration of our settings for the completion feature. For Bash, add the following on your ~/.bashrc:

  . $HOME/.asdf/completions/asdf.bash

On ZSH, add these to your ~/.zshrc:

  # append completions to fpath
  fpath=(${ASDF_DIR}/completions $fpath)
  # initialise completions with ZSH's compinit
  autoload -Uz compinit
  compinit

For Fish, run the following command on your console:

  mkdir -p ~/.config/fish/completions; and ln -s ~/.asdf/completions/asdf.fish ~/.config/fish/completions

Done! That should be enough to get asdf installed on your machine. If you're having issues, check this.

Now let's go to the next step which is to install the necessary plugins to create our Rails project.

Of course, there's no Rails without Ruby so let's start with that first. In asdf, they call packages as plugins. So whenever I mention the term plugin in this section, I mean packages. 😉

Let's add our first asdf plugin via the add command:

  asdf plugin add ruby

Then let's install the latest version of Ruby via install:

  asdf install ruby latest

Afterwards, let's set our machine's global Ruby version via:

  asdf global ruby <version>
  # asdf global ruby 2.7.1

To check installed versions, just run:

  asdf list ruby

Now that we have Ruby, we also need to take care of the front-end side of things since Rails also uses webpacker so let's install both nodejs and yarn to manage our packages.

  asdf plugin add nodejs && asdf plugin add yarn

Then, proceed to add versions like how we installed Ruby earlier.

  asdf install nodejs latest && asdf install yarn latest

To check if we successfully installed the plugins, use the general command:

  asdf list

Nice, we're ready to install Rails now so let's do just that:

  gem install rails

Then let's proceed and create our new project with PostgreSQL as our database:

  rails new project-name -d postgresql

There we go! Now we have a new Rails project using asdf with PostgreSQL as the substitute database to SQLite. To test the local server, just run this within the project folder:

  rails server
  # or rails s

This should spin up your local server and now you'll be able to check your fresh Rails app on the browser via http://localhost:3000/.

That's it for this setup guide, I hope this is useful to you as it is to me. If you need additional assistance, ping me at nardparagas@gmail.com or on Twitter via @nards_paragas. I'd be happy to help out. Thanks for reading this guide!

Further Notes:

If the project shows an error on the browser saying that you're failing to connect to the database port, don't forget to start PostgreSQL via:

  sudo service postgresql start

Then if the project displays an error telling you that project-name_development database doesn't exist then run the following on your console with the project being the root:

  bundle install
  # To ensure that all required dependencies are already installed

  rails db:create
  rails db:migrate
  # To create a new local database named after your project with the _development and _test name extensions

  rails server
  # Or rails s to run your local server

This guide was originally posted on my personal blog — https://blog.nardsparagas.com/

Setup create-react-app with Tailwind CSS

Nards Paragas — Sun, 07 Apr 2019 13:32:01 +0000

Recently, I've been having fun with writing front-end code using utility-first CSS frameworks instead of full-blown toolkit ones like Bootstrap and Bulma. It helps me build and customize my page components immediately without having to write my own CSS from scratch. After seeing the attention that Tailwind CSS is getting from different communities and platforms, I decided to try it in one of my personal projects. It made styling pages more fun because it's so easy to use and the documentation is really intuitive.

Since it's component-friendly, I tried using it on my following project with create-react-app to learn how well it fits with Single-Page Applications. 😎

And now, I will help you setup your own create-react-app project with Tailwind CSS. Let's get started!

First, let's create a new ReactJS project with create-react-app.

npx create-react-app your-app-name

Next, we can easily install the Tailwind CSS module afterwards on our fresh create-react-app project without having to touch the actual scaffolding. Just run the following command on npm:

npm install tailwindcss --save-dev

After installing Tailwind CSS, we'll have to generate our configuration file which is in javascript format that is accessible and easy to get used to by using this command:

npx tailwind init tailwind.js

You can use any filename that you like but naming it tailwind.js as default is a recommendation from the documentation which is usually nice to follow.

Then, as what the documentation suggests, we'll add Tailwind as a PostCSS plugin in our build chain. Install these peer dependencies via:

npm install postcss-cli autoprefixer --save-dev

Afterwards, we'll have to create a postcss.config.js file where we'll add Tailwind as a plugin by passing the path within.

var tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    tailwindcss('./path/to/your/tailwind.js'),
    require('autoprefixer'),
  ]
}

Your tailwind.js and postcss.config.js configuration files can be included in any part of your directory but right now, I just put it within the root level of my project.

Next, we'll have to create an entry point so we'll be able to use Tailwind in our CSS. In this case, I always use the recommendation from the docs.

Just copy and paste the code below within a new file named tailwind.css located in your project's /src directory or another custom folder within to separate your static and custom styles from generated ones. In my case, I created a custom /styles directory:

/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/base";
 */
@tailwind base;

/**
 * This injects any component classes registered by plugins.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/components";
 */
@tailwind components;

/**
 * Here you would add any of your custom component classes; stuff that you'd
 * want loaded *before* the utilities so that the utilities could still
 * override them.
 *
 * Example:
 *
 * .btn { ... }
 * .form-input { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "components/buttons";
 * @import "components/forms";
 */

/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/utilities";
 */
@tailwind utilities;

/**
 * Here you would add any custom utilities you need that don't come out of the
 * box with Tailwind.
 *
 * Example :
 *
 * .bg-pattern-graph-paper { ... }
 * .skew-45 { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "utilities/background-patterns";
 * @import "utilities/skew-transforms";
 */

After pasting this code and saving the file, we'll now install npm-run-all as our tooling to run our npm scripts in parallel or sequential order. This is not an actual requirement but I highly recommend it especially to Windows users. This CLI tool helps so we can run our scripts in cross-platform.

npm install npm-run-all --save-dev

Next, we'll have to configure our package.json file to build our CSS and start our local create-react-app server. The scripts section will now look similar to this:

"scripts": {
    "start": "npm-run-all --parallel watch:css start:react",
    "build": "npm-run-all build:css build:react",
    "build:css": "postcss src/styles/tailwind.css -o src/index.css",
    "watch:css": "postcss src/styles/tailwind.css -o src/index.css -w",
    "start:react": "react-scripts start",
    "build:react": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

We'll now be able to run the npm start script within npm to build our files and start our server.

npm start

Lastly, to test if Tailwind CSS is working within your components, we'll just have to import the generated index.css file and add a utility class from Tailwind's documentation within our JSX like so:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

const App = () => {
  return <div className="bg-blue-100">Hello World!</div>
};

ReactDOM.render(<App />, document.querySelector("#root"));

Here's how it looks on the browser!

This is a screenshot in 300% zoom made with Screely.

That's a wrap! Thanks for reading and I hope that I was able to introduce this setup properly. 😄