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!

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

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

Last week I learned about Mongo - a NoSQL data structure. This week we've covered the opposite. SQL is much more structured and rigid but does allow for an 'easier to organize' approach. More time and thought has to be put into a table's creation. Extra data can be added after the fact but it is easiest to have all of the data you know you want to collect ahead of time. Basically you're turning your raw data into a spreadsheet. That is, SQL is great for data that already exists and needs to be organized.  Unfortunately most of this happens behind the scenes and is executed in the command line. That means I really don't have any images to share. Even when turning in my assignment I had to export my raw data into a file and upload that with a README file explaining what I did to achieve that success.  Tables are just organized data and can be joined to filter out needed information. Those queries look something like this:  SELECT title FROM todos WHERE com...

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

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

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

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

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

My post yesterday was so easy going and relaxed I just had to update today. Yesterday was hard. Yesterday was hours of pseudo coding and talking out concepts and searching through our reading materials for hints. We've moved into DOM and integrated for loop concepts. The giant, looming brick wall was also combining last week's knowledge of how a <form> is structured in HTML. Well, on top of constantly checking syntax and never knowing where in these four concepts our code was faulting. A fellow student and I worked together when we realized we were at similar points in the learning curve. The task itself seemed pretty simple but if you read my .js file here:  https://github.com/victoriarainc/form_builder  than you can actually read in the comments under "the long way" the thought and problem solving I put into trying to reconstruct a dynamic input form. As in, a form that had the proper space for me to input the different types of information. I understood...

This weekend was supposed to be a retreat into beloved hobbies while I felt ahead in content for The Iron Yard. I achieved this goal on Saturday by going to a local Stamp Art Tour here in Raleigh and buying more than I needed but certainly less than I expected! After organizing all my new product and setting my self up to craft last night I thought I would spend all day today making cards and scrapbooking. Instead, I find myself working on index cards, rewriting my notes to look prettier, and knocking out enough changes on my side project to push a commit to github! Currently, I have a facebook page with a small collection of albums that hold some of my pictures. It's pretty much a super informal portfolio:  https://www.facebook.com/viphotography.raleigh/ . It certainly isn't a terrible way to go about displaying past work. But it isn't the greatest. As a way to both improve my brand and practice my development and design skills I've started to build my own page. I kn...

This week has been the week of a Tuesday holiday; both incredibly short and surprisingly long! I've been consistently on top of my work out of habit, thankfully, but I'm ready for material that I feel solid on. I guess in a way I should embrace this uncomfortable feeling that I don't understand what I'm doing as technology itself is never just one thing and constantly evolves. As we get more into JavaScript I will be excited to see how to actually use it in my HTML and CSS. So far we've mostly covered concepts like truthy/falsey, if statements, if/else statements, and pushing to git pages. Compared to last week it feels like we barely covered anything but I'm happy to take this step by step now. The weekly project was a challenge but I knew myself well enough to space out the web page one piece at a time. All of the concepts I thought would be difficult, like parallax and favicon, were unbelievably easy. Yet I still feel shaky on when to use flex and when to u...

After one week of diving straight into hands on coding my brain is fried but my spirits are high! I know there is so much work ahead of me but knowing that I'm capable of learning at this pace is really encouraging. Just five short days ago I didn't know anything about command line, knew conceptually how to push project files to git but never actually had confidently, and certainly hadn't ever created a mock up of a web page from scratch with HTML and CSS. Along the way I've discovered there were more road blocks in my way than I realized. I haven't ever been familiar with Mac interface so just looking for my files and switching between windows took way longer than it should be. I'm not super in tune with my learning style either so it has been difficult to sort between what I didn't understand and what I couldn't remember. Any mistake I've made along the way I doubted my understanding of the material instead of assuming I spelled something wrong o...