DEV Community: bmgeier

Learning flask and prepping for the end of boot camp

bmgeier — Thu, 30 May 2024 14:37:59 +0000

Phase four of Flatiron School focused on learning Flask to build fullstack applications. I worked on a e-commerce store with three other students which, if implemented, would allow users to buy and sell collectables from their collections/

This phase also taught the basics of cybersecurity, including authenticating users and hashing passwords.

I'm looking forward to building my own full stack application in phase 5. After that, its time to hit the job market, which is scary but also exciting.

CLI Games and Git struggles

bmgeier — Thu, 30 May 2024 14:34:09 +0000

For my phase three project at Flatiron School, I worked with two other developers to develop a command line interface game. This is what video games were like back in the 70s and early 80s, before consoles and home machines were powerful enough for graphics.

We made a text adventure set at a slightly strange version of Flatiron School where you have to answer questions about Python coding and win games of chance to move on.

The biggest issue we ran into actually had nothing to do with coding -- it was making sure our version control practices were sufficient. A few times, multiple team members were working on the main branch and we had merge conflicts.

By the end, though we produced a fun, cheeky game that can also help future Flatiron students prepare for their Phase Three Assessment!

CLI Games and Git struggles

bmgeier — Thu, 09 May 2024 13:17:21 +0000

We made a text adventure set at a slightly strange version of Flatiron School where you have to answer questions about Python coding and win games of chance to move on.

By the end, though we produced a fun, cheeky game that can also help future Flatiron students prepare for their Phase Three Assessment!

Building a functioning sorter in React

bmgeier — Wed, 17 Apr 2024 16:04:26 +0000

For my second project at Flatiron School I decided to build an archive of emo albums, both allowing me to get back in touch with my high school self and practice building attractive, responsive displays using the React library.

One of the things I wanted to make sure to do was build in a way to sort albums based on the decade in which they were released -- as any emo fan will tell you, after all, there is a big difference between, say, a Braid album from the 90s and a Taking Back Sunday album from just a few years later. Fans of 80s and 90s emo tend to look upon bands that showed up later with scorn, while a lot of fans of 2000s emo don't know much about what came before.

Building this sorter was more difficult than I thought it would be. I kept running into a problem where the sort would work the first time -- say, filtering out all the albums in the database from the 90s -- but on a second attempt to sort it would come up empty.

The first step to fixing this was establishing a second state using the {useState} hook, and putting this in my home component.

After this, I went into my search component and set up an if/else statement inside my search function:

function handleSearch(event){
    event.preventDefault();
    const decade = event.target.value
    console.log(decade)
    if (decade === "All"){
        setRecords(originalRecords)
    } else {

    const filteredRecords = originalRecords.filter(record => record.decade === decade)
    setRecords(filteredRecords)   
    }
}

Here's the basics of what is happening here -- if you select the "All" option of my dropdown menu, the function uses the "setRecords" setter function to return all records using the "originalRecords" getter variable, which we passed down from the homepage. If any other decade is selected, though, we use a .filter() method to only select the albums from that decade, before using setRecords to make those albums display back in my AlbumContainer component:

const mappedRecords = records.map(record =>{
    return <Album key={record.id} record={record} records={records} setRecords={setRecords} darkMode={darkMode} setDarkMode={setDarkMode}  />

Search is a difficult function to set up for beginners -- in another exercise from this phase, I (along with many of my cohortmates!) struggled to build a real-time search function that would still work when characters were deleted from the search bar. Make sure you're building in logic that accounts for all possibilities!

An introduction -- and a bit about how to use .filter() with multiple parameters

bmgeier — Mon, 25 Mar 2024 18:59:11 +0000

Welcome to my first blog post here on Dev -- I'm excited to join the community and meet interesting people working in the industry.

I'm going to talk about a technical challenge I recently faced as a new developer and how I ultimately solved it, but first, I thought I'd give a bit of background about how I ended up 35 years old and joining a STEM field for the first time.

From 2018 through 2023, I worked as an editorial staffer at a FinTech startup. I wrote about personal finance and hopefully helped people make better decisions with their money -- all the while improving the brand recognition of the company and bringing potential users to the site through the power of SEO. I never imagined myself working at a startup -- when I was in journalism school I imagined myself as an old-school ink-stained newspaper reporter, winning prizes and traveling the world. I came to really love that job, though, which made getting laid off in June 2023 even more painful.

I took a job at a major legacy news company a few months later, again writing about personal finance. This job was, to be frank, a bad fit -- so I ended up quitting to find something better. I realize quickly, though, that while that job had been a particularly bad fit, I was also bored with my career in general -- and I needed to make a change quickly. A few conversations with friends and family -- plus thinking about the engineering team at that startup -- led me to software engineering and, ultimately, Flatiron School, where I'm currently finishing the first phase of a software engineering bootcamp.

Which brings me to the real meat of this blog post -- a bit about how I used my newly acquired and still percolating development skills to solve a problem regarding array iteration and searching in a JSON file.

For my first project at Flatiron, I built a simple tool to search through a database of playgrounds in Brooklyn -- something that would be useful to me, a parent constantly looking for something to do with my daughter.

After building a JSON database with around 25 playgrounds to start with, I set up an HTML form with three radio buttons for inputs, asking users if they need their playground to have bathrooms, wheelchair access and inclusive play elements.

From there, I wanted to return a list to the user of playgrounds that fit their needs. I knew how to use the .filter() array method to find the elements of an array that fit one parameter, but I didn't know how to do so for multiple inputs.

This is going to sound made up, but I shit you not -- I realized how to do it one night last week when I was just about to fall asleep. While I didn't do the movie-scene thing of jumping out of bed, running to my computer and going on an all-night coding binge, I did get up, grab my notebook and sketch out a solution.

I still had a few things to figure out the next morning, but the idea that I needed to use a series of if/else statements using the && operator was the key here. From there, it was mostly about nailing down the arguments to put into the .filter() and making sure the list poster correctly. The final code for the first if statement is below:

if((bathrooms ==="yes") && (wheelchair === "yes") && (inclusive === "yes") ){
            const yesYesYes = playgrounds.filter((playground) =>{
                return (playground.bathrooms.includes("Yes")) && (playground.wheelchair === "Yes") && (playground.inclusive === "Yes") 
            })
            yesYesYes.forEach(playground =>{
                const li =document.createElement("li");
                li.textContent = playground.name
                li.setAttribute("id", "playground " + playground.id);
                li.setAttribute("class", "playground");
                li.addEventListener("mouseover", () =>{
                    li.innerHTML = (playground.name + "<br> " + playground.location)
                li.addEventListener("mouseout", ()=>{
                    li.textContent = (playground.name)
                li.addEventListener("click", ()=>{
                    populateMain(playground)
                })
                })
                })

                document.querySelector("#playgroundList").append(li)

When I first wrote my code, I was returning an empty array when I tried to console.log() the "yesYesYes" constant created in the code above. After a good bit of mucking about and a small amount of head-desk slamming, I realized two things were happening -- first, I was using the === operator for the bathroom parameter when I needed to use the .includes() method. This is because the JSON database includes an additional detail in the in the values for each "bathrooms" key -- if the bathrooms are accessible or not.

Secondly, I forgot to return the new array I was creating. This one made me feel especially dull, but I'm told that's a feeling I should get used to in a career as a developer.

In any event, I hope you've enjoyed this blog. If you're a working dev, please feel to reach out! I'd love to hear from you -- and, let's be real, to work with you! If you've discovered this blog because you searched "how to used .filter() with multiple parameters," I hope this helped you. And if you're reading this because you clicked on if from my LinkedIn, simply thanks for taking the time. I'll be blogging more during my time in boot camp and perhaps beyond.