Author: mxdavis

Today I learned from my colleague Nicolas how you can pass in a message as a block when raising an error, it is so clean and beautiful.

Check this out:

raise InvalidString, <<~MSG if invalid_string
  #{string} is not valid
  Expected something else!
MSG

When pasting ActiveRecord::Base.logger = Logger.new(STDOUT) into the rails console, it will convert all active record queries into raw SQL.

This is helpful to make sure active record queries are optimized (avoid n+1) or quickly grab an SQL statement for database software.

A great tip to keep in your back pocket!

Today Nicolas Goutay, a colleague at Orbit showed me how to turn a webpage into design mode. This can help show requested changes to co-workers by editing the page and taking a screen shot, or just to have fun changing pages as you would like.

Head to the console of the webpage you would like to edit, and type document.designMode = "on" and start editing the text on the page!

Have fun!

Getting back into the hang of HAML with my new full-stack position at Orbit. I will probably write a bunch of small tips I learn along the way — mostly so I can have a place to reference them!

Adding a line of only a period does not work well in haml.

= link_to "click link", "#", target: :_blank, rel: :noreferrer 
.

This code returns: Illegal element: classes and ids must have values

= link_to "click link", "#", target: :_blank, rel: :noreferrer 
\.

This snippet does not produce an error, but it gives us a blank space between the text and the period. click link .

= link_to("click link", "#", target: :_blank, rel: :noreferrer) + "."

Concatenating a period onto the link text works perfectly, just remember to add the parentheses to the link_to args so it doesn’t treat the + "." as an invalid argument.

I need to change a reference for a model while updating the value and not allowing this reference to have null values.

I would like to reference Animal to Specie instead of Breed.

I will not remove Breed from this migration so I can keep it until I make sure everything works properly in production and then will run a cleanup.

Here we go:

class AddSpeciesToAnimal < ActiveRecord::Migration[5.2]
  def down
    remove_reference :animals, :specie, foreign_key: true, index: true
  end

  def up
    add_reference :animals, :specie, foreign_key: true, index: true

    Animal.find_each { |animal| animal.update!(specie: animal.breed.specie) }

    change_column_null :animals, :specie_id, false
  end
end

A quick fix to the RuntimeError: can't modify frozen Array is to run rails c which will give you a better error so you can fix the problem.

If you would like to run a yarn command from another directory you can use –cwd.

yarn --cwd <path> <yarn command>

An example for starting the client from the /client path would be yarn --cwd client start

This is super helpful when trying to start a server and client side app concurrently.

Install the concurrently npm.

And in your scripts file in the package.json add:

  "scripts": {
    "server": "nodemon index.js",
    "client": "yarn --cwd client start",
    "start": "concurrently \"yarn server\" \"yarn client\""
  },

Now yarn start will start up both servers in a single terminal with one command!

ActiveAdmin automatically generates filters for any relationships the model belongs_to. This allows us to sort based on these attributes, which can be super useful. But it can also be painful to load if your attribute has more than a few items since Active Admin loads each one into memory which takes quite a long time, especially if you have thousands or even tens of thousands of them stored in your database.

You can turn off filters you don’t need to allow faster loading. To turn off all filters on a resource just addconfig.filters = false  to your ActiveAdmin model.

To remove only a specific filter(s) use remove_filter :filter_name

To keep only a specific filter(s) use filter :filter_name

This explains why my rspec request tests were having no issues since there are not over 30,000 users in my test database!

This post helped me narrow down my slow performance being caused by filters.

This post has super detailed info on how to customize filters.

I haven’t posted in quite a while. Been working with a lot of RSpec request testing for controllers, graphql, and active admin. (Never forget the S in RSpec is capitalized – that would have saved me a lot of pain!!)

My current trouble was sending an attribute that required a json value to an active admin create route via RSpec Request. I tried a whole bunch of things, but the solution is sooo simple, (too simple for the time spent on it) that I had to post it in case I needed to look up what I did again.

I just had to add .to_json on that specific attribute requiring json.

  let(:valid_attributes) do
    attributes_for(
      :model,
      content: {"key"=>"value"}.to_json
    )
  end

I hope this helps someone 🙂

I need to start posting more, just when you find the solution after debugging for so many hours it feels too simple to post about. Like I should have known that already! But I think we all have those moments!

Happy Programming 🙂

I just wanted to share what I learned recently regarding how React only updates the specific render it needs to, and I would have thought otherwise.

My app has a layout like this

App > Posts > Post

App controls all the state and renders Posts, Posts maps through all the this.state.posts and renders each one Post, and Post renders the post details.

I wanted to toggle between that Post view and a PostForm if the user clicked edit. See here a short example:

So I passed a function from Post to App handling edit and changing this.state.edit from false to true.

Now I just need to know where to put my ternary regarding which component to render based on this.state.edit.

So first thing that came to mind was that App would re-render because state within App changed (the this.state.edit now is true, and is located in App), so in my Posts map, I found the post that matched the id of the edit (which I had also added to state), and put my ternary in there.

post.id === updatedPost.id && this.state.edit ? <PostForm …. /> : <Post … />

And I was all excited to see it work, and nothing happened. Nothing changed. Ok, maybe my code was a little wrong, let’s load up our handy debugger and watch each step happen from the handleUpdate callback from Post to App, and go step by step.

I watched the callback head into the App, update the state, so far so good. Now I am ready to see it head into the render of App, and then load up the Posts map, but much to my surprise, the very next step was the Post render. React really held in memory that we are in the Post component, and as soon as we finish our callback, even though it’s in another component, it went straight back to where it was and did not need to update the whole DOM again. Pretty amazing.

So to make this form and Post toggle ended up being simpler than expected, because I didn’t even have to check if post.id === updatedPost.id. React already remembered the scope we were in, and went back only to that one instance of Post component, and updated that into a form.

No wonder React can be so fast, here I had 40 posts on a page, and instead of re-rendering all 40 posts, it knew only to render that small single Post or Form with very little code and logic.

React does not fail to amaze me.