• Rails developers: If you are having issues with missing generated JS assets, make sure you are only running the webpack-dev-server once.

    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

  • Using Cloudinary with ActionText in Rails 6

    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.

    Dependencies

    First we’ll get ActionText and the Cloudinary gem up and running.

    > rails action_text:install
    > bundle add cloudinary
    

    Configuration

    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") %>
    

    and config/environments/production.rb

    # config/environments/production.rb
    
    config.active_storage.service = :cloudinary
    

    Javascript

    To use direct uploading (uploaded images never touch your server), you will need to include the ActiveStorage JS in app/javascript/packs/application.js. We’re also going to include the Trix editor JS code and ActionText which supports it:

    # app/javascript/packs/application.js
    
    require("@rails/activestorage").start()
    require("trix")
    require("@rails/actiontext")
    

    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 Post model has title and content attributes, both of type text.

    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 head section 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 %>
    

    The rich_area_text input 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 %>
    

    Done yet?

    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 image_tag calls:

    # 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_tag calls. This allows clearer differences between in_gallery and other views. The additional parameters to cl_image_tag are passed to the cloudinary API as transforms. FYI, c_limit means 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!

  • Text editors for Rails

    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.

  • Slow text paste into irb

    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.

    www.matthewbogart.net/blog/2021…

  • 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!

    youtu.be

  • New iMac looks great but…

    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?

  • Cobwebs be gone!

    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…

    www.youtube.com/watch

  • 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

  • A new Posterous?

    world.hey.com/jason/hey…

    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.

    onefoottsunami.com

  • I’ve experienced some unexpected shutdowns on my 2019 MBP 16”. Fans hit max for just a split second and reboot. Mostly, this occurs when booting into Windows 10 via bootcamp.

    Similar to @brentsimmons issue, though I’ve only seen it maybe twice in Big Sur itself.

  • 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 joining a coding challenge, the Advent of Code

    Supporting the challenge can be done via coinbase if needed, but the author points out it’s better not to: Bitcoin energy consumption

  • The more I learn, the more comfortable I am with my own ignorance.

    On a related note: 10x.engineer and 1x.engineer

  • Plans for orbiting solar power! I give 👍👍👍to new, greener energy tech. But is our current government capable of this?

    It sounds like an ego project for Boris to me.

    Space based solar power by 2050

    Current UK fuel mix

  • 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?

  • Dog poop bags and fake ID are surprisingly similar. Buying the cheapest possible can get you into a very sticky situation.

subscribe via RSS