DEV Community: madelinemc

The Right and Wrong World of Debugging, Reflections from a Bootcamp Grad

madelinemc — Mon, 12 Apr 2021 20:39:13 +0000

I just wrapped up my last review for my web development bootcamp - and the thought hit me, I never thought I would be here. Not that I didn't think I survive once I got going (though times do get tough in the middle!) but I never thought I would even do a bootcamp in the first place. Here is something crazy, I applied to Flatiron School without even having looked at single code tutorial online or watched a how to video... It seems like now kids are born knowing they want to code, meanwhile, my grade school "computer" classes brought me years of The Oregon Trail and that spelling game where they cover up the keyboard and you have to race the clock to type out words. Needless to say, coding was never on the table. But I had a break between jobs that only 2020 could bring and an inkling to try it.

At the start of the bootcamp we were encouraged to embrace the uncomfortable and told that things would get uncomfortable. And uncomfortable they did. While some people thrive on the thrill of debugging, I constantly felt like I was wrong, then more wrong, then less wrong, then the wrongest and at some unknown point I could stumble upon something that put me in the righter direction. But the concept that I was "wrong" and didn't know how to get myself out of it to be "right" was sometimes overwhelming. I think it's safe to say I would have given up before even applying if I had started down the tutorial route.

I come from an art and design background so I am used to the only limit to "right" options being my own imagination, my own creativity. Does this shade of pink go with this particular shade of coraly orange? I like it, so I think it does, so I'm right. But if I didn't like it, I have a whole rainbow to pick from. At first debugging seemed so black and white and so limiting. Fast forward to the end of the bootcamp experience, I have had some good practice hanging out in the "wrong" camp while debugging and I now see that there are many approaches to problem solving. And I imagine that within the complexities of a large scale program and in a workplace environment, there are many more creative ways to lay out logic and problem solve along the way. If bootcamp was about getting comfortable being uncomfortable, I am looking forward to my first job in web development to keep me on my toes and once again challenge me to the uncomfortable!

ps - portfolios are very important in my previous career and I was somewhat surprised to find out they are important in the code world as well. Curious if anyone has any ideas on a compelling way to marry a design and technical portfolio? Thanks!

Using Rest Client for Seeding Database

madelinemc — Sun, 11 Apr 2021 20:18:24 +0000

With the shortest requirement list yet, the sky was the limit for my final project for Flatiron School - it was almost too open ended but I decided to pay homage to my Art History minor and my love of the Met Museum. Besides the now retired (😢) tin buttons marking your visit(which I also paid tribute to in my button icons), the best part about a trip to the Met is that you never know what you might see as you wander around through her maze of halls and galleries. To recreate a little bit of the excitement of the unknown, I decided to present the user with a sampling of 5 works of art picked at random that will change upon every refresh.

The Met has a really robust API of their collection - over 470,000 distinct objects!

Talk about a lot of data! I needed to figure out how to get at least a sampling of this data into my backend API. I found just what I was looking for in RestClient. In theory it is super easy to use and I will give a few quick steps below. I say in theory because I think it depends on how well set up the API is that you are pulling your data from. If you are wondering, the Met's was really easy sometimes and really hard others - some of the art objects were missing attributes that I wanted to pull so I had hand hold my seed file during some of the departments. For brevity sake, I will use one of the easier bit of data to pull - the Met's list of departments. (seeding the art objects themselves was another story all together!)

Step 1:

To get started, add the Rest Client Gem to your gem file, and require it in your application.rb file. Then bundle install in your terminal.

Gem file: gem ‘rest-client’
application.rb: require "rest-client"
terminal: $ bundle install

Step 2:

To set up your MVC file structure, you'll want to play around with what the data looks like coming from your chosen API. The Met gave several examples so I was able to pick the information I wanted to save about each department and artwork and then set up my models and database migrations accordingly.
Once models are generated, create and set up your database by running in your terminal window:
rails db:create
rails db:migrate

Step 3:

Next up is the seed file. You'll want to a make a method for collecting the data that will then be called when you run the seed file. The gist is: save the data from rest client to a variable, parse the data and save it as JSON, and use the data you want to instantiate new instances of your class.
This is what the Met's department query returns:
So my department model is simply,

Save the data from using RestClient to query the API database to a variable:

department_data = RestClient.get('https://collectionapi.metmuseum.org/public/collection/v1/departments')

If the query returns a 200 success code, save the parsed data to another variable:

parsed_department_data = JSON.parse(department_data)

Pull the data you want from the JSON and save to a variable. In my case, I am pulling the department objects creating an array:

department_array = parsed_department_data['departments']

Iterate over the array to create new instances of your class with each item in the array:

department_array.each { |dept|
    department = Department.create(
        name: dept['displayName']
    )
}

Step 4:

Call the method by writing the name of the method at the end of your file and in the terminal, run the file to seed your database.
Here is the full method and call in seeds.rb:

def get_department_data

    department_data = RestClient.get('https://collectionapi.metmuseum.org/public/collection/v1/departments')
    if department_data.code == 200
        parsed_department_data = JSON.parse(department_data)
        department_array = parsed_department_data['departments']
        department_array.each { |dept|
            department = Department.create(
                name: dept['displayName']
            )
        }
    end

end

get_department_data

terminal call:
rails db:seed

Step 5:

Once all of your data has been saved in your database, it can be viewed in the browser at your localhost and can be accessed via a fetch request from your front end API.

Create an index route in your controller that renders JSON:

def index
        departments = Department.all
        render({json: departments, except: [:created_at, :updated_at] })
end

Opening the route in the browser window looks like this:
http://localhost:3000/departments

For a more complicated use case, I will write next about seeding the artwork objects associated with each department - stay tuned :) And please let me know if you have any suggestions about using Rest Client.
My seed file can be found here: ArtStart - Back-end

Using Javascript Drag and Drop to Create an Interactive "Form"

madelinemc — Mon, 08 Feb 2021 01:03:33 +0000

With my fourth project at Flatiron School, my cohort lead told us to make our projects as interactive as possible so we can showcase as much Javascript DOM manipulation as we can. I decided to make an ice cream ordering app (partially so that I could doodle out cute ice cream graphics) because I thought it would be really interactive to have a form that, as the user selected their ice cream ingredients on the form, the ice cream would "build" on the side by the images stacking on top of each other. As in, when someone was prompted to choose their base, either a cup or cone image would pop up and then when they selected their flavor from a drop down in the form, an image on that ice cream would pop up inside the cup or cone. After presenting my idea, I was challenged to ditch the form entirely and come up with a more creative way to build my ice creams....

Challenge accepted! ;) Since I was already planning on using images to represent the ice cream order ingredients, I decided that they should all be rendered on the page at once and the user can choose visually which items they want. No drop downs or input elements! In order to accomplish this, I had to use the Drag and Drop API.

The first thing to do is identify what the draggable element/s are and what element is acting as the dropzone, ie where the draggable item will be released. Mark the draggable element as such by adding draggable="true" to the element's tag. I added this to the img tag of each image upon it's creation:

<img id="${toppingType.name}" data-id="${toppingType.id}" data-class="ToppingType" draggable="true" ondragstart="onDragStart(event);" src="./public/images/${toppingType.name}.png" class="builder-image">

Now when my ice cream flavors render to the DOM they are draggable. But nothing happens during the drag or on the drop yet.

To handle the actual dragging and dropping, I had to use onevent handlers. According to MDN, "HTML drag-and-drop uses the DOM event model and drag events inherited from mouse events." There are 8 drag event handlers but the three I used in my project to make my interactive "form" are - ondragstart, ondragover, and ondrop. These event handlers use information from the dataTransfer object to keep track of information about the state of the drag through the setData method.

Following the MDN documentation as well as this helpful guide, I set up a separate .js file to hold my three drag event handlers:

function onDragStart(event) {
    event.dataTransfer.setData('text/plain', event.target.id);
}

function onDragOver(event) {
    event.preventDefault();
}

function onDrop(event) {
    const validDropzone = document.getElementById("grid-viewer")

    if (event.target === validDropzone) {

        const id = event.dataTransfer.getData('text')

        const draggableElement = document.getElementById(id)
        const dropzone = event.target
        dropzone.appendChild(draggableElement.cloneNode(true))

    } else {
        event.preventDefault()
    }

    event.dataTransfer.clearData();

Then, mark the html element that is serving as the "dropzone" with the ondragover and ondrop attributes as:

<div id="grid-viewer" class="grid viewer" ondragover="onDragOver(event);" ondrop="onDrop(event);" hidden></div>

That took care of rendering my draggable ice cream ingredient images and handling dragging and dropping them into the dropzone div but it doesn't quite finish up all the duties required of a typical form - it has to submit the data! In my case, this meant sending separate fetch requests to my Rails API backend to persist all of the different ingredients in that particular order. I accomplished this by grabbing all of the children of my dropzone, iterating over that HTML collection and, through a switch statement, firing off fetch requests to the appropriate table in my database, whether it be for the base, flavors, or toppings. And finally, it's ice cream time 🍦 !

Please check out my repo for all of the code and, as I am just learning, feel free to leave any comments and suggestions for me :)

My First Foray into Active Storage

madelinemc — Tue, 05 Jan 2021 05:51:54 +0000

After spending the first few weeks at Flatiron School mostly stuck in the plain ole boring terminal, I was ready for some color by the time the Rails project came around. Needing to utilize a has many and has many through relationship and wanting to build on my relationship with antiques and flea markets (I love them and could browse all day every day), I came up with a concept for users to post both flea markets and antiques purchased at different markets. It is a way for users to catalog their collections and also get a sneak peak at what types of antiques different flea markets have to offer. And the most exciting part - photos of antiques are involved!

Now all I had to do was figure out how to integrate photo uploading to my project... I proceeded to set all of my models and controller actions up so that antiques and markets could be created, read, updated, and deleted by users but I had no idea what to do for inputting photos. My first attempt was to create a column in the database titled photos with the data type of string thinking that I could take the users input of a URL that points to the photo they want to upload. Then when it was time to display the photo, I would put that URL into an <a> tag. But then the user has to first save their photo somewhere else then copy and paste the URL.. There had to be a better way!

Insert Active Storage. 🙌 🙌 🙌 🙌

And blobs! More on that in a bit.

Active Storage is a way to upload files to a cloud sharing service like Amazon S3 or Google Cloud and attach the files to Active Record objects. This way the files, photos in my case, can be called upon as if they were another attribute on my model: antique.antique_photo <<Feels like magic because the set up honestly couldn't be easier! The documentation is super straight forward so I encourage anyone who wants to add photo uploading capabilities to their Rails project to check it out but I wanted to write a quick overview of the way the files are stored.

Active Storage works by creating two tables in your database: active_storage_attachments and active_storage_blobs.

On the active_storage_blob table, each row is referred to as a blob and contains information and details about the file that is uploaded such as the file's name, content type.

Active_storage_attachments is a polymorphic join table that stores three things -

blob_id (the row id of the chosen file on the active_storage_blob table)
record_type (this is the model that you want to have the photo)
record_id (this is the id of the particular instance of the model that the photo will be tied to)

To set up Active Storage -
First run $ bin/rails active-storage:install and then $ bin/rails db:migrate to add the tables.

Then, inside config/storage.yml declare the Active Storage Services - what service you will use to store the files. In my case, as this is just a project, I used the local disk but the documentation references other services.

local:
  service: Disk
  root: <%= Rails.root.join("storage") %>

Inside config/environments/development.rb, tell Active Storage to use the local disk with

config.active_storage.service = :local

That's it for the file set up for local storage. All that is left is implementing it into the MVC structure.
In your model that you want to have a photo, declare the relationship with either has one or has many:

class Antique < ApplicationRecord
  has_one_attached :antique_photo
end

class Market < ApplicationRecord
  has_many_attached :market_photos
end

To their respective controller, add :antique_photo and :market_photos to the strong params private method.

Update your form in the view to add the ability for users to select their file and upload it:

<%= form_with model: @antique, local: true do |f| %>
    <%= f.label :antique_photo, "Add a photo of your antique: " %>
    <%= f.file_field :antique_photo %>
    .....
    <%= f.submit "add antique", :class => "button_submit sage" %>
<% end %>

And that's it! As mentioned earlier, the photo can be called by @antique.antique_photo and used to render it in the browser as <img><%= image_tag @antique.antique_photo %></img>.
It is important to note here that you can refer to your photos by whatever name you'd like (:avatar, :picture, :profile_picture, etc) just make sure that you reference it the same way in the model, view, and controller.

Using Active Storage might not be the best way to add photos in every case but it worked for my first foray into it and I am happy that my users can showcase their antique collections with photos!
Here is the documentation: https://edgeguides.rubyonrails.org/active_storage_overview.html
This is a really helpful, more in depth overview: https://pragmaticstudio.com/tutorials/using-active-storage-in-rails
And here is my project: https://github.com/madelinemc/oui-flea-antiquerie

Making a Many-to-Many Association with Sinatra and Active Record

madelinemc — Mon, 23 Nov 2020 01:45:35 +0000

With Flatiron’s phase two project, an MVC app using Sinatra and Active Record databases, I finally got a long awaited sense of look at me - I made a website 😎 Now, it's not quite up to snuff with the heavy hitters out there but it really feels like progress in the right direction to me. Especially considering my first project made just 4 weeks ago. It doesn’t always feel like I am progressing that much while going through the daily lessons and labs but this time around the prospect of a project felt more manageable so I decided to challenge myself to make a many-to-many relationship among my models instead of the required has-many and belongs-to relationship.

The biggest challenge came right off the bat when setting up my three models (User, Appointment, Service) and creating the corresponding tables in the database. In a many-to-many relationship, two models are associated through another model. This is the relationship in my app:

ActiveRecord assigns unique identifiers called primary keys to each table and auto-increments as a new record is persisted to the database. In order to associate records on two different tables with each other, the primary key of the has many table needs to be added to the table which holds the belongs-to relationship - this is referred to as a foreign key and noted in the table as tablename_id In my table schema, appointments belongs-to users and belongs-to services therefore it holds the foreign keys of the other models.

  create_table "users", force: :cascade do |t|
    t.string  "username"
    t.string  "password_digest"
    t.string  "first_name"
    t.string  "last_name"
  end

 create_table "appointments", force: :cascade do |t|
    t.string  "time"
    t.date    "date"
    t.integer "user_id"
    t.integer "service_id"
  end

  create_table "services", force: :cascade do |t|
    t.string  "name"
    t.text    "description"
    t.integer "price"
  end

Sinatra gives us meta programming capabilities to associate models by building methods that create the association:

class User < ActiveRecord::Base
    has_many :appointments
    has_many :services, through: :appointments
end

class Appointment < ActiveRecord::Base
    belongs_to :user
    belongs_to :service
end

class Service < ActiveRecord::Base
    has_many :appointments
    has_many :users, through: :appointments
end

Through meta programming and foreign kets my models are associated with a many-to-many relationship and I can call on them to find instances of other models that they are associated with. I used this in many of my controller routes to create instance variables in order to render all of the record's info for the user to see in my views:

  get '/appointments/:id' do
        validate
        @appointment = Appointment.all.find_by_id(params[:id])
        @user = User.find_by_id(@appointment.user_id)
        @service = Service.find_by_id(@appointment.service_id)
        erb :'/appointments/show'
    end

et voila ! This many-to-many association helped me create a fun app where users can make, edit, view and delete pretend nail salon appointments at a not so fun time when we can't make real appointments at actual nail salons 💅.

To make some appointments yourself - please check it out! And always open to suggestions on improving my code. https://github.com/madelinemc/sinatra-salon-appointment-app

Adding a little pretty to my first CLI project

madelinemc — Sun, 25 Oct 2020 23:56:38 +0000

Just like that it’s time for my first project - it’s only been 3 weeks but apparently I can code a CLI program! I almost didn’t believe it at first, especially when the scraping proved to be extremely touchy, but once I found the right website and a light-hearted concept I could play around with for several days, it actually happened. For their phase one project, Flatiron requires gathering information in two scrapes and creating instances of classes and relationships between them. I chose a flower delivery service that sends “bundles” of flowers for people to DIY their own bouquet. A happy little thought for 2020 :)

I used my first scrape to collect the name, price and url of all of the “bundles” of flowers, instantiating instances of my Bouquet class in the process. I present the bundle names to the user indexed and ask for input on which one the user would like to learn more about. The user input initiates the second scrape which adds the description and a list of items included in the bundle to the selected Bouquet class and the displays it. The user can choose to select that instance or return to view all of the instances. Creating the relationships clicked for me but the tricky part was getting all of the methods to work together from class to class and making sure I was writing them in the class that made the most sense. For example, I had my first scrape and the method to print it inside my scraper class instead of within the class that held all of the individual “bundle” instances.

But once I got through the hard part of making sure my methods are all within the correct class and then refactoring so that they are the simplest they could be, I got to start the fun part - adding some prettiness to the otherwise boring terminal output.

You can go a long way in terms of presentation just by adding some \n enters to group certain parts of the program together but I wanted to take it a step further. ASCII art was too large and pixellated for the look I wanted for my little flower shop, but after lots of poking around, I discovered Unicode! Aka cute little symbols. There were lots of flowers - I was totally sold but it doesn’t come with instructions… As far as I could tell, no one else on the internet wants to use flowers to make a logo for a simple command line project.

They are presented as unicode: U+0273F which I discovered Ruby does not like! She does like when you use the literals for unicode along with the quotes and curly brackets, a la: \u{0273F} .
Woohoo, a flower!

✿

Equipped with all my little flowers, I named my CLI project Bloom Shop and went about swapping the o’s for flowers. My first go was setting them equal to variables within my run method and placing the variables directly into a string.

    bloom_one = "\u{0273F}"
    bloom_two = "\u{02740}"
    bloom_three = "\u{0273B}"
    puts "bl#{bloom_one}#{bloom_two}m sh#{bloom_three}p"

But that seemed bulky and the string wasn’t readable when someone scanned over the code. I needed to figure out how to create the variable outside of the method but utilize it inside…insert class variables to save the day! I could call it within a string as well as simply puts it on its own.

@@logo = "bl\u{0273F}\u{02740}m sh\u{0273B}p"

        puts @@logo
        puts "this is the logo #{@@logo} of the shop"

Next up, just a little color. I wanted a lot of choices for adding a little color and the Ruby Rainbow gem does just that. A simple way to use is wrapping your string with Rainbow(“string").colorname or as I did in my project, you can choose an RGB color and note it as Rainbow(“string”).color(0, 0, 0)

    @@logo = Rainbow("bloom shop").mediumspringgreen
    @@logo = Rainbow("bl\u{0273F}\u{02740}m sh\u{0273B}p").color(135,215,95)

Ta-da! Ain’t she (as)purdy(as she could be)?! If only there were a way to make it larger...

See the code at: https://github.com/madelinemc/cli-floral-scraper
And check out lots of other unicode symbols like my flowers: https://www.toptal.com/designers/htmlarrows/symbols/
Ruby Rainbow gem: https://github.com/sickill/rainbow
Also, where I did some digging on the \u syntax: https://docs.ruby-lang.org/en/2.4.0/syntax/literals_rdoc.html

Designing Code: The Start of my Coding Journey

madelinemc — Sun, 11 Oct 2020 22:24:08 +0000

I am a creative thinker by nature, a fashion designer by trade. For four seasons, 12 deliveries each year I designed a new collection. Every collection is composed of colors, fabric, inspiration, trim, prints, styles... the combination of possibilities are endless! No two seasons ever look the same - a thousand different combinations make a thousand different creative solutions to the same problem. There is no right or wrong way to do it, there is only your sensibility leading the way.

With Covid came a halt to the fashion industry and a need to reinvent. Asking myself where there was growth and creative potential during a pandemic lead me to coding - maybe that could be my new medium for designing and creating. All the elements of the design life that I knew seemed there, albeit in different form: websites have color stories, they use proportion through layout, each one is different from the others, surely the person who “made” them must have been inspired by something! I could do it! Yes, I knew there would be nitty gritty but I thought, all of these websites look so pretty, I could design them!…

My newbie coder self is already laughing at my pre-coding self. Although I only have two weeks of the Flatiron School’s First Mile curriculum under my belt, already I’m blown away by the thought process that is required to write code. I thought I’d find the parallels in creative thinking and that if I was a good designer, I would also be a good coder. Instead, I’ve found that coding has turned my whole way of thinking upside down! Gone are the endless solutions to a design problem and all the different ways you could get there. Gone is the notion that you’re never right or wrong. So far I’ve found I am varying degrees of wrong until suddenly it’s right. Sometimes it feels magical, other times, like slow torture. There may be different ways of getting there, but in code, your program either works or it doesn’t and the next part of my coding journey will be wrapping my designer brain around the way the computer thinks.

Here’s to hoping I’ll crack the code and creative problem solve my way to bug free programs that run those pretty websites :)