Just adding an issue to open the discussion on how to handle syntax errors in code. Some thoughts:

• We have hints / buttons (perhaps when the video goes away) that remind users of syntax and also offer quick means to reset the code to a working state.
• If it doesn't work, at a minimum we show a message that indicates there is a bug in the code and offers helpful general suggestions.
• Ideally we offer specific feedback, i.e. missing a semi-colon, you spelled ellipse() wrong etc. But not sure if this is realistic. See https://www.khanacademy.org/cs for a nice implementation of this.

Page for teacher instructions. It will live at http://hello.processing.org/guide/ and be linked in the header.

Content goes in /guide/index.html. I'll work on the styling and layout if @REAS can handle the content.

I think we can start using hello.processing.org right away with the option to change at any time. Casey, you just need to create a CNAME record that points to scottgarner.github.io.

Scott, you asked in an email about the gh-pages branch. We don't necessarily have to host the final site on GitHub, though that may be most convenient. We have to option to generate a static site and upload it to some other host, but I agree that if we do decide to host here it would be smart to have a development branch.

I haven't done that before in this context, but presumably we'd just have another CNAME in that branch and test from there. Something like hello-dev.processing.org.

Do we want to draw design cues (color palette, typography, etc.) from the Processing 2.x world or go for something new for this project?

The current plan for the share button is to only show it after the goodbye video when you'll have the option to return to the editor.

The backend code that saves a Gist and returns a permalink is in place. Initial work on a Twitter button is in place.

I want to clean things up a bit, add some copy and finish adding links to share on FB and Google+. This will use the most barebones sharing functionality available where a new window opens to, for example, submit a tweet.

While I love the current "Hello" landing page, I want to make sure it's clear that the "Hello" is clickable. We either need a button that explicitly says "Get started >" or similar, or some visual treatment that indicates "Hello" is how one gets started.

This is not high priority right now; I just wanted to log it here while I'm thinking about it.

(Let me know if this is too detailed to list as a separate issue.)

The plan for the hint windows involves a series of divs in /editor/index.html that will populate the hints area at the appropriate time.

We've been talking about putting a lot of stuff there, but I think they can work as scrollable divs if they have to. For now I started by putting a few notes in place in the code. @shiffman, if you can continue to do that when we get the videos, I can work with you to format everything appropriately for display.

I'm not sure this is the most elegant way to handle this, but just to keep things clear for me as I develop, I created a TODO.md file. I think the priorities are pretty self explanatory. Feel free to add and shuffle as needed.

For the underlying architecture, I've used HTML5 Boilerplate and Twitter Bootstrap to get things going. Beyond what's in the wireframes, what other pages need to be handled? Is it as simple as:

— Landing Page
— Video / Code Page

Or do we need things like an About page, etc.? Maybe content like that can just be popped up in the main view?

We have three scenarios for reloading code and most of the underlying work is done. Users will always have the option to:

1. Revert to the last good run. This option will also be presented when an error is caught.
2. Revert to their code from the last lesson. This will only appear during the "homework" section when that code is available.
3. Revert to the example that Dan gives at the end of the lesson. This will only appear in the "homework" section.

I need to make sure all scenarios are accounted for and we'll all need to decide on the best labels. Right now the plan is to have all three options reside under one button in the editor. I have basic UI elements in place for this on the site, but the buttons don't work yet.

During the segment on "Color", the examples Dan is speaking about do not appear in the code window (for instance, stroke() and fill()...and the final example does not appear at the end) On all other segments they appear on time, but they don't appear at all during this section.
Using Firefox on Mac OS X 10.9.

@scottgarner this is such a tiny silly thing but can you change github repo settings to set the default branch to gh-pages?

This is mostly a note to myself that I want to go through the videos and outline the topics I presented in preparation of a "final" video shoot. I also recall while making the video some questions came up, such as:

1. Should I explain size() right from the start, in the middle, or never?
2. Are we doing alpha with color or just RGB?
3. Are we including "else" with conditionals? I think yes.

There may be more this is just what I recall.

It states: a -- the X (horizontal) location) of the shape
It should state: a -- the X (horizontal) location of the shape

I feel good about the programming content of the examples with the priority to keep it simple, but I think the actual visual output and the content of each program is wide open. I made two variations so far for the 3rd and 4th program. One variable focuses on moving around geometry and the second is more of a drawing program.

I'm all for using Gists for the share feature. I think we can easily do everything behind the scenes and have some kind of viewer page that takes a Gist id and displays it. Something like http://hoc.processing.org/display/?id=7492857.

That probably precludes the creation of some kind of gallery page with all user work. It isn't something we've talked about, but I just wanted to point that out.

As for saving, I think we could definitely use Gists for that, too, though maybe some kind of cookie or local storage option makes more sense?

I found that while making the videos I am more inclined to just show simple ideas, like a circle in the center, a rectangle below. (255,0,0) as red, (0,255,0) as green, etc. The examples prepared by @REAS are a bit more complex and thoughtful in terms of design and color. How to marry these? One thought is that I keep the simplicity in my explanations but there are buttons that allow the student to "load" these more "official" examples while experimenting. Another idea is that at the end of each lesson, I say a wrap-up sentence explaining the example and it loads automatically for the student to begin with. Maybe that's best.

One of our four code sections is about color. How do the student select colors by eye and then get the numbers into the code? The fanciest way is to have an icon to the right of fill() and stroke() commands that opens a spectrum (like in Khan and Tweek mode). This might be beyond our quick scope. Another way would be to have a color icon in the menu we're building. This icon will open a color window. I'm sure there are other ways.

I think two minor refinements would help clarify the coordinates system:

1. Include a label for the origin point (0,0)
2. Align ruler labels so they are flush with their corresponding markers.

Currently, the labels are a bit too far away from the markers for my tastes; it's a bit "floaty" and I could see this being confusing for someone new to coordinates:

Here's a mockup with my proposed changes. Note that labels are flush with the markers (1px or 2px away) and vertically aligned with the top of the marker.

If others agree this would help clarify things, then hopefully it's a simple change.

I noticed playing around with the color lesson that if I hit "restart" while the code editor is in view, the video begins with that view rather than full screen. I believe a fix should be to add:

           .code({
                start: "0:00",  
                onStart: function () {
                    helloEditor.videoMode = true;
                    helloEditor.resizeUI();

                    $("#editorContainer").hide();
                    $("#canvasContainer").hide();

                    helloEditor.setCode("");
                    helloEditor.resetInstance();                     

                }
            })

to each video that should start full screen, but this didn't work for me. . and maybe @scottgarner you would prefer a different solution?

Page for background and credits. It will live at http://hello.processing.org/about/ and be linked in the header.

Content goes in /about/index.html. I'll work on the styling and layout if @REAS can handle the content.

I'm starting to think about how we speak to the students. Dan will be speaking, so I think it's largely up to him, but I have some questions about how the video relates to the interface and pacing. For example, will Dan say things like:

"Start with the code below and try to draw the outlined shape to the left. Try different colors and positions for the circles. You can skip to the next lesson any time. We'll remind you that it's time to move on after 10 minutes."

"Press the 'hint' button for a suggestion about how to take the next step."

Will Dan give a lesson for 5 minutes, then the students have 5 minutes to try it out? Or will it be more continuous where he says, "Now try typing color(102)" and then pauses for about 10 seconds for that to happen.

They way the window is three panels makes more possible than the original idea of a full-screen video that is replaced back and forth by an editor.

I am recording test videos this morning and will have them all uploaded shortly. It just occurred to me that it might be worthwhile to have some feature on the site which allows users to ask a question or communicate with us (and others). Yes, we have the Processing forum, but maybe this needs its own thing. Should we have a page with "disqus" comments?

Help -- link to forum
Hour of Code -- link to hour of code completion page (?)

Not sure why, but in the shapes video at about ~6:15, the code for the example pops up in the editor. It goes away shortly after. Looking through script.js don't see any obvious mistake that causes this.

http://hello.processing.org/editor/#shapes-6:10

I need to take a pass over the tutorial and finalize when the buttons are shown. My plan I think is:

1. Hello
   No buttons

2. Shapes
   "Run code" button is introduced
   "Next lesson" button appears at end

3. Color
   Clear all buttons except "Run code" while lesson is going
   "Reset Code" appears at end
   "Next Lesson" appears at end

4. Interact
   Clear all buttons but "run"
   reset and next appear at end

5. Questions
   Clear all buttons but "run"
   reset and next appear at end
   (does share button appear at end?)

6. Goodbye
   Reveal share button

Here's a rough stab at the editor page with most of the components in place:

http://hoc.j38.net/editor/

Thoughts:

1. I swapped the positions of the editor and canvas as represented in the wireframe. The main reason is that drawing a canvas at a size other than that specified in the sketch looks pretty bad with the way Safari resamples, though Chrome is a bit better. I think it works because the code is so short that the editor doesn't need to be very big.

2. Right now, everything is fixed at what the smallest size would be, but I can create a more fluid layout for larger browsers with a couple of catches: The video would ideally maintain its aspect ratio and the size of the actual canvas would ideally stay the size defined by size() in the code, though it could live in a fluid container with a colored background or something.

3. The video is pretty small for the above reasons. If the sketch were 512x512, it could have more horizontal room, but that would expand it vertically into the editor's space if the same aspect ratio is kept. Tricky stuff. I do plan to expand and contract the video view as seen in the wireframes once we start building out the lesson sequencing.

4. The timeline isn't a timeline yet, obviously, just a row of buttons to jump lessons. This can be fleshed out as we continue the design conversation.

5. Popcorn.js is in place, but isn't do anything yet but loading the video.

6. No branding or small print yet. We can get specific on this.

Dead simple at this point, it just displays the Gist referenced in the URL:

http://hoc.j38.net/display/#6974963

I think keeping this page pretty barebones is a good idea, though we'll want branding and some kind of call to action to get visitors to try out the site.

http://code.org/api/hour/finish

There are two factors at play here.

First, I've created an Ace editor mode for Processing (adapted, really) that has regular expressions to match ranges of characters and mark them with CSS classes. It does other things, too, that I don't understand, but we'll ignore that. If we want to change what does or doesn't get highlighted, those changes happen here:

/js/vendor/ace/mode-processing.js

Second is the Ace editor theme for Processing, which dictates the actual colors:

/js/vendor/ace/theme-processing.js

Things should be reasonably sane for now, but if we want to try to match the actual IDE colors, this is the place to do it. To me this is the lowest priority issue.

Chrome and Safari

I use Chrome and Safari because I am a sensible person. I also develop for Chrome and Safari because I'm not a masochist. I don't foresee any problems with these browsers.

Firefox

A quote from Batman comes to mind: "You either die a hero, or you live long enough to see yourself become the villain."

Firefox used to be great and now it is terrible. It has become the thing it once hated. This is why I've just spent an hour fixing perfectly valid things that are broken in Firefox for no reason. If we're diligent about testing, I think we can reasonably guarantee that at least the last couple of versions of Firefox will work.

IE

Internet Explorer is always a nightmare and I don't think we have the time or equipment to test every version of IE under every version of Windows. I would say that if IE 10 magically works, then it's great. If not (it likely won't), we should direct people to a sane browser. Older versions are almost guaranteed to be broken, but we may luck out with 9 depending on how robust all of the libraries and frameworks we're using are.

i'm leaving on the playback head and other vimeo embed settings for now just to help with developing the script, but making an issue to remind me to fix all these settings later.

I created four test videos:

1 Drawing: https://vimeo.com/77716815
2 Color: https://vimeo.com/77716817
3 Interaction: https://vimeo.com/77716816
4 Questions: https://vimeo.com/77716818

@scottgarner and I were discussing how a lot of the work we have to do is "data entry" work, in terms of entering in all the timecodes for the various popcorn events. @scottgarner, would it make sense for you to put these videos into the site with some initial content and then we ( @REAS @alignedleft @shiffman ) can do some of this data entry? Perhaps we would need a template or short set of guidelines?

Also, I expect you will all have lots of comments and suggestions for the "script" content. Should we collect those as vimeo comments?

I did these videos off the top of my head, but it might also be useful for me to go back and create a script "outline" from them that we could collaborative edit / review. I'll try to work on that.

I couldn't figure out how to run the code on the Interact and Questions section, should the run button be shown?

The big one!

Between native jQuery functions and helper functions I've written, we should have everything we need to populate the popcorn scripts in scripts.js.

If we get the shapes video first, I'll try to do that myself and then it would be great to get help annotating the rest. I can always add new helper functions as needed.

When we have time, we should add an option for captions so that the tutorial is more accessible.

From @johnschimmel: "There might be services that could do this collectively like Amara, http://www.amara.org/en/"

I tried several different code errors, each one pops up the Don't Panic box with the correct hint, the Continue button works but the Reset Code button doesn't.

Seeing error 'Uncaught TypeError: Cannot read property 'runCache' of undefined editor.js:163' in console.

(using chrome v31.0.1650.57)

As it stands now, the site will probably not really function below a certain browser size. What do we do for devices that are below that threshold? Just tell them to view it on the desktop?

Trying for a mobile optimized version would probably be a lot of additional work and potentially impossible? Last time I checked, the iPhone had no support for inline HTML 5 video, but that may have changed.

If we target a minimum resolution of 1024x768, I think it could still run on an iPad, though I don't know what performance would be like.

I notice that on all the videos except lesson 2, I don't see the Vimeo playback UI (play/pause button, timeline, volume). Here's lesson 1:

Here's lesson 2:

Shouldn't these be consistent? Why is 2 different from the others?

Hello. When I go to http://hello.processing.org and click "Click Here to Begin" the video loads and autoplays, but with no sound. I have checked the site in a different browser, and the sound is audible. I have checked my mixer and headphones.

I think that videos that autoplay are automatically muted in some browsers. You might want to add volume controls, or somehow autoplay with audible sound.

Thanks.

We should find a place to have credits on the site for everyone who has contributed to the tutorial as well as info on the open source tools we've used, link to our github repo, etc.

For the initial videos, we want size() to be injected automatically. I've already taken a stab at this, though I'm pretty sure a user could break it if they wanted to by entering something crazy.

For the later videos, we want people to have the option to pick their own size in setup(). This works now for the canvas itself, but the HTML elements surrounding it don't resize, nor do the rulers.

@shiffman brought this up in issue #21.

I'm a little ambivalent about the timer, though my instinct is that adding start/stop functionality complicates the interface and the interaction. I think it might make sense just to show it and assure the visitor that it's just a guide to keep them on track.

I've grabbed the examples from DropBox and put them into this repository. I think it makes the most sense to refine them here as needed, but they could also exist elsewhere, as Gists for example.

This is something I always forget about, so I thought I'd add it here now. If we want to use Google Analytics, I just need an account ID.

Reposition video buttons. Remove "pause". Test buttons to jump back and forward 30 seconds.

I wanted to make an individual issue for this because it's a lower priority than the rest of the editor issues.

I'm using a plugin called Spectrum in a way it wasn't really designed for, but it works reasonably well. It has an option to show the color that is being selected, but this feature is tied to an option to show the initial color, which currently doesn't work.

The solution is to either modify Spectrum to only show the current color or to throw in some regular expressions to figure out the initial color from the editor and set it.

The buttons could us some styling work, too, because Bootstrap appears to be doing something strange to them.