DEV Community: Gabriel Hicks

Chasing Dreams During a Pandemic

Gabriel Hicks — Wed, 20 Jan 2021 04:20:45 +0000

Where it all began, how/why I decided to change careers during a global crisis, and where I am today

A photo of me in front of the family desktop computer in 2006, likely playing RuneScape

My motivation and origin story

First, let me introduce myself. I am who I am today because I grew up alongside the modern web. At the age of 7, my life dramatically changed when visiting one of my favorite gaming websites, Miniclip. I saw a new advertisement at the top that read RuneScape. It was in this moment that I knew I would inevitably grow up to become a software engineer.

Although I wasn’t great at the game, I was enamored by the yellow floating text and the friends I had made on the other side of the screen. I convinced many of my friends to play if they weren’t already, and stayed connected with some through the game when they would move away or change schools.

I owe much to RuneScape, it is where I learned how to type, and how to read and write leetspeak. For many years it was a central part of my online identity. As the game’s developers improved their skill, the 2.5D graphics became lackluster in comparison to other games, and in short time they released an “improved” iteration of the game. I vowed to never abandon the home I had made on RuneScape Classic.

Through cheating communities and private server forums, I found a solution to my problem, in order to play the game I loved, I needed to learn something deeper about computers and computer programming. I made a new host of friends in these niche chatrooms and as a community, manage to keep the game we grew up with alive to this day.

Essentially, a small collective of developers devoted countless hours rebuilding, maintaining, and updating a game that was intended to die in 2003. Not only did they reverse engineer the game, the forums were filled with ample documentation, and open source files. It was through these years of my life I wrote my first scripts, first traversed codebase, and hosted my own game servers that I could play on with old friends and to show proudly to my family.

I fancied myself a “hacker-man” and “tech guru” for most of my adolescence. I was the go-to person for my brothers and their friends when they needed computers fixed, promotional videos edited, or information they themselves had trouble sniffing out on Google. I saw my love and passion for all things internet as a part of me, and my identity.

Through high school and into college I kept my hobby with computer engineering close, but chose to start traversing a path in business school.

What happened: Winter 2019–2020

My lovely fiancé Emily and I after a Valentine’s Day date

Fast-forward to the winter of 2019, I found myself as an electrician working very long days in the frozen tundra of Iowa. My fiancé, Emily, had applied and was beginning to hear back from graduate school programs and we were envisioning a future together away from both of our homes. We talked intensely about how far we may be moving away, what that would look like, our dreams, passions, and goals in life.

As Emily worked hard through interviews, and inevitably decided to pursue a program in New York City, we sought advice from anyone willing to give it. After countless heart-to-heart’s, soul searching, and guidance from people we trusted, we knew this was the time and opportunity to pursue our dreams together in a new place. I liked the work that I had been doing, but I had a sudden moment of clarity, perhaps a quarter life crisis, and poured my heart out to my partner about my dream to become a software engineer.

Fortunately for me, I had a small host of resources to question about this goal of mine and how to navigate it. My brother is a senior software engineer, my best friend a SCRUM master, and my cousin co-founded freeCodeCamp — to say the very least I had a great support system. Both my and Emily’s families were incredibly supportive and excited for both of us in our new adventure. I considered the many steps that I may need to take in order to be successful in the City that Never Sleeps.

I planned to find or develop a structured learning path. I wanted to find a way to make new friends, and I wanted a network of people that I could plug into to become a part of the industry. For all of these reasons and by the recommendation of my support system, I came to the conclusion that attending a coding bootcamp could help me reach my goal in a meaningful and structured way.

Bootcamp

If you are anything like me, you may currently be reading your second or third blog post, cross examining content in search of the truth on coding bootcamps, or how to change careers. You may be researching a couple months before applying, or you may have recently applied and are seeking positive affirmations. Whatever the case, you have found good company here, as this is exactly where I was one year ago.

I began my search and preparation in my normal fashion, I started Googling. I found any and every shred of information on how to learn how to code and coding bootcamps, and comparing each resource against the next to distill what I consider a generally suggested path. I also utilized the resources I had built in with friends and family. This research and development helped me formulate the following plan:

Start freeCodeCamp’s web development and JS certification courses

Enroll in and begin work with Harvard’s CS-50 course

Seek out and rank my top choices for in-person coding bootcamps

Enroll and start each bootcamp prep course, at least finishing one

Apply, interview, and be accepted into a program by July 4th

The first two weeks of the new year, I was off to the races with freeCodeCamp. I was working out of town and staying in a hotel, the only thoughts on my mind each 11+ hour day, was how I couldn’t wait to get back to the hotel and start working on HTML and CSS. I worked hard during the day, and even harder at night to push through and successfully complete the first test I set up for myself.

Next, I simultaneously, and in an unorganized fashion, began freeCodeCamp’s JavaScript certificate, as well as App Academy, Flatiron School, and Galvanize’s bootcamp prep programs. I managed to make it through every resource up to, and through the introduction of objects. Each curriculum and coursework walked through basic data types, looping, conditionals, and I found myself lost when comparing each program’s explanation and teaching style of objects.

Then COVID began…

At the onset of COVID, and continuously through my progress I had been emailing admissions from each coding bootcamp listed above, seeking advice and resources how to best move forward. I also continued consuming YouTube content, reading Reddit, and reading any daily reviews that had been posted on the top coding bootcamp boards. It was my lovely fiancé who helped me make a decision to finally see one of these preparatory programs out to the end. I paid for the App Academy bootcamp prep course, and symbolically planted my stake in my new future as a software engineer.

After putting my money where my mouth was, I continued completing a majority of Flatiron’s bootcamp prep, and working through the freeCodeCamp JavaScript materials. For financial and professional reasons, work conflicted with my studies during the months of April and May. COVID was now a thing so naturally Emily and I cancelled our lease and moved into my parents basement. Through the end of May and June I helped my parents finish their basement, adding a living room and bathroom, and worked as much as I could on research and coding problems.

I set a goal to be accepted into a program by July, was moving across the country in August, so June 1st I diligently worked through the a/A bootcamp prep. I applied and interviewed with Flatiron, App Academy, and Hack Reactor. My decision in the end was based upon a few criteria:

Immersive Program

Alumni Network

Onboarding / Interviewing Process

Bootcamp Culture

On June 30th, I had a technical interview with Gracie from Flatiron, and by July 9th I was officially enrolled in the Flatiron School Software Engineering program!

**Additional contributing factors to why I chose Flatiron included the overwhelming and supportive communal feeling I received while onboarding with Maryssa and Gracie. I also learned and loved “Feelings Fridays” which made it a no-brainer for me, as I am an expressive and transparent person. I am unaware if/what support systems exist at the other bootcamps since I did not personally attend them.

A photo of my family mostly because I miss them, the last time we were all together!

The move, and starting Flatiron School

Emily and I moved to New York City with the help of her parents in late July. I brought one bag of luggage and a backpack, we didn’t have furniture and hadn’t seen the apartment in which we would be living. For me, this experience was wonderfully simple, it was not easy, but the nature of the move and the status of the world in that moment made it very simple to drop everything and start fresh in a new place.

My one bag of luggage with masks and all of the clothing I have today!

When you are officially admitted into the Flatiron School, you will in short order receive access to their online platform, and a mandatory pre-work section that should be completed before day 1. Since I did almost all of my bootcamp prep courses in JavaScript I felt I had some catching up to do in Ruby. In a little more than two weeks I had worked through all of the material provided and was set to start with my cohort on August 24th.

Most of us had all prepared for the world to reopen, and to return to campus in September. The night before our start date, we received notice that the entirety of our bootcamp would be online. If it hadn’t been for the pleasant onboarding experience, and a previous interaction with a cohort-mate, I would have considered postponing my course until I could attend in person. With the confidence of having at least one friend in class, he and I hopped on a Zoom call to simulate the intended experience of being at a table together on day 1.

As a cohort we had several ice breaker sessions to get to know each other which was very nice. I took it upon myself to begin reaching out to a couple more students I had interacted with, and struck up conversations. I made strong friendships early on that helped me open up and ask for help, as well as have people to confide in when I felt off. Slowly but surely as we progressed through the course, our cohort grew into a real family. We made a Slack for all of us to chat off the record, and have supported each other the whole way.

As the bootcamp carried on through it’s 5 iterations of 3 week sprints, I developed some personal goals:

To pass each module

Make real friendships and bonds

Deploy and host each project

Find ways to help others like me

Before committing to any bootcamp, I studied and compared things like job placement and attrition rates. I fought and continue to fight everyday against the constant feeling that I am an imposter. I had taken notes and made plans for what I could do after failing two modules to recoup my investment and still be able to chase my dream. With ample help from new friends, coaches, and instructors, I was successful in meeting my first three goals, and will pursue the fourth goal throughout my lifetime.

A group of us were able and willing to meet at Central Park for the first, and only time since Flatiron started!

Final Project

After completing my fourth and final coding challenge, and presenting my final project with an amazing parter, I had developed some level of confidence in my ability. The fear and anxiety of the final module, as well as being admitting into the career services portion of the program however, was unmatched. I determined to follow through my last section of bootcamp on the same strict schedule I had previously. I woke up before 7, showered, ate, and was on my computer by 9.

I had heard of a place called tutorial purgatory, also known as tutorial hell. I decided to develop a platform that attempted to combine the things I felt were essential in my success this far and called it Tutorial Heaven. The concept was to create a web forum/real-time chat application that allowed users to post user stories and project ideas in which to collaborate on. Making friends, reaching out, countless nights of long zoom calls were the things that made my experience so overwhelmingly rewarding and I sought a way to tell the world of new developers that.

I had a very simple MVP for the first week, and dove head first into integrating fun animations, custom artwork, and mobile responsiveness into my project. In 12 weeks I had truly developed some fundamental technical competence, and got to demonstrate that. I also had career services meetings each week following our introduction and was on a sure path to completing that course.

Post bootcamp — Now

I wrote a blog last week that details some of what my life is like today:

Networking After Coding Bootcamp
*My experience with a loaded, and somewhat uncomfortable term, any why it doesn’t have to be so bad*medium.com

After graduating coding bootcamp, I have now embarked the part of my story where I actualize my dream. I am currently working with a local mental health startup called Whimser as a software engineering intern, and I have successfully pushed original code that I have written intro production. Whimser should be making a debut soon, I have been working on both the Next.js web application and the React Native mobile application both have been extremely validating.

I have also been able to start a side project with my two best friends, one who is a SCRUM master, and one who is just beginning to learn React with a vanilla JavaScript background. Having the experience of teaching someone what I have learned this far in a team environment, and to be learning from more senior engineers in a more professional environment affirms that I have made the right decision to change my career.

It has not been very long since graduation, and I am extremely grateful to have the opportunity to work within real engineering teams. My part in this internship is to assist bringing the product to MVP, and it is not a long term position. I am actively seeking a more permanent, full-time position as a software engineer.

Since beginning to pursue this dream, I have overcome many obstacles and road blocks, and would love to talk more at length about those if someone is interested in my experience. Having come as far as I have, and with the overwhelming support I have backing me, I have no doubt that I will, in good time, achieve my goal of being a full-time employed software engineer.

If you have made it this far, thank you, I am always open to meeting new people, working with new technologies, and helping wherever I can be useful. You can find me on any of my various internet homes:

Gabriel Hicks | Software Engineer, Web Developer
*Gabriel Hicks is a software engineer who specializes in building applications and websites using the latest…*gabrielhicks.dev

Gabriel Hicks - Software Engineer - Whimser | LinkedIn
*Full-stack engineer who enjoys dynamic, responsive, and beautiful UI functionality. Passionate about helping others and…*www.linkedin.com

gabrielhicks - Overview
*Software Engineer / Full Stack Developer / NYC. gabrielhicks has 296 repositories available. Follow their code on…*github.com

I am always happy to connect, you can find me on Twitter, LinkedIn, or my portfolio!

Networking After Coding Bootcamp

Gabriel Hicks — Tue, 19 Jan 2021 22:46:34 +0000

My experience with a loaded, and somewhat uncomfortable term, and why it doesn’t have to be so bad

https://www.ie.edu/insights/wp-content/uploads/2017/06/Networking-la-guinda-de-un-buen-curriculum-o-idea-de-negocio.jpg

What is Networking?

If you are a recent graduate of a coding bootcamp, you have probably been given an overwhelming amount of advice to start networking. At first read networking may make you feel really bad. You may think you are being tasked with randomly emailing strangers desperately asking for help. You may also be thinking it has something to do with the OSI model, various layers, and interfacing with remote servers. Although I can’t help too much with the second variation, the first doesn’t have to be cold-calls and Zoom meetings over coffee.

Networking is a loaded term, and no matter what the origin is, it has evolved into a hard to swallow word for many people. To me, networking is some abstract idea that I can only acknowledge and recognize after it has happened. Unless I am explicitly speaking about it, I more or less consider any social interaction I have as networking.

https://blogs.nottingham.ac.uk/careers/2019/03/18/failure-an-option/question-mark-blog-post/

The Beginning: The Bad

At the end of July my fiancé and I moved to New York City with our two cats, and a couple bags of luggage between us. I was set to start at Flatiron School on the 24th of August, and without any local friends or connections I didn’t know where to start. I somehow stumbled upon a likely outdated resource that inferred LinkedIn was an incredibly important part of networking.

Without hesitation, I created a LinkedIn profile and aimlessly sent connection requests to anyone I could find who had recently graduated from Flatiron. After doing this for a couple days and accruing the suggestion minimum number from the old resource, I started noticing who people were interacting with. I continued spamming the connect button, and inevitably ended up with a handful of kind, generous people, and a ton of bots as connections.

This was it, I hadn’t even started my program yet and I was networking!

https://images.assetsdelivery.com/compings_v2/chaliya/chaliya1603/chaliya160300027.jpg

P.S. Sorry if you are reading this and are recalling a random LinkedIn connection from the summertime, thank you for your patience with me!

It got better: During Bootcamp

Before onboarding officially at my bootcamp, we had to complete a short pre-work course. During this time I got to experience and participate in what I would now look back on as networking. In the pre-work stage we had a Slack channel in which we all could introduce ourselves and work on labs and assignments together. I started engaging in conversation with a couple of my cohort mates and created some early bonds. Most of my experiences during and within the bootcamp bubble were similar to this example.

As bootcamp officially started, I made an intentional effort to slowly start reaching out to people and asking to work through things together on Zoom. As we all progressed through the materials, small groups of people began building peer-networks, and after the first five or six weeks, we had established a Slack channel for our entire cohort independent of the school where we could build relationships outside of the course materials.

Within the Flatiron network, a handy chatbot called Donut would message me and another random person to encourage us to strike up a conversation. Although I had begun growing my network of Flatiron friends, I always appreciated the Donut bot because it got me outside of my comfort zone and often put me in contact with people who were a cohort or two ahead of mine. This was unintended networking, many of which have flowered into great friendships!

From the encouragement of my brother I participated in Hacktoberfest during bootcamp. I didn’t want to do it alone, so I reached out to some classmates and my two best friends from home and encouraged them to participate with me. This experience opened my eyes to see how welcoming and inviting the developer community can be. The more I “networked” the more it became pursuing my genuine interests while making friends along the way.

https://emberify.com/blog/wp-content/uploads/2018/05/9.jpg

The best: After Bootcamp

By the time I completed my bootcamp, I had developed a fairly healthy “network”. I had gotten rid of the dozens of LinkedIn bots that would strangely comment and flock to each-others posts, and traded them for honest Flatiron connections I had made. I also started attending meetups, and participating in onboarding activities of new Flatiron students. I will link to a couple of my favorite meetups following this blogpost. I focus my time and energy now into finding people at meetups who are also looking for connections, and genuinely reading their posts, blogs, and whatever content they put out.

I have made some asks of close friends and family for help, which could also be lumped into networking. Most of those connections are not close to where I live now, but I am finding that talking with developers, especially those with non-traditional backgrounds, is an invaluable asset. I made one senior developer friend, through my cousin, that was extremely excited to share his story with me. Not unlike the open source community, the self-taught and bootcamp communities are overwhelmingly full of people looking to give back and share their experience.

This new friend crystalized for me that networking by way of asking for help or to learn from others’ experience is okay. It isn’t every day that we as humans get to tell the triumphant stories of how we changed careers and overcame obstacles to get where we are. Every person I have reached out to and expressed interest in their journey has opened up a part of that to me and given me great advice. Many developers and engineers, academic or self-taught, post blogs or have personal portfolios that outline their experiences as well.

Joining communities, seeking out people who are interested in technologies that you are, or may have answers to questions you are seeking, makes networking less “icky” and more human. I would encourage any new grad to find types of communities to belong to, join the WebEx or Zoom event, turn your camera on and be responsive in the chat.

https://mashable.com/article/games-to-play-on-zoom-facetime/

Now: Final takeaways

After making a couple casual friends and mentors through networking within the communities I now belong to and seek to be more involved in, I have found some commonalities in their advice for moving forward in my job search.

Make a space for yourself on the internet

You are a developer of some kind now, really carve out some real estate and establish it as your own. Personal portfolios are an opportunity for you to experiment with new technologies, as well as display some personality and interesting facts about your life and your interests. Create a blog, and blog about topics you love, or about things you are exploring to give a look at what you are actively learning about.

Lastly, the one that I heard over and over again, MAKE A TWITTER! I know it may seem unrelated, but Twitter is where (especially frontend) developers actually network. It seems simple, but you truly can hop into conversation and ask questions and get responses from seriously incredible people in the industry. You should not randomly start DMing people looking for jobs, but if you are following a thread and think you may have something of value to add, you can instantly find connections and friends amongst the crowd.

The most important part of creating your home on the internet is having it reflect an accurate image of yourself. It is okay to be new and learning, it is very common to make mistakes in public! Be true to yourself and you will find yourself amongst kindred spirits in no time.

Know your stuff — continue learning

It is great to be able to print “Hello World” in a dozen languages. New technologies and frameworks may seem sexy or better than what you are currently working with, but when you find what you love stick with it. Blogs are also great for this concept, if you can describe why you like one feature, framework, library, or other package over another using favorite language it can help demonstrate your passion and knowledge.

Understand fundamentals of the technology you are working with, and always refresh those key fundamentals. The newest, more popular frameworks are built on these concepts, and you can learn far more about these through the core concepts of the underlying language. Use built in options for everything until you absolutely need to branch out to add things that make life easier, it will allow you to start forming those opinion and understanding how these tools came to be.

Solve a problem

Finally, seek to solve a problem with the software you are developing. Don’t only make reproductions of your favorite websites and applications. Try to find how this project could potentially contribute to something bigger than yourself. When you’re not constantly comparing your project to a well established tech unicorn, you will have a better experience. Seeking to solve issues also makes things more exciting and can encourage you to continue development. Contributing to open source projects, and volunteering to do charitable work is an excellent way to sharpen your skills, build real life experience, and help those who are asking for it.

Networking can be scary and extremely difficult, especially if you are treating people as a means to an end. Instead find friendships and develop working relationships with people who are interested in the things you are interested in. Ask for help, even if you think it is a waste of time or you are a burden, google it, tweet about your problem, write a blog post when you over come it and continue contributing to your communities. When you are successful in your individual pursuit, remember those who helped you when you were in need. Do what you can within your means to help others, and most important of all, be yourself.

Many thanks to my friends and those who have been essential in my journey so far! There are tons of you and I have deep gratitude for your patience and willingness to give me direction when I have felt lost! I am always happy to connect, you can find me on Twitter, LinkedIn, or my portfolio!

My Favorite Meetups:

NYC Bootcampers Anonymous (New York, NY)
*If you're fresh out of a coding bootcamp, come on down! Or if you're a self-taught programmer. Or really, any developer…*www.meetup.com
Junior Developer Happy Hour (San Francisco, CA)
*The purpose of this group is to help people on their journey towards becoming a software engineer.*www.meetup.com

Open Source Resources:

good-first-issue
*Making your first open-source contribution is easier than you think. Good First Issue is a curated list of issues from…*goodfirstissue.dev
Hacktoberfest presented by DigitalOcean
*Inspired by you, the community, through your actions and stories. Everyone is welcome! Participants in Hacktoberfest…*hacktoberfest.digitalocean.com

Start Testing Your React Applications

Gabriel Hicks — Tue, 19 Jan 2021 22:45:40 +0000

Resources to start unit testing React applications with the latest tools such as Jest and react-testing-library

https://www.etechgs.com/functions-tasks-qa-team-call-center/

I recently started an exciting side project with my two best friends! One of my friends is a seasoned web developer, turned SCRUM Master, who we will reference as ‘B’. My other friend, ‘R’, is a self-taught JavaScript developer who is interested in learning React. I am a React enthusiast, so we set out to develop a PERN (PostgreSQL, Express, React and Node.js) stack application together. ‘B’ is taking the lead as project manager, as well as leading the initial backend and API development, while I try to lead my incredibly smart friend ‘R’ through the basics of React in our initial setup of the frontend.

Less than half an hour into initializing repositories, ‘B’ came to us with a fully built out Trello board, equip with diagrams, rendered images, incremental goals, and task assignments. This was incredible, as it is how I imagine an industry workflow would be, however, I repeatedly saw the words tests, testing, *and test *littered everywhere. It was in this moment, I realized I would be spending significant time learning how to write tests in a way that may lead my SCRUM Master friend into thinking I had known how to all along.

https://coding.abel.nu/2012/04/test-and-verification-in-scrum/

I quickly sought out sordid places, finding the JavaScript testing world to be something like the Wild West. I stumbled upon and continued to circle back to a gentleman from Utah called Kent C. Dodds, who had extensive experience, as well as countless blogs, videos, and open source courses how to test JavaScript and React applications. I quickly took to a couple of Kent’s public repositories of his reputable courses TestingJavaScript and EpicReact, and sent a very basic unit test to ‘B’ in which my friend replied “looks good enough to me”.

It worked! In a short few hours, I had regained confidence in myself, and seemingly blown away the expectations my friend may have had of me in regards to my testing abilities!

I will provide some quick code snippet example that are based off of Kent’s teachings from his EpicReact — Testing React Apps repository that I applied to the application I am currently developing with my friends.

The initial test I sent ‘B’ was a direct reflection of the base knowledge in the first iteration of exercises. This first test was written only using React, ReactDOM, and Jest. It looked something like this:

import * as React from 'react'

import ReactDOM from 'react-dom'

import Counter from '../../components/Home'

test('index page is rendered reading Hello World', () => {

const div = document.createElement('div');

document.body.append(div);

ReactDOM.render(<App />, div);

const helloWorld = div.querySelector('h1');

expect(helloWorld.textContent).toMatch(/hello world/i);

})

As I continued on learning after gaining the confidence of my team members, I evolved this first test, implementing some new methods from react-testing-library I picked up along the way. My refactored first test, my second organically written test ever, now looked like this:

import { render } from '@testing-library/react';

import * as React from 'react';

import App from './App';


test(index page is rendered reading Hello World', () => {

const { container } = render(<App />);

const helloWorld = container.querySelector('h1');

expect(helloWorld.textContent).toMatch(/hello world/i);

})

I learned the benefits of using RTL, such as not needing to clean up elements from the DOM, as well as not needing to create a div, as it would be done for me. Moreover what I learned, was that testing wasn’t so scary. In fact, testing with its easy readability, and very familiar syntax was actually kind of fun! I am still continuing to learn every hour as I push through this material, but am finding what I am struggling with and lacking must be within the full coursework and missing video accompaniment of EpicReact.

I am now dedicated to developing more unit, integration, and end-to-end testing methods, and look forward to sharing my journey here. I highly encourage every new or newer developer if they haven’t already to give testing a shot. Definitely seek our trusted and transparent sources like Kent, and have confidence in your abilities as engineers.

I felt as if I was late to the game in this specific area, but in other areas I have been able to encourage and aid my other friend ‘R’s journey learning React. With the body of knowledge and easy to access materials available on the internet, the only thing standing in the way is taking the action.

I am a life long learner, and I am far from where I want to be at in my knowledge, but I am lightyears ahead of where I thought I might be one year ago today. I look forward and embrace this New Year as the year of ‘realization’. Through the simple action of learning how to write an extremely basic test in a friendly project environment, I feel hopeful and empowered to push forward in spite of myself with that same energy in all things in 2021.

Resources

Get Really Good at React
*I was just about to start preparing the app we're working on for general availability, which includes solving a lot of…*epicreact.dev
Testing JavaScript with Kent C. Dodds
*by Kent C. Dodds When a user encounters a bug they look like this: 🤬 Bugs grind work to a halt. Bugs cause financial…*testingjavascript.com
kentcdodds - Overview
*working hard to make the world better with software working hard to make the world better with software Improving the…*github.com
Testing | Kent C. Dodds
*Kent C. Dodds testing blog posts*kentcdodds.com

I am always happy to connect, you can find me on Twitter, LinkedIn, or my portfolio!

Become an Open Source contributor

Gabriel Hicks — Tue, 19 Jan 2021 22:44:25 +0000

How to find, develop and make your first pull request, and become a contributing member of an open source project

What is Open Source?

https://sendthewholebattalion.files.wordpress.com/2020/10/open_source.jpg?w=1024

Open Source Software (OSS) can be defined as any software that has been released for the purposes of giving other people the rights to study, use, change, contribute to, and distribute the software. There are often licenses and documentation accompanying the source code that detail specific rights and information regarding the open source project.

If you are familiar with GitHub, you are familiar with the concept of open source collaboration. The technology Git was designed precisely for this purpose. With Git and GitHub, developers have a version-control system as well as a platform to collaboratively develop and share software solutions in public.

Think of the idiom two heads are better than one. With open source software, a project idea or software feature can rapidly develop with the only requirement being that the person contributing be able to come to understand the technologies involved. GitHub repositories enable this type of collaboration through creating “issues”, as well as enabling developers to comment and reply to code submissions.

Why should I contribute / what do I have to offer?

https://www.synopsys.com/blogs/software-security/wp-content/uploads/2020/04/tips-working-remotely-open-source-community-header.jpg

There are many reasons to contribute to open source projects:

Increase your knowledge and skills with a particular technology
Collaborate at an international level with people you may otherwise never meet
Learn about Git workflow and how to navigate many personal skills at the intersection of coding
Contribute meaningfully to projects while supporting communities and causes you care about

I made my first contribution in October during Hacktoberfest presented by Digital Ocean. My older brother encouraged me to participate even though I was in the midst of my coding bootcamp. The first pull request I made was to add alt text to images, improving accessibility for an application. During this event I was even able to tackle an issue for a Python/Flask project, a language in which I was not familiar. With the help of my brother, as well as other sources on the internet, I developed, tested, submitted and had my request merged to the main branch!

If you are able to see a problem, then develop and test a solution to a problem, you are ready to start contributing to open source projects. However, most projects will have CONTRIBUTING.md and README.md documentation that outline how contributions should be made. It is possible to make a bad contribution. Hacktoberfest, which celebrates open source contribution, this year had to make some major changes. There was an influx of meaningless or negligent contributions being submitted as people sought out the t-shirt that comes with 5 successful contributions during the event. Before you submit a pull-request on an issue, be confident that you are providing a thoughtful addition to the codebase.

How to find Open Source projects

Hacktoberfest, where my open source journey began, has an amazing list of resources and detailed information how to make quality pull requests. I will list some of their curated resources all of which I used to begin contributing.

The following resources share repositories that curate tasks for beginners:
Awesome for Beginners
Up For Grabs
Issuehub.io
First Timers Only
Good First Issues
Good First Issue
Once you start feeling more comfortable, you can find more open source projects that can use your help through the following programs:
CodeTriage
24 Pull Requests (like Hacktoberfest, but in December)
Discover by DeepSource
Visit this guide to find out more about how you can contribute to open source.
More resources:
GitHub Training Kit
Understanding the GitHub Flow
An Absolute Beginner’s Checklist for Hacktoberfest
How open source contributions can boost your career
Contributor’s Guide to Open Source Projects
How to write a good commit message
GitHub Desktop
Community help in our Hacktoberfest Discord server

How to make a pull request

https://3kllhk1ibq34qk6sp3bhtox1-wpengine.netdna-ssl.com/wp-content/uploads/bitbucket411-blog-1200x-branches2.png

The first step in contributing is finding a project that you want to work on with issues open. Many major frameworks and libraries will have hundreds of issues open at a time. You will notice tags below the issue number, many will rank the urgency of the issue and display the issue’s nature.

https://github.com/Rahat-ch/The_Sylar_Project/issues

In the photo above, it shows issue #23 asking for help creating unit tests. Next to the title of the issue are indications that they want help solving this issue, as well as indicating it is good for first time contributors to tackle.

When you further inspect the issue, you can read a longer description of the issue’s nature as well as some direction in how to address it. You will also notice contributors commenting and suggesting how they can help. This kind of open and friendly communication has been my experience when working on open source projects.

Finally, when you have written code that solves the issue, and in accordance with the *CONTRIBUTING.md *documentation, you will open a pull-request and provide the desired information. After a review, the code may be merged into the project, or the creator of the issue may give further direction to improve the code. Once the pull-request has been approved, it is merged to the main branch and you have successfully become a contributor!

Check out this Open Source Project

Last, I’d like to shoutout an open source project started by a friendly developer, it is also the project in the images above. The Sylar Project is a repository that helps users more easily find mental health resources in their local area. Below I have linked the project itself as well as the blogs Rahat has written about the inception and the progress that has been made!

The Sylar Project

Rahat-ch/The_Sylar_Project
*Production Link 👉 https://the-sylar-project-6avzk.ondigitalocean.app/ You will need Node.js version 8.0 or greater…*github.com
**The Sylar Project Blog Series — Rahat Chowdhury**

Find a project that is meaningful to you, whether it is a popular framework or library you enjoy using, or for a company or cause that you believe in. Any contribution, no matter how small it may seem, helps that project move in a positive direction. You will gain valuable and practical experience and continue growing as a developer.

This is my final blog of 2020, I am excited to see what 2021 will bring!

Gabriel Hicks | Software Engineer, Web Developer
*Gabriel Hicks is a software engineer who specializes in building applications and websites using the latest…*gabrielhicks.dev
Gabriel Hicks - Flatiron School - New York City Metropolitan Area | LinkedIn
*Full-stack engineer who enjoys dynamic, responsive, and beautiful UI functionality. Passionate about helping others and…*www.linkedin.com

I am always happy to connect, you can find me on Twitter, LinkedIn, or my portfolio!

Create-React-App vs Gatsby vs Next

Gabriel Hicks — Tue, 19 Jan 2021 22:42:50 +0000

Exploring use cases, and how I recently fell in love with Next

https://hub.packtpub.com/wp-content/uploads/2018/03/165-Cover-Image_0.png

If you are interested in frontend software development, you have probably heard of React. However, if you are new or newer, React is a JavaScript library that was built to create beautiful UI components. Most programmers add additional libraries to their React applications, and each of the frameworks in the title are based in React. There are many different cases, when and why you might want to use each one. In this blog I hope to lay out some of these cases in a digestible way so you can start building with React!

Create-React-App

https://create-react-app.dev/

First, if you are brand new, create-react-app is a perfect place to start. CRA aims to handle the minimum needed packages and development environment support to get started coding in React. It gives the developer a nice experience and will optimize your application for deployment in production. It configures webpack and Babel, and you only need to have npm and Node installed to get started.

The best use case for CRA is developing single page applications. SPAs are websites that do not require refreshing when navigating through pages. This creates a very fast, fluid-like experience when browsing. They create home environments for a user, and are able to efficiently store user data locally during the time spent on the page. The experience is simple and easy to understand, it’s no wonder these applications are so popular.

The most popular examples of single page applications you may have seen are websites like GMail as well as Twitter.

Gatsby

https://www.gatsbyjs.com/

Gatsby is the best way to develop static webpages with React. Gatsby sites are incredibly fast to build, and they are equally quick in performance. As you land on one of these static websites, the most critical data is loaded first, following by a pre rendering of any additional data, giving the user a natural experience navigating its pages.

Some of the best cases to use Gatsby are personal portfolios and blogs. It enables performative content, in a neat and orderly package. There are also thousands of plugins and templates that any developer can start with to get off the ground quickly. You are also able to seamlessly integrate services like Shopify and WordPress into your website.

Popular companies that are building with Gatsby are the Braun shaving company, well as the Impossible Foods’ Brand website.

https://nextjs.org/

Last, but certainly not least, we have NextJS by Vercel. Next is an ever increasingly popular framework, that truly does it all. It takes the great things about Gatsby, and CRA and offers them independently as well as in combination to developers. The team at Vercel us challenged many of the common problems in the React community, and delivered solutions over and over again. Notably Next takes a “zero config” approach, tedious things such as routing, styling, and code-splitting are given to you out of the box.

After learning and loving React myself, I have fallen into a deeper more maddening love with NextJS and it has only just begun. The experience as a developer is unmatched, and with constant updates I feel Next is really the leading edge in React web development. Although you need not always use NextJS in creating React projects, it personally has been hard to look back now that I have gotten my feet wet.

I actually found Next by mistake, at the very least it was indirect. I was searching the archives of Reddit to find a person who made an app called TabSaver my friends and I used in college. I found the TabSaver developer Lee Robinson, and through his YouTube channel and free course on Next, have fallen in love with the technology.

Websites for TikTok, Hulu, Twitch as well as my hometown grocery store, Hy-Vee are all built with NextJS.

Conclusion

Although I am clearly biased, all of these frameworks are great for developing applications with React. I myself am a newer developer and as I find new and interesting technologies, I will continue to share my love and passions for them. It’s an incredibly exciting time to be involved in web development, and I look forward to the coming advancements that will challenge and excite me.

Resources

You can find more specific information on the things I touched on at the following places:
Create a New React App - React
*A JavaScript library for building user interfaces*reactjs.org
Create React App
*You don't need to learn and configure many build tools. Instant reloads help you focus on development. When it's time to…*create-react-app.dev
Gatsby
*1 Create a complete website in the time it usually takes to build a prototype Build sites with the services you want,…*www.gatsbyjs.com
Next.js by Vercel - The React Framework
*Production grade React applications that scale. The world's leading companies use Next.js by Vercel to build static and…*nextjs.org
Lee Robinson - Developer, writer, creator.
*Front-end developer, JavaScript enthusiast, and course creator.*www.leerob.io

I am always happy to connect, you can find me on Twitter, LinkedIn, or my portfolio!

Anatomy of a Singly Linked List in JS

Gabriel Hicks — Tue, 19 Jan 2021 22:41:37 +0000

A closer look at the linear data structure

https://www.educative.io

Singly Linked List

A linked lists is a linear data structure that consists of units of data (nodes) that are chained together and implemented through storing information as well as holding reference to other nodes. In the above image, the number 5 is the head of our linked list. The right half of the node, illustrated by the arrow, holds a reference to the purple node containing the number 7. At the end of our linked list, the green number 15 holds a null reference, indicating that it is the end of the list. This demonstrates the fundamental structure of a singly linked list.

https://www.educative.io

Doubly Linked Lists

It is important to note that linked lists do not have to strictly move in one direction. Although singly linked lists may be implemented more frequently in other data structures, it is possible that each node can carry a reference to the node in front of it, as well as the node behind it. Doubly linked lists inferring by name alone, do take up more memory and are not as useful as singly linked lists when sorting large amounts of data.

https://www.interviewbit.com/tutorial/arrays-vs-linked-lists/

Arrays VS Linked Lists

Linked lists and arrays from an outside perspective can seem very similar. Both store information in a linear direction, but there are many differences and reasons why a person would want to use one over the other. Arrays are indexed, and any addition of deletion of an item in an array, requires a re-indexing of every other element. Linked lists however, can easily insert and delete information, simply by changing references in nodes.

When accessing a particular item in a collection, or needing to sort a collection, arrays are the best choice. The time complexity of accessing an index of an array is O(1). While accessing a particular node in a linked list, you must start at the head, or tail and move through each item, making the time complexity for accessing O(n). In the previous example, when inserting or deleting an item from toward the end of a collection, the time complexity is reversed and linked lists are more efficient than arrays.

A Singly Linked List

// here we are constructing the structure of the node for our linked list. each node contains data, as well as a place to store a reference to another node

class LinkedListNode {

    constructor(data) {

        this.data = data

        this.next = null


    }

}

// this gives us the framework to create our list

class LinkedList {

    constructor(head) {

        this.head = head


    } 

}

// here we will create the first node of our new list with a value of 2, using the class we created in the first code box

let firstNode = new LinkedListNode(2)

// next we will create a second node, and assign it to the value of the referenced "next" node with a value of 5

let secondNode = new LinkedListNode(5)

firstNode.next = secondNode

// last we will instantiate our linked list

let newList = new LinkedList(firstNode)

// the result of this structure will look like this

newList = LinkedList {

            head: LinkedListNode {

              data: 2,

              next: LinkedListNode { data: 5, next: null }

             }

           }

Conclusion

The fundamental anatomy and structure of a singly linked list is important. As I learn more about data structures and specifically linked lists, I hope to write more in depth about their use cases and time complexity when it comes to implementation. As a person who is very fond of arrays, I found the wealth of knowledge on the internet written comparing the two compelling. I enjoyed seeking to understand the basic idea of a singly linked list, and hope to continue taking you all along with me in my journey.

Sources/References:

What is a linked list?
What is a linked list?www.educative.io
Intro to Linked Lists via JavaScript - Part 1: Overview | DigitalOcean
*While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited…*www.digitalocean.com
Intro to Linked Lists via JavaScript - Part 2: Implementation | DigitalOcean
*While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited…*www.digitalocean.com
How to Implement a Linked List in JavaScript
*If you are learning data structures, a linked list is one data structure you should know. If you do not really…*www.freecodecamp.org

I am always happy to connect, you can find me on Twitter, LinkedIn, or my portfolio!

Stacks, Queues, and Linked Lists in JS

Gabriel Hicks — Tue, 19 Jan 2021 22:40:13 +0000

An introduction to data structures and abstract data types

https://d2h0cx97tjks2p.cloudfront.net/blogs/wp-content/uploads/sites/2/2019/08/JavaScript-data-structures.png

What are data structures?

In computer science, data structures are particular formats utilized in the organization, management, and processing of data. There are many data structures that vary greatly in complexity. Essentially, a data structure exists to store information while creating a pathway to retrieve and use that information efficiently. Some data structures you may have seen before are arrays, hash tables, linked lists, trees, and graphs.

https://d2h0cx97tjks2p.cloudfront.net/blogs/wp-content/uploads/sites/2/2019/07/stack.png

What is a Stack?

Stacks are structures that have conformity to the principle of Last-In-First-Out (LIFO). Real world representations are everywhere, while washing dishes or folding towels, anything that can be stacked will be unstacked starting with the object that was last placed on top. The first item in the stack will be the last item used in the stack. Arrays as well as asynchronous requests in JavaScript use this order of operations when executed.

https://d2h0cx97tjks2p.cloudfront.net/blogs/wp-content/uploads/sites/2/2019/08/queue.png

What is a Queue?

A queue can be thought of the inverse of a stack. Queues conform to the principle First-In-First-Out (FIFO). Also well represented in real life, any time you stand in line for a service, you expect to move in one direction toward the front of the line. Arrays can be used to implement queues in JavaScript.

How can I use stacks and queues in JavaScript?

If using an array as a stack, JavaScript provides the methods push() and pop(). To demonstrate use cases:

// set a variable stack to an array of numbers
let stack = [0, 1, 2, 3, 4, 5];
// to remove an item from the top of the stack, we will use the pop() method
stack.pop() // the number 5 will be removed from the top of the stack
console.log(stack) // [0, 1, 2, 3, 4];
// to add an item to the top of the stack, we will use the push() method
stack.push(9) // the number 9 will be added to the top of the stack
console.log(stack) // [0, 1, 2, 3, 4, 9]

We have similar use cases to utilize an array as a queue in JavaScript as well, with the push() and shift() methods

// set a variable queue to an array of numbers
let queue = [0, 1, 2, 3, 4, 5];
// to remove an item from the front of the queue, we will use the shift() method
queue.shift() // the number 0 will be removed from the front of the queue
console.log(queue) // [1, 2, 3, 4, 5];
// to add an item to the end **of the queue, we will use the push() method
queue.push(6) // the number 6 will be added at the **end of the queue
console.log(stack) // [1, 2, 3, 4, 5, 6]

Why?

The previous examples may seem glum, boring, or dull, but as data becomes more sophisticated they will be incredibly vital to know and understand in order to traverse data efficiently. When using stacks and queues, our computer is looping through each element in the array while re-indexing those elements which results in greater time complexity. Linked lists are usually the best choice when dealing with large amounts of data. They provide easier access to directly move items, without the need to re-index an array.

https://d2h0cx97tjks2p.cloudfront.net/blogs/wp-content/uploads/sites/2/2019/08/Linked-List-1.png

Linked Lists: An overview

A JavaScript developer at any level can appreciate the utility of an array. However, as applications grow more complex, insertion and deletion of items in particular becomes increasingly more efficient using a linked list. The anatomy of a linked list is either a node, which points to another node in one direction, or a node which points directly behind and directly in front of itself. This chain is effective to climb back and forth on without needing to re-index the collective data. Stacks and queues are patterns that can be seen and used in both arrays as well as linked lists.

Sources/References:

JavaScript Data Structures Tutorial - Learn its Types and Implementation - DataFlair
*Next article in JavaScript DataFlair Tutorial Series will focus on different data structures in JavaScript. We will…*data-flair.training
JavaScript Queue: How to Implement a Queue Using a JavaScript Array
*Summary: in this tutorial, you will learn about the queue data structure and how to implement a JavaScript queue using…*www.javascripttutorial.net
Implementing a Javascript Stack Using push & pop Methods of an Array
*Summary: this tutorial introduces you to the JavaScript stack data structure and shows you how to use an array as a…*www.javascripttutorial.net
Exploring Stacks and Queues via JavaScript | DigitalOcean
*While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited…*www.digitalocean.com
Intro to Linked Lists via JavaScript - Part 1: Overview | DigitalOcean
*While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited…*www.digitalocean.com

I am always happy to connect, you can find me on Twitter, LinkedIn, or my portfolio!

Adding HTML Content Dynamically in Rails 6 Using jQuery

Gabriel Hicks — Tue, 19 Jan 2021 22:37:28 +0000

Creating, submitting, and appending content without refreshing the webpage

https://dailysmarty-production.s3.amazonaws.com/uploads/post/img/452/feature_thumb_jquery-rails.jpg

While working on a new Rails project, I was tasked with creating a comment model and implementing the ability to add comments to a video’s show page. I needed to be able to access both the video and comment models, add comments to the video page, display newly added comments, all without interrupting the runtime of the video. Through trial and error, and dissecting various tutorials for older versions of Rails, as well as other programming languages, I found a working method using jQuery and a few snippets of Ruby code.

Have a working Rails app with a User, Video/Post/Other, and a Comments joining model

I am making the assumption that if you have found this blog, you already have a functioning Rails app, and are interested in the method I used to add comments without refreshing a page. To start you will need at least a User model, in my case a Video model, and a Comment model that will join the two previous.

A Rails application root file directory, opened and displaying the contents of a models file.

The User model has many comments, the Video model has many comments, and Comments belong to Users and Videos. Be sure to add a nested route for your video resources, the code within routes.rb should look something like this:

resources :videos do
resources :comments
end

UML diagram representing the belongs_to, has_many relationships between a User, Comment, and Video model

Add jQuery to your Rails application

To add jQuery to a Rails 6 app, there are a few quick things to do. First we need to add gem ‘jquery-rails’ *to our Gemfile. Next you will need to add *require(“jquery”) within your application.js file (mine was located at app/javascript/packs). Finally we will add the following block of code in the middle of our config/webpack/environment.js file. Last, you will need to run ‘yarn add jquery’ within your root directory to ensure everything will work properly.

Image of *config/webpack/environment.js*

Create comment forms, and prepare them to be rendered within the Video show page

To create a new comment in Rails, we need to make a form that will take in the User, the Video and the content body of the comment. We will save this as a partial called _form.html.erb within our comment’s view file.

A form_for with parameters set to “remote: true”, that will be rendered to submit a new comment in the application.

This is the form that I wrote. Ignore the classes and placeholder, what is important here is the arguments that form_for is taking. These arguments correspond with the comments controller within the new and create methods, passing the information needed to persist a comment to the database. The remote: true argument is saying the form is going to call the action that you specify for it.

Within our video show page, we will now render the comment form at the bottom. Above this partial, nested within a tag, is where normally we would display comments while iterating through a collection. Instead, I am using jQuery to target an id I specified in the tag, which will render this section separate from the video playing at the top. This render is looking for a file we need to create called _comment.html.erb.

A partial form containing the user who commenter, a link to their profile, the time the comment was added, and lastly the content of the comment.

Next we will render the partial form in Video page, and setup our jQuery file

Iterating through each comment and rendering that data through the “_comment.html.erb” file.

At this point our video show page’s comment section will look something like the photo above. Now we get to add the corresponding *create.js.erb *file that is going to pair with our create comment action listed within the comments controller. Be sure to comment out any redirects you may have had previously, as these will refresh your page and counter the methods we are trying to utilize.

Now that we have made a create.js.erb page within our comments view file, it is time to fill it with some jQuery! I wanted to accomplish two things in this, first was to add a comment to a page that would display without refreshing, second is to reset the comment content after adding a comment. To accomplish these goals we only need two lines of code that will target our specified ids and classes.

Two lines of jQuery, one to append the comment being made to the bottom of the comments column, and a second to clear the comment content text area after submitting the comment.

The first argument in each line is where the comment_pane id, and comment class were targeted. Following these arguments are actions, .append which will add it’s following code to the bottom of an item, and .val which sets the value of the comment class to an empty string (or return to placeholder value).

After saving all of your files, you should now have a functioning comment button, that will add comments without refreshing your page!

A GIF of successful comment appending. Hello World !

Sources/References:

jQuery
*jQuery: The Write Less, Do More, JavaScript Library*jquery.com
rails/jquery-rails
*jQuery! For Rails! So great.*github.com

Thanks to ZHENGJIAN LIU for being an amazing partner to work with on this project, as well as the rest of my cohort who continue to push me to be the most adaptive programmer I can be!

Hosted demo version missing search function(API key):
YouPlay
you-play-heroku.herokuapp.com

Link to the public repo:
gabrielhicks/YouPlay
*Mod2 Project with Zhengjian Liu. Contribute to gabrielhicks/YouPlay development by creating an account on GitHub.*github.com

I am always happy to connect, you can find me on Twitter, LinkedIn, or my portfolio!

How to Access Spotify’s Web API Using Ruby, RESTClient, and JSON

Gabriel Hicks — Tue, 19 Jan 2021 22:34:38 +0000

Client-side API Authorization using Spotify’s Web API

First things first:

https://developer.spotify.com/assets/WebAPI_intro.png

What is an API and why would I want to use one?

As a new developer, I have often heard of APIs, but never fully understood what they were. An Application Programming Interface is a tool that purposefully makes data accessible, and specifically defines how, and in what ways we can interact with this data. APIs usually have thorough documentation that is both technical and practical, detailing many designed user experiences.

What is RESTClient and JSON?

REST(REpresentational State Transfer) Client, in our case, is a Ruby gem that acts as an intermediary between us and our API that collects a ‘response’. JSON(Java*Script **Object **N*otation) is another translator, which takes the objects collected by RESTClient from our API request, and ‘parses’ that data, formatting the objects in our response into an easily accessible hash.

Spotify’s Authorization Flow

https://developer.spotify.com/documentation/general/guides/authorization-guide/#client-credentials-flow

Now that we have an overview of these tools, how do we use them?

In our project, we decided to allow a user to create playlists dependent on their mood. We needed to import song data from Spotify into a database, so that it would be accessible to a user while our app was functioning. We designed algorithms to choose songs for any given playlist, based on audio feature data and metrics that Spotify assigns to every individual track.

Step 1: Accessing your Spotify Credentials and Authorizing your App

Log into Spotify’s developer interface, and click the green ‘Create An App’ button. You will be prompted to name and describe your app. When you are finished you will check the boxes, submit, and be redirected to the dashboard that your authorization **depends* on*. Copy and save your ‘Client ID’ and ‘Client Secret’, these are your secret codes to access the API.

The dashboard following this screen holds the secrets you desire

Step 2: Whitelisting a Redirect URI

Before you leave the developer dashboard, you will need to white list a redirect URI. You can do this by going to the ‘Edit Settings’ button, and clicking ‘Add’ under Redirect URIs. Using https://example.com/callback/ as our Redirect URI will work for our purposes!

Step 3: Using our Spotify Credentials to generate an Access Token

Next, we will use the Redirect URI we whitelisted in Step 3 to give us the access token! Copy this URI and paste it into a URL encoder. It should look something like this

“https%3A%2F%2Fexample.com%2Fcallback%2F”.

We are now going to do surgery. Spotify’s Implicit Grant Flow tells us we need to use our encoded URI and our client id, formatted into this specific address:

https://accounts.spotify.com/authorize?client_id=YOURCLIENTIDHERE&redirect_uri=YOURENCODEDURIHERE&scope=user-read-private%20user-read-email&response_type=token&state=123

My address, after using my Client ID and URI, looked like this:

https://accounts.spotify.com/authorize?client_id=8449a8d2ab9b40f8b14324f3a22a368d&redirect_uri=https%3A%2F%2Fexample.com%2Fcallback%2F&scope=user-read-private%20user-read-email&response_type=token&state=123

We now, are going to paste this constructed address into our browser. We will be directed to a Spotify page to authorize our app!

Spotify App Authorization

We are not done here! Don’t close this web page yet!

If you look in the address bar, you will see a peculiar web address, hopefully the one you whitelisted in your Spotify dashboard… however… it also includes our very own Access Token!!!

https://example.com/callback/#access_token=BQB8Yobrgz4Uagd3DFs8qGjHcDiIs0g6skWm8phGn1AcncYXcfdXDpzqvNanBcH2Y0BCZUNGzB57gn0O8dD01J62kCYcJ85XcHKCmw5AI7oShU8W7osmfyAcQMKGlr0zgsp_fPNYY3qu7Fc_XSVlUid0Xc4&token_type=Bearer&expires_in=3600&state=123

Copy and save the Access Token, which includes everything after #access_token= and before &token_type=Bearer. This token type is important to note, we will also use this later on.

NOTE: Access Tokens will only work for 60 minutes, if the token expires, you can repeat this step for an additional 60 minutes of access.

Step 4: Setting up the app environment

Now, we need to create the app! I’ll use this boilerplate CLI design, and call it “medium_cli_app”. We next need to add the gem ‘rest-client’ to our Gemfile and bundle install. We are using ActiveRecord and Rake to seed data into a database, so we will also need these gems included, however I already had them in my template. Within our db/seeds.rb we will need to require both ‘json’ and ‘rest-client’.

Don’t forget to save!

Step 5: Using RESTClient and JSON to make an API request and parse a response

Back in our app seeds.rb file, we are going to create an “auth” variable so that we can easily pass it into our GET requests. This structure will be a hash, with the key “Authorization” and the value of your Access Token type, followed by your Access Token as a single string.

auth = {“Authorization”: “Bearer BQDc2NzoRj2M6I4WPRdYdjNsyzrhtYP1cPq4fJge44dQvpg90hOab6aRPylW8IZONZwMM1jh3d5ffapk1FsMcV9gsrBFIyu3U2b0–3u__8XvFOr0D7p_iqF3uEFr-VI7DoFcW3bBsI_2fE1fntrjZ97buywackYoEYc”}

Next, we will use a RestClient.get request, pass a Spotify API Endpoint in, and as a second arguement, our auth variable set as a header.

endpoint1 **= RestClient.get(
‘https://api.spotify.com/v1/browse/categories/mood/playlists?offset=0&limit=50',
headers=auth**)

Last, we will use a JSON.parse() method to parse the variable we set our RestClient.get response to.

data1 = JSON.parse(endpoint1)

Our final product, will look similar to this in our seeds.rb file:

We are almost there!!!

Step 6: Strategically importing Spotify’s Web API data into a database

Here is where you come in! Once we have made authorized our GET requests, we can more effectively utilize Spotify’s Web API documentation to determine endpoints we wish to access. We can preform endless methods on this collected data and use endless methods to seed it into our database. I will show a couple examples of how I used this access to parse, collect, and persist data points into my database.

Final Thoughts

This is not a comprehensive guide on API authorization. What this method allowed me to do, is overcome the barrier of entry into the wealth of value APIs can offer. I frantically searched Google, Medium, Youtube, GitHub, and tried various Ruby gems specifically designed for accessing Spotify’s API but could not find a step by step approach (with images) how to be granted access. This is a jumping off place, I look forward to learning and understanding more dynamic ways of utilizing these tools. After my experience, I have deepened my respect for the traditional documents that as developers we often find ourselves. If you need any additional help, or would just like a person to walk through authorization with, reach out to me and I will see if I can be of some use to you!

Sources/References:

API
*An application programming interface ( API) is a computing interface which defines interactions between multiple…*en.wikipedia.org
rest-client/rest-client
*A simple HTTP and REST client for Ruby, inspired by the Sinatra's microframework style of specifying actions: get, put…*github.com
JSON
*JavaScript Object Notation ( JSON, pronounced ; also ) is an open standard file format, and data interchange format…*en.wikipedia.org
Web API | Spotify for Developers
*Note: By using Spotify developer tools, you accept the Spotify Developer Terms of Service. Based on simple REST…*developer.spotify.com
Ruby-Doc.org
*Fast, searchable Ruby documentation for core and standard libraries. Plus, links to tutorials, guides, books, and…*ruby-doc.org

HUGE shoutout to Jake Fromm, my partner for this project and my cohort who all encourage me to become a more well rounded developer!

Link to public repo:
gabrielhicks/literallyjustvibing
*Literally Just Vibing is a command-line application (CLI) that utilizes Spotify's Web API to create playlists based on…*github.com

I am always happy to connect, you can find me on Twitter, LinkedIn, or my portfolio!