TL

Chris, could you make a video comparing serialize (that you demonstrated here) vs attribute with a custom type (ActiveRecord::Type) vs using composed_of?

Chris, I usually don’t want to leak IDs so I use uuid columns for that, and also change to_param to return the uuid. Do you also think this is a suitable replacement for that use case?

I'm also looking for a way to disable links.

Chris, how would you implement a "loading" indicator in the form while the request is on the fly?

Chris, I second @Dan Tappin's question.

By the way, have you tried navigating back and forwards using the browser button? The results appear correctly, but they go out of sync with the form's inputs.

Hi Chris, great video! One suggestion: I think the canonical way of accessing helpers in controllers is now helpers.<helper>, instead of view_context.x, because the latter instantiates a new view context on every call, so it's less performant.

Cant wait for the split chunks episode!

Very nice that you showed how to make it work with Concerns.

Hi Chris,

Do you have any plans for an episode on Rails + GraphQL ?

I'd love to see your take on it, and see what exactly we're missing :)

+1 to say Chris a big Thank You !!

Chris, hoping for the episode on using a CDN with user uploaded content, we use CarrierWave (and plan to keep using because it's years beyond ActiveStorage in features) and that's the biggest number of assets (and the heaviest assets) we have to serve.

AND a future episode :)

That's a feature to be added to Hatchbox :)

I also would love to know what would be the Rails way of generating json. I like AMS but it looks like it's going away and jbuilder is bundled with new Rails apps per default.

We're using Rails and Webpacker with Vue single file components.

How do we insert images inside the <template> ? A far as I can see there are many options.

OPTION 1:
Use .vue.erb (with webpacker erb loader), and <% helpers.image_path %> as suggested in the official docs here.

Drawbacks: very slow to webpack compile for some reason (like 30 seconds on every single file change), AND it also breaks the linter. Also, still depends on Sprockets.

OPTION 2:
Add 'app/assets' to webpacker.yml resolved_paths array, as suggested in the official docs here, and then import the images directly in Javascript like the docs suggest:

import 'images/rails.png'

Drawbacks: to use this with Vue single file components, you kinda have to add it to the data or computed attributes, making them reactive. It's verbose, like so:

<template>
<img v-bind:src="railsImage">
</template>

<script>

import railsImage from 'images/rails.png';

export default {
  data() {
    return {
          railsImage,
    }
  }
}

OPTION 3:
Use require

<template>
  <img v-bind:src="require('images/rails.png')"
</template>

We can point to images/rails.png directly only if we add app/assets to the resolved_paths, otherwise you'll need to require ../../../app/assets/...

I thought this solution wouldn't use asset fingerprinting (the hash at the end of filename to help with cache invalidation), because it would be bringing the asset from Sprockets, but Webpacker does it automatically, creating a path like /packs/_/assets/images/rails-27695e0730a7fbf593ffbf5d8749024b.png

OPTION 4:
Our layman solution, which we use for some time in production for all 'staticData' I want to pass from Rails to Vue, using data-attributes. I use it not only for asset_paths, but for all data that is request-dependent (for example, my Rails app has internationalizaiton, so routes are dependent on request locale, that's why I can't use .erb in the javascript files for routes).

It works something like this. In the view:

<%= content_tag :div,
  nil,
  id: 'app_mount_point',
  'v-cloak': true,
  data: {
    'static-data': {
      railsImage: image_path('images/rails.png'),
            posts_path: posts_path,
    }
  }
%>

In the vue.app:

<template>
<img v-bind:src="staticData.railsImage">
<a v-bind:href="staticData.posts_path">See your posts in your language</a>
</template>
(...)
computed: {

    staticData() {
      return $(this.$root.$el).data('static-data');
    },

  },

This works great because staticData is a computed methods, which will be cached by Vue at load and wont be observed for changes unnecessarly.

It also helps that image_optim gem compresses all my asset images through Sprockets, so referencing them this way ensures I'm getting the compressed-processed image.

What option are you guys using? What would be the most idiomatic way of doing this?

Chris, isn't it important to include the following line in the main entry pack:

import "babel-polyfill";

Without it, as far as I understand, Babel will not transpile the ES6 code and there should be issues with current browsers, right?

Chris, could you add to the video description what exactly you go throufg in this video? since its a 30+ minute it would be nice to have a summary or index!

SEEKING MID to SENIOR LEVEL RAILS DEVELOPER for profitable, 7-years in the running startup
Location: remote! (we're in Brazil, but you can work from your confy home :)
Fulltime or parttime (at least 4 hours/day if part time)
We are on Rails 5.2 and Ruby 2.5.3 :)
Please send your resume and desired wage to izilda@temporadalivre.com. Looking forward to talking to you!

Hi Chris, is there any episode (or can you plan one!) that demonstrates how to have a javascript editor so the user can 'center' the crop of the avatar? In real world cases, the users will never upload a 'perfect' avatar to be used with a circle, it will generally be off-center, so solutions like CSS object-fit: cover; don't end up with a perfectly centered image.

Funny thing is, even tough I had NET::ERR_CERT_AUTHORITY_INVALID errors, I could accesss it with Chrome; now, after closing the window and trying again, I'm getting a HSTS message telling me that I can't override the invalid certificate and go through.