HW 4 | Front End Development
This week we reviewed our homeworks and took a crack writing our own small application in Javascript. At this point, your foundation is strong enough that there are two directions to go: keep improving at Javascript, become a guru and get hired as a top-notch programmer, or become a CSS expert, learn tons about website/user experience design, and produce beautiful, functional websites.
Of course, you can always do both.
In either case, one thing that's useful to know about is AJAX: Asynchronous JavaScript and XML. AJAX has been one of the key technologies that moved the world from the Web 1.0 to Web 2.0—most all modern websites use AJAX, so it's important to learn. However, it's somewhat hard to motivate why AJAX is valuable because nowadays, it's hard to remember what websites were like before AJAX.
Essentially, AJAX is a way to get data from another URL (on the same website or another) without refreshing the page.
- First, do some reading on AJAX: http://learn.jquery.com/ajax/
- Then, try it out on Codeacademy: http://www.codecademy.com/courses/javascript-beginner-en-g7vdk/0/1
We'll talk more about it next lecture.
Total time: 30-45 minutes
Note: do this section or the next. This one is Javascript-heavy.
We went over how to move a box on the screen with arrow keys today. Your assignment over the next two weeks will be to get that working, and to solve some fun challenge problems. The "basic" solutions can be found on Rafi's HackYale Homework Github repo, in the week_4 folder.
- Make a box (or image, or circle, or whatever) move on the screen with arrow keys.
- Create a button prompts you to enter a numerical speed. Use that input number to make your box move slower/faster.
- Use the function
setIntervalto make your box move automatically, and change the direction with the arrow keys (kind of like playing the game snake).
- Make it so your box can't be moved off the screen.
- Make it so your box enters "turbo mode" when space is pressed, then leaves turbo when space is pressed again (or maybe after 3 seconds? There's no such things as infinite turbo, after all).
- Make your box detect collisions; put a dot on the screen, and if your box touches it, make something happen (the box changes color, the dot moves somewhere else, you get a "point"...)
- Make it so your box leaves a line along its path behind it.
- Add the ability for your box to "jump": when space is pressed, the box goes up and comes back to its starting position over some period of time.
- Along the same vein, add "gravity"—have your box fall some amount, until it lands on, well, something.
- Pre-program routes—if you press "t", the box moves in a triangle around where it is. If you press "s", it makes a square.
- Be creative—the possibilities are limitless! If you add a background image, you could very well end up with a nice game here :)
Total time: 60 - 240 minutes
Note: do this section or the previous. This one is HTML/CSS-heavy.
If games aren't quite your thing, it's time to start mimicking great websites—that's how many people learn to build! Try imitating some of the following websites, and improving/personalizing them.
- hackyale.com (hehe)
- spotify.com
- your favorite Tumblr
For inspiration, check the design section of the resources page. One of my favorites is The Best Designs, a compilation of the best-designed websites on the internet (that those people could find, anyway). Yours could be next!
Total time: 60 - 240 minutes
If you need help, first consult your best friend, Google (or Bing, or Yahoo! search...)
Then check out the [class page](https://github.com/hackyale/hackyale.github.io/wiki/Front-end-Development-(Fall-2013\)) or the lore.com site for information.
If you're still stuck, ask rafi@hackyale.com or alex@hackyale.com for help.