From Craft to Code

Though my time at The Iron Yard has come to it's final end (after graduation, after career development, and after Demo Day) and I have come out a whole new person. I have a newfound confidence that I never knew I was capable of before. I've overcome so many of my personal fears and feel like I am a stronger person now that I have challenged myself in a field I previously felt I didn't belong in. The road ahead is going to continue to be difficult as a I find my way in but I know I can handle it and for the first time in a long time I am proud of what I have accomplished. The LGBT redesign will be a continuous project I work on with the Center until we implement the new look. I still have the Corky's Kettle Corn site to update as well. In between those projects I continue to update my previous projects by writing well crafted READMEs, refactoring old code, adding new features, and implementing unit testing. With so many new tools available to me I know it is only a...

It's official. As of Friday, September the 15th I am an Iron Yard alumni! The next four weeks entail a final project. I will be working closely with a classmate on a project of our choosing. Fortunately for us I already had an idea in mind. Since November of last year I have been a volunteer at the LGBT Center of Raleigh. With my new development skills I proposed helping maintain the site to the web team, Jim Manchester. He came back with the suggestion to do a full page redesign! This is a huge undertaking and one I intend to pour my heart and soul into so the main viable product I can deliver by the end of the four weeks is a high fidelity prototype of the home page. That is just a fancy term for a coded mockup. My project partner Kelly from DesignBright will be in charge of technical writing, SWOT analysis, and market research. As well, she will be a developer and lead designer for the project. We intend to update the LGBT Center's webpage to modern standards, introduce ...

As we've progressed further into React I am relearning how to accomplish some tasks that I knew how to do in Node but is done a bit differently now. For example, routing is not a new concept and is something I have done before in previous projects but React handles routes a little differently than Node. Fortunately, both are Javascript so nothing is radically different. Inside of the index.js file I've placed this BrowserRouter which I imported at the top of the page. I then used the syntax I found from the documentation to make a list of endpoints I wanted. The most simple route, the root path, on the bottom to allow the file to read every preceding path as well. The first path here is a dynamic route meaning the :id can change but still render the same layout. I've accomplished all of this before but I did get quite stuck on figuring out where to put my code in React. After enough trial and error I finally moved it into the right spot, linked the component files, a...

This past week has been a more in depth look into React. It turns out there are many different ways to approach compartmentalizing code. Organizationally, React likes to keep everything in components. This way code can be written for a specific section, including its logic, its HTML, and its styling, all in one place that is separate from the rest. These components are likely to still be a piece of the whole page so in order to avoid typing the same code over and over there are a few different approaches. Inheritance is exactly as it sounds, small components can inherit properties from the section it is inside of or the larger component around it. Just like last week, these properties are passed down in the constructor. They can include defined variables, functions, or even state. In a way, inheritance is a method of linking the separated components together to allow for more reusable code. Children components are very similar. Some properties can still be passed down to childr...

I have harped on this before but it is worth mentioning again - React is a library that allows for the rendering of small components. This is wonderful for applications that require a lot of changing data. A great organizational method for React is to piece each of these components in to their own file rather than lumping all code into one difficult to read file. This allows for easier manipulation of individual pieces. Some of those components require something called 'state'. State is a bit of a confusing concept. What it basically boils down to is a time frame. If you're building an application that requires anything to be remembered or recalled over time than state needs to be set. In Node I did this with a package called Session that handled a lot of the logic for me. In React, which is still JavaScript, then I can use a method called setState. When state isn't being used I still want to pass properties down to that component so I use 'props' in my const...

No, not real earthquakes. Just another web application! I'm not entirely solid on React yet (still on shaky ground) but I've taken my first few steps. Set up is not as difficult as I anticipated. Rather than starting every project from scratch our activities are now set up in a way that simulates a more realistic situation. We're given a set of files and basically told to fix it. For this application that is covering how to map over an array (loop or iterate over a list in order to apply a function to each item) we are using a government API to access data about earthquakes. This data updates in real time and only the last hour's activity is displayed. This is possible through React! As mentioned before, React allows a page's components to update without a page refresh. It immediately creates a better user experience because it isn't up to the user to make sure the page is properly loaded or displaying the newest data. The biggest learning curve is organiz...

React is built on a lot of ES6 syntax (an updated and more modern way to write JavaScript) and there are a few more concepts in JavaScript we're learning about before diving into anything else. Some of these concepts are function constructors, inheritance, prototypes, and classes. From what I understand these don't necessarily come up very often when building apps in React but it is an important concept to understand before moving forward. Essentially, function constructors work like object constructors. They can be seen as a schema, or a model, to be called on later when required. When building a lot of the same type a prototype can be used so that all of its children can inherit its properties. In less vague terms a prototype is exactly what it sounds like - a simply constructed piece that can be cloned over and over but look exactly the same. Classes on the other hand also seem to be the same exact thing. But prettier! Classes are what is called syntactic sugar for const...

The last four weeks of my time at The Iron Yard is set aside for 'specialization'. That is, we as students had the choice between learning Ruby, React, and Java. Given my background in visual arts and design I started this programming boot camp assuming I would go in to front end development. After spending the last four weeks with back end fundamentals I have even more reason to believe I would be happiest working with React, the front end option, over the other two. React itself is a library for JavaScript written to keep up with the changing demands of web applications. On a page like Facebook, the creators of React, there is a need for constant updating. Without reloading your page you should be able to see when someone likes a post, when someone sends you a message, and every time someone you follow posts a status. This requires specific containers making updates without the entire page refreshing each time a change happens. React's speciality is handling these cont...

Now that I have schemas in my models folder for both users and snippets I'm going to need a way to store them. I could use a SQL database which would store the snippets in the user table with a foreign key or a NoSQL database which is a bit more flexible. Even though SQL is the better choice, I am more familiar with Mongoose then Sequelize (both are the middleware used to help Node talk to the database).  For now, I will use Mongo and Mongoose to store the data from my application. Since I put each of those schemas in their own file I was able to export them. Once they were exported, I could require them in my main file along with the routes I created for each of my pages. I made a route for the login, the register page, the home page, and a place to render the results of a search. All of these are referenced in my app.js - the index of my project. In that same file is where I declare a url for Mongoose. Mongoose needs a connection between my application and the database inside o...

Another model I need to use for this web application is for my user's. When someone visits my app I want to ask for username, name, and email. At some point, they should be able to edit their profile to add a picture or an avatar and I definitely want to encrypt their passwords for them. In order to make sure each user has these elements attached to their profile I created a schema, installed a package to handle my encryption, and a package to handle authenticating that password. I chose bcrypt and Password because that is what I'm familiar with and what we went over in class. However, there are other ways to encrypt passwords and other packages that do it similarly. The userSchema.methods and .statics was all 'boilerplate' code that I was able find in our reading material but if I ever need it again in the future I can either look back on this project or find bcrypt documentation. My next steps will be routing my login and register pages that I made templates fo...

I have no idea if this is the best approach to a project but I'm implementing the MVC methodology to this web app that I'm building. As in, I'm first going to build as much of the model as I can then as much of the views as I can before working on the controller. As I mentioned yesterday, what I do know is that I will need two schemas for this project - one for the snippets and one for the users. I will be using a noSQL database because I already know how to use Mongoose to connect Mongo to my Node application. One trick I knew I would have to add in order to 'link' the two collections in my database is on line 15. I knew I would have to give each snippet a way to connect to its owner in order to only display that owner's snippets. This probably would have been easier to do in a SQL database where tables have a bit more structure and can include foreign keys to reference other tables. However, I wanted to use tools I have already learned how to use to accom...

To wrap up our back end instruction The Iron Yard requires a final project that rounds out the skills we've learned over the last three weeks. In a nutshell, we use Node.js and a few of its packages to write an application. Our objective is to create a web app that requires a login and password, allows for registration, enforces password encryption, and brings the user to a home page. For this project, that home page is a code snippet organizer. This project has no mockup or wireframe because design is not the main objective. However, there are a set of abilities our app must have. A user must be able to view all of their snippets, be able to edit or add or delete their snippets, and there must be a search bar that filters through those snippet's tags and languages. That means there are two schemas being used in conjunction. There is a collection of users and a collection of snippets all being stored in the same database. They have to be two separate schemas because each mode...

Security is a huge topic in tech. As technology progresses so does cyber security. I know basically nothing about it either! However, we did learn about encrypting passwords yesterday and tried our hand at two different ways to do so. One package is bcrypt and another is Password. I played around with each and the biggest difference is that Password allows for logging in through twitter or facebook. Pretty neat, right? I didn't get the chance to play around with it that much though. I did local encryption instead. This all still looks foreign to me but a great benefit of Node.js is the ability to use these packages when you need them with the code you already have. As I get more comfortable with the language I'll be able to create a multi-page application with authentication, validation, and password encryption!

Last week we covered databases! Super exciting, right? It only makes sense, though, that the majority of back end development would be storing, accessing, and updating data. There are quite a few tools available for Node.js and the ones we covered are Mongo and Mongoose. Mongo or MongoDB itself stores data flexibly. Why does that flexibility matter? It is perfect for sets of data that are incomplete. If I had a list of contacts I wanted to store but I didn't have everyone's emails it wouldn't be a big deal - those email addresses would just be empty. Mongo stores the data and Mongoose is a tool that accesses it for you. This is the secure way to retrieve data and validate it rather than having potentially sensitive information stored right in the code for anyone to see. Mongoose is pretty straightforward to use and I implemented it into my robots database (that thing again!). In a nutshell, I was able to swap out the database I had stored in a file and put it into Mongo o...

Today I've been tasked with teaching myself something new! In the coming weeks it will be time to decide what language to specialize in. I have the options of React, Java, and Ruby. All are wonderful options but as I've worked throughout this program I am still leaning towards a more visual career. That entails continuing to learn front-end development. In turn that makes React my best option. So today I'm going to get a little ahead of myself and learn some basics of React. I have no plans to build anything snazzy. From the little I've read about React it can be intimidating to get into. There are a lot of moving parts to code but it seems especially true of React. Just finding a tutorial on React itself instead of all of the other packages and frameworks that go into it was difficult. If I can just populate a page of images today using React I'll be satisfied! I'm using the first two tutorials listed here:  http://andrewhfarmer.com/getting-started-tuto...

The last 48 hours have been super intense! Not only am I learning basic web concepts about how information is sent and received over the internet but also the language used to manipulate that information. Those languages are also built on packages which are chunks of code called modules. Those packages all have their own syntax that may or may not interact well with other packages that are needed. My best analogy (roughly) is trying to create a custom greeting card for a customer. I have dozens of stamps and dozens of paper punches (these are analogous to modules because they are pre-made tools I use to create an embellishment that is then used in addition to my other crafting skills that make the card). These stamps and punches were all purchased at different places so not all of the styles and shapes line up with one another. I have to use a specific method to make those 'packages' work together to produce the card I have in mind. All of this code is completely done in th...

After learning the basics of HTML, CSS, JavaScript, Git, Terminal, and GitHub I'm now moving into back end development! Our first reading is on Node.js which is neither a language nor a program but a way for the JavaScript language to interact with browsers. I'm not entirely sure what that means yet but I'm confident I will by the end of the day. Until then, I'm working on our latest weekly project. It is a search page that uses the iTunes API to find music! The hardest part so far has been figuring out how to play audio and that was ultimately easier than I expected. I'm very fortunate to be learning how to code now with HTML5 and CSS3 that have a lot of included tags and elements. Back in the day I'm sure these projects would have been much more intensive! Here I have some JavaScript that begins a function when a search result is clicked. Once it has been clicked, the audio file is plugged into the HTML (hardcodes it) and displays the artist's name ...

If you haven't heart already - The Iron Yard went public on Thursday that it's locations will be shutting down after all current students complete their courses. This, naturally, impacted a lot of us emotionally but I know, for myself, that I'm still in this to learn as much as possible. I'm incredibly lucky that the staff here has built the Raleigh campus together and they also will stick this out until the end. Outside of that, this week was the final week of front end development before we move on to back end. Thursday and Friday we broke into groups and were inspired to begin our Hackathon project. Our theme was 'Mashup' so my team decided to do an arcade style page with multiple mini games. I, specifically, offered to do a Choose Your Own Adventure Game. I chose to write a 'tour' of Iron Yard's Raleigh campus. After a greeting and an input field for your name, you enter each room as you choose. The tricky part was to make sure that once a room...

As we round out our month of front-end development (I can't believe it we've come this far) our final task is to collaborate on a project. We've been challenged to complete a 48 hour Hackathon with the theme of 'Mashup'. My group has picked an arcade-style page that includes multiple mini games that are all interactive and show off various skills we've learned. My particular mini game is a Choose Your Own Adventure game, or as it turns out, a Tour of Iron Yard with Stacey our Campus Director! I'm not as advanced as I would like to be but the logic I implemented to complete the task worked! It got pretty messy pretty fast but I was able to accomplish a series of alerts nested in one another. My tour is three rooms long and once you 'enter' a room it can not be reentered. I did this using nested if statements linked to dialogue boxes with template literals. This worked great but if I ever decided to add additional rooms it would get close to impossib...

Last night our daily assignment was to create a web page from scratch. It's super easy now to auto populate some simple HTML and complete the organization of the page through DOM manipulation in JavaScript. The difficult part was using fetch to pull data out of an API in order to display search results. I did it though! Once the class realized that there was some extra security going on and we needed to read the next day's lesson to learn about CORS we got it all sorted out. I made the colors pretty obnoxious just for fun. I'm starting to get the hang of the hover styling in CSS. I also just discovered google's color picker! Just search 'color picker css' and there at the top of the page is a sliding bar that allows you to manipulate the color in the box. That color coordinates with a hexadecimal code or rgb set of numbers that CSS understands. Voila! Beautiful colors that aren't super generic! I'm still pretty rusty on the fetch method of request...