DEV Community: Inee Ader 🐌

Like, so confused...

Inee Ader 🐌 — Mon, 05 Apr 2021 19:18:49 +0000

`LIKE` operator

I'm taking a SQL Essential Training course on LinkedIn Learning, and I BRIEFLY got confused about the like operator.

I kept forgetting what was what in terms of where the % went.

I'm using SQLStudio and following this tutorial.

Here are my notes:

%[search_term]% - CONTAINS

SELECT Name, Continent FROM Country WHERE Name LIKE '%island%';

Human sentence: "Show the Name and Continent column of the Country table that CONTAINS 'island'..."

% on either side envelopes the key search word, so 'contain' here makes sense.

results that **contain* 'island' in any way*

%[search_term] - ENDS WITH

SELECT Name, Continent FROM Country WHERE Name LIKE '%island';

Human sentence: "Show me the Name and Continent column of the Country table that ENDS with 'island'..."

% only at the beginning of the search term takes the place of the rest of the text, meaning that % at the beginning means 'island' at the end.

only results that **end* with 'island'*

[search_term]% - BEGINS WITH

SELECT Name, Continent FROM Country WHERE Name LIKE 'island%';

Human sentence: "Show me the Name and Continent column of the Country table that STARTS with 'island'..."

% only at the end of the search term means 'island' is at the beginning of the Name column.

we get a big whopping zilch for this one...I guess there's no Country Name that BEGINS with the word 'island'.

But let's add one for fun to make sure it works...

Ok so now we have the fictional 'Island of the Blue Dolphins' which was now returned

For some reason it's hard for me to remember which term it searches for based on where the % is located.

Hope this helps, but mostly this is for me :)

Sweet Cards with CSS

Inee Ader 🐌 — Thu, 28 Jan 2021 19:06:35 +0000

Hey all! Today I'm going to give you several simple tips for styling a dashboard page involving multiple "cards". I'm using Rails backend (doesn't matter) and React frontend.
We'll also import a Google font into our App file!

I have minimal "styling" right now, but I wouldn't even call it styling. This page is the user's dashboard page to display their PLANT collection.

We're going to make neat containers and cards to hold it all together! (if your Dev settings are in light mode you can't see the edges of the below screenshots as clearly)

DASHBOARD div

First, let's make our biggest container: the page itself! Here's the basic structure, you can ignore all the React-y stuff. Just notice that PlantContainer component is one layer inside "dashboard" div.

render() {
        return (
            <div className="dashboard">
                <div>
                    <h2 className="user-name-icon"><img className="user-dashboard-icon" src={user.icon} />
                    {this.props.user.username}</h2>
                </div>
                <div className="dashboard-btn-div-top">
                    <button className="dash-add-plant-btn" >Add Plant</button>
                    <button className="greenhouse-btn" >Greenhouse</button>
                </div>
                <PlantContainer 

                />
                <br></br>
                <div className="dashboard-btn-div-bottom">
                    <button className="dash-edit->Edit User</button>
                    <button className="dash-logout-btn"  >Logout</button>
                </div>
            </div>
        );
    }
}

The outermost wrapper has the class of "dashboard". To start, I just want to get the content off the left EDGE of the page...I hate that it's touching. In your CSS file:

.dashboard {
     padding: 40px;
}

Padding pushes in content from the border of the element. (Margin pushes out from the border, and border is the actual edge of your element)

PLANT CONTAINER div

Ok now let's look at the next container -- the Plant Container component. This one returns a div with class of "plant-container". I want that box to contain all the plants I have in my collection!

CSS:

.plant-container {
     padding: 20px;
     margin: 20px;
     border: 1px solid black;
}

So I've made a border to outline the container, I've pushed out from the container with margin 20px, and pushed in some padding inside so the content isn't RIGHT on the edge of the container.

Cool, so now we have a box inside of another box. I want the edges of my boxes to be soft, so I'll add border-radius: 10px; to soften the edges in .plant-container.

PLANT CARD div

Nice. Now, let's go another level deeper and get the cards themselves boxed in. My plant cards are being rendered in the PlantContainer component, so you won't see it in the above snippet.

.plant-card-dashboard {
         border: 1px solid rgb(0, 0, 0);
         border-radius: 10px;
         padding: 15px;
         margin: 10px;
         width: 200px;
         background-color: rgb(255, 255, 255);
}

So I want the card to push out each other by margin 10px, pushed inside itself with padding 15px, I'm setting a stiff width so they're all the same, outlining with black border, and rounding the edges with border-radius.

Round boyzzz.

CARD CONTAINER div

Inside the Plant Container div, I made ANOTHER box with class card-container to wrap all the cards. The reason I did this was so that the title "Your Plant Collection" would be inside the .plant-container.

The cards are all stacked on top of each other, and I want them to display side by side.
So we got Dashboard > Plant Container > Card Container:

.card-container {
    display: inline-flex;
    flex-wrap: wrap;
}

The inline flex let's it display side by side, and flex-wrap allows the next card added to go down to the next row in the container. I added a plant to demonstrate:

Now I want to add more juicy style...how about a background image? Let's get back up to our .dashboard class styling and add an image. I have the images locally in my styles directory. I set the image size to "contain" so that it shows the whole picture, and it automatically repeats itself underneath (even though it doesn't look like it in the screenshot).
Here's our dashboard styling:

.dashboard {
    padding: 40px; 
    background: url(./images/zz2.jpg);    
    background-size: contain;
}

Now she looks like this:

If we look back up into our .plant-container CSS group, we're going to add a few more things:

.plant-container {
     padding: 20px;
     margin: 20px;
     border: 1px solid black;
     background-color: rgba(255, 255, 255, 0.521);
     backdrop-filter: blur(5px);
}

The "background-color" is white with about half the opacity, which will fade out our background image (which is in .dashboard div). As a final touch, I wanted the PlantContainer to also BLUR the background a bit, so that's what "backdrop-filter" is doing...it's an expensive effect though, so try not to use it more than once on a page.

PLANT IMAGE styling

Let's work on that plant image now...it's a bit SQUARE isn't it? On my plant card, the image class is plant-image-dashboard and here's how it's styled:

.plant-image-dashboard {
    width: 200px;
    height: 200px;
    object-fit: fill;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 15px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
                0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

So I set the height and width so it's a square, set the image fit to "fill". SIDENOTE: I uploaded already square images, if you have rectangular images, setting height and width to square and choosing object-fit: fill will probably squish your image down and warp it all weird. Then we added a black border, made it ROUNDER with 15px, and added a little box shadow so the image popped out slightly. Now it looks like this:

GOOGLE FONT TIME

Whew! Almost there. Let's import a Google Font. It's a little more involved for a React app. I liked "Nanum Myeongjo" -- sounds Korean ^_^
Click on Download Family and you'll get a little zip file dropped in your downloads.

Open that up into a little folder. You'll see a few font .ttf files. I just wanted the "regular" one. Make a folder in your style directory called fonts and drag-n-drop the file(s) into your fonts directory. For me, the style folder is inside the src directory.

Now find the javascript file that loads your App.js. My React App came with bootstrap.js (even though I'm not using Bootstrap) and that's the one that loads my App.js (which then loads all my other components).
Import your font into your file that loads your App.js like so, routing the path from where my bootstrap.js lives:

THEN, you can put font-family: 'Nanum Myeongjo', serif; in your App styling for site-wide font-ing!
Now we got a nicely styled Dashboard page that displays your beloved plant collection. Boom.

I hope this was helpful to anyone just learning CSS. I'm using pure vanilla CSS in this project, no Bootstrap or Bulma, so it's been a challenge to learn it!

I did a similar thing to my feed page which displays other user's new plants!

(((Are you a fellow plant-lover interested in co-partnering with me to work on my House Plant Social Media app, FacePlant? I'm interested in collaborating, as I feel this project could have some traction. See this demo video of the app, tell me what you think! )))

Nerdtrition

Inee Ader 🐌 — Sun, 03 Jan 2021 23:27:24 +0000

This post is about nutrition for those who spend many hours in front of the computer! Maybe I tried too hard to be clever about the title.

LUTEIN

You might think it's a type of protein based on the spelling, but nah. Maybe you heard of it being associated with eye health! Lutein is a xanthophyll (yellow pigment) in the carotenoid family, along with beta-carotene, zeaxanthin, meso-zeaxanthin, lycopene, and astaxanthin.

Carotenoids are orange/yellow/pink pigments that give pumpkins, carrots, marigolds, corn, daffodils, tomatoes, shrimp, salmon, and flamingos their bright colors! Lutein is part of what gives marigolds and egg yolks that yellow color! Why is it important to coders?? IT SAVES YOUR PRECIOUS EYES!

This picture shows the macula and the yellow is lutein pigment!

Lutein is a pigment that concentrates in the macula of the eyes, which acts as a blue light filter and blocker! We have heard about the damaging effects of "blue light"...how does that work? Well, during the day, the sun actually emits some blue light naturally, but the harmful stuff mostly comes from our SCREEEEEEEEEENS...computers, phones, tablets, etc. This blue light frequency is very damaging to the macula of the eye, causing eye tension and fatigue, macular degeneration, and even disruptions to sleep.

This is an aside comment on Sleep:

See, the blue light tricks your body into thinking it's still day time, and when you're staring at a blue light rectangle after dark, it delays your body's natural production of melatonin--the sleep hormone. Melatonin is produced by your body when the day starts to get dark, but your eyes and brain don't know what TIME it is, so it holds off on making that sleep hormone until it gets dark enough. Clean up your sleep hygiene by dimming the lights around the house, and utilizing apps like Flux on your screens to minimize that confusing blue light!

Back to lutein...what I'm trying to share is that Lutein concentrates in the macula of the eye and helps block/filter that blue light. Another cool thing to mention...the concentration of lutein in the macula is DIRECTLY reflective of the lutein content in your BRAIN! That's right, lutein is not only good for your eyes, but also your brain--supporting memory, intelligence, and alertness.

BUT WAIT, THERE'S MORE!

Lutein ALSO deposits in the skin! Well, if it blocks/filters blue light in the eyes, it does it in the skin too! We need sunlight, humans are wired to enjoy time in the sun, but unfortunately everyone's been brainwashed to think that sun = skin cancer...NUH UH! I'm not going to talk about the C-word, but I would argue that the more antioxidants and carotenoids you have in your skin, the more ability your body has to fight free-radicals--which are basically chaotic bratty molecules that go around damaging your healthy cells and replicating. The FDA won't be knocking on my door if I say this, but increase your diet of antioxidants and get those carotenoids concentrated in your tissues and you're pretty much golden. Lutein also supports skin HYDRATION...ooh-la-la.

Look for a supplement that provides at least 20mg Lutein per serving. One of my top choices for this is:

Quantum Health's Macula 30+ supplement

This provides 30mg lutein, plus 6mg zeaxanthin. Quantum's supplement also comes with some vitamin C and E, and omega 3s for some pretty comprehensive eye support! Lutein and zeaxanthin occur in nature at about a 5:1 ratio, respectively, so it's beneficial to have that added carotenoid in your lutein supplement.
Another of my favorites is:

Natural Factors Lutein

Providing 40mg Lutein and 7mg zeaxanthin, also in that ~5:1 ratio!

Both of these supplements source their lutein from MARIGOLD FLOWERS!

Cool side note: If you own chickens, feed them marigold flowers, and you'll get more lutein in your eggs! Or you can sprinkle those marigold petals on your salad if you like the taste of flowers I guess.

Other fun facts:

As of now, nobody has determined an upper limit for Lutein toxicity...meaning we don't know how much you have to take to experience any adverse effects. Take as much as you want, have fun!
Lutein is safe for babies! Eat those flowers, mama, and the lutein will be passed through breastmilk to benefit baby's eyes, brain, and skin!
Lutein is lipophilic...meaning it likes fat...making it insoluble in water. For best absorption and utilization, take Lutein along side some fat-containing foods like eggs, fish, butter, etc. My favorite meal of carotenoids is eggs poached in tomato sauce with yellow bell peppers, onion, garlic, cumin, parsley, goat cheese, kale, and BUTTER in a North African/Middle Eastern dish called Shakshouka! Make it in your iron skillet!
Lutein isn't exclusive to yellow/gold things, you also get lots of it in dark leafy greens!

DISCLAIMER:

Before I decided to allow myself to be at the mercy of the immense ocean of Tech...I was a nutritionist. I got a B.S. in Pre-Med Biology, then went on to receive my practitioner certificate in Ayurveda, the ancient health science of India. I studied Ayurvedic herbal formulations, bodywork treatments, Panchakarma techniques, and added 500 hours of Ayurvedic Yoga to that mix too. I also received a certificate in Western Clinical Herbalism, and studied the newly-rising bodywork treatment of Lymph Drainage Therapy.
After all that, I became a nutritionist in a health food store where my job was to be an expert on all the vitamins and supplements in the department. That being said, my advice does not replace a doctor visit and consult your doctor or alternative health practitioner before introducing supplements to your regimen especially if you are already taking a Rx. Also, I've been out of the nutrition game for almost a year, so excuse me if any of my info is out of date--all this is from memory. I am not sponsored by any supplement company (I wish 😒)...

...but I want a pretty PROMPT!

Inee Ader 🐌 — Mon, 30 Nov 2020 17:09:34 +0000

If you're anything like me, you like to customize EVERY. SINGLE. THING. that is remotely customizable! I love changing colors, adding my own personal style, and finding themes. By this point, I have already customized my terminal window through the Mac's Terminal > Preferences.

This blog is particularly about changing the COMMAND LINE of your Z-Shell...particularly oh-my-zsh.

If you're a whiz, scroll waaaaaaaaay down to the bottom for a summary of the process.

FIRST

Open up your (probably boring) terminal and navigate to the root-directory. This is where your terminal defaults to when you first open it. If you're anything like me, you get lost in there sometimes so you can type cd ~ and it'll take you to your root directory.

Then type code .zshrc --which is really hard to type smoothly like an experienced hacker.

This should open your code editor...I'm using VS Code, so it automatically opened it in there.

The page displayed is like the manual(README) for oh-my-zsh, and if you're like me, you won't really read anything because you're so eager to CUSTOMIZE! Seriously I'm so annoying, asking "How do I do this?" when it's literally written in the commented-out portions of the page smh...I'm like a t-rex, I won't see it unless it's jumping up and down in front of my face. Keep this open in a tab until you figure out your lovely theme. It looks like this:

SECOND

Probably don't mess with too many things in here, but the instructions are pretty clear...just uncomment things you want to have! But we're not really here to discuss that.
Somewhere around line 13, you should see ZSH_THEME="something".

This is telling you what THEME you're currently using in your command line. There are a lot of themes. I changed the "something" in that line to be "random".

Now you can go back to your terminal, and type $SHELL, which would refresh your terminal, loading a random theme! Maybe there's a website that shows all the themes on one page, but if you're like me, you're gonna ^ + ENTER a million times to cycle through randomly.

My name is Inee and my username is "xoliio", both weird-sounding things, so that's what you're seeing on here, in case you were confused:

They kind of all start looking the same after a while, but find the theme you like and store it in a little piece of memory in your biological human brain.

Something that might be helpful is to notice where the cursor ends up (the blinking block thing where you type). Does the command-line theme take up one or two lines? What info does it display? Is it readable? Does it have colors you like? You can change this stuff anyway, but to start it helps to have something close to what you were looking for.

For now, I liked the cute simplicity of "af-magic". Still got the name of the theme you like in your noggin? Keep it there for just a little longer.

THIRD

Now we're going to FIND THAT THEME'S FILE.
Open your computer's terminal and navigate to your root directory.

Type ls -a...which lists all the files, but also the SECRET hidden files. You'll see .oh-my-zsh listed in there.
Navigate to that with cd .oh-my-zsh.
Now, you can OPTIONALLY enter ls to see what's in here, but what you want to get into is the "themes" folder via cd themes.

Once you're in there, you can OPTIONALLY ls that and have all the themes listed, but really you just want to type code [theme-name].zsh-theme. ((It's not a directory so you're not going to cd, you want to open it in your code editor this time.)) In my case it'll look like code af-magic.zsh-theme.

This should open up that theme's file in your code editor. Looks so weird, idk what this language is.

FOURTH

(why am I counting like this?)

Since we're going to mess with the codes of these themes, let's save it as something else, so that next time oh-my-zsh updates, it won't overwrite your edits. With VS Code selected go to the top left of your screen and select File > Save As.... I want moons on my prompt so I'm going to save mine as moons.zsh-theme...obvi keep the extension of ".zsh-theme" and don't change the save location either, you want this to go into your .oh-my-zsh > themes folder.

NOW we can do some stuff...
Make sure you go back to your .zshrc README to change your ZSH_THEME to the new theme name you just saved so you can see the new changes as you edit!

Did you know WE CAN ADD EMOJIS!?😱!?😱!?😱!?
If you're like me, you probably go about things the long way, or simply don't know the super-smart way. I opened up a new gmail email window and used my touch bar to put a bunch of emojis I wanted to play with...

You could also open a text field anywhere and press ctr + cmd + SPACE to pull up your emoji options:

FIFTH

Anyhowwww, once you have your emojis somewhere easy to access, you can copy-paste them into the code file of that theme. Just takes a little bit of deciphering and pattern-spotting to figure out where...

What I've deduced is that $FG[000] things designate color (FG stands for foreground I think). Also in this code there's %{$reset_color%} which resets the color of the background and text to whatever was changed immediately before. Still have yet to figure out what $my_orange is exactly, but I think it's another way of asking for colors.

oh-my-zsh theme files may be structured differently, but ultimately you want to find the code lines that deal with the PROMPT. On mine, the title has it commented out as # primary prompt. From there, you just have to use your riddle-loving-raven-brain to experiment a little with moving those tags around and finding WHERE to add your emoji!

I suggest, if you want to alter stuff safely, copy-paste the whole line of code somewhere else; then, comment it out so that you still have the untainted line to revert back to if you break something.

On mine, down near line 23, we see the code written for primary prompt. You can KIND of see in the PS1 text what it's doing. Right after our first color tag of $FG[032] we see a teeny tiny %~.
You can look at this incomplete chart to see what the other little things mean:

%n - username
%B - make bold
%m - short name of current host
%M - name of current host
%# - a `%` or a `#`, depending on whether the shell is running as root or not
%~ - relative path
%/ or %d - absolute path

You can experiment with changing the colors. This is a great chart that has all 256 and organizes the gray-scale and the main-16 too:

So real quick, here's the original af-magic.zsh-theme prompt-code-line-thing.

And here's mine...I want MOONS, so I'm going to change my PS1 to look like:

As you experiment and change the colors etc etc, you can refresh your terminal with $SHELL. You can uncomment stuff to help isolate what you're trying to target.

Notice I changed the color at the VERY beginning of the PS1 line($FG[255]), and added a teeny tiny %n in there because this is where I wanted to add my username. Then I have another color tag ($FG[105]) right before all those ostentatious moons. This color will actually affect the thing AFTER the moons, which is $(git_prompt_info)...essentially the path to your current git file you're working on.

Also notice, I made a new constant called NEWLINE=$'\n' and added it to the END of PS1. Sometimes the file path is so long, I'd rather just start on a clean line...and I love snails so I had to add this little guy 🐌 too! Now when I press ENTER the cursor is on the next line, right next to my little beloved snail pal.

Also notice there's a $FG[048] color tag before a (!.#.>>) thing...this is the color of the little arrows that come at the end of my prompt line.

What else did I do...
I added LEAVES to it too. This is going to happen in the group of lines called # git settings. "Clean" means there are no changes to your git file, "Dirty" means there are uncommitted changes...something like that. Mostly, you'll be working in a "Dirty" state, so keep in mind you'll see it in this form most frequently. Here's what my git settings code looks like:

Notice I kept a copy of the prefix up above so I can revert back if needed. The end of the ZSH_THEME_GIT_PROMPT_PREFIX line has a color tag...that actually applies to what color your current git branch will be. I chose white. Then notice on ZSH_THEME_GIT_PROMPT_DIRTY it has a teeny tiny *...this will show up orange, and be present when I'm working on a "Dirty" file.

I uncommented the entire # right prompt lines of code because I just didn't want them.

There's stuff in there about # hg settings, I think that's another code editor?

SUMMARY

Here is my terminal now:

For the smarty-pants, I have summarized the process in only 987954837 steps!

Terminal root dir: code .zshrc
Change ZSH_THEME to "random"
Use $SHELL in your terminal to cycle themes
Remember name of the one you like
Terminal root dir: cd .oh-my-zsh then cd themes then code [theme].zsh-theme
"Save As" a new file name in ".oh-my-zsh > themes"
Change ZSH_THEME to your chosen theme
Alter your custom theme file using $SHELL to refresh
Repeat until satisfied

If you want to get DEEPER, here are some helpful resources:

Love from me

Pogs aren't obsolete, they can still help us understand Rails vocabulary...

Inee Ader 🐌 — Mon, 09 Nov 2020 04:28:59 +0000

You might be learning about setting up a Rails Application with Ruby using Active Record! Whew, lots of words.
Let's talk about how our Rails Controller Actions correspond to the HTTP verbs, website URLs, and CRUD actions.

I'm assuming you're using the MVC format of App-writing, which is to say you have Models, Views, and Controllers! Real quick, the Model holds the logic of the App and its relationships to the other models. The Views directory holds the code responsible for what the user SEES on your App site. The Controller's job is to be the middle-man between the Model and View, relaying data from the App to the user, and requesting data from the user to the App.

There are four CRUD actions that are considered necessary for persistent storage application. Persistent storage refers to any data storage device that keeps power after the device is powered off, such as a hard disk or a solid-state drive. In the case of Internet-ing, it's what keeps track of user data, payment info, and other records.
First let's list out the CRUD actions:

C is for Create
R is for Read
U is for Update
D is for Delete

These are basically the bare minimum that an App's model should be able to perform. Like, CREATE an account, READ (show) my account information, UPDATE my account information, or DELETE my account.

Then there are 5 HTTP verbs. This is the TYPE of action performed on any given resource by the server:

GET
POST
PUT/PATCH
DELETE

These verbs correspond to each of the CRUD actions:

GET is a Read--just retrieving information from server.
POST is a Create action, making a new entry in the database.
PUT is an Update action...but for an entire resource, meaning it overwrites the WHOLE entry in the database.
PATCH is also an Update action, but this time it's just changing one piece of that resource's entry, not the whole thing.
DELETE is self-explanatory, but I'll write it anyway--it is a Delete CRUD action and it removes the whole resource. (Btw, HTTP stands for HyperText Transfer Protocol, a seemingly vacuous phrase whose meaning doesn't help anyone.)

On top of that, there are 7 distinct Controller Actions, which are defined as METHODS in your resource's controller page:

#index
#show
#new
#create
#edit
#update
#destroy

These also correspond to each of the CRUD actions, I bet you can figure that out. You need to write these as methods in the controller page so that the resource knows what you're talking about when you call those methods. The #index, #show, #new, #edit actions usually point to a page in the Views directory of your resource--then you can code out what you want to SEE when the App calls those methods.

And lastly, this all has to follow RESTful conventions. It stands for REpresentational State Transfer, which just sounds like a random selection of ambiguous words, but don't worry about that since NO ONE ever refers to it that way. Defining the concepts of being RESTful in your code is...in one word, labyrinthine...

...and it's a bit frustrating that we have to deal with 4 different sets of vocabulary in order to instantiate our Rails App, but that's just the way it goes.

What does RESTful mean, though? Well, tough call because researching a concise definition is apparently impossible and cryptic at best, otherwise bordering on the occult. Everything about RESTful conventions is 30 pages long.

Best I can do is this, To be RESTful is to have standardized labelling rules for your URLs that everyone can understand because it's so obvious. Now YOU try to define RESTful conventions in one sentence.

Here's an example. You like Pogs because you're a huge nerd with nostalgia for the 90s. You make an App to catalogue your collection and assert your Pog superiority. You create a Pog RESOURCE with a database. You'll have a Pog model page and a Pog Controller page with a matching Pog view page. I don't want to seeds.rb a bunch of weirdo Pog data, so let's assume that YOU carefully added names and descriptions for each and every Pog in your illustrious collection.

Pog is your resource, this resource has a Model, View, and Controller!

Next you write an index method in your PogController:

This tells the Pog model page to put all the pogs you ever added (in your db file > migrate > bunchanumbers_create_pog.rb file) into an instance variable @pogs for later reference.

Now you'll go to the Views directory, find the Pog folder, and inside there, make a new file called index.html.erb which is what the web App will display when you want to see the index! Rails is so smart, when you call the "#index" method in the PogController, it knows to look for a Pog folder in the Views directory for a file called "index" so it can display(GET) that info.

Inside your Views > Pogs > index.html.erb file, you'll write a simple thing to list all the pogs. Maybe it's like this:

So you launch your localhost:3000 thing in your browser (via rails s) and WHAT IS THE EXTENSION AFTER THAT?! It's /pogs because the RESTful rules would say that "index" is called in the URL by the plural of the resource in which you are listing all those things.

RIDICULOUS ASIDE--((If you wanted an index of all the FROGS you've ever kissed, your page path would be localhost:3000/frogs--calling on the FrogController#index method. That's just how Rails is: the #index method points to the plural form of your model as the URL extension.))--CARRY ON.

Look at this neato cheat-chart I made for this very scenario:

This chart is kind of the summary of what being RESTful is all about...pretty much. When you launch your little localhost:3000 page, you can add /rails/info/routes to the end of that URL and see all the available routes you have thus far in your App. You can also get rid of the paths you're not using by refining your routes page, but that's not what we're here to discuss today.

Now, on this /rails/info/routes page, there's a column called "Path/URL"...really it refers to this SWEET Rails helper method which basically tells you how you can call a URL in your code files. pog_path(@pog) is the path for the #show method in your PogController. An example would be like:

Saying that when you SAVE edits to a Pog (using your strong params private method--read about it here), it'll redirect you to THAT Pog's show page via the pog_path which takes in an argument of THAT instance of the Pog(@pog). Got it?

Couple extra points...you may have noticed that there's no _path for the #create, #update, and #delete actions. This is because those methods will perform an action on the database, but doesn't need to be displayed on the page. The #new and #edit View pages will most likely have fill-out-forms for adding a new Pog, or editing an existing Pog. When your form is submitted, the #create and #update methods will take over to save that entry (#delete will just destroy it from the database).

Also, some of those URLs mention :id in the #show, #edit, #update, and #delete. This is because Rails needs to know WHICH Pog to show, edit, update, or delete. The ID is how Rails will find it in the params hash. Within your methods, you may put something like:

((Real quick, params is like a transient pool of data that refers to the parameters being passed to the PogController via a GET or POST request. More on params))
This sets an instance variable @pog to be a particular Pog found by its ID within ALLLLL the Pogs in params. You'll put something like this inside each method where you want that specific Pog to be referenced.

(((And to be even more concise, you can make a private method:

And then add a before_action :find_pog, only: [:show, :edit, :update, :destroy] line above the list of your non-private PogController methods.)))

Then on your Views > Pog > show.html.erb you can write:

And because you set the @pog variable in your PogController#show method, Rails knows to pull up the name and stats of THAT particular Pog! Wicked smart. You can even add a picture of the Pog in this view page, so people know you have one of the treasured holographic Pog-Slammers that you could win the game with.

So the whole PogsController page looks like this now:

REVIEW

To make a Rails App, you are working with a few different sets of vocabulary: Rails Controller Actions, HTTP verbs, website URLs, and CRUD actions. Refer to that pretty chart in deep teal tones as a nice summary of how those all interact.

Here's the pretty teal cheat-chart again so you don't have to scroll all over the place.

How to Use:

Use the Controller Action to write your methods in the resource controller page, some of those will have matching View files.
URL extension column tells you what to write in the address bar of your localhost page to see certain information.
The HTTP verb is the TYPE of function the server is doing to fulfill your request; some built-in Rails conventions will have a method: tag and you need to tell it which of these HTTP verbs you're using. (Example: <%= button_to "Add New Pog", new_pog_path, method: :post %>)
And Path Helper tells you how to refer to the URL within your code files for redirect_to, link_to, button_to, and the like.

Whelp, hope that reading all that mess was helpful! I'm pretty WET behind the ears in the coding arena, so if I got something stupid-wrong, please let me know!

Destructive Array Methods

Inee Ader 🐌 — Mon, 19 Oct 2020 02:06:49 +0000

Not long ago when I was FIRST dippin' my toes into learning some basic JavaScript coding, I was introduced to 4 common methods of destructive array manipulation! In just a second, I'll go over my silly ways of remembering the difference between PUSH, POP, SHIFT, and UNSHIFT array methods...THROUGH SONG! It's a powerful thing. (Oh yeah, these methods will also work in Ruby arrays too.) Hopefully you'll just read this blog once, and remember this wisdom forever because of how well this page is written.

First of all, an array is a list of single items contained with square brackets []. The data could be in a string ("word(s) contained in quotes"), integer (2), float (3.14), or even an object {with key-and-value pairs}. Each item in the array is called an "element". An example array is like so: ["I want", 2, "waffles", {in my: mouth}, 40.596, "SECONDS AGO."]

Second of all, what's "destructive" mean, anyway? Sounds pretty bad, do we want to be doing this stuff to our code? No, silly goose, it means that the method will permanently alter the original array, so use these babies with caution! ((BTW, non-destructive methods will output the changes to the array, but not tarnish the glory of your original array.))

Ok, so I always got confused with the naming of these methods and came up with weird ways of remembering them. "Push" and "Pop" kind of make sense, but what in heck does "Shift" and "Unshift" mean? If this helps you, I'll be quite surprised but also delighted! Without further ado, it's time for me to get some songs stuck in your head.

=====================================================
PUSH: "Push it real good!"

I think about the song "Push It" by Salt-N-Pepa. Most people think this song was meant to be sexual...and I will admit I thought it was too. HOWEVER, on doing some research (you get really good at googling when you're a programmer apparently), I learned that Salt-N-Pepa neva actually meant this song to be sexual!!! They meant for this song to be about PUSHIN' IT ON THE DANCE FLOOR. I think about how you can "add to your dance moves via wiggly booty movement", ergo "adds an element to the back end" of your array.

Example:

array = [0, 1, 2, 3] array.push("PUSH IT REAL GOOD") array is now [0, 1, 2, 3, "PUSH IT REAL GOOD"]

This method needs you to specify what element to add. In this case, it's adding a string to the end of our pretend array. Mr. Bean's got a good PUSH signature move, try it out!

=====================================================
POP: "Pop, lock and drop it!"
So for this one, I think "Pop, Lock and Drop It" by Huey. In my mind...it'll pop, lock, and drop it...OFF THE END. This method "removes an element off the back end"! Just pop that thing right off. Get it out of here. Easy-peasy-to-remember-squeezy.

Example:

array = [0, 1, 2, 3, 4] array.pop array = [0, 1, 2, 3]

Since it is just removing the last element, you don't need to designate that element...its just gonna be like array.pop and it knows how to do its thaaang. "Pop, lock, and drop it, get low, aight?"

=====================================================
SHIFT: "We gotta get schwifty in here!"
This method "removes an element off the front end" of the array. This one's kind of round-about...I think about Rick and Morty's song "Let's Get Schwiftyyy". It's a pretty great song, but I remember how Rick's adventures usually blow the top off Morty's head, kind of. So losing something off the front of the array is like having the top of your head explode.

Example:

array = [0, 1, 2, 3, 4] array.shift array = [1, 2, 3, 4]

Holy Sh*ft, Morty! It's mind blowing, Morty! It's gonna explode your little b-b-brain out of your head, Mortyyy. It looks like this: array.shift and doesn't need to know what to remove, Morty. It just knows to take off the first thing, forever.

=====================================================
UNSHIFT: "Unshift my heart..."
Ok...I admit, this one's a long-shot, but it worked for me.
I remember Toni Braxton's "Unbreak My Heart"...which is like...undo it. Put- put it back...PUT THAT THING BACK WHERE IT CAME FROM OR SO HELP ME! I view the heart-area as part of the upper body, so this method will "add an element to the front" of the array.

Example:

array = [0, 1, 2, 3, 4] array.unshift(5) "Unshift my heeeaaaaart..." array = [5, 0, 1, 2, 3, 4]

For this method though, you need to tell it WHAT piece (element) to add back, so make sure you put that in parenthesis after the method. It'll look something like array.unshift(3), get it? I'm adding an integer to the front of the array...like I had 3 missing pieces of my heart to add back.

=====================================================
So let's review these odd-ball musings:

PUSH IT REAL GOOD: adds element to the back.
POP, LOCK & DROP IT: removes element from the back. You have to tell it WHAT to nix.
YOU GOTTA GET SHIFTY IN HERE(, MORTYYY): /Morty's brain explodes/ removes element from the front.
UNSHIFT MY HEART: adds element to the front, you have to tell it WHAT to add in front.

Can you hear the songs in your head? Can you? I hope they're stuck in your head, but also helpful and amusing. Do YOU have weird techniques to remember these too, or am I just bonkers?

((Also, I'm still a super baby beginner at code, so if there are glaringly horrific mistakes in what I'm saying, please try to leave a nice-ish comment and I'll fix it!))

Thanks for reading!