From Craft to Code

It is officially the last week of career development at The Iron Yard and our prototype, even stretched, is complete! Today Kelly and I review the presentation, practice it, and film tomorrow during rehearsals. October 25th is demo day and we are prepped, practiced, and ready to go! I am very proud of what we've been able to accomplish in such a short amount of time! Over the next few weeks I will continue to work with the Center on implementing our prototype and then continuing to maintain it over time. The experience I've had working with them is invaluable and I am absolutely grateful at the opportunity to work with the community and build something that will help sustain and grow the LGBT Center of Raleigh. I am already looking forward to the lessons I will learn going forward. I anticipate a trial period that will require changes to our design. After hearing feedback from the community, volunteers, and members I anticipate a lot of excitement but certainly items tha...

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

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

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

As I dived into learning back end development there have been a lot of concepts thrown at me at once. There is a certain amount of information about how the web works (sending and retrieving information) that is helpful to learning a backend language. There is the actual backend language to learn including unique commands and syntax. There are also tons of packages that have various purposes. Each aids in different tasks that execute code differently. Think tools in a toolbox. They're all tools but each one does a unique task. After those packages are installed in your project they still need to be required. Once they are required, they still need to be turned 'on' and that is my boilerplate code. Then the real code happens. The logic. The problem solving. Code really is a puzzle and I find myself stuck on the last piece all the time!

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

As we're going through new material I've started to rely heavily on our reading as a resource. My objective throughout the day isn't to be able to build code from scratch by myself - it's to know what resources to use to do it. Half of the battle is knowing what tools you need and the other is how to implement it. If I can figure it out using the reading from the night before I know I'm doing something right. Some of the students are reaching the part of overwhelmed that I hit my first day. They had previous background in HTML and CSS so they breezed through the first three weeks and now feel stuck. It sounds condescending to recommend the night's reading to them but that's how I've been getting through the whole time. Take, for example, XMLHTTPRequests. After the reading and the lesson I learned they facilitate the process of my code retrieving data from another 'location' on the web. Knowing when I want to use an XMLHTTPRequest and how to wri...

It's my birthday! But it's also Monday so I'm back to programming just like any other week. I'm ahead, for now, and spent the weekend working on a personal project! Instead of sketching it out like I know I should I jumped right in and expanded on my project until I got stuck. Then, instead of working out that knot in my code I just jumped into another project instead. Probably not best practice here. On nights and weekends I'm still crafting and practicing photography. I'm trying to build a site for each of those. Ultimately, what I would like to do is build just one single site that ties both hobbies together. I don't have anything down on paper yet but I'm willing to bet I will tonight. As these sites progress I'll update on my bugs and how I worked through them. Right now, on my photography page, I'm have the hardest time getting my images to work properly. I have them embedded in my HTML just fine but CSS is a different kind of cranky. I c...

Never have I ever put so much thought into how a calculator works. Our weekly assignment, due this upcoming Friday, is to create a static webpage that will display a green calculator that not just looks pretty but functions correctly. The looking pretty is HTML and CSS which we covered a grand total of two weeks ago and I'm already feeling rusty on. The functionality is all JavaScript. I seriously can't believe that in three weeks I'm already familiar with and using (kind of awkwardly) these three languages. In about five hours time I accomplished all of the above. I have green buttons that when pushed are displayed in the empty field at the top of the page as well as can mathematically work (as long as the operation is simple and done one step at a time). For now my GitHub link is  https://github.com/victoriarainc/week-03-project  but I will update later this week with the actual page so you can interact with my code! Yay progress! All in all I'm super proud but...

JavaScript is if loops, DOM manipulation, template literals, nested arrays and objects, and a load of new commands I have literally never worked with or even seen before last week. Here I am feeling like I've taken the first baby step (a huge step!) in to the right direction. I can actually start a project, ask the right questions, and use the correct resources. I may not be able to finish. It may take me all day. But I can start and I'm not going to take that achievement for granted. https://victoriarainc.github.io/week-02-project/ This page isn't beautiful or interactive but all that was required of me was to print those same answers to the console (a tool in Chrome you can access by right-clicking on that page and clicking 'Inspect'). Before submitting I realized my page was just completely empty. A white page. Which is what my instructors are expecting but I didn't want to settle for that. I had a few extra hours last night and spent that time 'd...

In the midst of being completely floored by today's content going over my head, template literals are shining through the confusion. DOM modification itself I was pretty fuzzy on for a while. Then I came across a real world reason to do so! I learned that you would want to write HTML in your JavaScript file in order to link JavaScript to specific elements in your HTML! How would you do that? By creating a template literal that not only created the HTML that doesn't already exist but to nest commands and links inside of it that only Javascript can understand. This makes your page much more dynamic and allows for content to change easily without rewriting any code. For all of my crafters out there, this is equivalent to making a stencil! Image you want to draw a speech bubble around every month in your bullet journal. You could try to draw one around each month and hope that you get a similar size and shape. Or you could just make a single stencil (I've been 3D printing...