Rails developers: If you are having issues with missing generated JS assets, make sure you are only running the
Running it in more than one project concurrently will give unexpected results.
/bangs head this is why the problem is fixed by a reboot!
Hoping to make my side project to pay for itself, I’ve started documenting updates on a blog (sorry no RSS yet). Latest post about corrected time dinghy race results: Summer Update
I’ve been playing with Cloudinary for image hosting in a web app (direct upload to them). They have a great set of features, whereby a transformation can be specified as part of the image URL.
Pairing this with Trix/ActionText in Rails 6 was simple enough, but there’s a catch later on for embedded images.
First we’ll get ActionText and the Cloudinary gem up and running.
> rails action_text:install > bundle add cloudinary
Then add you cloudinary credentials to the environment. You can obtain the values from the cloudinary.yml and add them to your production (or development) encrypted credentials file:
> rails credentials:edit --environment=production
Here are the keys you need, with values extracted from the cloudinary.yml above:
cloudinary: cloud_name: "example_app" api_key: "444444444444444" api_secret: "AAAAAAAA-BBBBBBBBBBBBBBBBBB" secure: true
With those values safely stored, we need to load them. In a new initializer:
# config/initializers/cloudinary.rb Cloudinary.config do |config| config.cloud_name = Rails.application.credentials.cloudinary[:cloud_name] config.api_key = Rails.application.credentials.cloudinary[:api_key] config.api_secret = Rails.application.credentials.cloudinary[:api_secret] config.secure = true config.cdn_subdomain = true end
Now specify that ActiveStorage should use Cloudinary, editing
config/storage.yml. You can also specify other services and local disk:
# config/storage.yml cloudinary: service: Cloudinary local: service: Disk root: <%= Rails.root.join("storage") %>
# config/environments/production.rb config.active_storage.service = :cloudinary
To use direct uploading (uploaded images never touch your server), you will need to include the ActiveStorage JS in
Ruby & Erb
So now we’re ready for the editor and display of edited content. In our edit .erb template, we will use the trix editor to manage html content. Let’s assume the age-old
contentattributes, both of type
Add the following to your model:
# app/models/post.rb has_rich_text :content
Note, if you have been upgrading an older Rails project, ensure you have the following in the
headsection of your application layout
<%= csrf_meta_tags %>. This ensures ActionText can send requests to your app without authentication token errors.
# new.html.erb <%= form_for Post.new do |f| %> <%= f.text :title %> <%= f.rich_text_area :content %> <%= f.submit %> <% end %>
rich_area_textinput type gives us the wonderful Trix editor, with drag and drop image support. To display the
Post, we have the following:
# show.html.erb <h1><%= @post.title %></h1> <%= @post.content %>
Not quite. Remember I mentioned a catch? We need to ensure that the Cloudinary image is displayed properly. At the moment, a local URL is likely specified for any images embedded in
content. Open up a file that the ActionText install generated for us and modify to use Cloudinary and replace
# app/views/active_storage/blobs/_blob.html.erb --- <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %> +++ <% if local_assigns[:in_gallery] %> +++ <%= cl_image_tag blob.key, width: 800, height: 600, c_limit: true %> +++ <% else %> +++ <%= cl_image_tag blob.key, width: 1024, height: 768, c_limit: true %> +++ <% end %>
Note that I chose to remove the ternary operator conditional and replace it with two separate
cl_image_tagcalls. This allows clearer differences between
in_galleryand other views. The additional parameters to
cl_image_tagare passed to the cloudinary API as transforms. FYI,
c_limitmeans that an image will not be resized above it’s original size, so the width and height are effectively max values.
How about now?
Yep, we’re done. Assuming you have no CSRF token issues, you should be good to go. Try dragging an image into the editor. It will be immediately uploaded to cloudinary and referenced when your post is submitted.
One thing I’d still like to resolve is the occasional error, which seems to be timing related; submitting the form before the image is uploaded and acknowledged by Cloudinary results in a missing image in the rendered content. We can probably disable the form submit button/action while the upload in in progress, but that will require implementing event hooks. I’m not sure if ActionText can handle that or not yet.
A really interesting comparison between approaches to build browsers in the heyday of the browser wars. Who would have thought Google, not Microsoft, was the responsible parent? mjtsai.com
I resolve never to complain about hot weather when it finally arrives. Working as Dad’s Taxi today though, I can think of better things to do in 33°c heat. Looking forward to our trip to the beach!
I’ve been evaluating different text editors for Ruby on Rails work on macOS.
Sublime Text 4 is a paid upgrade, which is fine. However, it was automatically upgraded to and I now get the nagware prompts. Which prompted me to check if the upgrade from 3 to 4 was my best option.
So I’ve looked at Nova, which I loved, and would like to support. However, I’m now trialing RubyMine, which I really didn’t want to like, but it’s brilliantly thought out for what I do. Maybe an actual IDE is what I’m looking for…
I’ve worked before in Vim. It appeals to me greatly, but never got completely comfortable with the inter-file navigation, plug-ins and all. I’ll give it another shot later.
But for now, it looks like RubyMine could be getting my business.
I’ve struggled for a while with slow pasting of text into iterm2. Last week, I tried the stock macOS Terminal app, but found the same issue.
It turns out this is not related to the terminal client (iTerm 2 has options to slow down paste for compatibility), or event to zsh (ohmyzsh had a bug related to this a few years ago), but to irb.
To work around the slow pasting of multiline text into irb disable multiline
I just preordered Matthew Bogart’s Incredible Doom 📚 for UK release.
I love these videos and how they are presented, but The Final Border left me feeling pretty depressed about the loss of 94% of the universe to future generations!
The new M1 iMacs look interesting. I wonder if they will be able to act as an external screen for another computer, as display mode did years ago.
I wish the chin had been removed, or at least coloured in the same vibrant hues as the backplane.
The new ultra wide camera on the iPad Pro with “center stage” would have been great for the iMac, but it just gets a 1080p camera.
I wonder how the next iMac (27in equivalent) will differ, and how the future revisions of the 24in model will evolve?
A jaunt to the sailing club with my very fine helm. Still in lockdown, so no sailing. But given the wind, that’s just as well.
I love these videos by Kurzgesagt - In a Nutshell. Here’s How to Move the Sun: Stellar Engines, which builds on How to Build a Dyson Sphere…
I just finished reading: Heavy Weather Sailing 7th edition by Bruce, Peter 📚
a great repository of information on sea-worthiness, but also recountings and analysis of storms managed both successfully and unsuccessfully in the past. this is one book i will be re-reading in the future.
I recently finished reading: Why We Sleep by Matthew P. Walker 📚
its really got me thinking about that work/life balance and changed my approach to sleep. 10/10
Hey.com are experimenting with blogging via email; something that feels very like Posterous, before they were acquired by Twitter and shutdown. It’s an idea I’ve kicked around with before, but never seen a way to make it pay as a service.
Handling attachments and signatures always seemed like a fun task, but I see they only accept posts from your hey.com account. This (I presume) reduces complexity over email client compatibility and spam handling.
I think capital one just ran a filter to remove the logo from the laptop, and Mr Jackson’s head is collateral damage.
I stumbled across rapidapi.com this weekend, a nice aggregator/marketplace of APIs. If you’re looking for online data, this is a good way to explore what’s around, signup and even pay for access.
Happy to share my new app went live on the iOS store. Another one for dinghy sailors; or rather dinghy sailing race management.
A pursuit race start sequence timer, for those in the niche! blog.cowlibob.co.uk/pursuit-t…
I’m currently exploring Big Sur. Playing with maps, I see that the London Eye actually rotates in 3D Satellite map mode. I don’t know if thats new, but it’s pretty cool. Does anyone know of other animated landmarks?
subscribe via RSS