DEV Community: Syd

QUICK! What is a Fetch and an AJAX for that matter?

Syd — Mon, 12 Apr 2021 02:59:38 +0000

Stop trying to make "Fetch" happen! I am sure many, many JavaScript developers have heard this line over and over again. But we did make it happen, and it works so well.

But what is Fetch? It is not the hottest Gen-Z or Millenial term coined by Gretchen, played by the wonderful Lacey Chabet. Nor is it a great game to play with your pets! It is a terrific interface for making AJAX requests in JavaScript. Oh no, I may have lost you. What is AJAX, you ask? AJAX is short for Asynchronous JavaScript and XML. Let me explain asynchronous JS before diving deeper into Fetch().

Asynchronous JS or AJAX is excellent because it allows us, developers, to update a webpage without reloading the whole page. We can request and receive data too once a page is loaded. This is useful if you have many items on your page and you did not want to reload the whole page every time a user interacts with a piece of it that needs to send/receive data. Doesn't this sound awesome already?

So how does AJAX work? Technical terms: JavaScript uses a built-in object called an XMLHttpRequest (XHR) to make HTTP requests to the server and receive the data back. It is like Gretchen passed a note to Karen in class to share out that there was a party later without the whole classroom realizing it. And in turn, Karen screamed out with the information, thus updating the classroom. You make AJAX calls to refresh content in some ways, usually to update the webpage elements.

(image from tutorialrepublic.com)

Since I super-simplified AJAX calls, here are some excellent links for more information about Asynchronous JS:

Why am I making Fetch happen? Fetch is one way of making AJAX calls on your webpage. Fetch is an API that allows you to request for a resource (AJAX!) asynchronously. If you use the fetch() method, it will return a promise that resolves into a Response object.

Promise = an object which represents a future result.

The Response object holds the information we want or need to update the content on our webpage. Usually, we will still have to format it in some ways. However, since we used a Fetch and its usage of AJAX calls, the user can remain on the page while we go and get info and bring it back to them or even POST, PATCH, and DELETE without changing the screen for the users. We can help with limiting load times and clicks on the user's end.

Using the Fetch API, has many benefits including the usage of .then(), .catch(), and .finally(). These additional methods allow us to work with the fetched response object more before moving on to another function or script.

.then() allows us to either look closer at the data, modify it, pass it as a param, and more.
.catch() is get for error handling (see the first link below about Try...Catch for other error handling help).
And .finally() allows continuation to another function or step if we were waiting for any additional user input that we did not receive.

You'll see here in this Fetch; I used all three to grab data, call a function, catch any errors, and move on (or reload).

This fetch is also updating some data. Again, this allows for updates without doing a full page reload to continue working our site/page without additional navigation or clicking. I don't have to tell you how much better of a user experience this is.

Setting up a fetch method is simple but can be daunting. Note, there is only one that is required: the URL. Where do you want the fetch to go? After that selection, using fetch methods will be a breeze. After selecting the URL, I highly suggest looking at the response code using the {debugger} call, the web console debugger, or even console.log to determine what you received and can manipulate.

Fetch Links:

Once you see what type of data you can retrieve, you can start using it. Fetch is by default a GET request, but as I mentioned earlier, you can use Fetch to make other calls as in my example I used it to make a PATCH request. You can "send" this data by using the OPTIONS params in fetch. See the above links for more information

Rails & Breadcrumb Options: Choose Gretel!

Syd — Wed, 10 Mar 2021 03:42:45 +0000

There are a surprising amount of options when adding breadcrumbs to your Ruby on Rails. From Ruby Gems like breadcrumbs_on_rails to Bootstrap's CSS magic, you can make it super simple or as fancy as you want. For my project, I decided to use Gretel. It ended up being a fun, semi-easy add, and I'll show you how I did just that and how I overcame a hurdle: breadcrumbs failing on nested routes.

First installing and setup was a breeze; I added the gem to my Gemfile and ran bundle i.

Easy peasy, next I used the command below to create the breadcrumb configuration file that Gretel would be using. And it did create the breadcrumbs.rb file in my config folder.

$ rails generate gretel:install

Following the README examples, I first added my root path or Home path, in my case: a Dashboard, and a path to my Artists index page to test out the code.

Now I needed to get some logic somewhere to display these breadcrumbs! Since this was a Ruby on Rails project, I was able to use the views/layouts/application.html.erb file and include the following line:

<%= breadcrumbs separator: " &rsaquo; ", style: :inline %>

This told the program: every time I call for "breadcrumbs," add a right angle bracket " > ", and style it 'inline.' There were a few options for breadcrumb styles, and I did check out Bootstrap since I was also using Bootstrap for the rest of my CSS. However, I did not like the boxy look with my already styled navbar. So I stuck with the 'inline' look.

Okay, I jumped ahead for a moment. How could I have compared the styles yet? I affixed the final bit of code needed to my artist index HTML page at the top!:

<% breadcrumb :artists %>

In this instance, my code was directly calling the :artists breadcrumb method. Since I did not require a class instance, I did not need to call one here, but my subsequential breadcrumbs did. Replace calling the method with the instance handled those. So did it all work? It sure did!

The ease ignited me! I was adding breadcrumbs everywhere! I could not be stopped. Or so I thought. I was nearly done when I realized that my URLs did not match my breadcrumb for some pages. Honestly, my navigation did not match my breadcrumb. It was my nested route.

In my project, users were able to view the photocards they created from their artists' pages. The users from the artist page would click the photocard to view it. The photocard belonged to the artist, and the artist has many photo cards. I created nested routes for them, so the URL was "/artists/id/photocards/id". Yet, the breadcrumb could only spit out:

Nothing in the README examples covered this particular case. The links to the additional Docs were dead. I found a blog that worked through adding Gretel, but they too did not cover this case, and their 2014 live code link was dead. I was finding dead end after dead end. I even spent a few hours attempting to use the Recursive Parent and Search URL examples. Facepalm! Of course, that would not work, especially how I was using them (I will not try to explain my craziness.).

After taking a break and a whole evening off, I thought of the answer just before I fell asleep, actually: helper methods! Luckily, I had set up omniauth previously for my project and had to look at my request.path a few times. More inspiration! I never thought I would wake up being excited to code.

Helper methods; if you never used them, start today! I did this for the first time, and I ended up making 13 total.

Back to the program, I decided to see if Gretel can see the URL and pull any params out like 'users' or 'artists.' If Gretel could see, I would have another step to take in debugging. At this point, I had no clue what to really do; I knew I needed to work with the tools I had and solve the puzzle before me. One could say I was hammering until something fit, but I really did feel like I was just tinkering until I heard it...click...

In my breadcrumbs.rb file, I added a 'binding.pry' just after my link command and refreshed my page:

crumb :photocard do |photocard|
    link photocard.title, photocard
    binding.pry
end

And in the terminal, it was easy to ask for the 'request.path'

Great, so could I also do...

request.path.include?("artists")

We took another step. I did not even try anything else; I decided to use this one line to make my helper method. I could have pottered around more to see if there were better things to ask for; however, I felt like Charlie and his Golden Ticket. I had a ticket out of this debugging mess! Yet, was this ticket truly golden or just a bag of mineral pyrite?

In my application_helper.rb, I created the simple method:

   def include_artist_path
        request.path.include?("artists")
    end

and added it to an if/else statement in my breadcrumbs:

crumb :photocard do |photocard|
    link photocard.title, photocard
    if include_artist_path
    parent photocard.artist
    else
      parent :photocards
    end
end

then clicked refresh & held my breath...3...4...3...2...1...

The epic victory pose I made could not have been more phenomenal. It seemed so simple yet so complicated, considering my rails experience consisted of just this project. When people tell you, "Coding has peaks and valleys," they were not kidding. I overcame this hurdle and presented a project I love. Gretel was an excellent choice for my breadcrumb needs as I didn't need much.

Maybe one day, I will fork my project and try out other breadcrumbs or give them a shot for the next project. Always try a new tool, I guess. I never know when it might be beneficial!

Debugging tips I learned while working with Sinatra

Syd — Sun, 14 Feb 2021 06:41:03 +0000

“Don’t let 2021... be 2020 part two for you.” ~ Tobe Nwigue, Wake Up Everybody, music video

2121 has been started with a bang, and it is not showing any progress of slowing down. I'm actually editing my entire blog and changing its direction because of how crazy my life and this my Sinatra project became. I intended to explain how to add some simple Bootstrap CSS to your Sinatra web app. Instead, I'm going to give some quick debugging tips I learned on the fly after a frustrating week and a half of coding...

Problem #1 - Scope
The plan:

I planned to build a web app to allow users to create a star-studded lineup of their favorite artists for an all-star version of a show.

The failure:

The project was becoming too complicated, and I found myself adding more and more items. Playing with relationships and join tables for days. After wasting nearly all my development time, I realized I was building a project more suited for the next phase of my course.

Debugging Tip:
Pay attention to the ask! When dealing with open-ended projects, try to complete the given requirements first, the Minimal Viable Product/Project, then get fancy. I stated I wasted hours when honestly I just spent hours elsewhere than where they should have been and missed the project's original point. I hadn't even completed any of the requirements after nearly four days of coding and debugging.

Problem #2 - Patch - Override
The Plan:
After simplifying my project, I started writing out all my CRUD routes (Create, Read, Update, Delete/Destroy). Since I was using Rake and was also instructed to use Patch to update rather than a Put in my RESTful routes, I needed to use an Override method so rake would know what to do with the Patch. Dope! This is as simple as adding:

use Rack::MethodOverride

to the config.ru file before the Run command.

and

    <form action="/some/<%=@some.id%>" method="post">
    <input id="hidden" type="hidden" name="_method" value="patch">

to the start of the form in the HTML/ERB file. (For a delete, replace patch with delete.)
and

patch '/pets/:id' do
    something action here
end

to the controller file.

Everything should work!

The Failure:
NOPE! Not for me! My Get routes were working. My post to create new items worked just fine on other routes. I can access the edit page. I can edit the fields. I click submit, and nothing happens. It was as if the page was dead. I reworked my Patch route to death, thinking it was something with the params; maybe it was the update method. Finally, I talked with my tech lead, and after repeating the same debugging methods and a few more, we decided to try this...

Debugging Tip:
On the same route the patch or delete, try a regular old post to a binding.pry...assuming you were lucky enough to require it ahead of time. Don't forget about binding.pry!
Remember our form starts like this:

    <form action="/some/<%=@some.id%>" method="post">
    <input id="hidden" type="hidden" name="_method" value="patch">

So in my controller, I create this route:

post '/some/:id' do
   binding.pry
end

With my localhost and app still running Shotgun, I reloaded my edit page and clicked the Submit button. Sure enough, something happened. I hit the binding pry in my terminal. So the Post method is working for the page, yet the Patch override was not.

Back to the config.ru!!!

This is what my config actually looked like at the time:

Everything is there. I have all the parts. Then it happened: line positioning!!! The controllers were above the override. The Patch override was not being seen as the controller did not know about the override methods. Once I moved the Override method to the top of this list, my Patch worked beautifully.

Happy Working Code:

This debugging tip is a three for one.
A) Take a Step Back - sometimes the problem isn't the "most obvious".
B) Use Your Tools - Many people were coders ahead of us. They hit these walls before. They broke through them and built awesome tools for us to use to make sure we don't struggle as much either. Use them!
C) Back to Basics - When in doubt, rely on your coding basics.

Nokogiri...CLI...Gems...Oh My!

Syd — Mon, 11 Jan 2021 05:55:14 +0000

My experience did not prepare me for this: Web Scraping! My latest endeavors in coding booting have brought me to something completely different in a language I am still learning...and it was a challenge.

Honestly, web scraping was not the difficult part. Nor was finding the right CSS or what to do with the data. It was setting up my data & methods and then breaking my code so bad I could not get it to work again before I had to submit it. self.ouch

Instead of wallowing in painful memories, I would like to discuss some of the items I used to build my first CLI application. Flatiron Schools introduced my cohort to Nokogiri. I know what you are thinking. No, it is not a tasty snack. The word actually translates to 'saw' as in hacksaw, handsaw, table saw, but not "I saw(past tense) dead people". It is actually a decent web scraper that works with XML and HTML. It was easy to install and setup. Since it is widely used, there is a lot of great documentation on the web around it.

Setup: please start in your project 
in terminal
`gem install nokogiri`

back in your editor
(in your GEMFILE)
`gem "nokogiri"`

(in your scraper file)
`require 'nokogiri'`
`require 'open-uri'`

def nameofyourgetpagemethod
Nokogiri::HTML(open(http://somepage.com))
end

Here are some of my favorite links:

During the building of my CLI, I switched sites often as I felt I was not getting the "right" data I wanted to use. Fortunately, Nokogiri was able to handle any site I threw at it as long as I was able to correctly parse the CSS. I was able to use your average everyday CSS selectors or even table selectors. There was a bit of plug and play as I figured it out. Thank goodness for 'binding.pry'! Was I tempted to say forget it and try getting data from an API instead; however, I was already halfway through.

My biggest challenge and the one that hurt me the most was gemifying my project. The day the project was due (softdue) with moments to spare, I decided to refactor the code a bit to see if I could complete the extra challenge of turning my little thing into a Ruby Gem. Well.....there is a reason we are always told to commit early and commit often. I did not complete the Gem challenge, but stay turned.....it is coming. For now, don't be scared to scrape a site for your own data needs. It honestly is not that bad.

Making a Gem isn't that bad either

Why I took a leap and went back to school...kinda...

Syd — Sat, 19 Dec 2020 06:19:55 +0000

Recently like many other adults in America and globally, I have found myself with a tidbit more time on my hands than I had anticipated for the year. 2020 started fairly normal for Americans. While some parts of the world were literally on fire, we tried to maintain our normalcy, getting up, going to work, coming home, rinse, and repeat. I was a Test Engineer for a mid-size SASS company based in Austin, TX, and my days were just that. Of course, I live in Austin, so throw in some social get-togethers, live music shows, and a few nature outings as the greenbelts are always calling even in January.

News of the coronavirus was hard to ignore, and my circles and I kept up with reports daily. By February, my social circles were more than concerned about what would happen, yet it didn't seem like much yet. Then March, the virus was already spreading, and we were on our initial uncertainty of lockdowns/shutdowns. The big tech companies: Facebook, Amazon, Apple, Netflex, and Google (FAANG) started to set the example for everyone else: send your employees home and instate a work for home policy for the foreseeable future. Great! My company already had a work from home policy for one day a week. We were able to do this. I forgot to factor in the effects of the shutdowns on the economy, how that would affect my company, and how it would affect some changes that were already happening before the virus even reached our shores.

By May, I was laid-off along with some other amazing people. At this point in my career, I have been working for tech companies for 10 years, been a Test Engineer for 6, and starting to up my automation skills. Besides, my company was not the only one in the area that had to make some "hard decisions". The market in the area was now flooded, and the environment for Test Engineering had rapidly changed to focus on Software Development Engineering in Test or Software Engineers who would like to focus on testing. Something with I knew I could not compete.

I had no chance if I tried to interview although thankfully some of my peers found positions right away and deservingly so. Others decided this was the best time to make the exit out of tech completely. They have been wanting a career change for a while and this was the push they needed. This made me think about myself: my wants and needs. I fell into tech years ago working as a customer service representative for a start-up education tech company before I left there as a QA. I had a natural proclivity for testing and Quality Engineering yet I had no formal training. I was completely self-taught. However, all those years and two companies later I have gone as far as I could with those skills, so what's next?

That was the million-dollar question at my house, and it was not asked by anyone living in my house. After multiple discussions with my partner who is a Java Software Engineer, I decided to take this year and get the education I wanted to be a full-fledged Software Engineer. I was always into computers even as a child, a perk of being a millennial. Yet I was not interested in Computer Science as I did not see where I could fit in that field. As a multiracial queer woman of color, I did not see people like me in tech. Honestly, it was shocking to see my partner with his classmates as he was the only black man in the entire Computer Science program until our Senior year. I already had enough "oddities" or extras that made me stand out. I did not anymore. Of course, I also thought Software Engineering was boring beyond all reasoning. I was more into Mechanical Engineering if I were to have chosen between the two. Although that was not my field of study either. Despite my strong STEM background, high school counselors pressured me to go to English and Arts, a trend I later found that was set on most of the ciswomen students.

So why stick with tech now when I was scared of it in school? What do I get out of it? After falling into it, I found it to much more fun than what I perceived. Also, that scared 18-year-old doesn't exist anymore because I am no longer alone. There are many more faces like mine in the field now attached to various different types of people. Plus I discovered there are many roles to fill as a Software Engineer than just a "keyboard masher". I just need the education to re-enforce my skills and to back up my mouth. Besides I always had a determination to run my own team of whatever, wherever I was. Why not CTO?