├── .gitignore ├── Gemfile ├── LICENSE ├── README.md ├── Rakefile ├── content ├── a-tour-of-hackety-hack.md ├── an-introduction-to-programming.md ├── an-introduction-to-ruby-with-hackety-hack.md └── an-introduction-to-shoes.md ├── hackety_hack-lessons.gemspec ├── lib └── hackety_hack │ ├── lessons.rb │ └── lessons │ ├── app.rb │ ├── rails │ └── engine.rb │ └── version.rb └── vendor └── assets └── images ├── matz.jpg ├── tab-cheat.png ├── tab-hand.png ├── tab-help.png ├── tab-new.png ├── tab-properties.png └── tab-quit.png /.gitignore: -------------------------------------------------------------------------------- 1 | *.swp 2 | *.gem 3 | *.rbc 4 | .bundle 5 | .config 6 | .yardoc 7 | Gemfile.lock 8 | InstalledFiles 9 | _yardoc 10 | coverage 11 | doc/ 12 | lib/bundler/man 13 | pkg 14 | rdoc 15 | spec/reports 16 | test/tmp 17 | test/version_tmp 18 | tmp 19 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # Specify your gem's dependencies in hackety_hack-lessons.gemspec 4 | gemspec 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2012 Steve Klabnik 2 | 3 | MIT License 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HacketyHack::Lessons 2 | 3 | TODO: Write a gem description 4 | 5 | ## Installation 6 | 7 | Add this line to your application's Gemfile: 8 | 9 | gem 'hackety_hack-lessons' 10 | 11 | And then execute: 12 | 13 | $ bundle 14 | 15 | Or install it yourself as: 16 | 17 | $ gem install hackety_hack-lessons 18 | 19 | ## Usage 20 | 21 | TODO: Write usage instructions here 22 | 23 | ## Contributing 24 | 25 | 1. Fork it 26 | 2. Create your feature branch (`git checkout -b my-new-feature`) 27 | 3. Commit your changes (`git commit -am 'Added some feature'`) 28 | 4. Push to the branch (`git push origin my-new-feature`) 29 | 5. Create new Pull Request 30 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env rake 2 | require "bundler/gem_tasks" 3 | -------------------------------------------------------------------------------- /content/a-tour-of-hackety-hack.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "A Tour of Hackety Hack" 3 | slug: "a-tour-of-hackety-hack" 4 | blurb: "Get a run-down of all the different features in Hackety!" 5 | categories: 6 | - hackety 7 | - beginner 8 | --- 9 | 10 | ## Welcome! 11 | 12 | ### Why hello there! 13 | 14 | Welcome to the Hackety Hack tour! 15 | 16 | You can access the different functions of Hackety through the buttons on the 17 | left side of the screen. 18 | 19 | ## Lessons 20 | 21 | ### A Lesson lesson. 22 | 23 | When you click on the Lesson button, it'll bring you to a list of all of the 24 | lessons that come with Hackety. For now, there's just a few. More Lessons will 25 | be added, and eventually, you'll be able to write and share your own Lessons 26 | with other Hackety Hackers. 27 | 28 | Lessons are just simple 29 | [Markdown](http://daringfireball.net/projects/markdown/syntax) files. Markdown 30 | looks just like writing normal text, but with some extra characters for text 31 | that's __bold__ or _italicized_, adding images, and stuff like that. 32 | 33 | ## Home 34 | 35 | ### Welcome Home 36 | 37 | This is the home screen, which shows you two very important things: your own 38 | programs, and the sample programs. Everyone starts off with one simple program: 39 | Hello, world! Check it out: 40 | 41 | alert "Hello, world!" 42 | 43 | This is an actual Ruby program! You'll learn more about Ruby itself in the 44 | Beginning Ruby Lesson. 45 | 46 | ### Samples 47 | 48 | If you click on the 'Samples' tab, you can see a bunch of sample programs that 49 | we've included for some inspiration. There's a few interesting animations, some 50 | games, and a few other things. 51 | 52 | That's all there really is to say about the homepage. Try opening the Editor. 53 | Here's its icon: 54 | 55 | ![Not this one, silly! the one on the left!](/assets/tab-new.png) 56 | 57 | ## Editor 58 | 59 | ### Using the Editor 60 | 61 | This is where the magic happens: all of your programs will be created in the 62 | editor. Give it a shot: try typing this program in. 63 | 64 | name = ask "What is your name?" 65 | alert "Hello, " + name + "." 66 | 67 | After doing so, you can try running the program by pressing the 'Run' button in 68 | the lower right corner. 69 | 70 | ### Saving and Uploading Programs 71 | 72 | To save your program, simply click the 'Save' button. It'll prompt you for a 73 | title, and then the program will appear on your Home screen. 74 | 75 | Once you've saved your program, two new buttons appear: 'Copy' and 'Upload.' 76 | Copy will duplicate your program, and then ask you for a new name. This is 77 | really useful if you'd like to modify one of the example programs. Upload will 78 | send a copy of your program to the Hackety Hack website, where you can show it 79 | off to other Hackety Hackers. :) More about this when we talk about Preferences. 80 | 81 | ## Help 82 | 83 | ### Getting Help 84 | 85 | The next tab is the Help tab. It looks like this: 86 | 87 | ![Not this one, silly! the one on the left!](/assets/tab-help.png) 88 | 89 | Click it, and it'll open up a new window. Browse around and come back, I'll be 90 | here. 91 | 92 | ### Okay, well... Shoes. 93 | 94 | That's a lot of help! Hackety Hack is built with Shoes, which is a toolkit for 95 | creating GUI programs in Ruby. All of the programs that you make in Hackety Hack 96 | are built with Shoes. That manual contains the entire Shoes reference, and 97 | there's a lot! Luckily, there's also a much shorter cheat sheet too... 98 | 99 | ## Cheat 100 | 101 | ### Short and sweet. 102 | 103 | Peek at the Cheat Sheet by clicking the icon like this: 104 | 105 | ![Not this one, silly! the one on the left!](/assets/tab-cheat.png) 106 | 107 | The Cheat Sheet is much simpler. It just contains some helpful bits that you 108 | should find useful. A quick reference of often used bits. And a short sheet 109 | deserves a short explanation. 110 | 111 | ## About 112 | 113 | ### About Hackety 114 | 115 | The classic About box. These have been around basically since the beginning of 116 | time. It's just a fun little image that tells you what version of Hackety Hack 117 | you're using. It'll change with every release. 118 | 119 | ![Not this one, silly! the one on the left!](/assets/tab-hand.png) 120 | 121 | Time for the last one... 122 | 123 | ## Preferences 124 | 125 | ### I do prefer... 126 | 127 | The Preferences icon is towards the bottom, and looks like this: 128 | 129 | ![Not this one, silly! the one on the left!](/assets/tab-properties.png) 130 | 131 | This lets you adjust your preferences for Hackety Hack. Right now, there's only 132 | one preference: linking Hackety with your account on 133 | [hackety-hack.com](http://hackety-hack.com). You __do__ have one of those, 134 | right? 135 | 136 | If you link your account, you can upload your programs to the website and easily 137 | share them with others! More interesting features will be developed along these 138 | lines, so sign up, stick your info in, and prepare for all kinds of awesome. 139 | 140 | ## Quit 141 | 142 | ### Self-explanatory 143 | 144 | If you did click the quit icon, well, you wouldn't be here anymore. And that'd 145 | be unfortunate. So, don't click it until you're good and ready. When it's your 146 | time to go, it'll be there waiting for you. 147 | 148 | ![Not this one, silly! the one on the left!](/assets/tab-quit.png) 149 | 150 | Come back soon! 151 | 152 | ## ... and beyond! 153 | 154 | ### What now? 155 | 156 | This concludes the Hackety Hack tour. Good job! Now you know everything that 157 | Hackety Hack can do. It's pretty simple! 158 | 159 | This isn't the only lesson that we have for you, though. Give the 'An 160 | Introduction to Programming' lesson a shot to actually start learning how to 161 | make programs of your own. 162 | 163 | What are you waiting for? Get going! 164 | -------------------------------------------------------------------------------- /content/an-introduction-to-programming.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "An Introduction to Programming" 3 | slug: "an-introduction-to-programming" 4 | blurb: "If you know nothing about programming, this is where to start!" 5 | categories: 6 | - hackety 7 | - beginner 8 | --- 9 | 10 | ## Hello there! 11 | 12 | ### Round One 13 | 14 | So, you'd like to learn how to hack code with the best of 'em, eh? Well, you've 15 | come to the right place. This is the very first lesson I have to share with you. 16 | It all starts here. 17 | 18 | I want to get you started off on the best possible foot with making programs, so 19 | we'll start off by talking a little bit about what programming is, and then 20 | we'll write some basic programs to draw fun things on the screen. Sound good? 21 | Off we go! 22 | 23 | ## Let's talk about programming 24 | 25 | ### It's all about instructions 26 | 27 | When you get down to it, programming is all about __algorithms__. That's a big 28 | fancy word for 'a list of instructions.' Every program is simply a big to-do 29 | list of instructions for the computer to follow. 30 | 31 | You can turn almost anything into a list of instructions if you really think 32 | about it. Most of the time, you've got so much practice at doing things that you 33 | don't even think about these individual steps. You just do them. It's very 34 | natural. 35 | 36 | ### The computer is simple 37 | 38 | Unfortunately, computers are actually quite simple. This may be contrary to 39 | everything you've ever heard, but it's the truth. Even though we compare 40 | computers to things like our brains, it's a really poor analogy. What computers 41 | are actually really good at is performing simple, boring things over and over 42 | again very accurately. They can't think for themselves! 43 | 44 | This is why computers appear to be complex. They blindly follow whatever orders 45 | they're given, without any thought about how those instructions are good or bad. 46 | It's hard to think in such simple terms! 47 | 48 | ### Explain yourself well 49 | 50 | It's important to remember that you have to fully explain yourself to the 51 | computer when you're programming. It can't figure out what you're trying to say, 52 | so you have to say what you mean! 53 | 54 | This takes some practice, so we're going to start off with some exercises in 55 | explaining ourselves in very basic terms. It's almost like trying to explain 56 | math to a young child: you have to go slowly, triple check your work, and have 57 | some patience when it just doesn't quite get it. 58 | 59 | ## Lists of Instructions 60 | 61 | ### A to-do list, not a shopping list 62 | 63 | When I say that computers follow lists of instructions, I mean a to-do list, not 64 | a shopping list. What I'm trying to say is that these lists have an __order__ to 65 | them that the computer follows. It does each step in turn as quickly as it 66 | possibly can. 67 | 68 | A shopping list is a different kind of list entirely. You can go to whichever 69 | aisle you choose, and as long as you get everything before you leave, you're 70 | A-OK. This isn't what the computer does at all. 71 | 72 | ### How would you tell a person to do it? 73 | 74 | Let's try an example: if you had to tell someone in words how to draw a square 75 | on a piece of paper, how would you do it? 76 | 77 | You're not allowed to say "like this" or "this way," that's cheating! You have 78 | to spell out every detail. 79 | 80 | ### Once again: computers are simple 81 | 82 | How'd you do? I can't see what you said, but here's an example of how simple 83 | computers are compared to people. Did you forget to mention how long each side 84 | of the square is? If you didn't good job! 85 | 86 | Here's how I'd do it, by the way. This isn't the only right answer, it's just an 87 | example: 88 | 89 | 1. Put your pen down on the paper. 90 | 2. Draw right one inch. 91 | 3. Draw down one inch. 92 | 4. Draw left one inch. 93 | 5. Draw up one inch. 94 | 6. Take your pen off of the paper. 95 | 7. Finished! 96 | 97 | ## Turtles, all the way down. 98 | 99 | ### Drawing... with turtles? 100 | 101 | Okay! Enough of these thinking experiments. Let's actually make something. I bet 102 | you've been wondering when that was going to start, right? It's really important 103 | to get the basics down first. 104 | 105 | We're going to tell the computer how to draw shapes... with turtles. Yes, you 106 | heard me right. You're going to have to give these instructions to a turtle. 107 | 108 | This particular turtle is carrying a pen. You have a piece of paper. The turtle 109 | will follow your every word. But the turtle is a bit slow, and needs careful 110 | instruction. Are you up to it? 111 | 112 | ### The Turtle and its commands 113 | 114 | We have to tell Hackety Hack that we want to tell the Turtle what to do. To do 115 | that, we have a `Turtle` command. We can tell the `Turtle` two things: 116 | 117 | `draw`: the turtle will follow our instructions at lightning speed, 118 | 119 | `start`: an interactive window will appear, which lets you see the turtle move 120 | at each step in the program. You can move at your own pace. This is useful if 121 | the turtle isn't doing what you expect! 122 | 123 | Click on the editor tab to get started: 124 | 125 | ![Not this one, silly! the one on the left!](/assets/tab-new.png) 126 | 127 | ### Type it in! 128 | 129 | Cool. Now type this: 130 | 131 | Turtle.draw 132 | 133 | The period in between the `Turtle` and the `draw` connects them together. 134 | Programming languages have rules, just like English has rules! You can think of 135 | `Turtle` like a subject, and `draw` as a verb. Together, they make a sentence: 136 | hey turtle, draw me something! 137 | 138 | Once you've typed that in, go ahead and click the 'Run' button. The turtle moves 139 | so quickly in `draw` mode that you won't even see him, but I assure you, he's 140 | there! 141 | 142 | ### Do... what I tell you to 143 | 144 | Awesome! We've got the turtle going, at least. Now we need to tell it what we 145 | want to draw! 146 | 147 | Remember when we said that all programs are lists of instructions? In this case, 148 | our program only has one instruction: `Turtle`, draw something! But we need to 149 | be able to give the `Turtle` its own list of instructions. 150 | 151 | To do this, we'll use two words: `do` and `end`. These two words together make 152 | up a _sublist_ of things, just for the `Turtle`! 153 | 154 | ### Changing the background 155 | 156 | Let's try this: we can tell the `Turtle` that we want to use a different 157 | background color by using the `background` command. Check it out: 158 | 159 | Turtle.draw do 160 | background maroon 161 | end 162 | 163 | Type this in and click 'Run'! 164 | 165 | ### The Turtle gets its orders 166 | 167 | Cool stuff! The background is now maroon. You can find a full list of colors 168 | that are supported on the [Shoes 169 | website](http://shoesrb.com/manual/Colors.html). 170 | 171 | This is also how you make lists of instructions for the `Turtle` to follow. To 172 | make it a little easier to see, programmers will often put two spaces before 173 | sublists. Get in the habit now, you'll thank me later! 174 | 175 | ### The pen 176 | 177 | Now that we've got a snazzy background color, how do we draw some lines? Well, 178 | the first thing you need to know about is the pen. The `Turtle` carries a pen 179 | along, and drags it along the ground behind itself. You can change the color of 180 | line the pen draws with the `pencolor` command. 181 | 182 | ## Drawing lines 183 | 184 | ### Sally forth! 185 | 186 | Okay, enough dilly-dallying. Let's tell the turtle to draw a line! Here's my 187 | line. Give this one a shot, then try your own colors and numbers! 188 | 189 | Turtle.draw do 190 | background lightslategray 191 | pencolor honeydew 192 | forward 50 193 | end 194 | 195 | 50 is the number of pixels to move foward, by the way. 196 | 197 | ### You spin me right round, baby 198 | 199 | Great! So you've got a line. But what if you don't want the `Turtle` to move 200 | forward? Well, you can tell it to turn by using a `turnleft` or `turnright` 201 | command, like this: 202 | 203 | Turtle.draw do 204 | background lightslategray 205 | pencolor honeydew 206 | forward 50 207 | turnright 90 208 | forward 50 209 | end 210 | 211 | Give that a shot, then play with it a bit! 212 | 213 | If you're wondering what 90 means, it's the number of degrees that it'll turn. 214 | 215 | ### I like to move it, move it 216 | 217 | Okay, now we're cooking! Let's break this down again: 218 | 219 | `Turtle.draw` tells the `Turtle` we want it to draw some things. The period 220 | connects the two. 221 | 222 | `do ... end` is a sublist of things. This is what we want the `Turtle` to be 223 | drawing. Not for the rest of our program. 224 | 225 | `pencolor` sets the color of the pen the `Turtle` is dragging along behind him, 226 | and `background` sets the color of the background. 227 | 228 | `turnright` (or its buddy `turnleft`) tells the `Turtle` to turn to the right or 229 | left. 230 | 231 | `forward` (or its friend `backward`) tells the `Turtle` to move. 232 | 233 | ### Let's try drawing that square 234 | 235 | Go ahead. Give it a shot. Try to get the `Turtle` to draw a square. 236 | 237 | I'll wait. :) 238 | 239 | ### Here's my version 240 | 241 | Here's how I did it: 242 | 243 | Turtle.draw do 244 | background lightslategray 245 | pencolor honeydew 246 | forward 50 247 | turnright 90 248 | forward 50 249 | turnright 90 250 | forward 50 251 | turnright 90 252 | forward 50 253 | end 254 | 255 | ## Repeating ourselves 256 | 257 | ### Pete and Repeat... 258 | 259 | Man, that was a ton of reptition! My fingers almost fell off typing `forward` 260 | and `turnright` there! 261 | 262 | I have good news, though: I mentioned something earlier about computers. It 263 | turns out that doing boring, repetitive things is something they're really good 264 | at! They'll do the same thing over and over again, forever even as long as you 265 | ask nicely. 266 | 267 | ### Repeating repeating ourselves ourselves 268 | 269 | Check it out: our `Turtle` actually knows numbers. For example: 270 | 271 | Turtle.draw do 272 | background lightslategray 273 | pencolor honeydew 274 | 4.times do 275 | forward 50 276 | turnright 90 277 | end 278 | end 279 | 280 | Try running this example. It also draws a square! Wow! 281 | 282 | ### 4.times 283 | 284 | It's pretty easy: `4` can take instructions too, just like our `Turtle`. This 285 | command repeats a list of instructions that many times. Fun! Four times. And the 286 | `do` and `end` show which list of instructions go with the `4` rather than with 287 | the `Turtle`. 288 | 289 | ### Try it out! 290 | 291 | Have a blast: make some fun shapes of your own! 292 | 293 | ## Summary 294 | 295 | ### Congratulations! 296 | 297 | Wow, you're awesome. Pat yourself on the back. High five someone. You've got 298 | these basics down! 299 | 300 | Check out the _Basic Ruby_ lesson to pick up some totally different and exciting 301 | things! 302 | -------------------------------------------------------------------------------- /content/an-introduction-to-ruby-with-hackety-hack.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "An Introduction to Ruby (with Hackety Hack)" 3 | slug: "an-introduction-to-ruby-with-hackety-hack" 4 | blurb: "Learn the basics of the Ruby programming language in this lesson." 5 | categories: 6 | - hackety 7 | - beginner 8 | --- 9 | 10 | ## Hello there! 11 | 12 | ### Let's get started 13 | 14 | Welcome to your first lesson in Ruby! You're going to have a blast. 15 | 16 | Ruby is a great programming language that you can use to make all kinds of 17 | things with. Let's get going! 18 | 19 | ## A bit more about Ruby 20 | 21 | ### Konnichiwa, Ruby! 22 | 23 | _Ruby_ was created by 24 | 25 | まつもと ゆきひろ 26 | 27 | (you can just call him Matz) in 1995. If you couldn't guess, Matz is from 28 | Japan. Here he is: 29 | 30 | ![](/assets/matz.jpg) 31 | 32 | ### Ruby is enjoyable 33 | 34 | Matz has this to say about Ruby: 35 | 36 | _I hope to see Ruby help every programmer in the world to be productive, and to 37 | enjoy programming, and to be happy. That is the primary purpose of Ruby 38 | language._ 39 | 40 | One more thing about Ruby: Rubyists (that's what people who like Ruby call 41 | themselves) have a saying: __MINSWAN__. This stands for __M__atz __I__s __N__ice 42 | __S__o __W__e __A__re __N__ice. Which is a pretty nice saying, itself. Be nice 43 | to everyone, and give them a hand when they need it! 44 | 45 | ## Displaying Things 46 | 47 | ### Let's do this! 48 | 49 | Okay! The very first thing that you need to know is how to show something on the 50 | screen. Otherwise, you won't know what's going on! 51 | 52 | In order to start coding, we need to bring up the Editor. Its icon looks like 53 | this: 54 | 55 | ![Not this one, silly! the one on the left!](/assets/tab-new.png) 56 | 57 | Click the icon to open the Editor up, and then we'll move on... 58 | 59 | ### Hello, World! 60 | 61 | There are two ways of doing this. Here's the first: alert 62 | 63 | alert "Hello, world!" 64 | 65 | Type this in and press the 'Run' button. 66 | 67 | ### alert 68 | 69 | Okay, let's break this down: There's two main parts to this little program: you 70 | have an `alert`, and a `"Hello, world!"`. These two parts work just like an 71 | English sentence: The `alert` is a verb and the stuff in the ""s is an object. 72 | In Ruby, we call verbs __methods__. The `alert` verb says 'Put an alert box on 73 | the screen, and the content of the box is whatever thing you give me.' 74 | 75 | We'll talk about the `"Hello, world!"` in just a second. Here's the other way of 76 | making this happen: 77 | 78 | puts "Hello, world!" 79 | 80 | But if you try that here, it won't work! The `puts` method doesn't display a 81 | dialog box, it puts text out to a command-line prompt. Since Hackety Hack is all 82 | graphical, this doesn't work here. So we'll be using `alert`s throughout these 83 | tutorials, but if you look at other Ruby tutorials, you may see `puts`. 84 | 85 | ## Letters, words, and sentences 86 | 87 | ### Strings 88 | 89 | Okay! Now that you've got that verb bit down, it's time to learn about 90 | _String_s. Strings are what we call a bunch of words between a pair of " 91 | characters. The "s are used to tell the computer what words you actually want to 92 | say. Let's think about our example: 93 | 94 | alert "Hello, world!" 95 | 96 | If you didn't have the "s, the computer wouldn't know which words were methods 97 | and which ones were part of the string! And consider this: 98 | 99 | alert "I am on high alert!" 100 | 101 | Without making all of those words a string, how would Ruby know that the second 102 | alert was some text you wanted to say, rather than another alert box? 103 | 104 | ### Adding Strings 105 | 106 | Now, if you want to put two bits of strings together, you can use the `+` 107 | character to do it. Try typing this: 108 | 109 | alert "Hello, " + "world!" 110 | 111 | Same thing! The `+` sticks the two strings together. This will end up being 112 | super useful later! 113 | 114 | ## Numbers and Math 115 | 116 | ### Numbers 117 | 118 | You can just use numbers, and Ruby understands them: 119 | 120 | alert 2 121 | 122 | You can even use numbers that have a decimal point in them: 123 | 124 | alert 1.5 125 | 126 | ### Basic Math 127 | 128 | You can also do math with numbers, and it'll work out pretty well: 129 | 130 | alert 1 + 2 131 | alert 5 - 3 132 | alert 2 * 3 133 | alert 4 / 2 134 | 135 | But if you try this, nothing happens: 136 | 137 | alert "hey" + 2 138 | 139 | This is kind of fun and silly, though: 140 | 141 | alert "hey" * 2 142 | 143 | ### Errors 144 | 145 | You know how nothing happened when you hit the Run button earlier? That was 146 | because there was an error. You can see any errors that run by hitting either 147 | Alt-/ or Command-/, depending on what kind of computer you're using. 148 | 149 | The error that results from `alert "hey" + 2` is 150 | 151 | can't convert Fixnum into String 152 | 153 | What is that? 154 | 155 | ## A few words about types 156 | 157 | ### Why's it do that? 158 | 159 | Each part of a Ruby program is an `Object`. Right now, all you need to know 160 | about `Object`s is that it's sort of like saying "a thing." Your program is made 161 | up of a bunch of `Object`s working together. 162 | 163 | We'll learn more about `Object`s in a future lesson, but there is one thing I'll 164 | tell you: `Object`s have a 'type.' This lets Ruby know what kind of `Object` it 165 | is. 166 | 167 | ### Adding numbers to words 168 | 169 | That's why 170 | 171 | alert "hey" + 2 172 | 173 | doesn't really work: "hey" is a `String` object, and 2 is a `Fixnum` object. And 174 | adding `String`s and `Fixnum`s doesn't make any sense. We can make this code 175 | work, though! 176 | 177 | All we need to do is turn the `Fixnum` into a `String`. We can do this by using 178 | the `to_s` method. 179 | 180 | alert "hey" + 2.to_s 181 | 182 | ### Let's look at that again 183 | 184 | alert "hey" + 2.to_s 185 | 186 | Okay, this isn't bad. We have our `alert` method. We're giving it `"hey" + 187 | 2.to_s`. The `2.to_s` turns a `Fixnum` 2, which is like the mathematical idea of 188 | a 2, into the `String` 2, which is like when you write a 2 down on a piece of 189 | paper. 190 | 191 | ## Variables 192 | 193 | ### They're like boxes 194 | 195 | What happens if we want to keep something around? Most programs are not one 196 | line, I assure you. You can use a _variable_ to hold a value and use it later. 197 | It's like a box that you put things in. 198 | 199 | Let's try one out: 200 | 201 | message = "Hello, world!" 202 | alert message 203 | 204 | Give that a run. 205 | 206 | ### Assignment 207 | 208 | Cool stuff! We used an `=` to _assign_ the `String`"Hello, world!" into the 209 | variable `message`. We then passed that `message` to the `alert` method. 210 | 211 | As you can see, we can use variables in place of another value. Try this: 212 | 213 | number = 5 214 | number = number * 2 215 | number = number - 8 216 | number = number + 1 217 | alert number 218 | 219 | Make a guess before you run this program. 220 | 221 | ## User Input 222 | 223 | ### ask-ing for it. 224 | 225 | We can ask the user of our program for some input, and then put their answer 226 | into a variable. It's easy! Check this program out: 227 | 228 | name = ask "What is your name?" 229 | alert "Hello, " + name 230 | 231 | The `ask` method brings up a box and lets our users type something in. Fun! We 232 | put their answer into the `name` variable and then showed it with `alert`. 233 | Sweet! 234 | 235 | ## Basic flow control 236 | 237 | ### if... 238 | 239 | Remember back to that Beginning Programming lesson... we talked about how 240 | programs are one big list, that the computer follows in order. 241 | 242 | Well, guess what? We can actually change this order by using certain bits of 243 | code. Compare these two programs: 244 | 245 | number = 2 246 | if number == 2 247 | alert "Yes!" 248 | else 249 | alert "No!" 250 | end 251 | 252 | number = 1 253 | if number == 2 254 | alert "Yes!" 255 | else 256 | alert "No!" 257 | end 258 | 259 | There are a few new things here. 260 | 261 | ### == 262 | 263 | Here it is again: 264 | 265 | number = 2 266 | if number == 2 267 | alert "Yes!" 268 | else 269 | alert "No!" 270 | end 271 | 272 | The == command is just a bit different than the = command. == tests the `Object` 273 | on its right against the `Object` on its left. If the two are equal, then the 274 | code after the `if` will run. If they're not equal, you get the code after the 275 | `else`. The `end` lets us know we're done with our `if`. 276 | 277 | ## Example: a guessing game 278 | 279 | ### Guess! 280 | 281 | Let's put this all together: 282 | 283 | ``` 284 | secret_number = 42.to_s 285 | guess = ask "I have a secret number. Take a guess, see if you can figure it out!" 286 | if guess == secret_number 287 | alert "Yes! You guessed right!" 288 | else 289 | alert "Sorry, you'll have to try again." 290 | end 291 | ``` 292 | 293 | Can you guess what `to_s` does, and why you need it? If you're stumped, try 294 | asking [on the Hackety Hack site](http://hackety-hack.com/stream) and we'll give 295 | you a hand. 296 | 297 | ## Summary 298 | 299 | ### Good job! 300 | 301 | Congrats! You've picked up all of the basics of Ruby. There's a lot more you 302 | still have to learn, though! 303 | 304 | Here's what you've learned so far: 305 | 306 | `alert` and `ask` 307 | 308 | `=`, variables, and `==` 309 | 310 | `if` and `else` 311 | 312 | Awesome! You'll probably want to check out Basic Shoes next! 313 | -------------------------------------------------------------------------------- /content/an-introduction-to-shoes.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "An Introduction to Shoes" 3 | slug: "an-introduction-to-shoes" 4 | blurb: "Learn about the Shoes GUI toolkit." 5 | categories: 6 | - shoes 7 | - beginner 8 | --- 9 | 10 | ## Hello there! 11 | 12 | ### Let's get started 13 | 14 | Welcome to your first lesson about Shoes! I'm going to introduce you to the 15 | basics that Shoes brings to everyone who programs. 16 | 17 | If you didn't know, Shoes is a Ruby toolkit that lets you build GUI programs 18 | really easy and fun! 19 | 20 | ## Apps 21 | 22 | ### Shoes.app 23 | 24 | Okay! Shoes is tons of fun. It's really easy to get started. Here's the simplest 25 | Shoes app ever: 26 | 27 | Shoes.app do 28 | end 29 | 30 | Give that a spin! 31 | 32 | ### It's just a block 33 | 34 | You didn't say that you wanted anything in the app, so it just gives you a blank 35 | window. You can pass options in, too: 36 | 37 | Shoes.app :height => 200, :width => 200 do 38 | end 39 | 40 | This'll give you whatever sized app you want! We'll be putting all of the fun 41 | stuff inside of the `do...end`. 42 | 43 | ## para 44 | 45 | ### The basics 46 | 47 | Blank windows are pretty boring, so let's spice it up with some text! 48 | 49 | Shoes.app do 50 | para "Hello, world" 51 | end 52 | 53 | You know what to do by now. `para` is short for 'paragraph.' It lets you place 54 | text in your apps. 55 | 56 | `para` and other Shoes widgets take bunches of options, too. Check it: 57 | 58 | Shoes.app do 59 | para "Hello there, world", :font => "TakaoGothic" 60 | end 61 | 62 | ## flows 63 | 64 | ### They're default! 65 | 66 | If you're looking to lay out your Shoes widgets, there are two options. The 67 | first is a `flow`. A Flow is the default layout a Shoes app has. So this won't 68 | look much different from one without the flow: 69 | 70 | Shoes.app do 71 | flow do 72 | para "Hello!" 73 | para "Hello!" 74 | para "Hello!" 75 | end 76 | end 77 | 78 | As you can see, the `para`s are lined up in a row. By itself, kinda 79 | boring, since they already do this. But... 80 | 81 | ## stacks 82 | 83 | ### The counterpart of flows 84 | 85 | `stack`s are kind of like flows, but they go up and down rather than sideways. 86 | Try this as an example: 87 | 88 | Shoes.app do 89 | stack do 90 | para "Hello!" 91 | para "Hello!" 92 | para "Hello!" 93 | end 94 | end 95 | 96 | Just a little bit different, eh? 97 | 98 | ## stacks + flows 99 | 100 | ### With their powers combined... 101 | 102 | You can combine the `stack` with the `flow`s to make whatever kind of layout you 103 | want. For example: 104 | 105 | Shoes.app do 106 | flow do 107 | stack :width => 50 do 108 | para "Hello!" 109 | para "Hello!" 110 | para "Hello!" 111 | end 112 | stack :width => 50 do 113 | para "Goodbye!" 114 | para "Goodbye!" 115 | para "Goodbye!" 116 | end 117 | end 118 | end 119 | 120 | The `:width` attribute sets how wide the stack is. Pretty simple. 121 | 122 | ## button 123 | 124 | ### Push it real good 125 | 126 | Buttons are also super simple in Shoes. Just give them a title and a bunch of 127 | code to run when they get pushed: 128 | 129 | Shoes.app do 130 | button "Push me" do 131 | alert "Good job." 132 | end 133 | end 134 | 135 | I bet you're starting to see a pattern. Shoes loves to use blocks of code to 136 | make things super simple. 137 | 138 | ## image 139 | 140 | ### Pics or it didn't happen 141 | 142 | There are two ways that you can show an image in a Shoes app. Either you have 143 | the file on your computer: 144 | 145 | Shoes.app do 146 | image "#{HH::STATIC}/matz.jpg" 147 | end 148 | 149 | (This particular example only works if you're in Hackety Hack, by the way! 150 | Can you figure out what this does? Don't feel bad if you can't.) 151 | 152 | Or you can also specify an image on the web: 153 | 154 | Shoes.app do 155 | image "http://shoesrb.com/images/shoes-icon.png" 156 | end 157 | 158 | Either one is fine. Shoes cares not. 159 | 160 | ## edit_line 161 | 162 | ### Getting some input 163 | 164 | If you'd like to let someone type something in a box, well, `edit_line` is right 165 | up your alley! 166 | 167 | Shoes.app do 168 | edit_line 169 | end 170 | 171 | This is sort of boring though... why not get the information from the box? 172 | 173 | Shoes.app do 174 | line = edit_line 175 | button "Push me!" do 176 | alert line.text 177 | end 178 | end 179 | 180 | ## Summary 181 | 182 | ### Great job! 183 | 184 | There's a ton more things that you can do with Shoes, but you've got the basics 185 | down! 186 | 187 | If you'd like to learn more, you can visit the [Shoes 188 | website](http://shoesrb.com/) or press Control-M (or Command-M) to bring up the 189 | Shoes Manual. 190 | -------------------------------------------------------------------------------- /hackety_hack-lessons.gemspec: -------------------------------------------------------------------------------- 1 | # -*- encoding: utf-8 -*- 2 | require File.expand_path('../lib/hackety_hack/lessons/version', __FILE__) 3 | 4 | Gem::Specification.new do |gem| 5 | gem.authors = ["Steve Klabnik"] 6 | gem.email = ["steve@steveklabnik.com"] 7 | gem.description = %q{A set of lessons to learn Ruby programming, from the Hackety Hack project.} 8 | gem.summary = %q{The lessons from Hackety Hack.} 9 | gem.homepage = "http://hackety.com/lessons" 10 | 11 | gem.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) } 12 | gem.files = `git ls-files`.split("\n") 13 | gem.test_files = `git ls-files -- {test,spec,features}/*`.split("\n") 14 | gem.name = "hackety_hack-lessons" 15 | gem.require_paths = ["lib"] 16 | gem.version = HacketyHack::Lessons::VERSION 17 | 18 | gem.add_runtime_dependency "metadown" 19 | end 20 | -------------------------------------------------------------------------------- /lib/hackety_hack/lessons.rb: -------------------------------------------------------------------------------- 1 | require 'hackety_hack/lessons/version' 2 | require 'hackety_hack/lessons/rails/engine' if defined?(Rails) 3 | 4 | require 'metadown' 5 | 6 | module HacketyHack 7 | module Lessons 8 | extend self 9 | 10 | FILE_LIST = Dir["#{File.dirname(__FILE__)}/../../content/*.md"] 11 | 12 | def titles 13 | all.collect{|data| data.metadata["title"]} 14 | end 15 | 16 | def slugs 17 | all.collect{|data| data.metadata["slug"]} 18 | end 19 | 20 | def find_by_title(title) 21 | all.find{|data| data.metadata["title"] == title} 22 | end 23 | 24 | def find_by_slug(slug) 25 | all.find{|data| data.metadata["slug"] == slug} 26 | end 27 | 28 | def all 29 | FILE_LIST.collect{|file| Metadown.render(File.read(file, :encoding => "utf-8")) } 30 | end 31 | 32 | def static_directory 33 | "#{File.dirname(__FILE__)}/../../static" 34 | end 35 | end 36 | end 37 | -------------------------------------------------------------------------------- /lib/hackety_hack/lessons/app.rb: -------------------------------------------------------------------------------- 1 | # encoding: utf-8 2 | Shoes.setup do 3 | gem 'redcarpet' 4 | gem 'hackety_hack-lessons', '1.1.1' 5 | end 6 | require 'redcarpet' 7 | require 'hackety_hack/lessons' 8 | 9 | class Renderer < Redcarpet::Render::Base 10 | def initialize(app) 11 | super() 12 | @app = app 13 | @args = [] 14 | end 15 | 16 | def header(text, level) 17 | case level 18 | when 1 19 | @app.instance_eval { para text, :size => "x-large" } 20 | when 2 21 | @app.instance_eval { para text, :size => "large" } 22 | when 3 23 | @app.instance_eval { para text } 24 | end 25 | '' 26 | end 27 | 28 | def image(path, title, alt_text) 29 | on_click = if alt_text.nil? || alt_text.empty? 30 | Proc.new {} 31 | else 32 | Proc.new { alert(alt_text) } 33 | end 34 | 35 | @app.instance_eval { image("http://hackety.com#{path}", {}, &on_click) } 36 | '' 37 | end 38 | 39 | 40 | def emphasis(text) 41 | store @app.em(text) 42 | end 43 | 44 | def double_emphasis(text) 45 | store @app.strong(text) 46 | end 47 | 48 | def link(link, title, content) 49 | store @app.link(content, :click => link) 50 | end 51 | 52 | def codespan(code) 53 | store @app.code(code) 54 | end 55 | 56 | def store(shoes_bit) 57 | @args << shoes_bit 58 | '[-]' 59 | end 60 | 61 | def paragraph(text) 62 | para_bits = interpolate(text, @args) 63 | 64 | @app.instance_eval { para *para_bits, :font => "TakaoGothic" } 65 | @args.clear 66 | '' 67 | end 68 | 69 | # The markdown string "I'd _love_ a cupcake!" comes to us looking like this: 70 | # "Hello, I'd [-] a cupcake!" 71 | # ...and @args looks like this: 72 | # [Shoes::Em] 73 | # #interpolate turns them into this: 74 | # ["Hello, I'd ", Shoes::Em, " a cupcake!"] 75 | # These are the args that'll be passed to Shoes#para. 76 | # It also turns "_I_ like _chocolate!_" into 77 | # [Shoes::Em, " like ", Shoes::Em] 78 | def interpolate(text, args) 79 | results = [] 80 | while text.include?('[-]') 81 | head, text = *text.split('[-]', 2) 82 | results << head << args.shift 83 | end 84 | results << text 85 | results << args unless args.empty? 86 | 87 | return results.compact 88 | end 89 | end 90 | 91 | Shoes.app do 92 | renderer = Renderer.new(self) 93 | markdown = Redcarpet::Markdown.new(renderer, fenced_code_blocks: true) 94 | stack do 95 | markdown.render(File.read("../../../content/an-introduction-to-ruby-with-hackety-hack.md", :encoding => "utf-8")) 96 | end 97 | end 98 | -------------------------------------------------------------------------------- /lib/hackety_hack/lessons/rails/engine.rb: -------------------------------------------------------------------------------- 1 | module HacketyHack 2 | module Lessons 3 | module Rails 4 | class Engine < ::Rails::Engine 5 | end 6 | end 7 | end 8 | end 9 | -------------------------------------------------------------------------------- /lib/hackety_hack/lessons/version.rb: -------------------------------------------------------------------------------- 1 | module HacketyHack 2 | module Lessons 3 | VERSION = "1.1.2" 4 | end 5 | end 6 | -------------------------------------------------------------------------------- /vendor/assets/images/matz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacketyhack/hackety_hack-lessons/8192525deb563c27748b050cd19a18277a0b1b26/vendor/assets/images/matz.jpg -------------------------------------------------------------------------------- /vendor/assets/images/tab-cheat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacketyhack/hackety_hack-lessons/8192525deb563c27748b050cd19a18277a0b1b26/vendor/assets/images/tab-cheat.png -------------------------------------------------------------------------------- /vendor/assets/images/tab-hand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacketyhack/hackety_hack-lessons/8192525deb563c27748b050cd19a18277a0b1b26/vendor/assets/images/tab-hand.png -------------------------------------------------------------------------------- /vendor/assets/images/tab-help.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacketyhack/hackety_hack-lessons/8192525deb563c27748b050cd19a18277a0b1b26/vendor/assets/images/tab-help.png -------------------------------------------------------------------------------- /vendor/assets/images/tab-new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacketyhack/hackety_hack-lessons/8192525deb563c27748b050cd19a18277a0b1b26/vendor/assets/images/tab-new.png -------------------------------------------------------------------------------- /vendor/assets/images/tab-properties.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacketyhack/hackety_hack-lessons/8192525deb563c27748b050cd19a18277a0b1b26/vendor/assets/images/tab-properties.png -------------------------------------------------------------------------------- /vendor/assets/images/tab-quit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacketyhack/hackety_hack-lessons/8192525deb563c27748b050cd19a18277a0b1b26/vendor/assets/images/tab-quit.png --------------------------------------------------------------------------------