My First Blog Post — A Road through Software Development

George Thomas
Sep 5, 2018 · 7 min read

Hi guys, this is my first time blogging about coding, but I’m going to make it a habit. I’ve been coding on the Free Code Camp Front End Certificate since August of this year and I have been really enjoying learning HTML, CSS, and JavaScript. I still have a lot to learn, but I am excited to create new and better software. I hope this blog will help beginners learn from my mistakes and find useful tips to make their own code cleaner. Since I have documented my code up until this point, I figure I should post all of the projects I’ve worked on and a summary of my mistakes and accomplishments.

My first project was the Tribute Page

This project was relatively straightforward but it was my first coding project so it makes me laugh at how long it took me to make back then. It took me some research into how to had italics, footers, and round the picture of Gandhi. I also had to review padding and margins on CSS to get the spacing correct. I also, learned to link fonts from Google Fonts onto the HTML elements. This project was made with HTML and Bootstrap. At this point, I hadn’t learned that I can but the styling from the HTML into CSS to make it visually easier to look at what I was doing.

Personal Portfolio Page (this one needs some CSS styling)

This project will be updated regularly to reflect my projects and functions I learn along the way. Some of the images are not the correct proportion and is not mobile friendly yet. The major challenges of this projects was: the navigation bar and the division of the pages. The navigation bar needed to rest at the top of the page regardless of how far you stroll down and its links need to direct you a section of the page. This is were I learned position:fixed on the navigation element. At that point, I had not learned any JavaScript so I had trouble finding how to make the navigation links move the page. This took me several hours of looking at other people’s projects to find out that I could use jQuery. I also learned how to add styling to hovering and clicking on links. For example, below displays code that changes the color of the LinkedIn and GitHub button when hovered over.

.btn-github:link, .btn-linkedin:visited {
color: #fff;
}
.btn-github:active, .btn-linkedin:hover {
background: #084461;
color: #fff;
}

This project was a HUGE jump in skills required and took a few weeks to get right but has taught my valuable things that I still refer to today.

Random Quote Generator

This project was very basic and took the least amount of time to make so I’ll keep the summary on this brief. When the New Quote button is pressed a random quote will appear and if the Tweet this button is pressed the user will be sent to the twitter page with the Quote in the share text box. This required me to create a quote array and pick quotes randomly using the Math.Random() function. The tweet button was created by taking the twitter share URL and adding the quote at the end. This project used jQuery and Bootstrap.

Local Weather

This was probably my favorite project so far because of how responsive it is. This required research into Weather APIs, Icon APIs , the FCC API and conversions. First, I created a get request for the user’s region and city with an API. Then, I created a catch statement for errors. Next, I created the function CallAPI to call on the FCC API to display the degrees and description. This required about an hour of research into how this API works.

Wikipedia Viewer

The Wikipedia Viewer used the Wiki API to generate wiki articles on the site with a search. It also includes a random button to open a random Wiki article. In terms of number of lines, this project was very short. The majority of this project required me to learn how the Wiki API works to generate articles and to link user to the Wiki site. When I implemented the search function, I had to generate a url that called on the site to perform the search with “opensearch” which would return a JSON array. Just for fun, I added a JQuery animation on the search bar so that once a term was search the bar would move to the top of the page. I used a get request and then used a for loop to prepend each article to a HTML element. During this project, I learned about error messages so I create a catch message if the get request failed I would be notified. Although the lines of this code were short this project lots of reading the Wiki API documentation.

Twitch API

Similar to the Wiki API, the Twitch API required lots of reading of documentation to figure out. This project would display a certain number of streamers and would tell you if they were online or offline. You could push a button to display only online or offline streamers. Each streamers name would link to their channel on Twitch if clicked.

My first discovery was the method .forEach which would perform some action on every element in a array. In this project I created a URL for each streamer then I performed a get request using these URLs. This request would give me the streamers view count, the game they are currently playing , title of the stream, and much more. For this project that was the only information I needed. I then prepended the information provided to an HTML element (Just like the Wiki API).

An important thing to note for this is: I created two prepends one with class online and another with class offline. This made it easier to code the buttons because all I had to do at that point was create fade methods on each class based on if the class was online or offline.

If I had to do this project again, I would probably try to create a search bar where you can add the streamers you want and delete the streamers you don’t want.

Markdown Previewer

Up until this point I had only made JQuery projects but after reading and studying I decided to use React and Redux for this project. Redux is a wonderful tool when you have a lot of things trying to change the state of your page. With Redux they must all pass through one function so it makes it much easier to troubleshoot. This project is very basic so it is unlikely many people would use Redux for this but I wanted to use it for practice.

Drum Machine

This project still needs some CSS styling but at the moment it works. This project uses React and BootStrap. I was unsure on how to add sounds to a JavaScript application but after some searching I found I could place a sound file on Amazon Web Services and call on the sound file URL in the JavaScript.

First, I create a key bank that is an object that holds the key, ID, and URL for each keystroke. Then, I create two classes DrumPad and App. In the DrumPad component, I created a componentWillMount and componentDidMount to add and remove the listener for the handleKeyPress function. The handleKeyPress function would check if the key pressed on the keyboard matched a id in the key bank. If it was true, I would use audio.play() to activate the sound of the element. The handleKeyPress function would also display the id of the element pressed on the web page. Next in the DrumPad component, I rendered the pad itself on the web page and I rendered the audio file using <audio> <audio/>.

In the App component, I created an empty display object in the constructor. I create a function called handleDisplay to setState as display. Next, the App was rendered. I used the method .map on the keyBank to make every change applied to every element in the bank. I used button as an input to describe the element. Next, I created a id,keyName, id, URl, and handleDisplay for each button. Lastly, the App component is render in the DOM (the DrumPad component is not rendered because it is called on in the App component).

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade