December 15, 2017 Meeting

This evening’s meeting is at 25N Coworking at 5:45 pm.  It is our last meeting of 2017.  Looking forward to seeing everyone there!

AGENDA

Last week’s guest speaker, Grace Haaf, had so much great information to share that we decided to dedicate the meeting to listening to her career journey in the field of tech and having a great discussion on what the future holds for our girls, today’s challenges for women in tech, and how to make a positive impact on your community by utilizing the tech skills learned in college and beyond.

Now this week, we will be working with the Snake Game, Makey Makey kits, and Object-Oriented coding.  Please see last week’s agenda below for details.

Advertisements

December 8, 2017 Meeting

This evening we will meet back at our usual time and place: 25N Coworking at 5:45 PM.

Agenda:

Guest Speaker: Grace Haaf. Grace earned a PhD from Carnegie Mellon, has done extensive work in engineering and big data as well as owning her own company and recently participating in the Democratic primary process for the IL 6th Congressional District. We are looking forward to hearing her perspective on working in tech while being an active and engaged citizen in the political process.

Techie Table Talk:  Following Grace’s presentation, we’ll hang out around our Conference Table where our FVGCC Members can share thoughts on what we just heard or discuss other ideas and interests related to tech fields, women in tech, educational opportunities, projects we may work on, upcoming events, etc.

Slither Onward with Game Development — It’s time for the Snake Game!

  • Let’s Play! Fire up the code in our Chapter 6 code directory in Cloud 9 and try out the game to get a feel for how it works
  • Makey MakeyAdd a Makey Makey input device and get creative on how to connect to the game!
  • Get a glimpse of Object-Oriented coding:  We will take a brief look at how the game uses the concept of a class and an object that represents an instance of that class. 
    • Classes and Objects are the most important concepts in Object-oriented languages like C++, C#, and Java.

Class: a template representing some type; it has properties that hold values representing state and methods (aka functions) that invoke behaviors. Example: we can define a class Snake that has properties for size, body, skin, isAlive, and more. The properties may be given initial values within the class definition

But does JavaScript have real classes?: JavaScript didn’t have an actual “class” keyword and syntax until a 2015 specification which may not be implemented yet by all Browsers; see this MDN article on JavaScript classes

Constructor Function declaration conceptually implements a class: In the Snake program (written prior to the 2015 addition of “class” to JavaScript),  the Snake variable defined by a constructor function is conceptually a class

Constructor: a function used to create a new instance of the class; it may have parameters which are values passed to the function and used to set some initial values for the object. The Snake constructor starts like:

 var Snake = function(x, y, width, height, maxSize) {

Object: an instance of a class that can have its properties set and its methods invoked in code. For example, we create a Snake instance like this:   var snake = new Snake(0, 0, canvas.width, canvas.height, 1000);

December 1, 2017 Meeting

NOTE: Our December 1st meeting will be held at the St. Charles Public Library.  We will meet at the usual time 5:45PM to 7:45PM 

Agenda

  • Fix the Jelly Wobbly Gravity game! With the book’s original code, the character won’t move…the jellies are all dropping in the same line and splattering before hitting the floor…the character isn’t able to get sick from the jellies because the “collisions” have no effect. Let’s help The Dude enjoy (or not) his fill of jellies!
  • Make your own changes to any part of the game and/or to your site’s home page
    • We can do some changes as a group if there are suggestions and desire to do that
    • We can help each other with updates to individual pages

Resources

To copy the JavaScript file with all the bug fixes:

  • Go to the file on GitHub: Wobbly Jelly Gravity Corrected JavaScript
  • Click the “Raw” button when viewing the file
  • Right-click and select “save as” to save it to your machine
  • Upload the saved file to your project in Cloud9 and swap it for the “bad” JavaScript. Detailed instructions for doing that are in the debugging document in the below link

Detailed notes for the debugging exercise and concepts:

A working version of the game: Jelly Gravity

November 17, 2017 Meeting

Tonight’s meeting will be a feast of engaging presentations by:

  • Our first tech talk of the year!: Erin Maresko, who designed our FVGCC branding, will give us her insights on technical design
  • Our very own Hackathon team: Our members who participated very successfully in the Huskie Hackathon at Northern Illinois University will share their experiences and demo the results of their all-night programming efforts
  • Our very own instructor: Robin will give us a mini-version of her presentation for Fox Valley Computing Professionals on Cross Platform Mobile Development with Xamarin

November 3, 2017 Meeting

Dissect the Typography Game

We are looking forward to tonight’s meeting at 25N where we will be taking a deeper dive into the inner workings of the typography game.

Explore the answers to these questions and more:

  • What happens when the user enters the URL into the Browser? How does the Browser process the request? How does it integrate the styles in the CSS file and the code in the JavaScript file with the HTML elements on the page? 
  • How does clicking a button or pressing a key cause something to happen on the Web page? The keydown and click events!  What is an event listener? What is an event handler? What is a keycode? Reference: Keycode lookup
  • How do we define a single object that can represent either the player or the “bad guy” in the game? Define a function that is used as an object constructor; within the function define methods such as “move” and “setSpeed”.  Use the keyword “new” to create named instances of the class – “hero” and “enemy”. Use those named instances to control the players. Examples: hero.move()  or enemy.setSpeed(speed * 23)

Document: Notes for today’s activities

Updated Notes for Web Development

In case anyone missed a meeting or needs catching up, here are some technical notes on what we have done so far in our Web Development meetings. The documents also include more details on some of the concepts we are covering:

Week 1: Getting set up with Cloud9 and GitHub; cloning the code from a repository

Intro To Web With Cloud9/GitHub Notes

Week 2: Adding and editing files in a Cloud9 workspace; Git commands; pushing your Cloud9 code up to your GitHub Repository; publishing your site on GitHub

Web Week 2 Notes

Week 3: Languages of the Web: High level look at use of HTML, CSS, and JS. Web directory structure: organizing your files. Hands-on exercise: clean up the sample code for the “Chapter 3” project from the book, separating the JavaScript and CSS out of the index page. Brief look at Dev Tools and Debugging

Web Week 3 Notes

 

October 27, 2017 Meeting

We are looking forward to another fun meeting full of discoveries! Here’s some of what we are planning:

  • Help anyone get up to speed who hasn’t completed the GitHub and Cloud9 setup and basic Web pages from the previous 2 weeks; don’t worry if you weren’t able to attend those meetings
  • Notes about the Book and the source code
    • Sample code in our Repo has different chapter numbers than the chapters in the actual book, i.e., Chapter 3 code directory = Chapter 2 of book
    • the book focuses on  on what the HTML5 specification adds to the “older” specifications of HTML, CSS, and JS and assumes knowledge of basic HTML, CSS, JS, so we will review the basics of these 3 Web languages
  • Three Languages of the Web:
    • HTML: HyperText Markup Language – determines  structure of the page content -> the SKELETON
    • CSS: Cascading StyleSheets – determines appearance of the page, the presentation (colors, fonts, and much more) -> the SKIN
    • JS: JavaScript – determines actions on the page, the behavior. For example, what happens when you click a button, hover with the mouse, or when the page loads -> the MUSCLE
    • Remember that the W3 Schools Tutorials are an excellent resource for learning these languages and many other Web Development skills
  • Typical Web directory structure
    • Explore the folders for css, img, fonts, and js as in the Chapter 4 code folder
    • Look at the index.html page for Chapter 4’s code to see how the css and js files are linked to it
    • Compare to Chapter 3’s index.html (Typography Game, chapter 2 in book); note how the CSS is embedded between <style> tags in the <head> and the JavaScript is embedded between <script> tags just above the closing body tag
    • Group exercise: Separate out the CSS and JS from Chapter3/index.html into separate files and link them in the index.html page. It will help to have the code folding setting turned on in Cloud9 to make copying easier. Menu Cloud9 –> Preferences –> User Settings –> Code Editor
  • Debugging:
    • Debugging tools are used not only to find “bugs” in the code but to analyze running code to understand what is going on
    • Chrome Debugging Tutorial
    • For the Typography Game, let’s run through a brief debugging session to see what the code is doing, how to step through it, how to change a variable, as well as inspecting the HTML/CSS. Analyze how the game works and find something you would like to change
    • Small teams or individuals can work on each making a change to the code, change something in the CSS or the JS or the HTML, then look at it in the debugger