Rails 6 Action Text Amazon S3 Images and Attachments not Uploading

ruby on rails web development software development

So we've finally taken the plunge and carried out our first Action Text implementation. It was used to power a blog.

But we ran into an issue.

Problem

Here are the symptoms

  • We were on Rails 6
  • We had Active Storage setup
  • We had Action Text setup
  • On development, we used 'file' for Active Storage and it worked perfectly
  • On production, we used 'S3' for Active Storage and it didn't work
  • We tried switching to 'S3' for development to debug and it still didn't work

What was weird, is we were seeing things like this messages like S3 URL generated complete with an AWS Key, but when we went to browse the Amazon S3 bucket, there was nothing.

There was also something weird happening with the rich text editor. When we selected an image - we would see this gray bar across the image (that should have been the clue:)).

Solution

After days of trying to figure out what was going on, we stumbled upon this post which had our solution: https://stackoverflow.com/questions/63998547/rails-action-text-no-upload-after-switching-to-amazon-active-storage.

So as it turns out, Action Text and the Trix Rich Text Editor use client-side direct uploads. If you're not familiar with this, basically the file gets uploaded directly from the browser to the Amazon S3 without going through your Rails server. When you do a web request from a browser to another site, in this case from the user's browser to Amazon S3, you have to set up CORS rules!

So the answer, is you have to set up some CORS rules like this:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT"
        ],
        "AllowedOrigins": [
            "https://www.example.com"
        ],
        "ExposeHeaders": []
    }
]

Ensure you actually fill out the Allowed Origins to match your actual website. If you're doing dev testing on your machine, you can put http://localhost:3000.

By the way, if you're wondering what that gray bar was all about? That was the progress bar for directly uploading to Amazon S3. It stayed there because the web app didn't have the CORS permissions to write to Amazon S3.

Thoughts

Unless I missed something - which is very possible - I think the main issue here is the documentation for Action Text. Active Storage can be set up in multiple ways. For example, you can set up Active Storage WITHOUT direct uploads and it'll work fine. However, to use Action Text, you HAVE to set up direct uploads. At the time of the writing of this article, this is all they have "Also, you need to set up Active Storage for embedded images and other attachments. Please refer to the Active Storage Overview guide." What they probably should say is that if you're embedding images or other attachments, be sure to setup "direct uploads", which subsequently tells you how to setup CORS.

Alright, hope that helps out some peeps!

Casey Li
CEO & Founder, BiteSite

3 Improvements A Day of UX/UI Design Can Bring To Any Web App

business ux/ui design

Before jumping into the syllabus, my course instructor for UX/UI Design gave us a grave warning that went something like this: You will never be able to look at a website the same way again. If you’re someone who enjoys browsing sites and wants to keep it that way, seriously consider not taking this course.

I found it humorous at the time, and a few students chuckled at his wryness. But now, more than a year later, I totally get what he meant.

Undergoing an education in UX/UI Design can cause one’s brain to instantly analyze every site or product they encounter. Call it an occupational hazard. However, when called upon, this perspective can benefit any web app, in as little time as a day.

Here are 3 benefits just a day of UX/UI Design can bring to any web app:

1. 85% percent of usability issues can be discovered with just 5 user tests

UX/UI Designers are strong allies for users on a site. They’re not only well-versed in research methods used to study user behaviour, but they’re also keen observers of human-technology interaction. If the designer is able to observe just 5 test participants while they interact with a product, up to about 85% of usability issues can be uncovered.

Depending on the scale and complexity of the web app, user testing sessions might take longer to plan and execute. However, small-scale testing of specific pages or flows of the app can be carried out more frequently. Even testing with just one user can bring out a third of usability issues existing on the design.

Hence, bringing together a designer with a couple testers can help identify the most pressing problem areas to fix in order to improve your users’ experience on your app.

(Why you only need to test with 5 users by Nielsen Norman Group)

2. Reduce visual inconsistencies and harmonize the entire app

A designer’s sharp eye and knack for organization can help your business identify and put together a visual style guide to polish off the entire app. Method and art both come into play when a designer creates a standard design language for your app to follow. No more text headers of different sizes, or buttons of a 1000 shades of grey ;).

A library of common visual elements to draw from and reuse across a site will make the site look uniform and professional, instilling trust in users. Furthermore, designers draw upon colour theory and visual design concepts to reinforce a company’s brand identity throughout its app. A simple style guide can be put together in less than a day, but its contents can be referenced and built upon for months.

Here’s a helpful site I came across that anyone (even non-designers) can use to create a style guide- DesignGapp.

3. Rectify crucial errors that defy web standards and turn users off

An experienced designer could point out right away technical and/or visual flaws that harm your users’ experience. If an element a user encounters frequently around the web (for example the close button on the top-right corner of pop-up’s) is suddenly placed out of their conventional place on your site, it will be disorienting and frustrating to the user. Often, it is better to stick to conventional design than reinvent the wheel, as humans are creatures of habit, and we like the familiar.

There are web and UI standards to follow that help improve user experience, and that address the 7 factors of UX. It could be as simple as increasing font size by 2px for better readability, or adding an undo (cmd+z) option to certain actions. Just like an editor/copywriter can weed out grammatical or spelling errors in language, a designer can help hone in on technical aspects to quickly improve your app.


 

Now I’m not saying that you can get a site makeover in a day; it takes time to create thoughtful design, and years to develop expertise. Design is both a creative and technical skill, and I wouldn’t rush anyone on this job (albeit there are some who work better under timed pressures).

Like they say, good things take time, and the cumulative result of design thinking and practice adds great value to a site (on average, every dollar invested in UX brings 100 in return.) However, these are just some of the ways (of many) that recruiting a designer’s unique lens can benefit your web app, and therefore business, in less time than you might think.

Tania Das
UX/UI Designer, BiteSite

Google Search Date Tip

productivity

I recently discovered something I have been using fairly regularly. I am probably late to the party here but I learned Google has a date filter for your searches. As all developers know, you can have 2 days or 20 years of experience and your number of searches per day will stay the same. Due to this I welcome anything to make my daily searches more efficient.

If you use Google as your search engine, append “before:YYYY” or/and “after:YYYY” to filter out unwanted results.

Twitter account, Google SearchLiason explains it best here : “The before: & after: commands return documents before & after a date. You must provide year-month-day dates or only a year. You can combine both. For example:

[avengers endgame before:2019] [avengers endgame after:2019-04-01] [avengers endgame after:2019-03-01 before:2019-03-05]”

Google has had this date filter for a while but it was hidden in the “Tools” menu. Now you can add the before/after terms to your search and achieve the same result.

Many times I have been searching for a JavaScript solution and all the top results are from a decade ago. Although the solutions most likely would still solve my issue, sometimes I would rather have a more recent answer. Adding after:20YY helps filter out these old results.

Hopefully you find this as useful as I do.

Chris Francis
Software Developer, BiteSite

Introducing Trello Views!

custom software trello software development

So we use Trello - a lot.

We use it to manage our Scrum Express process and it's become an integral part of our software development. However, one thing we noticed is that our Trello boards are getting BIG. Like super wide with lots of columns.

The thing is though, at any given time, we only need to see a subset of those columns. For example, when doing Product Management meetings, we're concerned with a very different set of columns than when we're doing development.

So - we built a Chrome extension to solve this. We call it Trello Views.

Super MVP at this point, but would love some feedback.

Check it out:

https://chrome.google.com/webstore/detail/trello-views/ljfoaeaaojcefkmljglbbphcoclnodnm

Casey Li
CEO & Founder, BiteSite

Copy Paste Error with Rspec

software ruby on rails

Everyone loves laughing with others about their mistakes. Let’s laugh at me for a second here.

I test my Rails applications with RSpec. While editing the users factory for 2 new user types, I copied lines 19-23 in the image below. I changed the factory name to the 2 added user types, saved and closed the file. I then proceeded to update the users controller spec to test the permissions of these two new user types. Between not being confident in my RSpec skills and getting some false positives, I couldn’t figure out why some tests passed and some failed. After way too long, I finally found the problem. Can you?

Copy/Paste normally saves time but in this case it definitely didn’t. Always double check your code, friends. 🤦‍♂️

Chris Francis
Software Developer, BiteSite