Infinite Parallax Experiment part 1: Setting up

I’ve always loved the cute little parallax effects GitHub has on their site.  The three I’m specifically talking about are their About, 404, and 500 pages.  Aren’t they adorable?  These are based on mouse position, where a lot of the common parallax effects seem to be based on the scroll bar.

I showed this to my friend Rosemary a few weeks ago, and she mentioned that it would be cool if it there was even more of a 3D effect by moving you “forward” infinitely, so that whenever you clicked, the front-most layer disappeared, the other layers moved forward, and there were new elements in the back layer.  It’s been on my mind since then, so I decided to play around with it and make it a quick little experiment.

So far it’s also been a good chance for me to become more familiar with GitHub (and Git!) and jQuery.  I’m putting the source for this experiment in this infinite-parallax GitHub repository, and you can see what I’ve done so far here: Infinite Parallax.

It isn’t much yet.  So far I’ve just made a test background image for the landscape, and had the image move around based on the mouse position.  When the mouse is at the top of the window, it shows the top of the background image, and as the mouse moves down, the background image moves up, so that when the mouse is at the bottom of the window, it shows the bottom of the background image.  The x-movement is kind of arbitrary right now, as I don’t know what the final image will be, and it will probably need to be tweaked based on that.

My scribbly notes

My scribbly notes

Clicking on the landscape just pops up a temporary alert I put in the function where I will be manipulating the different layers of images.  I still have my test numbers in there, so right now the landscape is showing mouseX, mouseY, and the x-position of the background image.

Next step I’m just going to put in three layers of images and play around with the x and y positions to see how far to move them for it to look okay.  Then after that, putting in random images with some random movement offsets on each, and finally removing/moving/adding layers on click!

The hardest thing will be deciding what to theme this experiment and what images to use.  I took a look at my Inspiration Pinterest board, and I think I’ve decided to use the color scheme in this pin.  Maybe a foresty theme with trees and bushes that have purple berries, and some grey bunnies or something.  Who knows!  Rosemary also showed me how to “draw” (…or rather, trace xP) in Illustrator, so I think I’ll sketch simple cute little images and trace them in Illustrator.

My first (messy) tracings!

My first (messy) tracings!

The book that started it all: How I taught myself HTML in 4th grade

I got my new book HTML&CSS in the mail yesterday.  It’s a very basic introduction to HTML and CSS, but I got it even though I know both because it is absolutely gorgeous.  I wish more books taught like this – I’ve actually been searching for more books on web design like this.

Anyway, as I started reading through it, I realized that a lot of HTML I thought I knew is obsolete.  For instance, apparently using <a name=”blah” /> is now obsolete in HTML5, and you should instead specify anchors for links with id attributes.  I didn’t even know you could specify anchors with id!  At that point I realized that my HTML is way outdated.

Why?  Because the HTML I know is what I taught myself from a book in 4th grade.  After this one semi-structured introduction to HTML, everything else I picked up as I needed it, and I definitely haven’t been keeping up with new specifications.  I have a very haphazard knowledge of HTML, with a lot of gaps.  Same with CSS – I don’t think I even bothered with CSS for years because that intro book never mentioned it.  I’ve definitely been able to get by with what I know, but I think it’s time for a more structured refresher – and to get myself updated to 2012!

I was surprised to find that I actually had that book from 1998 (14 years ago!) in my bookshelf.  I must have missed it when I was unpacking – otherwise I would have reminisced over it for hours.  Take a look at how awful it looks:

I got it from a book order in 4th grade.  Remember those?  I was always so excited to pick out new books to get.  I have no idea what possessed me to get this book, but I’m glad I did, because I’m pretty sure this book is the reason I’m a software engineer today.

Here’s the back cover.  I cringe just looking at that example site.

I’ve already checked, that website doesn’t exist any more.

I’ve been on a book-buying kick lately, mostly about web design.  I figure the money will be worth it in the long run since I’ll be learning something I have a lot of interest in, and I haven’t sat down and read for a long time.  I still have five or so fiction books in my bookshelf that I haven’t gotten to, but at this point in time I’m more interested in learning.  And reading is dying out!  Why don’t people relax and just read any more?  That used to be all I did when I was little.  Now instead of staying up really late reading I stay up really late browsing the Internet.

The HTML&CSS book is so pretty.

Even when they show the example pages that correspond with each code snippet, they don’t just show the page – they display them on different monitors in beautifully decorated rooms.  I’ve even been getting some book suggestions from the books they show in the background.

I also got Above The Fold a few days ago.  It’s also really pretty, and there’s a lot of fascinating background in it.  I never thought about the fact that tabbed browsing was based on file folders, although it seems obvious now that I know.  It talks about the structure of web pages, but it shows a lot of them full-length.  Web pages look so different when you look at them full-length versus the height of your browser.  They feel so much more cluttered to me when I see them full-screen – but then I guess that’s the whole reason the “fold” is important!

I’d also been reading The Design of Everyday Things before I got into this big book kick, because my user experience friend recommended it.  Before I started work on my current team I never thought about user experience at all – but now it seems so important.  I guess if I don’t have to think about the experience of doing something while I’m doing it, it was probably designed well enough that it was natural and made sense.  On the other hand, the book says that when something goes wrong, people tend to blame themselves rather than bad design.  I don’t think I believe that 100%, because some people are just retarded, but if the majority of people have difficulties, something is probably wrong.

Another book I recently bought but haven’t started is a little different… I got I Am Jackie Chan, for no reason other than that Jackie Chan is awesome.  Sadly, I had to get a used book because they apparently don’t print it any more.

I’ve decided to set aside a specific amount of money each month for my “splurgy” purchases, and these books fall into them.  I’ve already ordered Responsive Web Design – now that people browse from phones so much a responsive site is pretty much expected.  Here are some other books I’ve decided to buy so far, in the order I want to get them:

After I read more I’m going to stop being lazy and actually design BaconFriedRice instead of using pre-made templates.  Yes, I’ve been saying that for a long time, but now that I’m reading all these I want to do it right.  I’m excited to get to that point!  Now off to read some more!

Node.js experiment part 2: Research, review, and learning

I want to do this experiment right, so rather than jump right in I’ve decided to do a lot of research and planning before hand.  I’ve also decided to review JavaScript and learn Node.js “correctly” by reading introductions and tutorials.

But two things before I begin:

  1. I need a name for the project!  It’s bothering me that I don’t have one, and I don’t want to go through the bother of going with a temporary name and renaming everything afterward.  Any ideas?  It needs to describe the “resource blog” idea, but also maybe be cute and easy to remember.  These are some random thoughts I’ve jotted down:
    • bacon links?
    • piggy links?
    • library?
    • repository?
    • reference?
    • collection?
    • anthology?
    • compilation?
  2. I want to be organized, so I’ve started a notebook for this project.  I write notes on introductions/tutorials in it, and also just jot down any thoughts I have.  I like writing things down on paper rather than just typing them, because it helps force me to think through it – when I type, sometimes I type so fast I can’t even think fast enough to keep up.  I also discovered Trello, this awesome “collaboration tool” that’s perfect for organizing a project, especially projects with multiple people.  I found it when I was looking through code52 about their most recent project.  Here is their Trello board for their project Samurai.  It’s awesome – there are lists of different types of tasks, and you put cards in the lists, which represent tasks.  The cards can have notes, comments, and checklists, and can be labeled with categories and even have people assigned to them!  Here is my Trello board for my experiment.  I’ve just started putting it together so I’ll definitely be expanding it.  Comments on the cards are welcome :)  Also I feel silly assigning myself to everything, but when I finish things it makes me feel like I’ve accomplished a lot!

Here’s a table of contents again:

Research
Review
Learning

Research

First I expanded my feature list so I could figure out what I would need to do.  Here is what I have in my notebook:

  • Log in to post
    • Only me for now
    • Goes to admin center – like the WordPress admin page
      • Add/edit/delete resources
      • Save versions eventually?
      • Save drafts
      • Moderate comments
      • For posts:
        • Create/select category (can only belong to a single category)
        • Add tags
        • Title
        • URL
        • Note
        • Rating
    • In the future, expanding for more users
      • Admin can manage users
      • Manage user profile – name, email, picture, URL, bio, etc.
      • Add/edit/delete own posts
      • Versions?
      • Drafts
      • Same as above for posts
      • Permissions model – everyone sees same functionality but can only act based on permissions
  • View resources
    • Summary view and full view
      • Summary view – multiple summary views on a page, “more” link will show full view
        • Title
        • URL
        • Snippet of note
        • Rating
        • Category
        • Tags
        • Number of comments
        • Votes with ability to vote (like Reddit)
      • Full view – each resource on a single page
        • Title
        • URL
        • Note
        • Rating
        • Category
        • Tags
        • Votes with ability to vote
        • All comments
          • Name
          • URL/email
          • Comment
        • Add comment
          • Name
          • URL/email
          • Comment
          • Recaptcha
    • Default view
      • Display resources by time, most recent first
      • Show each resource in summary view
    • Category view
      • All on one page
        • Alphabetical categories
        • Show in category tree
        • Show minimized by default, can maximize to see summary view
      • By category
        • Same format as all on one page except each page is for each outmost category (subcategories don’t get own page)
        • Can sort by date, rating, votes
    • By tags (user search by tag)
      • Show summary view of results, by date as default
      • Can sort by date, rating, votes
      • Minimized by default, maximize to see summary view
    • By highest rated (my rating)
      • Same format as tags view
    • By highest voted (by visitors)
      • Same format as tags view
  • Index page
    • Default view of resources
    • Tag cloud
    • Short list of highest rated with “more” link
    • Short list of highest voted with “more” link
    • Link to page with different category views
    • Search bar for tags
    • About link
    • Contact link

Now that I’ve typed it out, I realized that there may be too many different views of a single resource – full view, summary view, and minimized view.  I need to think more on that.  I figured that showing the full view of every resource would be too much information if it wasn’t the index page so I think there should be at least two views, but it may not be necessary for both a summary view and a minimized view.  I may get rid of the minimized view, otherwise someone would have to first expand the minimized view, and then click “more” on the summary view to see the full view.

I’ve also come up with a list of tools/frameworks that I think I’ll need for the project.  I did quite a bit of research on the best tool for each function, and I think this is the finalized list.  They’re in no particular order under each category:

  • The general code – server and client side
    • Node.js – obviously
    • Express – web development framework
    • Jade – template engine
    • Stylus – CSS pre-processor
    • nodeQuery – DOM manipulation framework with JQuery methods
    • everyauth – authentication and authorization
    • Async – utility module for asynchronous code
    • node-UUID – generate UUIDs
    • node-recaptcha – renders and verifies Recaptcha captchas
  • Database
    • MongoDB – document-oriented NoSQL database system
    • Mongoose – MongoDB object modeling tool
  • Testing and debugging
  • Deployment
    • Forever – tool to ensure a script runs forever
  • Logging
    • winston – multi-transport asynchronous logging library
  • Documentation
    • NDoc – documentation generator

I’ve always had this really weird attitude towards using external tools.  On one hand, I feel like doing everything myself is “better” in terms of me being a programmer and not being lazy.  But at the same time I guess it’s not lazy, it’s being resourceful and using what’s already out there.  I never know how I feel about it… I still get conflicted about it all the time.  But I’ve got this huge list now, so I’ll have to deal with it!

There are still some things I need to consider for the project, and need to do research on – I won’t fully go into them here but they’re on the Node.js Experiment Trello board.

Review

Since all my JavaScript is self-taught, and JavaScript is kind of important to Node.js, I decided to fill myself in by following a introduction tutorial.  I also want to learn to use Node.js the “right” way, so I am following an introduction tutorial for that too.  I decided on Felix’s Node.js Beginners Guide, which was suggested by a lot of people when I was researching best Node.js tutorials.  And as luck had it, that tutorial suggested Eloquent JavaScript as a JavaScript tutorial, and it had good reviews when I researched it, so I’ve decided to follow that for my JavaScript review.

I’m up to chapter 9 in Eloquent JavaScript and it’s been great for me so far, as someone who already has programming background in other languages and wants to just pick up the little nuances about JavaScript (it still throws me off that you don’t have to tell a variable what kind of variable it is.  And null vs undefined?  == vs. ===?  Closures?!  Prototypes?!?!)  However I think that as an introduction for someone who has never programmed before, it’s kind of a mess.  It doesn’t explain things very clearly and kind of brushes over some programming concepts as “magic”.  I had to do some outside research about closures and prototypes, and I still don’t fully understand them.  They also try to shove too much down your throat – they had an entire chapter that was based around the concept of graphs but never explained graphs and just sort of threw code at you.  I love the in-browser console though; it’s really easy to follow along with their code samples and edit it myself.  Try out the in-browser console – it’s awesome.  Overall I think it was a good choice.  Still need the finish taking notes on the last few chapters though.

I’m also playing around with Codecademy to keep filling in any knowledge gaps I have.  It’s neat, I like the tutorial format, with the skeleton code in the editor and the console to run it.

After that I’m going to take notes on Felix’s Node.js Beginners Guide.  Then I’ll see what other knowledge I may be lacking and research some more good tutorials.

Learning

I guess I kind of already covered this with Felix’s Node.js Beginners Guide.  But I’m also going to need to become familiar with all of the tools and frameworks I’ve chosen to use in the experiment, so I think that I will have to do some reading on each of those and code through some small sample projects for each of them, before I try to use them all together.  I still need to come up with a plan for that – not sure what order I’ll be going in, as the list of tools and frameworks above are in random order.  I wonder if it’s better to familiarize myself with testing tools first so that I can use them while I learn the others?

Anyway, it’s late now, so I’m going to bed.  Goodnight!