DEV Community: Eelco from Spinal

Conditionally style elements in Turbo Frames with Tailwind Css

Eelco from Spinal — Tue, 23 May 2023 09:07:52 +0000

Part of Hotwire are Turbo Frames. They allow you to insert a page, or just a part of it, into another page.

I've found this feature quite magical when it was released. 🪄

But it would be useful to apply some Css conditionally, based if the page was viewed standalone or within a turbo frame.

Previously, and still valid, way to do this was adding a wrapper/container class around the turbo-frame and nested the css within here.

With Tailwind Css this is easier to do. Let's take the following example from Helptail (Spinal's internally developed email support tool for calm SaaS companies):

This is the email composer on a standalone page.

The the same page, but within a turbo frame:

Notice how certain elements are not shown and some things look different. The changes in this example are basic for demonstration purposes, but you can imagine making it look completely different for each variant (similar how you would with the dark-variant).

How to do this

Set up a new variant in your Tailwind Css' config file, like so:

module.exports = {
// …
  plugins: [
    // …
    function ({ addVariant }) {
      addVariant('turbo-frame', 'turbo-frame[src] &')
    }
  ]
// …
}

How it works: turbo-frame[src] matches a turbo-frame with any value for the src attribute. Check this mdn article for all the details. And refer to the Tailwind docs about the addVariant function.

Note: you can change the variant name to something else than turbo-frame, like inside-frame for example.

You now have the turbo-frame:-variant. It can be used in the same way as md:, dark:, etc.

<div class="block turbo-frame:hidden">
  <label for="from">From</label>
  <input type="email" name="email" id="email" />
</div>

So above <div>-element will be visible on the standalone page and be hidden when shown within a turbo-frame.

And that is all there's to it. You can now create one page that can look completely different from when loaded in a turbo-frame.

A quality of life Stimulus.js controller

Eelco from Spinal — Fri, 10 Feb 2023 13:16:02 +0000

If you are developing any (Rails) app, you know how often have to log in to your own application. Enter your email and password for the umpteenth time isn't really 2023 is it? You could store them in your password manager, sure. But that also that is too much work. Besides you don't really want to clutter your password manager with dummy or seed data.

For the past few years, at least since Stimulus.js was introduced, I've been using this simple controller for all the SaaS products I developed.

Here it is, ready to be copied-and-pasted. Let's go over some of the more interesting bits afterwards.

app/javascript/controllers/development/fill_form_controller.js

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  static targets = ["button"]

  connect() {
    if (this.#formElementsOnPage && this.#devEnvironment) {
      this.#addComponent()
    }
  }

  analysePage() {
    if (this.#formElementsOnPage == 1) {
      this.#fillForm()
    } else {
      this.buttonTarget.text = "Too many forms on this page…"
    }
  }

  analysePageWithKeybinding(event) {
    if (event.key === "f") {
      this.analysePage()
    }
  }

  // private

  get #formElementsOnPage() {
    return this.#numberOfFormElements > 0
  }

  get #devEnvironment() {
    return process.env.NODE_ENV === "development"
  }

  #addComponent() {
    this.element.insertAdjacentHTML("beforeend", this.#buttonTag())
  }

  get #numberOfFormElements() {
    return document.getElementsByTagName("form").length
  }

  get #buttonTag() {
    return `
      <button
        data-development--fill-form-target="button"
        data-action="development--fill-form#analysePage keydown@window->development--fill-form#analysePageWithKeybinding"
      >
        Fill form
      </button>
    `
  }

  #fillForm() {
    const forms = document.getElementsByTagName("form");

    [].forEach.call(forms, (form) => {
      this.#fillInputsFor(form)
    })
  }

  #fillInputsFor(form) {
    const inputs = form.getElementsByTagName("input");

    [].forEach.call(inputs, (input) => {
      let regex = /(^.*\[|\].*$)/g;
      let inputName = input.name.replace(regex, "")

      switch (inputName) {
        case "name":
          input.value = this.#randomiseValue(this.#nameValueOptions())
        break
        case "email":
          input.value = this.#randomiseValue(this.#emailValueOptions())
        break
        case "password":
          input.value = this.#randomiseValue(this.#passwordValueOptions())
        break
      }
    })
  }

  #nameValueOptions() {
    return [
      "Chris", "Kate", "Cameron"
    ]
  }

  #emailValueOptions() {
    return [
      "test@example.com"
    ]
  }

  #passwordValueOptions() {
    return [
      "password"
    ]
  }

  #randomiseValue(items) {
    return items[Math.floor(Math.random() * items.length)]
  }
}

And then in app/view/layouts/application.html.erb

  <%= tag.div nil, data: { controller: "development--fill-form" } if Rails.env.development? %>

You could also only add it to the layout for your sign up/log in instead. It's what I do.

How it works

All this class does is check if there's one form present on the page. If there's one (and not many), and the user presses f or the button in the bottom-right, the form fields for name, email and password gets, randomly, filled with any of the values from any of the _ValueOptions() functions.

Let's go over some of the more interesting bits.

connect() {
  if (this.#formElementsOnPage && this.#devEnvironment) {
    this.#addComponent()
  }

If there are form elements on the page and if the environment equals "development", run this#addComponent(). The environment check is also done when adding the element on the page with Rails.env.development?. It really is just an extra safeguard.

Quick side note: the functions with # prefix are “private functions”. Similar to Ruby's private methods. I like to expose only the functions needed for the functionality to work. The // private comment does nothing really, I like it for a visual cue.

#buttonTag() {
return `
   <button
     data-development--fill-form-target="button"
      data-action="development--fill-form#analysePage keydown@window->development--fill-form#analysePageWithKeybinding"
      >
      Fill form
    </button>
  `
}

This isn't a method I use often with Stimulus.js (which works best with HTML you have), but sometimes adding the HTML from the controller makes sense.

#fillInputsFor(form) {
  // …

[].forEach.call(inputs, (input) => {
    let regex = /(^.*\[|\].*$)/g;
    let inputName = input.name.replace(regex, "")

    switch (inputName) {
      // …
    }

  // …
}

This function checks for the input's name value and inserts a random value from any of the _ValueOptions(). A tricky bit here is that Rails' expects input name's like model[name], so this is taken care off with some regex.

If you want to add more values to the current options, you can expand the arrays. Also if you need more fields, you can extend them easily.

Like this approach? Or do you know a better way? Do let me know.

The best hosting options for your static site (for 2023)

Eelco from Spinal — Wed, 25 Jan 2023 11:58:14 +0000

You have built a great marketing site using one of the many static site generators, like Jekyll, Eleventy or Astro, for your SaaS. Awesome. But it isn't real, unless you put it out there for the world to see.

There are many options available for hosting a static website, and the best choice will depend on your specific needs and budget. Here are a few providers that offer hosting for static websites, along with some pros and cons for each. For example, not all provide Git integration out-of-the-box. Which means extra work from your side to get that buttery-smooth publishing (push-to-deploy) workflow (that also makes Spinal so magical to use).

Netlify (Spinal's 2023 recommendation)

Netlify is a popular choice for hosting static websites, with a range of pricing plans to suit different needs. It offers fast, reliable hosting, as well as features like automatic SSL certificates and custom domains. It also has a generous free tier that includes up to 100GB of bandwidth and 1,000 build minutes per month. However, it can be more expensive than some other options for high-traffic websites.

✓ Git integration
✓ Free plan

Vercel (Spinal's 2023 runner-up)

Vercel is a hosting and deployment platform specifically designed for static and Jamstack (JavaScript, APIs, and Markup) applications. It offers fast, reliable hosting, as well as features like custom domains and automatic SSL certificates. It also has a generous free tier that includes up to 100GB of bandwidth and 2,000 build minutes per month. But Vervel too, may not be the most cost-effective option for high-traffic websites.

✓ Git integration
✓ Free plan

GitHub Pages

GitHub Pages is a free hosting service provided by GitHub that allows you to host a static website directly from a GitHub repository. It's easy to use, and there are no additional fees or hosting costs. As it does not offer advanced features like custom domains or SSL certificates, and it's not suitable for websites with high traffic.

✓ Git integration (built-in, duh!)
✓ Free plan

Render

Render is a hosting platform specifically designed for static and Jamstack applications. It offers fast, reliable hosting, as well as features like automatic SSL certificates and custom domains. It also has a range of pricing plans to suit different needs, including a free tier. However, it may not be the most cost-effective option for high-traffic websites.

✓ Git integration
✓ Free plan

Cloudflare

Cloudflare is a cloud-based service that provides security and performance optimization for websites. It can be used to host static websites, and it offers features like custom domains, SSL certificates, and a global content delivery network. It also has a range of pricing plans to suit different needs, with a free tier that includes up to 100GB of bandwidth per month. Also Cloudflare may not be the most cost-effective option for high-traffic websites.

x Git integration
✓ Free plan

Surge

Surge is a hosting platform specifically designed for static websites. It offers fast, reliable hosting, as well as features like custom domains and automatic SSL certificates. It has a simple pricing model, with a single paid plan that includes unlimited bandwidth and a custom domain. It also has a free tier that can get you pretty far.

✓ Git integration (via Git Hooks)
✓ Free plan

DigitalOcean Spaces

DigitalOcean Spaces is a low-cost, easy-to-use option for hosting a static website. It offers features like custom domains and SSL certificates, and it's highly scalable and reliable. However, it may not be the best choice for high-traffic websites, as it can be more expensive than some other options.

x Git integration
x No free plan

AWS S3

Amazon S3 (Simple Storage Service) is an object storage service that can be used to host static websites. It's highly scalable and reliable, but it can be, too, more expensive than other options, especially for websites with high traffic. It's also not the easiest service to use, as it requires some technical knowledge to set up and manage.

x Git integration
x No free plan

Azure Storage

Microsoft Azure Storage is another option for hosting a static website, with a range of pricing plans to suit different needs. It offers features like custom domains and SSL certificates, and it's highly scalable and reliable. Also Azure Storage can be more expensive than some other options, especially for high-traffic websites.

x Git integration
x No free plan

Google Cloud Storage

Google Cloud Storage is a flexible, scalable, and cost-effective option for hosting a static website. It offers features like custom domains and SSL certificates, and it's easy to use. However, it can be more expensive than some other options for high-traffic websites.

x Git integration
x No free plan

Other lesser-known options

Here are a few additional options that might be worth considering:

Hostinger is a web hosting provider that offers a range of hosting options, including static website hosting. It has a range of pricing plans to suit different needs, with a free tier that includes up to 10GB of storage and 100GB of bandwidth per month.

A2 Hosting is a web hosting provider that offers static website hosting as well as other hosting options. It has a range of pricing plans to suit different needs, and it offers features like custom domains and SSL certificates.

SiteGround is a web hosting provider that offers a range of hosting options, including static website hosting. It has a range of pricing plans to suit different needs, and it offers features like custom domains and SSL certificates.

How about managing your own server?

Setting up your own server to host a static website can be a complex and time-consuming process. It involves selecting and purchasing a server, installing an operating system, configuring the server, setting up a continous deploy system, and managing and maintaining the server. This can be difficult and requires technical expertise, as well as ongoing maintenance and management. Using one of the providers listed above can be a more practical option, as they take care of these tasks. So you can focus on building your static marketing site.

Overall, the best choice for hosting your static website will depend on your specific needs and budget. Most offer really generous free plans, but can get pretty expensive if you get, let's say, the (orange) hug of death.
Consider the features that are important to you, as well as the cost and scalability of the hosting provider, to make the best decision for your website.

Are there any options missing or is something wrong? Let me know.

Turbo Stream responses that spark joy

Eelco from Spinal — Thu, 15 Dec 2022 10:27:45 +0000

Turbo Streams, either fired via a controller action or over websockets are an incredibly easy but powerful way to make your apps more responsive and interactive.

At Spinal, the micro-SaaS I've founded I'm all-in on this “boring Rails stack”. It helps me ship features quickly without a lot of overhead.

There is one technique that I haven't seen talked about before in the Rails/Hotwire sphere, but I use it often to spark joy when using my SaaS app: add an animation when inserting elements into the DOM via Turbo Streams.

It's simple, really. Have an optional animated: false attribute on the ViewComponent or the partial that you insert. Let's see some of these in action and then go over each step needed to replicate this.

Fade in a new icon

Customers can change the icon for their content type. Upon save, the icon is shown on the page with a subtle fade- and zoom-in animation.

Animate content rows

When changing the order of the content, each row is fading in one row at a time.

Animate content cells individually

When customising which columns are visible in the content overview, they are shown top to bottom and from left to right with a fade-in animation. Notice how they are not fading in all at once, but one at the time. Sparking all the more joy.

It's important to note that these animations do not get triggered on regular page visits—which would get annoying pretty quickly, but only when triggered via Turbo Streams. So how do you this?

Feel free to sign up for Spinal to see these little animations in 4K instead of a crappy gif.

How to spark joy yourself

Let's walk through all the critical parts on how to do this. I'm using ViewComponent, but the same principles apply if you use Rails' partials.

ViewComponent class

class ContentRowComponent < ApplicationComponent
  def initialize(content_row:, content_row_counter:, animate: false)
    @content_row = content_row
    @animate = animate
    @content_row_counter = content_row_counter
  end

# … other methods omitted for brevity

  def row_css
    class_names(
      "content-row",
      {"animate-fadeIn": @animate}
    )
  end
end

First initialise the @content_row_counter and the @animate instance variable (set it to false by default). The content_row_counter is a variable coming from ViewComponent.

Then a row_css method where all the css for the <li />-element is defined. Here the most interesting is the class_names() helper from ActionView. It only appends the animate-fadeIn class if @animate is true.

ViewComponent erb

<%= tag.li @content_row, class: row_css, style: "animation-delay: #{@content_row_counter * 70}ms;" %>

row_css is referenced here. Also a delay for the animation is set which simply is @content_row_counter multiplied by 70(ms). This then makes each row fade in one after another.

Turbo Stream response

<%= turbo_stream.update "content-rows" do %>
  <%= render ContentRowComponent.with_collection(@content, animate: true) %>
<% end %>

And finally, where the magic happens. Upon saving, this turbo_stream method is called. It updates the element with the id of content-rows. And only here is animate set to true.

You are, of course, not limited to a boolean animate variable. You could as well pass the animation name as a string and like that add more advanced animation option based on your needs. For example: animate: fadeInSlow.

And that's the bare essentials of sparking joy to your Turbo Streams. If you do apply this technique, do share the results with. Love to see it.