Hi all. I have decided that my dog, Daisy, is a unique beast and it would probably be entertaining to watch FPV videos of her absolutely pummeling tennis balls. We have like 30 in the yard. I ha...
Hi all. I have decided that my dog, Daisy, is a unique beast and it would probably be entertaining to watch FPV videos of her absolutely pummeling tennis balls. We have like 30 in the yard. I have one of those "chuck it" tennis ball throwers. When she gets one she stomps on them with a death from above move that basically says "Fuck you in particular" to that tennis ball. It is very entertaining to watch. She has trained me to perform a special kind of game of "fetch". She doesn't really fetch. She wants to chase a live ball that is moving. And she wants to stomp on them. She does all the running with a ball in her mouth. So, the first ball I throw she will chase, and then she basically stands there while I toss the rest. She tries to catch a few of them. Then when I move to that field of balls, she runs at a blistering pace from one side of the yard to the other and then I throw the ball so that it is leading her and she can chase the fast moving ball.
In order to film this, I have invested in a Runcam Thumb Pro V2. It weights 16 grams and I have a 128 GB micro SD card in it. It is coupled with an absolutely tiny Battery Eliminator Circuit (BEC) that allows me to use any lipo and regulate it to 5v. The product description mentions 250mm x 220mm, but I suspect that's the quadcopter dimensions because the end product was about 10mm x 6mm. It is essentially the size of a mcro SD card. https://www.amazon.com/dp/B07MS1ND5M?psc=1&ref=ppx_yo2ov_dt_b_product_details It was designed for use on quadcopters and RC planes, so lightness is expected. I doubt my dog will notice it. I have updated to the latest firmware and soldered up the BEC so that it can connect to some 3S 450mah batteries, of which I have many. Each one should power it for an hour and takes about 20 minutes to charge. I have the mount that came with the camera, but I am awaiting a roll of TPU 3D printer filament to be able to print a bunch of other mounts that I will attach to my dogs harness. It can record at 4K 30 FPS, 2,7K 60 FPS, 1.44K 60 FPS or 1080P 120 FPS. It also has gyro stabilization built in. I'm eager to get a new harness for my dog and figure out the best mounts to use and get to filming this. Our "fetch" games are very fun no matter what. This should elevate it. I really look forward to sharing this fun with the world.
I had an interesting couple of days trying to add code markdown to Trix. If I'm going to be blogging and showing code, I want it to look nice, right?
I had done some searching and found a very h...
I had an interesting couple of days trying to add code markdown to Trix. If I'm going to be blogging and showing code, I want it to look nice, right?
I had done some searching and found a very helpful article that inspired me to attempt it myself. I'm still pretty new to Rails, so I knew it wouldn't be easy. First I tried to add a Javascript file in app/Javascript and add it into application.js. However, I only have one page, this blog, that has 'trix-content', so it kind of broke things on other pages and the result was that it would log me out each time. So, I decided to add the JS file only to my blogs layout page. However, everything I did ended up with an error about the file not being in the asset pipeline. I tried a bunch of different ways to add it via manifest.js, and assets.rb, but that never worked at all.
In my eternal searching, I came across the idea to put it in as a Stimulus Controller, which is only added to a page when the specific tags are present. Adding it to the page that way was pretty straightforward once I spent a little time with the Stimulus docs learning naming conventions and such, I was able to get some action on the page. However, it wasn't what I wanted. It was applying 5 code blocks to only the first blog on the page. It would work sometimes on the blogs/show page, but usually required a refresh. That would not do. I eventually figured out that the 5 code blocks issue was due to the 5 blogs on a page. I had the tags on the _blog partial and it was getting called 5 times and applied to the first blog every time, making 5 nested code blocks. I had to do a little head-scratching and tinkering, to make it wait for the page to be fully loaded and to always fire on a change to the page. There were a lot of errors due to the fact that if a blog doesn't have a code block, then the querySelectorAll brings back nothing and functions don't like to work on nothing. So, with a few if statements to check for the presence of one or more code blocks on each and every blog, and figuring out the best place to put the stimulus data-controller and data-target tags, I got it to work very nicely. I thought I would share my code and spin the wheels on the new toy a bit.
app/javascript/controllers/trix_mark.js:
import { Controller } from '@hotwired/stimulus';
export default class extends Controller {
static targets = ['source'];
connect() {
document.addEventListener(
'DOMContentLoaded',
this.applyFormattingToPreBlocks()
);
}
applyFormattingToPreBlocks = () => {
const trixElements = document.querySelectorAll('.trix-content');
trixElements.forEach((trixElement) => {
const preElements = trixElement.querySelectorAll('pre');
preElements.forEach((preElement) => {
if (preElement.length !== 0) {
const regex = /(?!lang\-\\w\*)lang-\w*\W*/gm;
const codeElement = document.createElement('code');
if (preElement.childNodes.length > 1) {
console.error(
'<pre> element contained nested inline elements (probably styling) and could not be processed. Please remove them and try again.'
);
}
let preElementTextNode = preElement.removeChild(
preElement.firstChild
);
let language = preElementTextNode.textContent.match(regex);
if (language) {
language = language[0].toString().trim();
preElementTextNode.textContent =
preElementTextNode.textContent.replace(language, '');
codeElement.classList.add(language, 'line-numbers');
}
codeElement.append(preElementTextNode);
preElement.append(codeElement);
}
});
});
};
}
lang-javascript
In app/javascript/controllers/index.js:
import TrixMarkController from './trix_mark_controller.js';
application.register('trix-mark', TrixMarkController);
lang-javascript
app/views/layouts/blog: at the top of the body surrounding everything else.
You will also need the CDN links for Prism so it can generate the nice color formatted code blocks. They are specified in the article linked at the top of this post.
And that's all it takes. If you have stimulus in your rails app, then you should be able to just copy and paste this code. If you want to look at the full code for this rails app, you can view it on github.
Greetings. I am currently working on The Odin Project, and I'm doing the final rails project, which is a "facebook clone". It doesn't have to look like facebook, but it needs the functions of pos...
Greetings. I am currently working on The Odin Project, and I'm doing the final rails project, which is a "facebook clone". It doesn't have to look like facebook, but it needs the functions of posts, likes, comments, friendships, notifications, etc. One of the stipulations is that it needs to have an Oauth "log in with facebook" button option for the sign in. I thought "great, this should be straightforward as I've seen that devise has an Oauth feature. I'll just follow their instructions". That turned out to be very far from the truth. The goal of this blog post is to document what did work so I can remember it later on as well as to share it with others who might be confronted with the same task themselves.
To the unfamiliar, Devise is a very popular gem that handles pretty much every aspect of app security, signup, login, password recovery, etc, and provides a nice set of views and controllers to work with. Your biggest task, generally, is just styling the forms you want to use. It has nearly 150 million downloads, so it's pretty widely used. For this task I started off following their directions here. They do mention that Oauth2 requires that requests be sent as POST requests and that GET won't work. They offer some strategies for making that happen, however Rails 7 uses Turbo and Turbo wants to pretty much do everything via XHR GET request. Turbo allows for updating any part of the page without having to reload the whole thing. This is great and makes for snappy delivery, but it can cause some quirks. The Devise instructions mention using a button, or adding "method: :post" to the link, but in both cases they were still showing "Started GET..." in the Rails server. Even trying to disable turbo with data-turbo="false" didn't work. You can get Turbo to do a POST request with
data: { turbo_method: :post }
lang-ruby
However, this still resulted in a nasty looking CORS error in the dev console. After a bit of googling, I learned that it's something to do with Turbo using XHR. Ultimately, what I found out is that you can specify that you want the request to go as HTML. Here is the final code that worked:
<div class="github-login" data-turbo="false">
<%= button_to "Sign in with Github", member_github_omniauth_authorize_path,
format: :html, method: :post, class: "button is-link" %>
</div>lang-ruby
So, that covered one of the sticking points in getting Oauth2 to work. However, that was not the only issue that I ran into. To begin with, I was not able to register at all for Meta's developer portal. As of the time of this writing it is still broken. I've detailed that in this blog post. In order to get the system to work, you have to register as a developer and create an app on their website. As I couldn't use theirs, I used githubs Oauth feature to start. I found some pretty decent instructions for how to sign up and get github working here. I won't re-hash all the steps in this article. I'm just going to detail what I had to change. After following those steps and clicking on my "sign in with Github" button, I was redirected to the signup form in my app. I could see the POST request happen in the server, but it wasn't signing me in and there were no error messages. I eventually added this line of code to the OmniauthsCallbacksController:
puts member.errors.full_messages
lang-ruby
And then I was able to see the DB ROLLBACK message in the server with the error that email was already in use. I had previously manually registered with my app and it was causing a collision because the email field in my database has "unique: true" attribute. It finally hit me that the behavior was all wrong. I wanted it to sign me in, not sign me up with a new account. So, it was back to google to see what I could find. I found an excellent stack overflow answer. That gave some pretty good details on what I should do. It was a little old, so it needed some adjustments, but it got me most of the way there.
A note for the code that follows: I am using the model "member" in place of "user" because I'm intending to put this app on Heroku when completed, and I want to share a database with this app, which already uses "user". You can't have two tables with the same name in a database. With devise, you can call your "users" anything you want. Devise isn't picky about it as long as you stay consistent throughout. So, if you use this code, you'll want to adjust for that.
To start with, these are the gems used to accomplish the login functionality:
Once you get signed up with github, and in my case, google Oauth, you'll want to put those credentials in a .env file in your root folder. The dotenv gem allows for accessing them. Add .env to your gitignore file so that you aren't checking these credentials into version control where anyone could get them. Don't worry, what I've posted below are not the actual credentials. The just look similar.
This will pull those credentials from the .env file and pass them into devise.
You will need to update your routes.rb file with:
devise_scope :member do
get "member", to: "members/sessions#new"
end
devise_for :members,
controllers: {
sessions: "members/sessions",
registrations: "members/registrations",
omniauth_callbacks: "members/omniauth_callbacks"
}lang-ruby
One part of this solution that makes it work so well is that there is an authorizations table added to the database that allows for a single member/user to have multiple authorizations from multiple sources. The migration for that looks like this:
class CreateAuthorizations < ActiveRecord::Migration[7.0]
def change
create_table :authorizations do |t|
t.integer :member_id
t.string :provider
t.string :uid
t.string :token
t.string :secret
t.string :username
t.timestamps
end
end
end
lang-ruby
In app/models/member.rb:
class Member < ApplicationRecord
devise :database_authenticatable, :registerable, :recoverable,
:rememberable, :validatable, :omniauthable,
omniauth_providers: %i[facebook github google_oauth2]
mount_uploader :profile, ProfileUploader
has_many :likes
has_many :friends, class_name: "Member"
has_many :comments
has_and_belongs_to_many :friend_requests
has_many :authorizations
def self.from_omniauth(auth, current_member)
authorization = Authorization.where(
provider: auth.provider,
uid: auth.uid.to_s,
token: auth.credentials.token,
secret: auth.credentials.secret
).first_or_initialize
if authorization.member.blank? member = (
if current_member.nil?
Member.where("email = ?", auth["info"]["email"]).first
else
current_member
end )
if member.blank?
Member.new(
email: auth.info.email,
password: Devise.friendly_token[0, 10],
name: auth.info.name,
locations: auth.info.location,
profile: auth.info.image )
auth.provider == "twitter" ? user.save!(validate: false) : user.save!
end
authorization.username = auth.info.nickname
authorization.member_id = member.id
authorization.save!
end
authorization.member
end
end
lang-ruby
The authorization model is much simpler:
class Authorization < ApplicationRecord
belongs_to :member
end
lang-ruby
And last, but not least, we will need the devise omniauth_callbacks_controller. You can generate the file with "rails g devise controllers members omniauth_callbacks"
class Members::OmniauthCallbacksController < Devise::OmniauthCallbacksController
skip_before_action :authenticate_member!
def all
member = Member.from_omniauth(request.env["omniauth.auth"], current_member)
if member.persisted?
flash[:notice] = "you are successfully logged in!!"
sign_in_and_redirect(member)
else
session["devise.member_attributes"] = member.attributes
puts member.errors.full_messages
redirect_to new_user_registration_url
end
end
def failure
super
end
alias_method :facebook, :all
alias_method :github, :all
alias_method :google_oauth2, :all
end
lang-ruby
With all of that in place, I can now login with google, github or by doing so manually. I will add the facebook login to my project whenever they fix their portal. For now I'm pretty happy with the two methods in place. I will soon be adding Oauth to this portfolio app, now that I have the tools to do so. I hope you have enjoyed this post. Please feel free to comment and correct any errors I have made along the way. Feedback and suggestions are always welcome. Thanks for reading.
I just wanted to share some picture of my dogs, because... Who doesn't love dog pictures, right? This will also let me test out the photo direct upload feature in Action Text to AWS S3 bucket. It...
I just wanted to share some picture of my dogs, because... Who doesn't love dog pictures, right? This will also let me test out the photo direct upload feature in Action Text to AWS S3 bucket. It was recently fixed by updating my rails version to the latest available. Anyway, here we go. Enjoy.
Here is a picture of Oscar in the car:20220407_180147.jpg3.55 MBHe was feeling a little bit anxious after a visit to the vet for a checkup.
Here he is just lounging in the grass on a nice day:
20220508_101150.jpg2.88 MBThis is one of Oscar's favorite spots... the sand pile. It's like a little bit of high ground where he can survey his kingdom.
20220422_192954.jpg2.97 MBThis is Daisy. She is lounging in the flower bed.
20220403_121323.jpg2.25 MBShe's having a nice snooze and hogging the bed.
20220311_220552.jpg2.37 MBThis dog loves mud. Luckily, she also loves the hose, so it's easy to get her clean. 20220112_163619.jpg2.77 MBI hope you enjoyed the pictures. 'Til next time.
I wanted to write this blog for the specific purpose of documenting what went into creating this portfolio app. I am doing this partly to refresh myself on earlier parts of the project, but also to...
I wanted to write this blog for the specific purpose of documenting what went into creating this portfolio app. I am doing this partly to refresh myself on earlier parts of the project, but also to have a record of what worked and what didn't that might help me on future projects. This app was built as part of a Udemy course - Dissecting Rails 5 by Jordan Hudgens. I decided that I wanted to use the most current version of Rails, which was Rails 7. I had no idea how much of a difference that would make. I was clueless as to just how much Rails and the dependencies used in the course have changed since 2016.
To start with, I could never get importmaps to work properly with jQuery. It went on from there. The course used Bootstrap4.0.0-alpha6, and I started out trying to use Bootstrap5.2. That proved to be too much for me due to the breaking changes in that framework. So, I changed the version in the gemfile and did Bundle Install. All appeared to be well, however 5.2 was persisting in my app no matter what I tried. The problem was that in the process of consulting SO (Stack Overflow) I had come across the "rails assets:precompile" command in an attempt to fix things. I did later learn about "assets:clean", but it was entirely too long before I discovered that the clean command only removes the latest version of precompiled assets, and as such older version of the CSS assets were persisting. Finally I discovered "rails assets:clobber" which removes all precompiled assets. That immediately fixed the bootstrap version problem. Now my app in its infancy was starting to visually look like the instructors version.
As it went on it became apparent that the jQuery that Bootstrap requires for collapsible menus was not working. I decided at this point that I needed to consult a different source of information to learn some things about Rails 7. After searching, there was not very much out there besides the rails guides, which can be a little much for someone just getting started with Rails. I came across an e-book that was a tutorial on building an applicant tracking system using Rails 7, Hotwire, Turbo, Stimulus, Stimulus Reflex, and MRUJS - CableCar. I found it to be very helpful and the app in that tutorial worked perfectly every step of the way. It became apparent to me that I could benefit a lot from using the dependencies and configuration that was used in that book.
So, I rebuilt the app from the start, setup with esbuild, chokidar and bootstrap (the correct version). I then went through the old app, starting at the top, and copied and pasted all of the relevant files over to the new build. I recreated the file structure to the point where we had gotten through the course and made sure the SCSS, controllers, concerns, models, helpers, views, and routes all matched. I had to do some searching about what to do with the DB schema. It turns out you can just copy it and then do "rails db:schema:load" to update the database. After that, you can do future migrations as needed. The original migration files don't have to be copied. I now know that I could have copied the migrations as long as the time/date stamps of the file names stayed in the same order, I could have just re-run the migrations. I then updated the gemfile and did the bundle install to get those dependencies back where they were. I did use a different version of the devise gem that was provided by the ebook author who had updated the gem to make it work better with Rails 7. In my previous version of the app, all "destroy" operations, including logging out had to be done with a button, instead of a link. At this point, I was able to successfully import jQuery and progress forward with the course. I think that it took 9 days all in all from discovering that jQuery didn't work. I spent two days googling for SO answers, 4 days going through the e-book, and then I spent about 3 days getting the app built again and now in good working order to move forward.
It didn't take too long before I hit another roadblock. We were using sortableJS to implement drag and drop operations for the portfolio page and it used Coffeescript, which is deprecated in Rails 7. So, I turned to the e-book that had helped so much thus far, and implemented the drag and drop using Stimulus, the way we had done on that project.
The next section was on working with forms in Rails. Wouldn't you know it, things have changed and now "form_with" has replaced "form_for". That part was only a small hiccup. We were doing a nested form and using the Cocoon gem, which has not been maintained for about 3 years and would not work for me. It was also using UJS, which is not included in Rails 7 MRUJS replaces it. So, I found another gem... Vanilla Nested, which worked with vanilla Javascript to allow you to add nested form elements. It should have worked very easily, but I created this speedbump. I misinterpreted the docs and didn't get that the id of the element in the partial had to match a param in the form element calling it. It took reaching out to the creator of the gem to get that answer. He graciously answered and solved it within minutes, from his native country of Brazil. That was pretty surreal for me, and brought home that the people writing these gems for free are truly part of the community and are willing to help out people in need.
With that solved, we moved onto the next feature, adding little messages using the Gritter gem. That gem was quite out of date and would not work. At this point was when I really learned that much of the issue I was having stemmed from the way that Hotwired and Turbo work, and any gem that has not been updated to work with them will break. The new features in Rails add many paths that make these gems no longer necessary. I implemented toast messages in the manner that was provided in the e-book, using Stimulus. This worked quite well, and the biggest headache I had was figuring out that the SVG close icon we were using was not showing up because it was basically sized down to a single pixel. Once I set an explicit width, it showed up just fine.
The next step was to create a comment mechanism for blog posts. I followed along with the lesson, but I was pretty sure that I would be using the comment form implementation from the e-book. It turned out that in this case, it was an overly complicated implementation that used a slide-out panel that had previously used in another part of the book. The thing that made it really difficult was that it was all styled in Tailwind CSS and I was using Bootstrap. I quickly realized that making the translation between the two would be quite tedious and time consuming. I was here to learn Rails, not to try and master two different CSS/SCSS frameworks. So, this time I turned to google and found a straightforward implementation for a polymorphic comment feature from gorails. Even though it was from 2014, it still worked well and I was able to style it in the manner of the Udemy course with Bootstrap. Things were moving along. I had begun to understand that every stage would be fraught with challenges, but that I would be able to overcome them with enough googling.
The next hurdle came pretty quickly in the form of adding markdown to the blog text input. As I was now expecting, the gem would not work in Rails 7. Thankfully the e-book had used ActionText with Trix as an editor, so it was fairly simple to get that implemented. The tricky part turned out to be getting the Trix editor CSS styles to work properly. The toolbars would not display correctly and it seemed nothing I could do would fix it, until I finally found the right SO answer which was to add:
to app/config/assets.rb. After that, the Trix stylsheets took affect and all was fixed.
After that, it was time to deploy to Heroku and then figure out how to get my google domain to work. Here are some of the things that I needed to do to accomplish that.
Don't forget to go through Heroku docs about updating config/puma.rb to have appropriate production environment settings.
In order to successfully precompile any fonts or images referenced in css files that are in app/assets/fonts or //images will need to be added to the public folder or precompile will fail.
Important for google domains with Heroku:
add the Google root domain and www. domain to heroku. You will have two DNS destination files.
In google domains in the website scree, first set forwarding from root to go to correct heroku DNS target.
Then go to DNS screen and add CNAME for www domain and point to that heroku domain. Then it all works.
It took more searching and browsing the Heroku docs, Google docs, and SO pages to get it all to work. However, I did get there and I am thrilled to be writing my first blog on my very own personal portfolio app. I plan to keep adding to it and tweaking things to my liking. Any projects that I complete in the future will be added to the portfolios section of this app. If anybody read this, thanks for taking the time.
Stuart
About
A blog about technology, life, and whatever I am feeling opinionated about that day. It certainly won't all be great content... but, what do you expect for free?
