My Coursera Journey

Introduction

Welcome to my website! My name is Timothy Moulder, and I am employed at Stanley Black & Decker as a Controls Engineer. One of the great features of my company is their strong commitment to continuing education, a commitment they back up with a variety of educational opportunities for employees. One of those opportunities, in turn, is taking online classes through Coursera.

As an industrial programmer (ladder logic) I have always had an interest in object-oriented programming, because I work with actual physical objects. As the platforms I work with have evolved over the years, how they program has changed as well. Ladder logic is an interesting medium, because it is both a high-level language (using graphical symbols), and a low-level language that deals with binary math to the bit level. Many newer controllers, however, offer programming in languages resembling BASIC, C, and even Java.

I am currently studying the Java Specialization series of classes. The first course in the series is Programming Foundations with JavaScript, HTML and CSS. Although I did not set out to learn HTML, CSS and Javascript, this course is a prerequisite to the later ones to gain the Java Specialization. I fully expect to learn good things from this course, and will give it my best effort! I am already seeing some benefit to it, especially as many of my peers on trade forums and such seem to have a great deal of knowledge on these subjects.

From the first week I have come to the conclusion that learning this subject is much like learning a foreign language - you need to use it every day. As such, I've opened this neocities account and am writing this page in HTML, using the lessons taught in the class. I will be updating and enhancing it as I continue through the course.

I should point out that this was not the first class I took in Coursera, so I will review that class.

Code Yourself!

When I was choosing my first class for Coursera, I had a few specifics in mind:

  • I wanted a class that discussed the concepts of object-oriented programming, without too much focus on the syntax of the lanquage.
  • I wanted a class that was visual, so I could better understand how the concepts fit together.
  • I wanted a class that would help me learn find my way around Coursera.

Code Yourself was an excellent introduction that hit every mark. It uses Scratch, a programming "language" designed by the wizards at MIT, that replaces lengthy text with an easy-to-use, colorful lego-style pallet of blocks to assemble programs. The instructors and materials were first-rate, easy to understand, and engaging. The projects were challenging, but no insurmountably so.

Here are a few key take-aways I learned from the course:

  1. Every object in the program - from the background to the sprites - has it's own code and data, a key concept of object-oriented programming. For instance, you can add a sound as a resource for a sprite, but if you wish to use that same sound for another sprite, you must add it as a resource for that sprite as well. You cannot call a resource in one object from another.
  2. Code for a given object only affects that object. A "Hide" block in a given sprite will hide that sprite, and only that sprite. You cannot call a Hide command to a separate sprite, it must instead be implemented there. Additionally, there is no facility for code apart from an object. There is no supervisory process governing the rest of the program.
  3. Both of the above are examples of encapsulation, which is apparent in the programming, but not explicitly mentioned in the course.
  4. There are two main methods for exchanging information between objects. Variables may be global or local, and I used global variables in my first project as a method of coordinating the flow of the scene. Looking back on it, while valid, this was cumbersome. This got me thinking about the way I communicate between different elements of my own code, and looking for better ways to execute it.
  5. The second method for communicating between objects is with messages. All messages are transmitted from the source object globally to all other objects - if a given recipient has code within it referencing the message, it will trigger when the message is received. If not, the message is ignored. This is very similar to message technique used in both CanOpen and Ethercat. In addition to providing more understanding of how these protocols work, it also provided an example of ways I could implement a similar system in ladder, and prompted me to review the techniques I currently use in light of this new information.
  6. Concurrency is also explored at length. Code for multiple objects can be triggered by global events, variables or messages. Furthermore, code within an object can be divided into sections, and multiple sections can be triggered simultaneously as well.

Overall, I felt the course was very useful as an introduction to object-oriented programming, and I recommend it to anyone looking for an instructive (and fun) introduction to basic concepts.

Taking Notes in CodePen

I've concluded the second week of Programming Foundations with JavaScript, HTML and CSS and I wanted to take a moment to look at one of the tools they use in the class, a website called codepen.io. Codepen has it's upsides and downsides. On the one hand, it is easy to use, very forgiving, helps find errors in your code, and features a live preview of the finished site. On the other hand, it covers up some of the nut-and-bolts of the subject, like how to link a CSS to an HTML document, and even the use of some tags. Those nuts-and-bolts are why I'm doing this, so that is a drawback to me. Also, you end up with a "pen" that can only be ran in their environment, not an actual web page.

One big advantage I like though is their layout. There are three windows side-by-side: one for HTML, one for CSS, and one for JavaScript. I found this very useful, since I was always needing to jump back and forth between them. I take notes for my classes in Evernote, and I eventually realized I could create this same layout in Evernote using a table, which made my notes much more space efficient and easier to read.


HTML
CSS
JavaScript
<div>
<h1>Changing CSS Classes</h1>

<div id=d1>Hello</div>

<div id=d2>Goodbye</div>

<p>
<input type="button"
value="Change Color"
onclick="changecolor()">
<input type="button"
value="Change Text"
onclick="changetext()">
<input id=dontclick type="button"
value="Don't Click!"
onclick="changevalue()">
</p>

.yellowback {
background-color: yellow;
}

.blueback {
background-color: lightblue;
}

function changecolor() {
var dd1 = document.getElementById("d1");
var dd2 = document.getElementById("d2");
dd1.className = "blueback";
dd2.className = "yellowback";
}

function changetext() {
var dd1 = document.getElementById("d1");
var dd2 = document.getElementById("d2");

dd1.innerHTML = "Bonjour";
dd2.innerHTML = "Sayonara";
}

function changevalue() {
var dc = document.getElementById("dontclick");

dc.value = "Ow! Stop it!";
}

Confession time - It turns out displaying HTML on a web page is insanely difficult, so I created the table in Evernote and exported it out as an HTML page, then copy-pasted the code into my page. It pasted as one long block of text, so I parsed it out and corrected the vertical alignment :)

Programming Foundations with JavaScript, HTML and CSS

Going into this course, I admit I wasn't interested in web page design. I took it because it was the first course required in the Java Specialization series. Having finished, I'm glad I committed to it - it's not every day you walk away from a 4-week course with both a certificate and a completely new skill set! It was challenging, engaging, and I feel a real sense of accomplishment coming away from it.

The material covered was exactly as stated - HTML, CSS, and JavaScript. The first two weeks are focused on HTML and CSS, the third week is focused on JavaScript, and the fourth week was about tying it all together. They employed several tools, including a custom programming environment for the course, and CodePen, which I reviewed earlier. There was plenty of resource material to refer to, which was laid out very well - a good thing, too, since I was referring to it a lot.

Here are some of the take-aways I learned:

  1. After the first two weeks, I had enough of a foundation in HTML and CSS to open my own neocities account and create my own web page. I learned enough to be able to ask the right questions and explore further on my own, building on that foundation. My intent is to expand on it further and add more content, to keep what I have learned fresh in my mind. And besides... it's fun! I can see why people make a career of this stuff.
  2. JavaScript as a language has elements that are object-oriented, which suprised me for a language called "Java-Script". JavaScript is used to add interactive elements to web pages, such as uploading files and manipulating images. It's a remarkably versatile and powerful language, and I gained a real appreciation for what it can do, and some profound respect for people who code with it every day.
  3. There was a lot of material covered in this course, and you gain a wealth of knowledge from it. However, it also brings me to my only criticism - at times it was a lot to take in. Week Three in particular, with it's aggressive 7-hour workload, seemed like it could have been broken into two weeks. I am doing these courses in the evenings, and it's difficult to fit in that sort of time commitment. Let's just say, that week the lawn did not get mowed.

On a more intangible note, learning about how web pages are created, the nuts and bolts of it, I found myself looking at the internet in a whole new way. Being an old dog, I've always treated the internet as a tool to get things done, a sort of cross between the Encyclopedia Brittanica and the JC Penney catalogue. I came away from this course with a new sense of the work that goes into the sites I use every day, and also for the craftsmanship that goes into making them attractive and user-friendly. I guess you could say I've learned to stop and smell the digital roses.

In conclusion, I highly recommend this course. Be prepared to work for it, but you will come away with some terrific knowledge, some great new skills, and maybe a fresh outlook.

Programming Foundations with JavaScript, HTML and CSS - Mini Project 1

As part of the class, we worked on a number of projects. Below is one I created in Week 4. It's a script that allows you to upload an image and apply a variety of color filters to it.

The code includes a link to the class's special JavaScript library, called SimpleImage. Incorporating SimpleImage into the page adds a number of functions that make it easier to work with images in this manner.

Index