extend Tailwind CSS configuration with local fonts or Google Fonts

image source: https://www.dafont.com/barcelony.font

Tailwind CSS offers developers powerful capabilities to build visually appealing websites in a short time frame. To give your website a unique look and feel, you can choose to add new fonts to the Tailwind configuration.

The default Tailwind classes include 3 different fonts. Font-sans is the default font that will be applied even when you don’t explicitly set the font-sans class. …


elegantly slide to a section of a page

The article is snippets from the Ruby on Rails wiki page.

Learn how to set up a smooth scrolling with Ruby on Rails and Stimulus Components. This is a simple and clean way to enable users to slide to a different section of a page.

Before You Start

Make sure you have Stimulus installed. Check the package.json file or run yarn why stimulus. If Stimulus is not yet installed, follow the documentation.

1. Install the package

Add Stimulus ScrollTo to your project


Review search results in a dropdown

Image by Author

Introduction

Learn how to set-up a search autocomplete with Stimulus. A user can see query results after typing in the input field. The Stimulus Autocomplete library is a Stimulus controller that provides an easy solution to auto-completion.


Bring your listing page or online store to life.

Photo by the author.

In this article, you will learn how to set up a light gallery with Stimulus, a modest JavaScript framework for the HTML you already have. Stimulus is a powerful alternative to SPA’s and enables developers to bring web applications to life.

Stimulus Components is an open-source project that hosts a collection of customizable components for typical JavaScript behavior. One component helps you to create a feature-rich light gallery into your project without writing any custom JavaScript at all. See lightgallery.js


Building beautiful websites has never been easier

Books in a library
Books in a library
Photo by Paul Melki on Unsplash.

Tailwind CSS is a revolutionary design framework that has attracted both diehard fans and critics. Fans love its speed, simplicity, and powerful building capabilities. Critics hate its bloated HTML design. Regardless of which side you are on, Tailwind has caused a significant shift in the developer community.

If you enjoy building web applications with Tailwind, it gets even better when leveraging pre-built components and pages. Tailwind UI is the (partially paid) masterpiece by the founders of Tailwind. If, however, you are looking for more free alternatives, the Tailwind community has your back. …


Set up beautiful carousels without a single line of custom JavaScript

The words “Build a CAROUSEL” set on a salmon-colored backdrop
The words “Build a CAROUSEL” set on a salmon-colored backdrop
Photo by the author.

In this article, you will learn how to set up a modern carousel with Ruby on Rails and Stimulus Components. This is a powerful and easy solution to build a fancy carousel into your project without writing any custom JavaScript.

Check the demo page to get an idea of what you can build after reading this article.


One key rules them all

White on pink text reads, “env to rails credentials”
White on pink text reads, “env to rails credentials”
Image credit: Author

Rails credentials are the new gold standard. ENV files are an insecure ancestor. In this article, you’ll learn why and how to migrate, how to use API keys in Ruby, YML and js.erb, and how to share a single key once with your team.

DHH tweeted about its arrival nearly three years ago, but new technology often takes time to catch up. A wake-up call is when you find yourself too frequently juggling API keys between developers in your team. It might be time to take a second look at how to implement credentials in a rails app.

Why Should You Move From .Env to Credentials?

The…


StandardJS, Stylelint, Rubocop, and Markdownlint

Code on a laptop
Code on a laptop
Photo by Luca Bravo on Unsplash.

With the right tools, any developer can enjoy deeply satisfying coding sessions. Mastering flow is empowering. The opposite leads to frustration and annoyance. Luckily, linters and formatters can help do the heavy lifting when it comes to coding best practices.

In the guide below, VS Code users and Ruby on Rails developers can find a detailed setup to build well-formatted and styled projects in no time!

  1. JavaScript StandardJS (w Prettier)
  2. CSS and SCSS — Stylelint
  3. Ruby — Rubocop and Rubocop Rails
  4. Markdown — Markdownlint

First, what is the difference between a linter and a formatter?

A linter checks code…


Hotkeys, timestamps, and more

Computer screen showing the words “do more”
Computer screen showing the words “do more”
Photo by Carl Heyerdahl on Unsplash

TL;DR

Are you looking to become a better developer by creating an empowering digital workflow? iTerm2 will help you to make the most of your day behind the keyboard. It’s the terminal that has all the functionality a developer ever wished for.

The guide below will help you to:

  1. Download and install iTerm2
  2. Set up a hotkey shortcut — Double tab option ( ⌥)
  3. View timestamps
  4. Highlight and comment on logs
  5. Autocomplete — Command (⌘) plus semicolon (;)
  6. Click links from the terminal — Command (⌘) plus click
  7. Focus your troubleshooting

At first, it seems like the native terminal on a…


Powerful extensions for Rails developers

Photo by @sejadisruptivo on Unsplash.

Ruby is built with developer happiness in mind. However, if your editor is not correctly set up, you’re in for a painful ride. Finding the right extensions on VS Code can take you down a long trial-and-error path.

Here’s a list of powerful extensions for Ruby on Rails developers.

TL;DR

Ruby

  1. Ruby
  2. Ruby Solargraph
  3. Endwise
  4. ERB Helper tags
  5. Rails DB Schema
  6. Rubocop
  7. ERB Formatter
  8. Emmet in ERB

General

  1. Atom Dark Theme
  2. VSCode-icons
  3. DotENV
  4. Output Colorizer
  5. Auto Rename Tag
  6. Highlight Matching Tag
  7. Bracket Pair Colorizer 2

Ruby

1. Ruby

This speaks for itself. Ruby syntax highlighting.

Thomas Van Holder

Le Wagon || Amsterdam || Memento Mori — www.thomas.so

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