remixz

const colors = [
  "#f2dfd8",
  "#f6e3dd",
  "#f7e6df",
  "#f9e8e1",
  "#fae8e4",
  "#fae9e2",
  "#f8e5d7",
  "#fae8dc",
  "#fcebe1",

remixz

const Component = require('peaceful')
const bel = require('bel')

class Hello extends Component {
  constructor (props = { thing: 'world' }) {
    super(props)
    this.state = {
      thing: this.props.thing.charAt(0).toUpperCase() + this.props.thing.slice(1)
    }
  }

remixz

Week 3.5 - Your Personal Website

Howdy! For the past few weeks, you've been exploring what computer science can do, and experimenting with a variety of different concepts. Now, we're going to do something a bit different: We're going to create our own personal website from scratch. Don't worry! It's not as scary as it sounds. In fact, it doesn't really sound that scary... a personal website actually sounds pretty friendly. Maybe if we put something frightening on it... okay, let's not get ahead of ourselves. Onwards!

Before you begin, you'll need a GitHub and Cloud9 account, which you likely set up in your first week. If you don't have these accounts set up yet, then follow this tutorial on how to set them up.

Creating your personal website file

In the past few weeks, we created folders for our different experiments, so that we could keep them nicely contained. However, for this workshop, we're going to create a file in the main folder of the workspace, otherwise known as the "root folder." Th

remixz

Text Adventure 1: Twine

Welcome! Over the course of the next 3 workshops, you'll be creating your very own text adventure. You'll be starting here, by using a text adventure framework called Twine. It uses an easy-to-follow interface to lay out your story, but you'll also be using some very basic functions called "macros," which we'll be discussing later. Here's an example of what you'll have created by the end of this workshop.

A text adventure is like any sort of adventure game today, but everything is described through, as the name suggests, text. These were popular in the early days of computing, before every computer had the power to render "complex" graphics, even though many early graphics were only pixel art! Because they are simple in this way, they're a great platform for us to target when starting out. However, just because they only display text doesn't mean they can't be complex in their own rights. Here are some examples of very complex text

remixz

Text Adventure - Step 1: Twine

(need better title)

Welcome! Over the course of the next 3 workshops, you'll be creating your very own text adventure. You'll be starting here, by using a text adventure framework called Twine. It uses an easy-to-follow interface to lay out your story, but you'll also be using some very basic functions called "macros," which we'll be discussing later. Here's an example of what you'll have created by the end of this workshop.

(^^^ add link to hosted example ^^^)

A text adventure is like any sort of adventure game today, but everything is described through, as the name suggests, text. These were popular in the early days of computing, before every computer had the power to render "complex" graphics, even though many early graphics were only pixel art! Because they are simple in this way, they're a great platform for us to target when starting out. However, just because they only display text doesn't mean they can't be complex in their own rights

remixz

Curriculum Plan

note: this assumes that many clubs can only meet once a week. for clubs that decide to meet twice a week, this can be modified to introduce extra hacking time, or to combine a couple of the easier weeks into one.

week 0 - "introduction"

intro, discover member interests, get leaders started, introducing the workshops and "schedule" and stuff

we'll be providing a strict structure for this, so that these first-time leaders can feel confident doing this first meeting. this'll provide a nice confidence boost for the leaders.

remixz

twine

start: http://twinery.org/2

• create new story, name it
• add a sentence or two to first box, try dragging around
• click test button at bottom right, should have sentence
• create a new room by typing the name of the room like this: [[Name of room]]
• notice new room appeared with arrow once editor has been exited, double click it, add new content
• add link to old room, by typing in title of old room with double square brackets, will autocomplete

remixz

additional resources

if you're looking for some new things to try with your club, try out these tutorials. some may not be as in-depth as our workshops, but for people who have done our workshops, they shouldn't be too hard. phaser is the most in-depth in terms of resources, so that'll likely be the best one to try with beginners.

phaser game engine

start with http://phaser.io/tutorials/making-your-first-phaser-game/index to learn about the engine, and then look through http://phaser.io/learn/official-tutorials and http://phaser.io/learn/community-tutorials for more tutorials and ideas for games. for even more examples, look at http://phaser.io/examples. the api documentation is here: http://phaser.io/docs first tutorial is super basic, and requires very little JS knowledge to understand. if a student's done any of the game workshops already, they're totally set.

with the first tutorial, you should create a new c9 workspace, and enter https://github.com/photonstorm/phaser.git into the clone URL box.

remixz

notes

passing thoughts

• this is just repeating the canvas explanation from the soccer tutorial. i get repetition and all that, but i think it'd just be better to link back to the first tutorial if they need a run-down of how the canvas works. we definitely should still have the part on making the canvas, and its params and all that, but i don't think we need the steps to tinker with it again.
• comp sci fundamentals! interesting. it says its unfinished, but it looks fine to me.
• "associated modules" - ??? we've never introduced the concept of modules yet, but now it's being mentioned like we know what it is. if it's unfinished, we should just leave it out. move any unfinished stuff to branches if we want to keep working on it.
• darn, the comp sci fundamentals are gone. i guess that's why it said unfinished.
• the recap says we learned what setup and draw do. but... we never actually do! at least, not until we get to the appendix after the recap, which does go in depth about how setup is called once,

remixz

notes

passing thoughts

• this workshop says to sign up jsbin if i haven't already. i think this is an older workshop. we should update them all to either cloud9 or jsbin.
• inconsistency in code example. in the first step, it says the line is createCanvas(300, 500);, but the jsbin that you use is createCanvas(250, 500);. nitpick
• this is detailed. i like it. there's definitely no room for confusion so far.
• actually, one thing. where are we getting these variables like mouseX? we should note, maybe at the start, that these kind of variables aren't in every piece of code, and are part of the libraries we're using. (in this case, p5.play.js)
• on mouse movement, there's a few typos. reminder for myself to proofread.
• when in the console, we remove the ball with ball.remove(), then it says to do ball.overlap(goal);. only problem is that we never actually get the ball back! we should add a note on how to get the ball back. i hit the "run with js" button to get it back.