DEV Community: Taylor Sieling

To Do: Learn Vue

Taylor Sieling — Fri, 10 Sep 2021 03:23:50 +0000

To dip my toes into the ocean of Vue, I created a super simple, backend-less application. Here is a bit about my journey:

Setting Up Vue

I started by creating an index.html file and added the Vue.js script provided in the Getting Started documentation. I decided to stick with this quick and easy "installation" as I was just starting out with the framework. However, I look forward to using NPM and CLI in the future.

Creating a Vue Instance

As stated in the documentation, "every Vue application starts by creating a new Vue instance with the Vue function". Mine looked like this:

const app = new Vue({

});

In order to tell Vue where to live on the page, I added an 'el' property to my Vue object and assigned it to the ID #app. In my index.html file, I created a main tag with an ID of app - and I was ready to roll!

app.js

const app = new Vue({
 el: '#app'
});

index.html

<!DOCTYPE html>
<html>
 <head>
    //head stuff
 </head>
 <body class="bg-black">
    <main id="app">
    </main>
    <script src="https://cdn.jsdelivr.net/npm/vue@2". 
    </script>
    <script src="app.js" charset="utf-8"></script>
 </body>
</html>

The To Do Form

To start on my To Do App, I needed a To Do form. I won't get too into the HTML of it all, but I really enjoyed how Vue let me write more straight-forward HTML rather than JSX. I created a form, with a To Do input field and a Submit button.

To call a Vue function when the form is submitted, I used the v-on shorthand @submit.prevent and set it equal to a function called addTodo. .prevent is a handy Vue modifier that tells the v-on directive to call event.preventDefault() on the triggered event.

index.html

<form @submit.prevent="addTodo">
   <div class="subtitle"><label for="newTodo">Add Task</label></div>
   <input v-model="newTodo" class="input" type="type" name="newTodo" id="newTodo">
   <button type="submit" name="button">+</button>
</form>

To create the function, I added a methods object to my Vue instance and wrote a function called addTodo. To use the function, I needed to store the user input into a Vue data object. I created an attribute called newTodo and set it equal to an empty string, as well as an attribute called todos set to an empty array.

Now, I could store the title of my To Do input and push it to my Todos array.

const app = new Vue({
    el: '#app',
    data: {
        title: 'Getting Stuff Done',
        newTodo: '',
        todos: [],
    },
    methods: {
        addTodo() {
            console.log(this.newTodo);
            this.todos.push({
                title: this.newTodo,
            });
            this.newTodo = '';
        },
    }
});

The v-model attribute on my input tag allowed me to link the user input to the Vue data object. As stated in the documentation, "When a Vue instance is created, it adds all the properties found in its data object to Vue’s reactivity system. When the values of those properties change, the view will “react”, updating to match the new values."

Displaying the To Do List

Of course, after submitting a To Do item, you want the item to display on the page. With the use of "Mustache" syntax, I did some simple text interpolation to create my list. The v-for directive on the list item is used to render the element or template block multiple times based on the source data. So, for each todo in my todos array, a new list item is created.

index.html

<ul>
  <li v-for="todo in todos">
    <input type="checkbox" v-model="todo.done">
    <span :class="{ done: todo.done }">{{todo.title}}</span>
    <button @click="removeTodo(todo)" type="button" 
     name="remove">Remove</button>
  </li>
</ul>

I also went ahead and added a checkbox to indicate when a task has been completed. This process involved giving my newTodo a 'done' attribute initially set to false, creating a checkbox with a v-model of 'todo.done', and setting my CSS to strikeout items when todo.done is true.

Removing Todo Items

I wanted my app to have the option to remove Todo items. I started by adding a 'Remove' button to each Todo list item, as seen above. I used the v-on shorthand @click and set it equal to a function called removeTodo.

Just like with addTodo, I created a removeTodo function in my Vue methods object and removed individual Todos using the .splice method.

Completing All Todo Items

Lastly, I wanted the ability to mark all Todos from the list as complete at once. I mean, everyone loves that feeling, right?

Just like with my removeTodo function, I created a button, set it equal to an allDone function, and wrote the function in my Vue methods object. With a simple forEach loop, I set todo.done to true for all of my todos.

Reflection

Although this app is really simple, I really enjoyed playing around in Vue. I was surprised at just how easy it was to catch on to its syntaxes and functionality. I have a lot more research to do and many more apps to build, but I can definitely see myself falling in love with Vue as a framework.

Thanks for following on my journey into the world of Vue! You can find the Repo on my Github, as well as a demo of the app here.

The Palindrome Algorithm: Working Through A Mock Technical Interview

Taylor Sieling — Sat, 28 Aug 2021 21:53:50 +0000

A week and a half ago, I had a mock technical interview. It was my first technical interview ever, excluding my project reviews at Flatiron School. I was very nervous.

During the interview, I was asked to solve an algorithm: Given a string, check if the characters of the given string can be rearranged to form a palindrome.

I was immediately mad at myself upon hearing the question. Just that week I had attended an Algorithm Workshop and was told to look out for palindromes in particular. I kept telling myself to sit down and study them, but never got around to it. And there I was, frozen and staring at my screen.

I was able to pull myself together and worked through most of the logic of the question, but struggled with applying the code in vanilla Javascript. With some really helpful tips from my interviewer, I ended up working through the problem as follows:

function isPalindrome(str) {
 //some code goes here
}

console.log(isPalindrome('civic')); // civic => true
console.log(isPalindrome('civil')); // civil => false
console.log(isPalindrome('level')); // level => true
console.log(isPalindrome('sees')); // sees => true

My first thought was to split the string so that I could work with individual letters, something like this:

function isPalindrome(str) {
 let chars = str.split("")
}

I had to think quite a bit about what those split letters needed to do. My interviewer asked me some great prompting questions which led me to the realization that I didn't need to split them at all.

When it comes down to it, palindromes are just words that have, at most, one character with an odd number of occurrences. All other letters have to appear an even amount of times.

With that, I set out to create an object that counted how many times each letter appeared in a word.

function isPalindrome(str) {

  let count = {}
  for (let i = 0; i < str.length; i++) {
    let letter = str[i];
        !count[letter] ? count[letter] = 1 : count[letter]++;
  }

 return count

}

console.log(isPalindrome('civic')); // { c: 2, i: 2, v: 1 }
console.log(isPalindrome('civil')); // { c: 1, i: 2, v: 1, l: 1 }
console.log(isPalindrome('level')); // { a: 2, b: 2, c: 2, d: 1 }
console.log(isPalindrome('sees')); // { s: 2, e: 2 }

Sweet! Now I knew how many times each letter appeared in a string. All I had to do was check that only one letter, if any, had an odd count.

This was the part where the code itself stumped me. I understood what needed to happen, but not how to write the code. My interviewer was incredibly helpful. I pseudo-coded the rest of the function and he helped me translate it into Javascript.

The first step: Get an array of values for each letter by using Object.values(count). Then, set a variable to track how many odd values are in the array. I used a second for loop and the remainder operator to increase oddCounts when a letter count was not divisible by 2.

Lastly, I set the function to return false if the oddCounts was greater than 1.

And voilà:

function isPalindrome(str) {

  let count = {}
  for (let i = 0; i < str.length; i++) {
    let letter = str[i];
        !count[letter] ? count[letter] = 1 : count[letter]++;
  }

  let counts = Object.values(count)
  let oddCounts = 0; 
    for (let i = 0; i < counts.length; i++) { 
        if (counts[i] % 2 != 0) { 
            oddCounts++;
        }

        if (oddCounts > 1) { 
            return false;
        }
    }
  return true; 
}

console.log(isPalindrome('civic')); // civic => true
console.log(isPalindrome('civil')); // civil => false
console.log(isPalindrome('level')); // level => true
console.log(isPalindrome('sees')); // sees => true

I learned a lot from my mock technical interview and I'm so glad that I was afforded the opportunity have one. I feel as though I am very strong when it comes to talking about code, but have a difficult time thinking through coding during the live challenges.

With the experience in my back pocket, I know to practice my algorithms, brush up on some basic Javascript concepts, and not let Aibohphobia* get me down.

*The unofficial word for 'fear of palindromes', tehe.

Full-Time Job, Part-Time Student: How I Managed My Time During Bootcamp

Taylor Sieling — Tue, 15 Jun 2021 20:34:01 +0000

The End of an Era

I am coming to the close of my ten-month long bootcamp at Flatiron School. The experience was a roller-coaster: there were days when I felt on top of the world, itching to get my fingers on the keyboard. And, there were days where I felt low and frustrated with debugging and debugging and debugging. But, if you know anything about me, you know that I absolutely love a good roller-coaster.

Like many other bootcamp students, I worked full-time during the day and coded part-time at home in the evenings and on the weekends. My success thus far has really come down to managing my time and finding that sweet balance between work, school, and relaxation. Here are my top five tips for doing just that.

Write it Down

Flatiron School did a wonderful job of helping its students keep on pace during the program. Each week, my cohort lead would post our schedule in our Slack channel - breaking down which lessons and labs to complete each day. Now, if you are like me, the schedule didn't always align with my work schedule. So, I made my own!

On Mondays, I wrote out which lessons and labs I aimed to complete each day taking into account my work schedule and personal plans. I put heavier coursework loads on my lighter work days. For example: If I knew I had a busy Wednesday, I would shift the bulk of my work to Friday when I had more time in the evening to dedicate to coding. This method may seem obvious, but writing it down in advance helped me tremendously in keeping up the pace.

Give Yourself A Day for Catch-Up

Learning code can be hard - especially when you are learning a lot of material very quickly. Sometimes, certain labs or concepts would take me longer to complete than I had originally planned for. A few months into the bootcamp, I started giving myself an extra day in my planned out schedule for catch-up. Having dedicated time to getting back on track allowed me to take more time on difficult concepts and overall helped to reduce my stress.

Get Ahead When You Can

On the flip-side of my last tip... get ahead when you can! When I would finish all of the lessons and labs I had planned for the day but still had time set aside for schoolwork, I moved onto the next section. I found that getting ahead during my scheduled time helped to balance out the longer lessons and gave me more free time at the end of the week for hobbies and relaxation.

Rearrange The Lessons if Needed

The Flatiron coursework is broken down in READMEs (lessons) and labs. Not surprisingly, the lessons usually took less time than the labs, even when I was taking detailed notes. On top of that, I could read through lessons and take notes almost anywhere, whereas I preferred to be at my desk to focus on the code alongs and labs.

All of that to say, there were weeks when I would complete the READMEs and take all of my notes before starting on the actual coding. I could login to my account on my lunch break at work and get through my lessons and note-taking during the week, then I could complete all of my coding practice at home over the weekend. I tried not to move onto the next section or topic before completing the labs, but I found that shifting the order within a section helped me to better balance my time.

Plan Your Projects First

I loved everything about my Flatiron bootcamp... so much that come project time, I wanted to just dive right into the coding. Usually, that would lead to me coding out entire components that I didn't end up using in my final project and wasting a lot of valuable time. If you keep on pace with the lessons and labs, you have two weeks to complete your end-of-module projects. If you are ambitious in your code, that doesn't give you a lot of time.

My advice: Plan out your project first! Write out your concept, draw up some wireframes, define your associations, etc. Of course, your project may evolve as you work on it. But having a good outline will really help you to stay on task and manage that precious project time.

I also found that finalizing my project concept a few weeks in advance really helped when it came time to code. Not only did it give me more planning time, but I was able to relate the lessons and labs directly to what I would be coding in my project.

Bonus Tip

Attend the lectures! This may sound like a no-brainer, but I think my cohort leader's lectures were the most valuable part of my bootcamp experience. Watching her code in real-time and being able to ask live questions really made the concepts sink in for me. I realize that schedules are busy and not everyone has time to attend "class". But if you can make time, I highly recommend tuning in those two nights a week!

React(.js)ing to My New Foster Kittens: A React/Redux Application

Taylor Sieling — Mon, 07 Jun 2021 21:54:04 +0000

The Project

All of my Flatiron School projects have related to my interests and passions, and my React.js project is probably closest to my heart. I have recently started fostering kittens through my local Humane Society, and as such built an application to manage kitten intakes and updates. Users can input all pertinent intake information when getting new fosters, and edit/delete the information as necessary.

The Structure

Routes

/
/kittens
/kittens/:id
/kittens/:id/edit
/kittens/intake

Presentational Components

Home.js
Navigation.js
Footer.js
KittenCard.js - for the Kitten Index page
KittenShow.js - for the Kitten Show page

Container Components

Kittens.js - for the Kitten Index page
KittenContainer.js - for the Kitten Show page
IntakeForm.js - new Kitten form
EditForm.js - edit Kitten form

The Rails API Backend

I set up my Model and Controller using the Rails resource generator. I created my seeds, enabled CORS, and set-up my JSON serializer.

The React.js Frontend

I used create-react-app to get started with my frontend. I set-up my folders for Containers, Components, Actions, and Reducers.

Using Redux

Although React Hooks are replacing Redux, I appreciated getting to learn the Redux pattern. Redux lets you create a store to hold your state. The store can dispatch an action to the appropriate reducer and create an object to make changes to the state. Components are then able to re-render on the DOM with the new data.

I used my Redux store to hold information about my kittens, which could be passed to my Presentational Components. My Presentational Components are stateless and accept props mapped from their Container Component's state. I used Functional Components within my Presentation Components.

My Container Components, which needed access to my Redux store and certain Lifecycle Methods, were build using Class Components.

Redux-Thunk Middleware

Javascript web requests are asynchronous, meaning our fetch requests can run into an issue where our action creator returns an action before the API data is actually fetched.

The Thunk middleware allows us to return a function inside of the action creator, rather than a Javascript object. That function can dispatch multiple actions, depending on whether the loading state is true or false.

Here is an example of the Redux-Thunk middleware in action:

// src/containers/KittenContainer.js

class KittenContainer extends Component {

    componentDidMount() {
        this.props.fetchKittens();
    }

    ...

}

I call my fetchKittens() method in my componentDidMount() lifecycle method.

// src/actions/kittens.js

export const fetchKittens = () => {

    return (dispatch) => {
        dispatch({ type: "LOADING_KITTENS"})
        fetch('http://localhost:3001/kittens')
        .then(res => res.json())
        .then(kittens => {
            console.log('fetching kittens')
            dispatch({
            type: "KITTENS_LOADED", 
            payload: kittens
        })
        })
    }

}

I pass the dispatch method (from the store) into my returned function, and call dispatch twice in the function's body. The first dispatch indicates that I am loading the kitten data from my API. The second dispatch makes the actual GET request to the server.

// src/reducers/kittenReducer.js

const kittens = (state = { kittens: [], loading: false}, action) => {
    switch(action.type){
        case "LOADING_KITTENS":
            return {
                ...state,
                loading: true
            }
        case "KITTENS_LOADED":
            return {
                ...state, 
                kittens: action.payload,
                loading: false
            }

    ...

Here you can see my case switches in my kittenReducer.js.

// src/containers/KittenContainer.js 

    handleLoading = () => {
        if (this.props.loading) {
            return (
                <div>
                    <div className="kittens">
                        <div className="home-text">
                            <h1>Knittin' Kitten Foster</h1>
                        </div>
                    </div>
                    <div><h2>Grabbing the precious baby... one moment please!</h2></div>
                </div>
            )
        } else {
            const kitten = this.props.kittens.find(kit => kit.id === parseInt(this.props.match.params.id))
            return (
                <>
                <div className="kittens">
                    <div className="home-text">
                        <h1>{kitten.name}</h1>
                    </div>
                </div>
                <KittenShow kitten={kitten} handleDeleteClick={this.handleDelete}/>
                </>
            )
        }
    }


    render() {
        return (
            <div>
                {this.handleLoading()}
            </div>
        )
    }

Back in my KittenContainer.js, I wrote a method called handleLoading() which gives the user a loading message while the kittens are being fetched from the server.

In Conclusion

This project saw many iterations in my head. There is still a lot more that I would like to implement in the future - such as authorization for user accounts, an adoption application for community members to apply to adopt specific kittens, etc.

I have really enjoyed learning React and hope to find a job as a front-end developer in the future.

Floating "Undefineds" When You Just Want to Care for your Plants.

Taylor Sieling — Wed, 14 Apr 2021 02:04:04 +0000

Ah, Javascript.

I had been looking forward to learning Javascript since the very beginning of my Flatiron School journey. Going into Software Engineering, I knew that I liked frontend development and I was ready dive in.

The learning curve was very steep. Switching from Ruby brain to Javascript brain was not an easy transition for me. Although I kept up with the lessons and labs throughout the module, I didn't really start to put all the pieces together until I started on my project. The whole time, I just wanted to add my plants, and track their care, and make it all look pretty. But, I kept getting stuck on return values.

While coding out the plant "show" view of my application, I noticed a floating "undefined" at the bottom of the page. It wasn't coded in the HTML and I spent hours trying to make it go away. Turns out it was from my plantShowRender() function.

    plantShowRender() {
        this.plantIndex.style.display = 'none';
        this.plantShow.style.display = 'block';
        this.plantShow.innerHTML = `
            <div class="section" id="top-button">
                <button id="back-to-index" class="button">Back to All Plants</button>
            </div>

            <div class="plant-row" id="plant-info-row">
                <div class="plant-col" id="plant-${this.id}-image">
                    <img class="displayimg" src="${this.image_url}" alt="${this.species}" width="100%">  
                </div>
                <div class="plant-col" id="plant-${this.id}-care-info">
                    <h2>${this.nickname}</h2>
                    <h3>${this.species}</h3>
                    <p>${this.description}</p>
                    <p><strong>Current Planter:</strong> ${this.pot}</p>
                    <div id="plant-edit-buttons">
                        <button class="update button" data-id="${this.id}">Update</button> 
                        <button class="delete button" data-id="${this.id}">Delete</button>
                    </div>
                </div>
            </div>
            <div class="section" id="plant-care-row">
                <div class="section" id="care-button-container">
                    <button id="care-button" class="give-care button" data-id="${this.id}">Give Plant Care</button>
                </div>
                <div class="care-title">
                    <h2>Plant Care History</h2>
                </div>
            </div>`

        this.addPlantCares();
    }

Above was my original code.

As I have learned, the value of your return will replace the function call. When I called plantsShowRender(), the return value was "undefined".

 viewPlantInfo = (e) => {
        const plant = Plant.all.find(p => p.id == e.target.dataset.id)
        this.plantShow.append(plant.plantShowRender())
        this.addButtonListeners()
    }

Thus, the little floating "undefined" at the bottom of the page.

I updated my code to add a return statement to plantShowRender(), as seen here:

    plantShowRender() {
        this.plantIndex.style.display = 'none';
        this.plantShow.style.display = 'block';
        this.showElement.innerHTML = `
            <div class="section" id="top-button">
                <button id="back-to-index" class="button">Back to All Plants</button>
            </div>
                <div class="care-title">
                    <h2>Plant Care History</h2>
                </div>
            </div>`;

        return this.showElement
    }

Then, I called the function on this - the plant instance in this case - and called this.addPlantCares in the viewPlantInfo() function.

Return values certainly aren't thing only thing that I struggled with in this project, but the more I messed up, the more I learned. In the end, I am really proud of what I created and look forward to working on more frontend projects.