I haven't blogged in a little while. I've been working on rails projects for The Odin Project. The current one is a "Facebook clone". It doesn't have to look exactly like facebook, but it should...
I haven't blogged in a little while. I've been working on rails projects for The Odin Project. The current one is a "Facebook clone". It doesn't have to look exactly like facebook, but it should have the basic functions such as likes, friends, friend requests, posts and comments, as well as full login functions, including omniauth login from facebook (You know, those "login with facebook" buttons). So, I go to the meta developer website and look at instructions. I'll have to register my app and get an ID and a secret key to do this. Great. Time to register and get this done. I'm already logged in to facebook on this computer, so it recognizes me. This should be easy. It asks me to enter my email, but then gives an error
That's a strange error message to me
Umm, yeah that email is already confirmed, that should be great, right? nope. So, I give it a different email and have the code sent.
You can see the code.
Normally I wouldn't share a login code like this, but I'm willing to because it doesn't work.
You can verify that it's the same code in the email.
I can't figure out what is going wrong here, so I try it again, and again, and again. You can see the other emails from facebook to the left of the email above. Here's the thing... They ALL have the same code in them 46453. There is definitely something broken about this. It should be a unique code every time, and it should work as long as I type it correctly. It would seem someone substituted a hard coded number instead of the actual code generator.
So, I try to find a way to contact meta to let them know their developer portal is broken, so that they can fix it, and I can get on with this project. I can't find any sort of contact form or email on their website. Ok, I'll submit a bug report. Nope, have to be logged in to do that. Ok, I'll go on their discussion board and post there... Nope, have to be logged in to do that. I click on the support tab. It's just a search function. No chat options. No way to send a message.
At this point I was pretty frustrated and had been working at this for a while. I elect to step away from it and work on omniauth from github instead. I planned to have both anyway. So, I did that, learned some stuff and wrapped up for the day. Dinner, sleep, etc. At 6AM I sat straight up when I realized that this was most likely not a case of incompetence at Meta. This was likely sabotage. They just had layoffs and someone probably did this on their way out the door. It was pretty sneaky too. It would be hard for Meta to notice it until someone look at some quarterly metrics and realized that no new developers had signed up with them in the past couple of months. Nobody who's already signed up would be affected, and anybody not already signed up has no way of contacting Meta to let them know about the problem.
That's part of the motivation for writing this blog post. I plan to put it on facebook and hope that one of their content reviewers notices it and passes the information along so that I can finish the project properly. If anyone reading this knows someone currently at Meta, please pass it along. Thanks.
Edit: It has now been a month and I just tried to signup again. They sent me the same 46453 code in my email to "confirm" the new email. I think I will try creating a new email just to see what happens. However, as far as I know, no new developers have been able to sign up with meta for at least a month. I'm pretty astonished by this situation. In my next experiment I will go so far as to sign up in an incognito window and see what that does.
Edit2: It has been over 2 months and it's still the same.
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.
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?
