Hackety Hack It is an open source application that teaches individuals how to create software.

It combines an IDE with an extensive Lessons system. The cross-platform desktop application also has integration with the website, where "Hackers" can share what they've learned, ask questions, and submit feedback. The objective of hackety hack was to create a universal programming language for absolute newbies. To expose the huge framework of programming by easy syntax so that beginners programming concept could be learned rather than just gone through. Hackety Hack was originally created by _why in order to solve The Little Coder's Predicament; that learning modern software development is complicated, and difficult. Why eventually developed The Bylaws of Hackety in the Hackety [2] Manifesto which lay down the guidelines for the project. The earliest iterations of Hackety Hack were based on an embedded Gecko browser, but this eventually transformed into the Shoes GUI toolkit.
[1]

Comparison with other educational software

The two largest similar projects are Scratch and Alice. There are two major differences: Both of these projects use a graphical programming language based on the concept of "blocks," but Hackety Hack teaches Ruby. Both Scratch and Alice are university projects out of MIT and CMU, respectively, and Hackety Hack has no university affiliation.

Blocks vs Ruby
The difference of 'blocks vs. Ruby' stems from a shared belief: most programming languages require a lot of effort and knowledge before one can build more than the simplest of programs. The 'blocks' solution is to use the concepts of graphical programming so that beginners don't have to worry about syntactical or memorization issues, as there's a palette of blocks to choose from, and they only fit together in the correct way. The solution that Hackety Hack pursues is by teaching with a more traditional programming language, but adding libraries that make it easy to do complicated tasks in one line. For example, in a more traditional software library, making a background with a gradient would take five or six lines of code using a toolkit like QT, but is one line in Hackety Hack. This is achieved by choosing simple defaults and dropping support for lesser-used options.

Comparison with similar projects

The university affiliation that Scratch and Alice enjoy gives them more resources to bring to bear. Both projects have teams of people, the brand credibility of their institutions, and graduate students to write papers about them and use them in research. Hackety Hack is a more nimble project, since the team is much smaller. It's also truly an opensource project, whereas the Alice project, for example, only releases dumps of the project source every so often. Hackety Hack's development is entirely open.

Syntax Definition & Rules

Hackety Hack Follows the Ruby Programming syntax with Shoes UI ToolKit, so Basic Syntax rules of Ruby is required and explained in the following

Hello, World!
There are two ways of doing this. Here's the first: alert

alert "Hello, world!"

Type this in and press the 'Run' button.

alert
Okay, let's break this down: There's two main parts to this little program: you have an alert, and a "Hello, world!". These two parts work just like an English sentence: The alert is a verb and the stuff in the ""s is an object. In Ruby, we call verbs methods. The alert verb says 'Put an alert box on the screen, and the content of the box is whatever thing you give me.' We'll talk about the "Hello, world!" in just a second. Here's the other way of making this happen:
puts "Hello, world!"

But if you try that here, it won't work! The puts method doesn't display a dialog box, it puts text out to a command-line prompt. Since Hackety Hack is all graphical, this doesn't work here. So we'll be using alerts throughout these tutorials, but if you look at other Ruby tutorials, you may see puts.

Letters, words, and sentences

Strings
Okay! Now that you've got that verb bit down, it's time to learn about Strings. Strings are what we call a bunch of words between a pair of " characters. The "s are used to tell the computer what words you actually want to say. Let's think about our example:

alert "Hello, world!"

If you didn't have the "s, the computer wouldn't know which words were methods and which ones were part of the string! And consider this:

alert "I am on high alert!"

Without making all of those words a string, how would Ruby know that the second alert was some text you wanted to say, rather than another alert box?

Adding Strings
Now, if you want to put two bits of strings together, you can use the + character to do it. Try typing this:

alert "Hello, " + "world!"

Same thing! The + sticks the two strings together. This will end up being super useful later!

Numbers and Math

Numbers
You can just use numbers, and Ruby understands them:

alert 2

You can even use numbers that have a decimal point in them:

alert 1.5

Basic Math
You can also do math with numbers, and it'll work out pretty well:

alert alert alert alert

1 5 2 4

+ * /

2 3 3 2

But if you try this, nothing happens:

alert "hey" + 2

This is kind of fun and silly, though:

alert "hey" * 2

Errors
You know how nothing happened when you hit the Run button earlier? That was because there was an error. You can see any errors that run by hitting either Alt-/ or Command-/, depending on what kind of computer you're using. The error that results from alert "hey" + 2 is
can't convert Fixnum into String

What is that?

A few words about types

Why's it do that?
Each part of a Ruby program is an Object. Right now, all you need to know aboutObjects is that it's sort of like saying "a thing." Your program is made up of a bunch of Objects working together. We'll learn more about Objects in a future lesson, but there is one thing I'll tell you: Objects have a 'type.' This lets Ruby know what kind of Object it is.

Adding numbers to words

That's why

alert "hey" + 2

doesn't really work: "hey" is a String object, and 2 is a Fixnum object. And addingStrings and Fixnums doesn't make any sense. We can make this code work, though! All we need to do is turn the Fixnum into a String. We can do this by using theto_s method.

alert "hey" + 2.to_s

Let's look at that again

alert "hey" + 2.to_s

Okay, this isn't bad. We have our alert method. We're giving it "hey" + 2.to_s. The 2.to_s turns a Fixnum 2, which is like the mathematical idea of a 2, into the String 2, which is like when you write a 2 down on a piece of paper.

Variables
They're like boxes
What happens if we want to keep something around? Most programs are not one line, I assure you. You can use a variable to hold a value and use it later. It's like a box that you put things in. Let's try one out:

message = "Hello, world!" alert message

Give that a run.

Assignment
Cool stuff! We used an = to assign the String"Hello, world!" into the variablemessage. We then passed that message to the alert method. As you can see, we can use variables in place of another value. Try this:

number = 5 number = number * 2 number = number - 8 number = number + 1 alert number

Make a guess before you run this program.

User Input
ask-ing for it.
We can ask the user of our program for some input, and then put their answer into a variable. It's easy! Check this program out:

name = ask "What is your name?" alert "Hello, " + name

The ask method brings up a box and lets our users type something in. Fun! We put their answer into the name variable and then showed it with alert. Sweet!

Basic flow control

if...
Remember back to that Beginning Programming lesson... we talked about how programs are one big list, that the computer follows in order. Well, guess what? We can actually change this order by using certain bits of code. Compare these two programs:

number = 2 if number == 2 alert "Yes!" else alert "No!" end number = 1 if number == 2 alert "Yes!" else alert "No!" end

There are a few new things here.

==
Here it is again:

number = 2 if number == 2 alert "Yes!" else alert "No!" end

The == command is just a bit different than the = command. == tests the Object on its right against the Object on its left. If the two are equal, then the code after the ifwill run. If they're not equal, you get the code after the else. The end lets us know we're done with our if.

Drawing... with turtles?

Okay! Enough of these thinking experiments. Let's actually make something. I bet you've been wondering when that was going to start, right? It's really important to get the basics down first. We're going to tell the computer how to draw shapes... with turtles. Yes, you heard me right. You're going to have to give these instructions to a turtle. This particular turtle is carrying a pen. You have a piece of paper. The turtle will follow your every word. But the turtle is a bit slow, and needs careful instruction. Are you up to it?

The Turtle and its commands

We have to tell Hackety Hack that we want to tell the Turtle what to do. To do that, we have a Turtle command. We can tell the Turtle two things: draw: the turtle will follow our instructions at lightning speed, start: an interactive window will appear, which lets you see the turtle move at each step in the program. You can move at your own pace. This is useful if the turtle isn't doing what you expect! Click on the editor tab to get started:

Type it in!
Cool. Now type this:

Turtle.draw

The period in between the Turtle and the draw connects them together. Programming languages have rules, just like English has rules! You can think ofTurtle like a subject, and draw as a verb. Together, they make a sentence: hey turtle, draw me something! Once you've typed that in, go ahead and click the 'Run' button. The turtle moves so quickly in draw mode that you won't even see him, but I assure you, he's there!

Do... what I tell you to

Awesome! We've got the turtle going, at least. Now we need to tell it what we want to draw! Remember when we said that all programs are lists of instructions? In this case, our program only has one instruction: Turtle, draw something! But we need to be able to give the Turtle its own list of instructions. To do this, we'll use two words: do and end. These two words together make up asublist of things, just for the Turtle!

Changing the background

Let's try this: we can tell the Turtle that we want to use a different background color by using the background command. Check it out:

Turtle.draw do background maroon end

Type this in and click 'Run'!

The Turtle gets its orders

Cool stuff! The background is now maroon. You can find a full list of colors that are supported on the Shoes website. This is also how you make lists of instructions for the Turtle to follow. To make it a little easier to see, programmers will often put two spaces before sublists. Get in the habit now, you'll thank me later!

The pen
Now that we've got a snazzy background color, how do we draw some lines? Well, the first thing you need to know about is the pen. The Turtle carries a pen along, and drags it along the ground behind itself. You can change the color of line the pen draws with the pencolor command.

Drawing lines
Sally forth!
Okay, enough dilly-dallying. Let's tell the turtle to draw a line! Here's my line. Give this one a shot, then try your own colors and numbers!

Turtle.draw do background lightslategray pencolor honeydew forward 50 end

50 is the number of pixels to move foward, by the way.

You spin me right round, baby

Great! So you've got a line. But what if you don't want the Turtle to move forward? Well, you can tell it to turn by using a turnleft or turnright command, like this:

Turtle.draw do background lightslategray pencolor honeydew forward 50 turnright 90 forward 50 end

Give that a shot, then play with it a bit! If you're wondering what 90 means, it's the number of degrees that it'll turn.

I like to move it, move it

Okay, now we're cooking! Let's break this down again:
Turtle.draw tells the Turtle we want it to draw some things. The period connects the two. do ... end is a sublist of things. This is what we want the Turtle to be drawing. Not for the rest of our program. pencolor sets the color of the pen the Turtle is dragging along behind him, andbackground sets the color of the

background. turnright (or its buddy turnleft) tells the Turtle to turn to the right or left. forward (or its friend backward) tells the Turtle to move.

Let's try drawing that square

Go ahead. Give it a shot. Try to get the Turtle to draw a square. I'll wait. :)

Here's my version
Here's how I did it:

Turtle.draw do background lightslategray pencolor honeydew forward 50 turnright 90 forward 50 turnright 90 forward 50 turnright 90 forward 50 end

Repeating ourselves
Pete and Repeat...
Man, that was a ton of reptition! My fingers almost fell off typing forward andturnright there! I have good news, though: I mentioned something earlier about computers. It turns out that doing boring, repetitive things is something they're really good at! They'll do the same thing over and over again, forever even as long as you ask nicely.

Repeating repeating ourselves ourselves

Check it out: our Turtle actually knows numbers. For example:
Turtle.draw do background lightslategray pencolor honeydew 4.times do forward 50 turnright 90 end end

Try running this example. It also draws a square! Wow!

4.times
It's pretty easy: 4 can take instructions too, just like our Turtle. This command repeats a list of instructions that many times. Fun! Four times. And the do and endshow which list of instructions go with the 4 rather than with the Turtle.

Shoes UI ToolKit
Let's get started
Welcome to your first lesson about Shoes! I'm going to introduce you to the basics that Shoes brings to everyone who programs. If you didn't know, Shoes is a Ruby toolkit that lets you build GUI programs really easy and fun!

Apps
Shoes.app
Okay! Shoes is tons of fun. It's really easy to get started. Here's the simplest Shoes app ever:

Shoes.app do end

Give that a spin!

It's just a block

You didn't say that you wanted anything in the app, so it just gives you a blank window. You can pass options in, too:

Shoes.app :height => 200, :width => 200 do end

This'll give you whatever sized app you want! We'll be putting all of the fun stuff inside of the do...end.

para
The basics
Blank windows are pretty boring, so let's spice it up with some text!

Shoes.app do para "Hello, world" end

You know what to do by now. para is short for 'paragraph.' It lets you place text in your apps. para and other Shoes widgets take bunches of options, too. Check it:
Shoes.app do para "Hello there, world", :font => "TakaoGothic" end

stacks
They're default!
If you're looking to lay out your Shoes widgets, there are two options. The first is a stack. A Stack is the default layout a Shoes app has. So this won't look much differently than one without the stack:
Shoes.app do stack do para "Hello!" para "Hello!" para "Hello!" end end

As you can see, the paras are stacked on top of each other. By itself, kinda boring, since they already do this. But...

flows
The counterpart of stacks
flows are kind of like stacks, but they go sideways rather than up and down. Try this as an example: Shoes.app do flow do para "Hello!" para "Hello!" para "Hello!" end end

Just a little bit different, eh?

stacks + flows
With their powers combined...
You can combine the stack with the flows to make whatever kind of layout you want. For example:
Shoes.app do flow do stack :width => 50 do para "Hello!" para "Hello!" para "Hello!" end stack :width => 50 do para "Goodbye!" para "Goodbye!" para "Goodbye!" end end end

The :width attribute sets how wide the stack is. Pretty simple.

button
Push it real good
Buttons are also super simple in Shoes. Just give them a title and a bunch of code to run when they get pushed:

Shoes.app do button "Push me" do alert "Good job." end end

I bet you're starting to see a pattern. Shoes loves to use blocks of code to make things super simple.

image
Pics or it didn't happen
There are two ways that you can show an image in a Shoes app. Either you have the file on your computer:

Shoes.app do image "#{HH::STATIC}/matz.jpg" end

(This particular example only works if you're in Hackety Hack, by the way! Can you figure out what this does? Don't feel bad if you can't.) Or you can also specify an image on the web:

Shoes.app do image "http://shoesrb.com/images/shoes-icon.png" end

Either one is fine. Shoes cares not.

edit_line
Getting some input
If you'd like to let someone type something in a box, well, edit_line is right up your alley!
Shoes.app do edit_line end

This is sort of boring though... why not get the information from the box?

Shoes.app do line = edit_line button "Push me!" do alert line.text

end end