Research Week!

This week, instead of just transcribing information from a blog post, or a stackoverflow post to my own, I instead spent time researching, bringing over the code(unchanged), and reading different concepts to try and fully understand the functionality that I will be implementing. I plan on adding a search bar to my League of Legends project that I made in school, and I felt that the current style of learning that I was doing was not sticking very well. I could get the function to work, but I didn’t fully retain the information, so this week I went a different route.

First, is the styling and “physical” bar itself that I will be implementing. This was from a blog writer, whose post was coincidentally adding a search bar to a blog website she had created. In this block of text, she renders the SearchBar itself, and adds the type, which is text, the ID, placeholder, and name. All of this is very basic so here is the code that I will be turning into a working action for my project;

import React from 'react';
const SearchBar = () => (
    <form action="/" method="get">
        <label htmlFor="header-search">
            <span className="visually-hidden">Search blog posts</span>
        </label>
        <input
            type="text"
            id="header-search"
            placeholder="Search blog posts"
            name="s" 
        />
        <button type="submit">Search</button>
    </form>
);
export default SearchBar;

The next part, is setting up the search bar to change the URL while searching for whatever is being looked for. Here we set 2 different constant identifiers, for search, which is the window location, and query, which is the URL Search Parameters which grabs the string input into the bar and will eventually add it to the URL.

const { search } = window.location;
const query = new URLSearchParams(search).get('s');

Next, is making the search bar filter the posts while searching. This is just a bang operator for our recently defined query, where it returns our posts if nothing is entered, and if a filter is entered, it will change it to lower case for easier coding, and then return the matching posts.

const filterPosts = (posts, query) => {
    if (!query) {
        return posts;
    }
return posts.filter((post) => {
        const postName = post.name.toLowerCase();
        return postName.includes(query);
    });
};

My next step is to look into JS-Search, and see what that does for us. In the post she said that getting used to that would make this much easier to do, so I am very interested to see how the functionality of that works and how I can implement it into my future work. Reading through the website for JS-Search there is a lot of terminology that I do not yet understand. I will need to look up “Stemming”, and each different feature that this library brings to the table, being that I haven’t quite left the realm of schooling and all of the research is own my own. It feels like I am just a spec of sand in this vast empire of what Software Engineering has to offer in terms of knowledge, and that gives me something to chase every day, which is extremely motivating.

It was very cool to see all of the different ways to accomplish this through different posts on different blogs, and I am starting to see where the use of this comes in for people learning with coding. Stackoverflow usually just gives an answer, which doesn’t teach you anything except getting the task done. Blogs will typically have a lot more information for me to grasp, and explain WHY which so such a large portion of learning for me. Understanding exactly where to use this feature, and why we are implementing each thing, even as basic as explaining an event listener really breaks it down into more accessible knowledge for a new developer learning how to get things done.

I am thinking about trying to mainly focus more on React now that I have talked to a few friends in the industry. More and more I hear that while Ruby is very wanted when it is wanted, that is very seldom. React is more widely used and getting the practice with that would definitely pay off. A lot of companies look for a React developer, and all it would take is one company to give me my chance to learn and grow to put me in a great position to fully start my dream career of being a Software Developer.