Tag Archives: P5.js

Montana Code School–Week Four

Our class had its first marathon weekend this past weekend, the first of six. We spent all day Saturday and Sunday as a class working on coding projects. Given their intensity, I’m glad these sessions are only held once per month. But it’s helpful to have some extended time to work on projects since our three-hour weekday classes just seem to whiz by.

Mob and Pair Programming

We’ve been spending a lot of time in class working in pairs and groups. The instructors introduced pair programming and mob programming to us in the first week of class, but now that we’ve been starting projects we get to put these ideas into practice. In pair programming, a technique associated with Agile software development, two people sit together and work at one computer. One person serves as the “driver,” the other as “navigator. ” The navigator sits to the side and helps by talking through the ideas that could get turned into code. Her role is strategic and keeps the pair connected to the program’s “big picture.” The driver sits at the keyboard and does the actual typing. His role is tactical as he figures out how to turn the ideas into actual code. Every so often the two rotate so the driver gets to navigate and vice versa. Mob programming is similar to pair programming, except that there are four or five people instead of two, and the team may be sitting around one or two larger computer monitors. All teammates rotate through the driver and navigator roles, switching roles every 15 minutes or so.

I confess that before being introduced to pair and mob programming techniques, if you were to have mentioned computer programming to me, I would have immediately thought of the solitary guy in his bedroom cranking out code. Having grown up in the 80s, that guy would look a lot like Matthew Broderick in War Games or Anthony Michael Hall in Weird Science. While coders still often work alone, pair and mob programming techniques do a lot to turn programming into a collaborative endeavor. Programming with others has additional advantages. The code produced by pairs or teams is usually of higher quality. Navigators have to make others understand their ideas before they can be programmed which leads to better communication and more accurate code. Drivers have teammates who can check for typing mistakes and syntax errors. Team members also report greater job satisfaction when pair or mob programming is used. The diversity of experience that is brought to pair or mob programming enables greater creativity too. For this reason, mob programming has been found to be especially valuable in the early stages of project development when the need to generate lots of ideas is greatest. These cooperative arrangements are ideal for coding novices. By watching and learning from experienced coders, beginning programmers can be incorporated into the programmers’ “community of practice” while contributing to work on real projects.

Not all situations call for group coding. Although it promises higher quality code, group coding is more labor intensive. The amount of code produced per person is less, which increases labor costs. When all the programmers are familiar with the software, as with an application that has already been in production for a while and where the main goal is program maintenance rather than idea generation, group coding is less advantageous. Experienced coders may also become impatient and domineering when paired with novices unless they are made to understand the benefits of coding in groups. Nevertheless, for those like me who may have veered away from coding because of the “lone wolf” stereotype, knowing that independent work can be combined with more cooperative modes makes the possibility of working in tech all the more enticing.

JavaScript libraries: jQuery and P5.js

One of the projects we worked on over the marathon weekend was a simple “to-do list” web application. For this app we had to work with basic structural and form elements in HTML so that users could add tasks to the to-do list. Additionally, we had to add CSS to style the page and make it look pretty. Then we had to work a bit with jQuery, a JavaScript library, to make the page more interactive. Most of our time was spent trying to figure out how to create balloons and have them release when someone checked off a completed task on the to-do list. To make the balloon shape we worked with a different JavaScript library called P5.js.

A JavaScript library is a collection of pre-written code that makes working with JavaScript easier. When using JavaScript libraries you aren’t always reinventing the wheel each time you write a new program since some of the base code has been written for you. P5.js, for example, allows you to jump in and use JavaScript easily to create dynamic shapes and designs. jQuery is one of the more popular JavaScript libraries because it makes working with the DOM—Document Object Model—more efficient. Since the HTML structure and CSS styling of a web page are essentially static, if you want to make the web page interactive or to include animations, you need a way to manipulate the HTML and CSS without permanently changing it. Since the DOM is a representation of the HTML document, you can work with DOM elements and create temporary changes to the HTML and CSS without altering the original files. For example, if you had a button on your web page that you wanted to turn from black to orange and to expand in size when you clicked on it, you would target the button element in the DOM rather than in the HTML file. Then you could program a JavaScript “event” that would be associated with that button element in the DOM and that would result in the button turning from black to orange and expanding in size when the button on the web page was clicked. In this case, the original HTML and CSS remain the same and the change in color and styling is only temporary. If you were to refresh your web page the button would go back to its original size and color.

While you can use HTML to target the DOM, using jQuery makes for a cleaner and simpler process. jQuery scripts, since they are based on JavaScript, can be kept in the project’s JavaScript file, allowing you to keep your programming of dynamic events separate from the static structures and style definitions in the HTML and CSS files. As opposed to JavaScript itself, jQuery works quite nicely across different web browsers so no matter which web browser your user has likely there won’t be any problems running your jQuery scripts.

After a lot of work, our group got our balloon-themed to-do app running quite nicely with a thousand balloons released each time a user checks an item off the to-do list.  No one is going to use our app for actually tracking completed tasks (the app’s a bit too basic for that), but we had a lot of fun inventing tasks and crossing them off just to release all the balloons.

For a look at our balloon-filled To-Do app, click here.

For additional reading on Mob programming: