Forem: Joe Lee

Rails Basic Flow

Joe Lee — Wed, 01 Jun 2022 19:10:26 +0000

Workflow for basic Ruby on Rails app:

A. Establish model relations and associations

B. Create models, migrations, associations, validations

rails g model Cheese name price:integer

this command will also make the create_cheeses migration table
name is defaulted as a string

belongs_to :cheese
has_many :stores, through: :cheeses, dependent: :destroy
validates :name, presence: true, uniqueness: true

syntax for associations and validations, both are done in the model.rb files

then run

rails db:migrate db:seed

There's also db:seed:replant to refresh your database seeds

C. Routes

resources :cheeses, only: [:index, :show, :create, :update, :destroy]

syntax for using resource routes and only with the conventional names for the 5 CRUD functions. Note that only wouldn't technically be used here because it's including all of them.

D. CRUD

Now write the 5 CRUD functions:.
:index and :create don't need ID, all other 3 will need syntax like this:

Cheese.find(params[:id])

.find will throw ActiveRecord::RecordNotFound, and using create! and update! will throw ActiveRecord::RecordInvalid, so we can rescue from those throws like this:

rescue_from ActiveRecord::RecordNotFound, with: :render_not_found_response

the :render_not_found_response function should be in the private section of the model, along with a wrapper for the 'find-by-id' code, as well as strong params:

params.permit(:name, :price)

which I will be using for :create and :update functions to make sure I get the proper data for the object.

remember to use these statuses:

status: :created, :not_found, :unprocessable_entity

Intro to RegEx

Joe Lee — Wed, 11 May 2022 08:20:56 +0000

Regular expressions, or RegEx, are versatile and powerful string patterns that are often used to match against strings for operations such as find, find and replace, and input validation. Another crucial aspect is that RegEx is widely supported by many languages.

However, it's infamous for its crazy syntax.

For example, this is the RegEx for a valid email address:

/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

Almost enough to make Siri wince ._.'

Good thing this is an intro!

RegEx uses '/' as delimiters, so /a/ would detect all of the 'a's in a string for you to then manipulate further. Note that it is case-sensitive.

If you wanted to look for multiple characters, then simply wrap them in brackets like so: /[abc]/

Or perhaps you want to look for a specific order of characters instead, then the RegEx would be like: /[h][i]/ for all instances of an 'h' followed by an 'i'.

To cast a wider net: /[abc][def]/ for any 'a', 'b', or 'c' that is then followed by any 'd', 'e', 'f'.

You can put in a range like so: /[a-c][1-3]/

For multiple consecutive characters try: /[abc]{2}/ which is the same as /[abc][abc]/

Which you can also put in a range: /[abc]{2-5}/ for [abc] 2-5 consecutive times, or simply {2,} for 2 or more occurrences.

There is a lot more you can do to build RegEx's as you can tell from the email example, but now what do we actually do with them?

Typically, they are paired with methods like .match, .replaceAll, and .search.

You can find more information here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

Also, this site is a great interactive resource if you would like to dive right in: https://regexr.com/

Conditional rendering in React

Joe Lee — Wed, 20 Apr 2022 16:08:37 +0000

Here are a few ways to conditionally render your React components:

For multiple components, use a useState hook to decide which component will render and put the setState logic where the user would be making that decision, like clicking a button on a navigation header or choosing an option from a scrolldown.
If you're trying to decide whether or not to render just one component, you can use the in line && syntax. For example, true/false && will render the component if the truthy expression evaluates to true, and will not render if it's false. It's good for toggling displays and making sure the component shows only if it has data.
There is also the inline ? : operator that works as a shorthand for an if-else statement. It first evaluates a truthy expression before the ? and then will run the code after the ? for true, or the code after the : for false. This allows for a quick and easy way to conditionally render two different components that are mutually exclusive.

.append vs .appendChild in JS

Joe Lee — Tue, 29 Mar 2022 03:38:01 +0000

What's the difference between .append and .appendChild?
The distinction has robbed me of a couple of hours so here's to hopefully saving you a little bit of time.

First of all, we can see the full functions at MDN:

Element.append(), inserts a set of Node objects or DOMString objects after the last child of the Element
Node.appendChild(), adds a node to the end of the list of children of a specified parent node

.append can work with multiple Node or DOMString objects and must be called on an element, whereas .appendChild can only add a single Node to a parent Node and cannot work with DOMstrings.

Another distinction is that .appendChild actually returns the child element so it cannot be used in a function chain, while .append returns nothing and thus can be chained.

Lastly, .append is the more general method and can produce the same functionality as .appendChild, which serves a more specific purpose.