Tag Archives: coding

Real World Web Development

Since I graduated from The Iron Yard, I’ve turned my attention to my own websites, of which I have several, to rewrite them and improve them. As I anticipated, real world experience is a little different than the experience in the classroom.

I’ve started with 2 sites: a site promoting me as a web developer/social media expert/video provider at http://websites.co.technology, and an informational site featuring my healthy living books at http://weightlosssuccessbook.com.

I wasn’t far along in developing these sites when I realized I would have to learn some additional skills in coding: working with social media widgets, for instance. But, I knew enough to realize I needed to find the developer’s area of Facebook, Twitter, etc. to get the code that I needed to put a social media widget or badge on a website. Once there, I needed to select the options I needed, and modify the code for the website, and again, the concepts I learned in class helped me to get everything working. In some cases, the process was fairly clear. In others, I had to search through the developer part of the site before I found the code or the combination thereof to use. I got one widget working in a timely manner. Another didn’t work, so I had to keep going back until I found a section that had code that worked for me. Yet another time, I kept getting error messages which did not make sense. So I did what I remembered hearing in class: I copied and pasted the error message right into Google, and immediately Stack Overflow said that the code wouldn’t work in a simulator, or even localhost…it would only work on a live web page. And indeed, that’s what did work.

I found some curious omissions, such as getting error messages because of the absence of “http” in the code for an “src=”…when I inserted the “http” it worked, but I wonder why it was missing in the first place.

Some code worked…and then it didn’t…and then it did…and then it didn’t. Same code.
Also, as I mentioned earlier in this blog, the documentation for these and other items was sometimes frustratingly obscure. Again, I learned enough in class to eventually determine what was going on by myself, but I can definitely see how, when I was just starting my classwork, I was not able to grasp some of the coding concepts explained in online documentation right away. They definitely presume that the reader knows things that a novice may not, in fact, know.

In spite of these obstacles, I got the 2 websites working satisfactorily. (I even successfully added a favicon and web counter to each site!) Now to see whether I can get my other websites updated as well.

Writing Code, Writing Stories

I’m probably not the first to notice that writing code is very similar to writing stories. There is structure and creativity involved. There’s writing the first draft, editing the draft, and then publishing the result for the public to view. There can be second/revised editions. There can be collaborations. Reviewers check and comment on the published result.

In particular, I’ve noticed that when I write a story, and think it’s complete, I still wait before sending it off or publishing it, because in the following days or week, I will get additional ideas on what to add, delete, or change. This has also happened with my code: I thought my “Demo Day” project was complete, but after a couple of days, I got additional ideas for improvements.

There’s definitely a similar feeling of accomplishment and satisfaction upon publication of either code or prose. The sense of fun in building also applies to both activities.

It’s hard to select a preference for one or the other; I think I’ll continue happily doing both.

The Goal of Web Development

Lately, I’ve been constructing web pages for my online portfolio and for display on my own domains. One of the web pages I have made (this was the result of a class assignment, and it was a page that I wanted to make for myself) is the Astronomy Picture of the Day from the NASA API. (For those not familiar with APIs, they’re databases an entity keeps and allows others to access and use through a key). I made and styled my own Astronomy Picture of the Day and compared it with NASA’s. NASA’s is larger and has a lot of links and added information. It’s great for those who want links and added information, but to me, the appearance is “busy.”  I styled my own Astronomy Picture of the Day (which NASA encourages the use of its API for – essentially, they tell web developers such as myself, “go ahead and make your own Astronomy Picture of the Day using our data.”), and I find it much more to my taste. I’m now checking my version daily.

Similarly, I made and styled my own weather app from the Open Weather API (the Open Weather API essentially says, “go ahead and make your own weather report using our data”). I realize there are a number of weather apps out there that users can customize to their personal tastes, but this is my very own weather app that I specifically styled to my own personal tastes and I am happy with it.

It occurred to me that this is the goal of coding (or more specifically, front end web development): to make applications/web pages that present users with the information they want in the style they prefer. I find this both challenging and exciting, and is one of the reasons I find coding so much fun.

Week 11 at The Iron Yard

My project for Demo Day was nearing completion this week. I made the pages responsive, mostly with the use of the Aphrodite library. I also added a “print” button to the main directory page. Right now all that I may need to add are more test entries and perhaps some minor styling changes.

With the Demo Day project well on its way to completion, I spent time this week learning additional skills by working on additional projects. I built an online portfolio, with screen captures of projects I have completed, and links to both the code on GitHub and to the working web pages. The portfolio page also contains a summary of what I’ve learned at The Iron Yard.

I felt a great sense of accomplishment on Thursday when the API call that I sent to the Open Weather API worked on the first try. I spent most of the rest of the day on Friday building my own weather app, which I’ve wanted to do ever since The Iron Yard Crash Course I attended before starting week 1.

Our campus director started talking about job seeking skills this week, which was most welcome. She invited us to find three job listings for web developers, and I was pleasantly surprised to find four that I felt I was qualified for.

Next week is week 12…even more learning to come!

Week 10 at The Iron Yard

This week I started my project for Demo Day and worked on it for most of the week. I was very pleased with the progress I made this week, and even more pleased with the fact that I was learning more ways to use JavaScript and ReactJS to build a web page. For example, I wanted to make a list from a string where the entries were separated by carriage returns. The method I first tried resulted in error messages. So I searched on Google for a technique that would work and was directed to stackoverflow.com, where I found an example that was similar to what I wanted to do. In particular, it suggested that the method be placed between the render and the return, instead of within the return. I did and it worked. I have searched Google for information on other techniques I have wanted to use, and have found it (and stackoverflow.com, among other online resources) to be helpful. I’ve also been using Trello to keep track of the features that I want to include and my progress on those features (those not started yet, those in progress, and those which have been completed).

I also made more progress on preparing an online “portfolio” of my work. I have three projects in place and visible (a chat function, an API call to the omdb media database, and a “guess a number” game), but need a unifying home page. That’s still in the beginning stages, but taking shape.

Our class took a field trip to Best Buy headquarters to talk to the web developers there. They gave us a tour and answered our questions. It was informative to learn about what sort of work they do, and what sort of knowledge and skills are required in their jobs. They’ve offered a place there for our Demo Day in September.

Continuing work on the Demo Day project next week. Still having fun!

Week 9 at The Iron Yard

The week started out on Sunday when I took a look at some code that Jim had introduced to us about a month ago. At the time, I had only a vague idea of what the code was for and how it worked. Now I realized that I understood it fairly thoroughly. (Progress!)

Early this week, we all worked on getting our chat functions working with Horizon, placing data on a web page for retrieval. Wednesday we had a lecture on Java (even though our course is front end web development) so that we would have an idea of what it was about and what it did. Thursday, our class voted to have Jim go over APIs and jQuery (he included Bootstrap as a bonus), all of which was very useful. For the afternoon lab session, we were asked to develop code to get data from an API with  jQuery, and at the end of class I was feeling discouraged because I had been unable to make a successful connection to the server. After a brief discussion on Slack in the evening, I was back on track on Friday and made a successful API retrieval using jQuery. Not only that, but I felt I understood the jQuery code clearly.

I have been going over previous assignments and improving the code and functionality in preparation for building an online “portfolio” of my work. I am very pleased with myself for taking code that I wrote only 2 weeks ago and making significant improvements to the style, functionality, and sophistication. Friday afternoon, Jim went over with me how to place that code on one of my web pages to start the online portfolio.

Friday morning we also went over my project for the upcoming “Demo Day” in detail, mostly diagramming it on the board.  Working on this will, I expect, take up a significant part of the next 3 weeks. I feel excited about getting started with it.

Week 8 at The Iron Yard

We continued our work in React JavaScript this week, with an introduction to Horizon and RethinkDB to facilitate placing data on a web page. Our exercise this week was to develop a chat application. At the end of class on Tuesday, I was feeling discouraged because I had worked all afternoon and not made much progress with the code. However, by the end of class Wednesday, I was making significant progress, and on Thursday I was seeing satisfactory results.

There are still some subtleties in the code that I am working to grasp. However, I realized that while I may not understand everything completely at this point, I am gaining more familiarity with the code the more I work with it.

I also had some difficulties uploading code to GitHub; again, because of not realizing the ways that GitHub handles uploaded files. Fortunately, Jim (our instructor) was able to suggest the appropriate instructions to get things working again.

I also discussed my idea for my project for “Demo Day” with Jim, and was able to define some realistic goals.

Jim says one more week of lecture, and then we begin work on our graduation projects for “Demo Day.” This promises to be exciting.

Week 7 at The Iron Yard

We continued our work on React this week. Our activities included splitting our previously written JavaScript code (in earlier assignments) into Component modules, and learning web navigation using the Router tag. We also learned how to set up scripts to install webpack functionality, and how to reference fonts within React components. I’m impressed with the results of our coding exercises: we are building more and more sophisticated web pages.

When discussing our progress for the week, one of my fellow students remarked that the times when we think, “Oh, yes, we’re getting this” are often accompanied by thoughts of, “oh, no, this is really hard and will we ever understand this?” Certainly I have felt this way, though I know from past coding experience that eventually, yes, I will understand this, and having moments when I wonder if I ever will are part of the process (though undoubtedly frustrating at the time).

In any event, looking forward to seeing what we can build next week.

Halfway There: Week Six at The Iron Yard

This week we worked on React, which is a JavaScript subset (or library) that makes coding applications more concise. In particular, it facilitates output to the web page (and input from the web page). At this stage, React seems more complex than the JavaScript it is based upon; however, as with most code, I presume this is just a matter of getting used to it.

During the week, we had a group exercise, which was enlightening not only due to the fact that working together helped us reached a result a bit faster than we might have done individually, but also because it demonstrated that those of us in the class are all pretty much at the same level in feeling challenged by the code. We are also all open to seeking out different ways of understanding and building the code, and sharing that information.

We also celebrated the fact that we’ve completed week six – halfway through the course – and took a class picture.

Web Documentation: Week Five at the Iron Yard

This week we had guest speakers. On Monday, the speaker covered the work environment for a developer (writing code for the web). Tuesday and Wednesday the speakers covered features of es6 (a 2015 update of JavaScript). Thursday the speaker covered debugging JavaScript code.

This week, a particular challenge I had was to place the code for an input box in the html file (and thus on the web page), capture the value entered into it on the web page, and transfer that value into JavaScript for processing. I spent hours (literally) searching the web for a procedure that would do it. I would follow the instructions and get error messages. I would repeatedly see comments saying “just do this” or “this would do it,” but they didn’t work, and the meaning was not clear to me. After numerous failures, I finally tried some simple input and capture code, as best as I could understand it. With the help of a classmate, Hunter Hawes, I finally got it working.

Here’s the process in brief:

In the html file, the following code places an input box with a submit button next to it on the web page. After the user enters data in that box and the user clicks on the submit button, the data is placed in the variable “number” and the function GuessNumber in the JavaScript file is called and run:

<form>
Enter number: <input type=”text” name=”number”>
<input type=”button” onClick=”GuessNumber()” value=”Submit”>
</form>

..which shows on the web page as:

Enter number:

 

In the JavaScript file, document.querySelector puts the value entered in the box on the web page (stored in the variable “number” from “input’) into the variable mybutton:

var mybutton = document.querySelector(“input”).value

..and one can proceed from there. Why this concept was nowhere explained in clear and concise language in the sites I visited is a mystery to me. I’m finding a lot of the coding documentation on the web is not well-written or clearly explained. It appears that a number of contributors may be proficient at writing code, but less proficient in writing explanatory prose. This can become a problem when researching information.

P.S. A direct, one-line JavaScript capture code does exist:

var guess = prompt(“Input number between 1 and 100”);

where guess captures the data entered into a pop-up box on the web page which is labeled “Input number between 1 and 100.” However, most users prefer to avoid a pop-up box, and there are other disadvantages as well. It will get the job done, but may not be the most efficient way to gather information on a web page.