DEV Community: JillKlatt

Making a Portfolio Website From Scratch

JillKlatt — Tue, 27 Jul 2021 19:53:13 +0000

It’s time.

You’ve created projects, you wrote your resume, your LinkedIn looks great. On the never ending checklist of Personal Branding and Networking to-dos, you’ve narrowed it down to your portfolio website and fixing your Twitter (aka deleting the Glee-fanfic).
That might be too specific.
But if you’re a little like me, you might be met with the analysis paralysis of where to even begin. Where to host? What language to use? Styled Components or Bootstrap? Or, god forbid, ignoring a template all together and diving into CSS on your own.
You have to find what works for you, but to help, here are some tips and resources:

Tips
Resources
Inspiration

Tips

Don’t be afraid to look for inspiration. Look at your friends and colleagues and connections and what their portfolios look like. But remember to credit where it's due.
Let it reflect you. In the world of first impressions, your portfolio can be the inhale you take before you introduce yourself.
Let it be weird, let it be silly, let it be exciting. It’s recommended that your resume be relatively boring in order to pass through the programs, but here you can use colors and animations and make the buttons bounce in a way that some people might not like but Oh well!
Send it around! Not just to your friends with wonderful design ability, but to your mom! If your mom can’t figure out how to use your dropdown, perhaps that needs some adjusting. Overwhelm yourself with feedback.
But remember that when you receive feedback, it’s one person’s opinion. It might be an educated opinion that you should probably listen to, but at the end of the day it’s your portfolio, it’s literally representing YOU.
Use this opportunity to learn. I graduated Flatiron’s Software Engineering program with a competency in Ruby and JS, but they couldn’t teach me how to have style or taste. My CSS knowledge was incredibly limited, I could not explain what a flexbox was. But by ignoring that tempting urge to go to Bootstrap, I was able to deepen my understanding of how CSS works and (maybe) how to make things look good.

Resources

I used React for my portfolio and hosted it on Github Pages. Here's a great tutorial
Create a personal color scheme
Add CSS animation
Improve your Flexbox skills
Add a tabbed table
Create a free email form

Inspiration

Nicky Dover Reflecting Your Personality
Brittany Chiang Sleek and Smooth
Maxine Meurer Animations and Fun Features
Nicoll Oliver Repurposing a Template
This Giant List

Not only did a learn so much about styling and organizing, but I’m even more excited to show this project off.
I'm proud to say this thing is about me and by me.

View my website here!

Never Stop Learning

JillKlatt — Wed, 30 Jun 2021 20:28:38 +0000

Although my last day of curriculum at Flatiron was technically almost two weeks ago, I feel like my education has only increased. From problem solving with my fellow students to studying for my final assessment to refactoring my project, I have learned so much in the past couple days. It gives me hope (and a little anxiety) to think about the nano-decimal amount I know about this field.

For example, my cohort lead drilled home the importance of understanding the difference between the React Hook useEffect and the lifecycle methods like componentDidMount and componentDidUpdate. I knew useEffect mimicked the behavior but didn’t dive deep until this week. I found documentation and blog posts (the most helpful being https://reacttraining.com/blog/useEffect-is-not-the-new-componentDidMount/) where I learned a few main differences:
componenetDidMount runs after the component mounts (duh), ie if you set state immediately then React knows the trigger an extra render and use the second one as the UI
useEffect also runs after the mount, but also after it has been committed to the screen.
A closer match to componentDidMount is useLayoutEffect

Additionally, I was able to help my friends manipulate local state and set that to the dependency of their useEffect in order to correctly render new input, a change in data, etc.

Finally, I was able to discover new things from my own personal research while trying to refactor my project. I initially passed down props with the necessary story elements for each round in my game. And it was ugly:

It's repeitive, ugly, and I hate it. I knew I could eliminate the props by changing that to the three elements I wanted: ({ villains, rightCardArray, leftCardArray }), so it would stand to reason that I could additionally do that for my keys inside those three objects. My first attempt of destructuring villains proved fruitful:

const { name, description } = villains

However, I knew I would reach a problem with my card arrays. Both objects have keys of the same name (answer, hp, buttonChoice, choice, outcome), so I couldn't define both arrays as such. I knew I could make it work if I simply changed the keys in one or both of the arrays and assigned my values to that, but that seemed like a loss. (foreshadowing)
I remembered from my lessons that you can use destructuring to assign new variables to the values of the array.

const students = ["Jill", "Thunder", "Maggie"] const [jill, thunder, maggie] = students jill => "Jill"

However when I tried this logic on my rightCard array, I received an error:

I decided to change a couple things and add a console.log:

const [answer] = rightCardArray.answer console.log(answer)

And the value I would recieve would change, sometimes it would be 'i'! Which is the value of the round from my loop! So I realized, because I was in a loop, I couldn't nail down the value of the key of my object and destructure it to different variables, I can only assign it if I use the exact keys of the object.
This is apparently because rightCardArray is an 'intermediate value'. An intermediate value is a value that's produce inside an expression that isn't the final expression. (ie

a = (b * c) + d

the result of

b * c

is an intermediate value. source
Not only have I not heard of this term before, I didn't even consider it! It blew my mind; I'm so used to React being able to do anything, it was strange to me that I couldn't reach into my code and grab something and rename it. But it reminds me of the main lesson that my instructor has been drilling into us:
React and Redux are just libraries built out of JavaScript. They are not magic, they cannot bend the rules. And the more I start to think about these in terms of JS and what is happening below the hood, the more I can begin to understand its real capabilities.

Better Than Good Enough

JillKlatt — Sat, 26 Jun 2021 20:48:11 +0000

For my last Flatiron project, I wanted to show the progress and growth I've made over the last five months. In the past I would make projects that met requirements and sometimes had a little flair. For the most part, I made sure I had CRUD functionality and was readable and that's basically where I stopped. But knowing that this project will be the main focus of my portfolio, not only did I want it to work, I wanted it to represent me as a creator and coder. I was able to refactor a few things using my binary search competition experience, and also use a few new techniques like the useDispatch hook and bindActionCreator (in my opinion, the easiest way to use Redux).

I met with my cohort lead halfway through project week, eager to show her my progress. She was excited, but didn't pull any punches about the things that could definitely be changed. For example, my app contains a game that consists of various rounds. My first attempt at rendering those rounds was a simple, hardcoded switch statement, changing the displayed information depending on the round. It was very clunky:

When my cohort lead expressed that it really could be more dynamic, I initially panicked. I knew I could use a for loop to cycle through the rounds, but how would I render the 'villains' and 'cards'? And how would I even change the iteration to match the current round?

The entire situation reminded me of a recent binarysearch.com challenge I completely recently. I've been trying to practice more with my algorithms and problem solving, and it was so exciting to be able to apply that logic to a real world solution.

While that progress was very representative of what I have previously learned, I was excited to display some of the new, relevant information from this section as well:
In class we were taught the use of Redux in terms of class components. We had a bonus lecture explaining hooks but our practice and lessons and labs were all using the explicit use of the lifecycle of components and connect().
Discovering { useSelector and useDispatch } seemed like a life hack. I half-expected it to be off-limits, similarly to scaffold in our third project. But it's not! It's another way to almost replicate the lifecycle, or at least almost mimic the behavior.
The useDispatch hook returns a reference to the dispatch function from the Redux store. I imported it from 'react-redux' and saved it as a variable. Easy as that, you can now dispatch actions you created, making sure you also import the action at the top. Now that you have dispatch available, simply bind it with your action using bindActionCreator,

const createUserAC = bindActionCreator(createUser, dispatch)

and that action will be implemented when you call your new variable. As with so much of React and Redux, this is not the only way to use access the store or even use hooks, but in terms of my project, it makes the most sense and, in my opinion, looks clean and readable.

In my createUser example, I have an action that looks like this:

export const createUser = (userInput) => { return { type: "ADD_USER", payload: userInput } }

a variable that returns an object. I bound this action with the dispatch function, and when I call dispatch on it (createUserAC), the redux flow takes this object and calls the reducer:

export default function manageUser(state = { username: "", points: 0, }, action) { switch (action.type){ case 'ADD_USER': return { ...state, username: action.payload } ... }

This reducer initially set the state to have an object that looked like

user = { username: "", points: 0 }

and by calling this reducer, with the information from the action, we are able to set the username in the store to our user's input.

This whole process took me over a week to fully understand, but once I could follow the flow, adding new functionality became a breeze. I was able to add 'RESET_POINTS' and 'RESET_ROUND' actions for the end of my game in minutes.

These small aspects of my project have become the focal point for me. In the past I would've been satisfied to have the game work well enough, submit the user to the backend, and shut down. But I wanted to have something exciting and fun and creative to show. I want to have a program that makes people laugh and want to keep playing and want to know more. Most importantly, I wanted to make something I would enjoy if I happened upon it somehow.
And I really did.

Beginning to React

JillKlatt — Thu, 17 Jun 2021 03:46:30 +0000

As I reach my last week of curriculum at Flatiron, I'm trying to reflect on what I've learned, the projects I've made, and my own personal growth.

I started February 1st, 2021, with almost no coding knowledge. I did the prework, but I didn't fully understand what I was doing. I remember FaceTiming my friend on my first day because I was stuck on the second lab, and her husband (a Python dev) offered advice using 'print'. While I now know that print actually does work in Ruby, I was immediately overwhelmed because that's not what I was looking for. I figured I must be completely wrong and I was confused how to even start over.
My first day also didn't go according to plan, because I was using VSCode and not the IDE, and I didn't know VSCode doesn't default to AutoSave.

I can't believe that was less than five months ago.

I can't believe how confident I feel in things I didn't even know existed before.

I can't believe I've created things like this wonderfully silly DM Notebook, or my very first CLI project. And soon, I'm excited to add my final REACT project as the main piece of my portfolio:

(Created 6/16/21, five days before Project Week begins, a lot can happen)

This entire experience has been so phenomenal for me personally. I quit my job and cashed out my 401k and took an incredible, dangerous risk by investing in myself. I would be lying if I said I actually thought, back in February, I could make it all the way on time. I expected I would quit halfway through, or some environmental situation would come up, or I'd get kicked out after being held back too many times.

I've always struggled with recognizing my own value. But this bootcamp has made me challenge those intrusive thoughts that haunt me sometimes. I was able to answer that nagging feeling of "You're not actually understanding this, you're a fraud" with the knowledge that if this were true, my cohort lead wouldn't have let me get this far! I'm able to look at tangible evidence of the things I've created and the knowledge I have and my ability to help people and recognize the upward, exponential future I'm heading towards.

Participating in this has been so life changing in so many ways. I've made friends with people I never would've expected, I've learned a new way of thinking about things and looking at life, and I recognized a potential in myself I've been so hesitant to accept and appreciate.

Just Scraps of JavaScript

JillKlatt — Fri, 28 May 2021 18:19:48 +0000

After four months, one would think I would come up with a better way to say: 'This month has been the hardest project so far!'
But as I find myself struggling to narrow down the hardest part of this month to write about, I'm met with that same sentiment.

My cohort lead consistently reminded us that while we are coming from the high of feeling like Rails masters, this deep dive into JS was expected and normal. However hearing that and processing it and implementing those feelings are all very different.

I immediately felt intimidated by the simple fundamentals of JS. Why do we have to declare a variable using a keyword? The simplicity of typing

jill = Person.new(name: "Jill")

and declaring a function made sense until we also decided to assign those to variables too?? Even as I prepare for my upcoming assessment, I feel confident in my understanding of fetch requests, arrow functions, and array methods, but I know I need refreshers on the Day One basics like hoisting and grabbing elements from the DOM.

Once we began to write in OOJS, I felt a level of comfort return. Creating these objects that we can then manipulate was relatable, and creating methods that only work with those 'classes' makes sense. Pushing the newly created object into an empty array and using .this keyword reminded me of Ruby and I was grateful to that.

This project did give me the opportunity to do things I haven't in the past:

I was so nervous about implementing a pop up feature to display one specific interpreter's information, so for the first time, I created a Pop Up branch on my git repository. Having the freedom to manipulate and mess up my work while knowing my overall project was still okay, was a very exciting new development. I'm glad I gained more Git experience before entering my job search.
I created a Rails API and researched different ways to display my data, like Serializers, but in the end decided to manually create my data structure the way that made the most sense to me. Our past two projects have been working with mostly fake data (at least personally), but to have everything completely original was so exciting and gave me a lot of control.
My last few projects have been incredibly basic in terms of styling. I feel that my strengths are in the 'M' and 'C' of MVC. But I went out of my comfort zone to learn a little about CSS and very basic styling. My initial implementation of a gradient looked like this: (Graphic design is my Passion)

I struggled with quite a few things in JS, as I previously mentioned, beginning the fundamentals was rough. But I also had difficulty displaying things on the page in the way I wanted. For example, I wanted a pop up to appear when you clicked on a "favorite". But Favorites only appear when you click on "Show My Favorites". So this is defintely not the best way to go about it, but this is what I did...and it worked:

```const modal = document.createElement("div")

modal.className = "modal"
modal.id = "show-modal"
modal.tabindex = "-1"
modal.role = "dialog"
const modalDialog = document.createElement("div")
modalDialog.setAttribute("class", "modal-dialog")
modalDialog.role = "document"
const modalContent = document.createElement("div")
modalContent.className = "modal-content"
const modalHeader = document.createElement('div')
modalHeader.className = "modal-header"
const modalTitle = document.createElement("h5")
modalTitle.className = "modal-title"
modalTitle.innerText = `${int.name}`

const closeBtn = document.createElement("button")
closeBtn.type = "button"
closeBtn.id = "close-int-button"
closeBtn.setAttribute("class", "close")
closeBtn.setAttribute("data-bs-dismiss", "modal")
closeBtn.setAttribute("label", "Close")

const span = document.createElement("span")
span.setAttribute("aria-hidden", "true")
span.innerText = `X`

closeBtn.append(span)
modalHeader.append(modalTitle, closeBtn)

const modalBody = document.createElement('div')
modalBody.className = "modal-body"
modalBody.innerHTML = `<li> ${int.email} </li>`


modalContent.append(modalHeader, modalBody)
modalDialog.append(modalContent)
modal.append(modalDialog)
favoritesContainer.append(modal)```

So much. Too much. Nonsense. Could I have put both the favorites container and this pop up in the HTML and hidden both of them? Probably.
But writing out all of this actually really helped solidify a few concepts for me. I was excited that I was able to create something in HTML using JS, because when we started a month ago, I had no experience in either.

As is always the case with these projects, I feel like I don't fully understand the material until I'm forced to do it myself with my own ideas. I can go through the motions in labs and follow along in lecture, but not actually understand the exercise. This process, of trying and failing and then changing one thing and trying again until it yields the result I want, has been the most beneficial and worthwhile exercise of my Flatiron academic experience.

A Raily good time

JillKlatt — Mon, 03 May 2021 04:25:08 +0000

What an original post name, I'm sure no one has chosen to use that before.

At Flatiron, every month we learn something completely new that somehow incorporated and compounds what we've learned so far while also telling us to disregard some of the things we struggled to learn. Last month while learning Sinatra, I struggled at first but really came into my stride right before Project Week. It makes sense, if you need a route, you create one; you tell your program exactly what you would like it to do.
Enter Rails and "automagic".
I struggle when I'm not sure why things are happening the way they are. I understand why you wouldn't thrust all of Rails' logic onto someone so green and expect them to succeed but woof. If you check their documentation, creators stress how Rails "Optimizes for programmer happiness with Convention over Configuration," which I know I will benefit from as I continue on my coding journey. In the beginning however, my classmates would suggest a solution to a problem in lecture and I would be left scratching my head. I finally became comfortable with forms but now things are different and have models, and routes are now in the config folder? What? Absolutely insane to me.
Slowly I began to realize the amazing things that Rails makes possible. By using ActiveRecord associations, you're given so many methods you don't have to build out. For example, in my project I have two tables ('characters' and 'campaigns') connected by a join table ('adventures'). With the power of Rails magic I can call my_character_name.campaigns and return an array of their campaigns. All of the hard technical work is done for you, as a user one must simply sort out what you want it to do.

For the most part, relying on RESTful routes makes the project relatively understandable and once you get the hang of things, you can easily create new columns on your table and incorporate them on your views (see above).

I ran into a few issues with my nested route. I wanted a user to be able to create a new character while in one certain campaign. That character would persist and the user could add them to different campaigns, but when they create it, the association to the first campaign is already made. I initially thought I would need to call on the individual instance of the inner join table, something like

adventure = Adventure.new(campaign_id: 1, character_id: 1)

but luckily as I was rewatching lectures at 1.5x speed, I was reminded of the wonderful .build method, and realized I could simply

if @campaign
@character = @campaign.characters.build(character_params)

(setting the campaign in a method beforehand)
Which is amazing!

Of course this lead to another problem of the character being created but not immediately being associated with the campaign in the corresponding route (ie /campaigns/campaign_id/characters/new). Word to the wise: .build does not save!
After an embarrassing amount of time, I realized the easiest thing for me to do was just shovel my brand new character into the campaign.characters collection. And that one line of code solved my biggest problem! I understood what the issue was, but I was really struggling with why my solution wasn't working. I tried setting the campaign_id in a hidden field in the new character form (similarly to how I set the user_id to current_user.id), but I knew as I was doing it that it wouldn't work. The character doesn't have a campaign_id, it has many campaigns! So I tried creating a new form for the adventure itself? Foolish. One shovel and everything is where it should be.

This is definitely the most interesting and challenging thing we've had to grasp so far, but I'm so excited to be more comfortable with it. The more I explore my own code, the more I get it. And as I write this at 12:15am, technically 15 minutes late to the deadline, I'm really just looking forward to making pictures spin around in Javascript.

CLASSic mistakes and headaches

JillKlatt — Sat, 27 Mar 2021 16:38:36 +0000

In wonderful fantasy realms, you're given the opportunity to leave your problems (be them family, friend, or debugging). You're able to change your name, age, race (who doesn't want to be a gnome!), and class. And once you assign all these new values to your character, you should be able to check them right? With the help of Active Record, you're able to check the value of your name, age, and race, by simply calling the .name, etc method! So logic would indicate you could determine the class of your beefy orc by calling .class. Right?
Oh Jill. Not Right.
Just like you can call methods to see the variety of methods you can call on any object, you can also call .class to identify the class of an object.

This problem and its solution lead me to something I've realized over the last two months of Flatiron's Bootcamp: Your issues aren't special. While I panic and freak out over my complications, a quick google search shows they're not that uncommon.

I ran into multiple issues as a result of using Corneal to create my file structure (i.e. the version requires a .yml file that was not included, the config.ru includes a command about ActiveRecord::Migrations that I could not solve) but a small thread on my cohort's Slack channel already solved them.
I knew I had to direct my program to look for view pages (CRUD-following erb files) in the Application Controller, so I added a line set :views, 'views' and pat myself on the back. Yet when I run shotgun, it told me my corresponding file didn't exist? However after a quick logical backtrace, I realized I needed to be more explicit with my direction and set it to 'app/views' . These issues that I found earth-shattering at the time were actually relatively quick fixes.

The third week of Sinatra reminded me of the second day of Phase 1; I would attend lecture and follow along, feeling like I was understanding about 30% of the material, and then spend hours rereading the labs and rewatching the lessons on 1.5 speed. I was so nervous that I had fallen behind to a place I wouldn't catch up. But around Thursday morning as I was laying out routes for a recipes lab, something clicked. I finally understood the MVC and what every step in a request entails. That lightbulb/eureka moment shuttled me forward and gave me the motivation to catch up and stay positive.

Like most of my friends in my cohort, I think I have a difficult time realizing and accepting that I actually understand the concepts we discuss. One of our instructors pointed out how we all tend to preface suggestions and correct answers with "Sorry, this might be wrong but.."
However I feel that as we reach more and more difficult and labor intensive labs and projects, we'll all begin to see that there's no way we're just faking having the knowledge, we are competent and we really do get it.
In the meantime, I'll just keep making silly dungeons and dragons characters based off my dog and trying to understand HTML.

Meeting Requirements

JillKlatt — Fri, 26 Mar 2021 18:56:33 +0000

Our very first project required quite a few different aspects. I was confident as I looked over the checklist, but the execution proved my confidence superlative.
We've learned so much in the past few weeks, and I assumed this project was a culmination of all of that, which in some ways it is, but in others (like using object orientation over procedural), it definitely was not.
On day three my code looked like this:

cocktail_name = response_hash["drinks"][0]["strDrink"] cocktail_instruc = response_hash["drinks"][0]["strInstructions"] main_ingredient = response_hash["drinks"][0]["strIngredient1"]

Notice anything suspect? I was reaching into my API, pulling out information, turning it into an object in a new class, but then when it came time to display that info, I just scooped it out without using the object at all!

Luckily this was identified and I was able to make it prettier and actually iterate through the Drink class I spent time making:

if @input.to_i <= Drink.all.count && @input.to_i > 0 puts "YOU GOT THIS!".colorize(:blue) puts "-------------" puts "The main ingredient is #{Drink.all[@input.to_i - 1].strIngredient1}." puts "Along with #{Drink.all[@input.to_i - 1].strIngredient2} and #{Drink.all[@input.to_i - 1].strIngredient3}." puts "Here's what you're gonna do: #{Drink.all[@input.to_i - 1].strInstructions}"

At this point I had felt like my project was basically complete, so to learn I wasn't actually meeting the requirements I was crushed. As my cohort lead pointed out, it honestly was an easy fix, but the feeling still crushed me.

I feel as if I fluctuate between devastation and overconfidence, and I'm still struggling to find that balance and just embrace being uncomfortable. But we'll get there! I can't believe how much I've learned in such a short amount of time already.

Why Software Engineering?

JillKlatt — Fri, 12 Feb 2021 14:06:29 +0000

Through the last two weeks, I've asked myself so many questions.
// I'm smart right?
// Have I just been telling myself I'm smart?
// Is it worth all this time and money and stress?
// Is it ever going to "click" or do the next five months exist in a perpetual state of uncomfortable ambiguity?
// I made it work, but how?

Of everything I've learned during the First Mile, I feel like I haven't learned the answers. I feel confident in the difference between arrays and hashes and .sort and .collect, but when it comes to confidence in myself, I'm still struggling.

I guess I should just focus on the positive?
The joy of that green code is unmatched. The gratification and dopamine rush following a difficult problem has become something I crave.
The rush of helping someone understand a concept is wonderful.
Answering a prompt confidently makes me beam with pride.

The main objective of this blog post assignment was to describe "Why did you chose this path?"
I started working in restaurants when I was 14, washing dishes under the table for the diner at the end of my block. After years of the service industry I transitioned to retail. I recognize that these are important and valuable positions that require so much care and patience and understanding. However, it's taken me a long time to realize I may be capable of more? I want to be challenged and confused. I selfishly want documentation that I am smart enough. I want my life to be different.

So as I reflect back on things I've learned this week and questions I still have, hopefully I can continue to learn the answers.