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...

Now that our immediate actionable goal has completed, Kelly and I are stretching our project to include more pages than just the original home page. We have most of the internal links fleshed out but the remaining tasks seem endless and daunting. They are absolutely achievable issues. There are, however, many achievable tasks to make up a whole mountain. One of my favorite sayings that has prevailed over the last few days is "How do you eat an elephant? One bite at a time." What I've learned so far definitely aligns with that statement. It's easiest to tackle a project by breaking it into manageable pieces and doing one line of code at a time. For this project in particular, we've been utilizing a lot of Github's tools for tracking issues, listing problems, and delegating assignments. Each day I aim to resolve at least four issues and tackle any that I see along the way.

After spending a considerable amount of time doing market research, analysis, client feedback, community polls, and even a SWOT analysis of the current site Kelly and I were able to move from a rough sketch of a redesign to a cleaned up mockup all the way to a high fidelity prototype! It is still a work in progress but we are able to code in HTML and CSS a functional mockup to display our redesign. We used tools along the way to keep track of our progress like Trello as well as Balsamiq to complete our sketches. Our prototype is available on Github at  https://github.com/victoriarainc/lgbtCenterofRaleigh . Kelly was able to find a Bootstrap layout called Modern Business that implemented a lot of the styles we had in mind for the site. It is already responsive, much more modern, and introduces clean navigation throughout the site. The prototype is still in progress but we hope to have it completed by next week!

On top of the LGBT Center's redesign I have now also been commissioned for a redesign of the Corky's Kettle Corn's website. They are a local kettle corn business that wants a larger online presence in order to expand and increase revenue. I will not only be in charge of client communication but design and development of their website using a few tools I haven't ever worked with before. The site itself is currently build on ZenCart and php - a software I've never used and a language I've never seen. However, I'm confident I can execute a satisfying template and implement it in a reasonable timeframe. I'm really excited to start learning more tools that will make me a more effective coder and freelancer! This is only a sketch of a splash page but it is a start! I hope it will inspire me over the next few weeks to continue to update and modernize Corky's website!

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 my graduation date slowly approaches I now have the freedom and the tools to start building my own applications from scratch. I came into this program three months ago knowing I wanted to build web pages for my photography and handmade crafts. Now I finally can! Even better, I can create a portfolio app that showcases all of these new skills as well as my personal projects. For the last couple of days I went ahead and dived into Handmade by Vi - a responsive website that dynamically displays available products and service using React, HTML, and CSS. My first steps were to sketch out a rough idea of how the application was going to look. I picked three colors, created a layout for each page, and loosely linked how the navigation was going to render. In a few hours I was able to develop the barebones and functionality of my site. I chose some pretty simple and clean designs,  added a media query to handle mobile view, and implemented a few dynamic routes for my 'shop' page...

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...

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...

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...

There seems to be a lot of debate around what Model View Controller (MVC) is. After almost 48 hours of discussion, intense Googling, and furious debate I believe I can comfortably say that MVC is a way to organize your code. To compare, there are dozens of ways to organize a craft room. On top of those dozens of ways you could think of to organize your stuff - there are overarching theories and methods to help. I've read articles on the psychology of organization and popular methods such as bundling your stamps based on theme versus month of the year you would use it. MVC is a method of organization for programmers. Keep in mind a lot of the implementation is dependent on the project itself. Also, a programmer's code is personal and nothing beats methods that work for that programmer. With that in mind, MVC attempts to propose an ideology to follow. Model can be a folder to store sets of data and any logic used to filter through that data. View's purpose is to hold any vi...

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...

Coding is all a logic game. I've discovered it's using tools in conjunction to produce a result. Brain teaser doesn't even begin to describe it! My head feels like a swarm of bees caught in tiny net trying to solve this one! https://github.com/victoriarainc/blackjack If you take a look at the link you'll see a program (well, a bunch of notes that resemble some bizarre string of consciousness) that calculates the total of your digital hand in the game of Blackjack. I've never thought so critically about the value of a card before! Throwing in the curveball of Ace being one of two values depending on your cards really throws me for a loop. Taking it one step at a time is key though and something I definitely need to improve on. This bit of JavaScript isn't quite as crafty as some other very visual aspects but it is still super addictive! In the same way solving a word search is though. I'm completely infuriated until I finally find the word I haven...

Now that we're in Week 2 we've gotten into a more secure, more custom routine that fits our cohort's needs. Rather than jumping into new material every day we have an opportunity in the morning to both go over the previous day's activity and to bring up any questions we had about the reading material for today's lesson. I've also had the opportunity to confront my learning curves: the first week I was learning SO much more than just the given material. I was not only grasping the first concepts of git, pushing to github, basic html, and css but also how to use a mac, what shortcuts I have available, how to work in the command line, how to learn in the flipped classroom model, AND generic programming vocabulary that doesn't actually line up very well with English definitions of the same words. We've been given a week assignment to turn in by this Friday but I went ahead and jumped into it over the weekend. I've only worked on one page so far but I f...