An important note: These lessons are now updated and built into Hackety Hack. Don't bother reading them here on the wiki. Just run HH and click on the lightbulb icon in the toolbar. Much obliged! - _why
Lesson Seven / Sharing Your Stuff
Approx Time Needed: 20 mins.
Due Date: Sun, Apr 15th.
In the last two lessons, you built two new programs from nothing: a YouTube video watcher and a chat program. And, if you've been doing the extra credit, your programs are just a bit more than that even. So, you're doing fantastic!
But hacking isn't all about starting from scratch. Most of the fun you can have is from building on top of old programs. Or enhancing programs by the other hackers out there.
Part A: Back to Chat
Let's talk about sharing your programs. Because a good way to get help on your programs is to share them on your Hackety Hack site.
So, open up HH and, there on the first page, find your chat program from the last lesson. (If you got rid of it, go ahead and use any other program.) Place your mouse over the icon to the left of the chat program's name.
A menu should appear. Select "Share this." from the menu. Your program will be uploaded to the Hackety Hack site at this point.
To be sure your program is shared, visit your personal HH page in Firefox: (IE is kinda broken at the moment.)
http://<Your Name>.hacketyhack.net
You should see your program listed there on your page. Click on the program's name. The browser will pop up a window asking if you'd like to open up the file: click "OK". In a few seconds, Hackety Hack will appear and ask if you want to import the program. Go ahead and click "OK". You should then get a message about already having that program. So true.
Okay, good. So, this is the essence of sharing. You shared a program on your site. Now other hackers can click on the program and import it into Hackety Hack. The program will appear right in their list.
And Back to My YouTube Program
This is exactly how I shared my YouTube program. You'll see it in my list here:
Except you didn't actually get a copy of the program. You used this bit of code:
#!ruby
Hacker('why').load_program('youtube.rb')
So, you can get programs in two ways:
- Click on the program listed on the Hackety Hack site. (Which saves the file in your Saved Programs.)
- Use Hacker.load_program. (Which will download the file fresh every time you need it.)
Let's try it with the program you just shared. Let's say it's called Chat.rb.
Start a new program. Type in a Hacker.load_program line to go out and get your Chat.rb program. Click Run.
Did your program start up? Did it work? Make sure you have your hacker name in there and your program name. Do you see how it works?
Part B: Building on My Marks
Okay, time to steal some more code from me. And this is fine. It's great to steal from other hackers, it's the very quintessential part of learning at first. You've got to build on other folk's stuff: save yourself some work.
So, head over to my Hackety Hack site and click on my program "QuickyMark.rb". Import it into Hackety Hack, it should appear under your Shared Programs.
Run the program. It's a simple bookmark keeper. Type in a link (such as "http://why.hacketyhack.net") and a description (such as "Where I got QuickyMark.") When you're done playing with it, close it by clicking the "X" on the popup.
Now, click on the "QuickyMark" title and check out the code. A couple popups in there. And it's saving to a table called "QuickyMark".
Sharing the QuickyMark Table
Slight detour here. We're going to publish the QuickyMark table to your Hackety Hack site. Place the mouse over the QuickMark table's icon and select "Share this."
When it finishes sharing, click the little house icon in Hackety Hack's toolbar. The QuickyMark table should have a different icon now: a table with a chain link. The link means the table is linked to your Hackety Hack site.
So: Visit your Hackety Hack site and click in "QuickyMark" under Shared Tables. Looks like your bookmarks copied over.
Okay, HERE'S THE DEAL: Now, whatever you save to the QuickyMark table (which is now shared,) will be saved online.
At this point, you should try adding more bookmarks and checking to see if they show up on the shared table on your Hackety Hack site.
Colors and Designs
Let's try to spruce up this QuickyMark program. It's that stupid plain white and that just saps the life out of me.
Here's how: you can use the "design" command inside any popup to change its look. Add your own "design" touch to the popup for the bookmark_list method. Plop this under the line that says Web.popup do:
#!ruby
design("font-size" => "15px", "font-family" => "arial",
"color" => "white",
"background-color" => "green",
"padding" => "16px")
Run the QuickyMark program. See how that worked?
Ewww, but the links are so ugly. How do we make them white?? Try attaching a "design" with a dot:
#!ruby
a(mark[:Link], :href => mark[:Link]).design("color" => "white")
So, what kinds of things can the design change? Well, anything that's a CSS property. A complete list of CSS properties is here: http://www.w3schools.com/css/css_reference.asp (will probably work up a friendlier one for HH.net)
Extra credit: Hackety Hack comes with an ask_color() method which pops up a color picker. Try writing a short program which will ask for a color and then build a popup using that color as the background.
Part C: Reaching Into Tables on Your Own
We've been using popups a lot to fill up tables, but there's a lot going on there that you're not seeing. Such as the save method.
If you'd ever like to add to your tables without going through a popup, you can just write code that uses Table.save. Here, let's add a bookmark to your shared QuickyMark table:
#!ruby
Table('QuickyMark').save('Link' => "http://google.com/",
'Description' => "Google, in case I forget...")
This is handy in case I want to, let's say, copy all my bookmarks from del.icio.us to QuickMark. Or I could tie it into my chat application: when someone puts a link in chat, I could save it into QuickyMark.
Extra credit: Can you load the Boing Boing feed and then save all the items to your QuickyMark table in just four lines of code? (For the solution: click here.)
