Infinite Parallax Experiment part 3: Animated moving forward

GitHub repository, progress so far.

I’ve got it to “move forward” when you click, and today I animated it.

Originally I was moving forward by just moving the images into the level in front of it.  The levels are stacked divs with different z-indexes, so when I just moved the images into their new levels on click, it was a bit jarring.

The jQuery class I was in had talked about animations, so I decided to try it.  Unfortunately, this meant I had to change how I was doing things.

I assume that all the images I use will be the same size, to make calculating positions easier.  For the two back levels, I had been using transform scale in the stylesheet to make the images smaller.  However, jQuery’s animate function can only animate properties with number values.  This meant that I couldn’t use, say, transform: scale(0.8).  However, I could animate the change in width and height – so I decided to do that instead.

Now, to animate it, I move all the existing images forward a div; the front-most level is moved into a temporary div on top of all the other ones.  When this is done, there is no visual difference.  Then, I fade out and remove the images in the front-most level, animate the change in width, height, and position of the second and third levels, and fade in a new back level.

If the mouse was moved during the animations, there was a bit of weird jerking movement, so I just made it so that the mousemove handler has no effect until the animations are done.  Good thing the jQuery animation functions can take callback functions!

I also changed the temporary images to different temporary images of just numbers.  It’s a bit easier to see the movement, but still kind of weird looking since they don’t have borders.  All that’s left is to draw the actual images though, and then it should be done!  Unless I find some weird bug or think of something else to add to it…

Infinite Parallax Experiment part 2: Adding movement

I’m taking a jQuery class right now through work, and it’s so cool.  You can do so much with it, and it’s so amazing to imagine how much work went into making it all cross-browser-compatible and easy for you to use.  It made me even more excited about playing around with this infinite parallax idea.

Here is the GitHub repository, and here is the progress so far.

I actually worked on it last week, but didn’t have a chance to write about it.  I can’t really remember what I did last week… but today I edited some of my JavaScript based on some jQuery tips I learned in the class, and also added movement to the three levels.  I don’t really know what kind of numbers to use to make it look 3D, so they’re kind of random.  I guess I’ll tweak them after I add the real images, as it’ll be easier to see then.

Next step is to do the “moving forward on click” part!  I learned some stuff today that makes it a lot easier than I thought it would be.  Excited to do that tomorrow!

More notes

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 1: Defining my experiment

I’ve decided that my technical project will revolve around Node.js.  And now I will start my long convoluted story about how I came up with my project…  I guess I will provide a table of contents again since I tend to ramble a lot :)

The back story
The idea
The goals
Future considerations
The plan

(I just want to say here that I accidentally deleted a whole bunch of stuff I wrote and WordPress didn’t auto-save a draft before it happened so now I am an extra sad panda.)

The back story

At work, I was working with part of our team in China, and right before the winter vacation they gave us the code to a web socket server in Node.  I’ve always been interested in web technologies – I taught myself HTML from a book in fourth grade and self-taught whatever PHP I needed in middle school for my embarrassing (and luckily now-nonexistent) EatenCheez.com – but I’ve never had any formal training.  After I moved to Virginia in high school, I stopped playing around with HTML and PHP in my free time, and since I focused on embedded systems in college, I don’t really have any idea what Node was.  I was curious, so I looked into it, and it’s so fascinating!  A web server written in 6 lines of code?  Awesome!

(Side note Easter egg – I found a snapshot of EatenCheez.com from 2003.  I don’t know what happened to the formatting but I thought it was a funny reminder of way back when.  Cliques, rings and clubs?  Guestbooks?!  At least this version of EatenCheez.com didn’t have a splash page with the obligatory hit counter!)

I started looking into Node, reading about what it’s best used for and following some cool tutorials.  I even installed Ubuntu on my Windows desktop just to be able to play with Node easier.  There are some really cool tutorials and projects out there – such as this Scrabble MMO written in 48 hours, this Twitter clone, or this awesome phone-controlled multi-player browser game written by an intern (try it out, it’s neat and cleaned up my rusty French) – but following someone else’s tutorial isn’t the same as creating your own project.  So I kept looking into Node to see if I could get any inspiration.

The thing that ended up really inspiring me ended up being… my laziness.  When I’m bored, I will lounge around on the couch or on the bed browsing the internet on my phone.  However, phone screens are tiny!  So when I find an interesting link, I will email it to myself to read later.  I like how mailing a link to myself from the iPhone will put the title of the page in the subject and the URL in the body of the email, because the title is obviously much more descriptive than the URL.  However, this means I end up with an inbox looking like this (I actually had 20 sitting in my inbox all day but I started moving them before I remembered to take a screenshot):

(I’ve been having insomnia for the last week, only getting 3-4 hours of sleep a day… hence the very early morning emails to myself)

I wanted to clean up my inbox, but I didn’t want to just have a big list of URLs and no descriptions, so I decided to just move things to a text document:

Now my email inbox was clean, but I had a list of titles and URLs on my desktop that I couldn’t access from anywhere else.  That is the same reason I don’t like to use browser bookmarks – I’ll put them there, then not be able to access them when I’m, say, at work and have some free time to read.  I started syncing my Chrome settings recently and they sync bookmarks, but I also use different browsers when I’m working, so I’d have random bookmarks saved across multiple browsers on multiple machines.  I tend to just avoid browser bookmarks in general.

On Saturday I was in the middle of this tutorial for a blogging system in Node when it hit me – I should make my own personal resource blog!

The idea

“Personal resource blog” doesn’t explain much.  I was formulating this idea while I was (yet again) lounging around on my phone, so my notes ended up like this:

Basically I want to make a “blog” where each post is a useful resource I found, so I guess a library of bookmarks.  Here is a cleaned up, better explained, and expanded version of this list of features I made.

  • Log in – Since it is a personal blog, only I can log in and post
  • Create category (can be nested) – Each resource is listed under a category, and there can be categories within categories
  • Select category (tree view) – If I already have the category I need, just select it
  • Input title, link, comments, tags – Each resource consists of a title, the link to the page, my comments about how useful I found it, and some tags.  I’ve also been thinking that maybe I could rate it.
  • Submit – submit the resource, obviously
  • Categories displayed in multiple ways (all on one page, each category level on one page, each resource on one page) – Now I’m getting into what the visitors see.  They could view all and see the resources listed under their categories, or they could select a category and view only those resources on a page.  I believe that in the last part I was referring to each resource having its own permanent link, so perhaps in the two previous views not all of the information would be shown, and the permanent page would be the full view.
  • Search by tags – Users can search by the tags on each resource
  • Tag cloud – Always nice to see a tag cloud
  • Can add comments to each resource – User can comment on resources about what they think
  • Can vote up – Or down too I guess.  Like stackoverflow or reddit
  • Need to link to database – I guess this wasn’t really a feature, I was writing a note to myself that I need to look into different databases
  • Sort by my score – Users can see what I liked best
  • Sort by date – See when I added resources
  • Sort by votes – See what everyone thinks is the best

Those are my ideas as of now.  I think that I could definitely expand it – for instance, if it actually works and I don’t code up a catastrophe maybe I could make it so users can make accounts to submit resources so it wouldn’t just be a personal library any more.  I don’t know, I’m mostly using this as an experiment to learn, so I don’t even know if people would be interested or find something like this useful.

The goals

The main goal is obviously to learn to use Node.  However as I was looking into it there are also many other useful tools to learn and utilize in the process.  Here are the ones I’ve discovered so far that I would have to learn, use, and become more familiar with (on top of polishing my very rough Javascript):

  • Node.js – server-side Javascript
  • Express – Node web framework
  • Jade – Node HTML template engine
  • Stylus – Node CSS template engine
  • JQuery – popular Javascript library
  • MongoDB or CouchDB (or both) – NoSQL database systems

And of course the end goal is to create my own CMS.

Future considerations

There are quite a few things I need to think some more about, which will come in future posts.

Full definition of features

I need to sit down and write down exactly what I want before I do any coding.  I think the list I have above is a good start, but I need to clean it up some more.

github and open source

I’ve never used github before, but I think that I should make use of it.  Of course this means that since I am cheap and will be using a free account, my project will need to be open source.  I want to learn more about the idea of open source and different open source licenses.  I’ve already done a bit of reading, and I think one thing I need to do is look at the different libraries and frameworks I’m using to see what open source licenses they use, then pick one for my project.  Or is it even that important?  I have no idea, I’ve never dealt with any of this before…

Hosting the project

BaconFriedRice is on a shared hosting plan on A Small Orange, so I probably shouldn’t put my app there since it’d be persistent.  I’ve been looking into different places I can host a Node app, but I realized there’s quite a bit to think about.  I want to start off writing it on my machine, then deploy it on some free hosting as I test it.  The only problem is that the databases for free hosting are either non-existent or very small, and there are also limited options – for instance, I was looking at Cloudnode, but they only use CouchDB (and you only get 25MB), while it seems like more people use MongoDB.  But then, if all goes well and I actually write this thing, maybe I would just pay for hosting in the future. It’s hard to say right now… but I’ve also been looking into Nodester, dotCloud, Webbynode, Joyent Cloud Services, and Cure.  Also database hosting at MongoHQ and Cloudant.

Picking a database

Like I mentioned, the two options I’ve been looking at are MongoDB and CouchDB.  They seem to be the most popular for Node.  However it really depends on where I end up hosting.  I actually think that after I finish the blog tutorial with MongoDB, I’ll do this blog tutorial with CouchDB and see which I like using better.  That’s probably a better way to decide after all!

Picking a name

This is my top priority right now.  I need a name for my project!

The plan

  1. Finish the MongoDB blog tutorial
  2. Do the CouchDB blog tutorial
  3. Pick a name!
  4. Flush out the features and put them in order to add one by one
  5. Pick a database
  6. Pick a free hosting to start with
  7. Start coding!
  8. Utilize github
  9. Keep coding
  10. Figure out the whole open source thing
  11. Don’t stop coding
  12. Sleep a bit
  13. Code some more
  14. If it actually works… Move it to paid hosting with more space!
  15. Celebrate

Sorry for the very long read :) Now it’s time for bed!