BaconFriedRice.com

We’ve been neglecting BaconFriedRice for a while.  Since I’ve started my new job, we’ve been really busy.  Jack and I work at the same place now, so we end up staying later than we want, as often I’ll be waiting for Jack to finish something, but by the time he’s done I’ll be in the middle of something, and so on…

This also makes it hard to make things for each other for our anniversary, since we leave for work together, are at work together all day, and come home from work together.  No time to work on secret presents!

Now that I’ve made my excuses, here is all I was able to give Jack.  I was stuck at work until midnight last night waiting for him to finish, so I didn’t have many supplies.  I even ran out of lead for my pencil, and all I could find were whiteboard markers and highlighters, so I just stuck with my pen.  It’s also unfinished, since he came back before I was done.

Jack gave me this: Piggy as an Assassin!  Based on Ezio.

And now, our late Halloween pictures.  I was based on the splash screen of one of Storm8‘s games, Castle Story.

And Jack was Faust from Guilty Gear:

We moved to a new apartment on Saturday.  That night, we heard this annoying periodic beeping, so Jack went to check out what it was and turn it off.

This is the security system that is in our apartment.

See that long On / Off button?  Doesn’t it look like the top would be On, and the bottom would be Off?  Jack pushed Off just in case it was the security system making the beeping.

Instead, he accidentally turned the motion sensor on, and set it off at midnight.  It was going for around 10 minutes before he finally managed to get the alarm to shut up (no one had told us the passcode when we moved in).  Thank god it’s not connected to the police department!

This system is so poorly designed – apparently that long button is actually an On/Off toggle button, so instead of turning it off, Jack turned it on.  First of all, why would you make it an extra-long button and label the top and bottom separately if the entire button does one thing?  That is not intuitive at all.  Why wouldn’t they be separate On and Off buttons, to make it clear?  Furthermore, why can you turn on the alarm system without a passcode?  The system in our old house in Virginia required a passcode both to turn the system on and off – no chance of accidentally turning it on!

In addition, my friend Rosemary had the following to add to the list of how terribly unclear this system is:

• What in the world does FUNCTION do?
• And what about BYPASS?  Does that mean you can bypass the system without a passcode?
• RESET?  INTERIOR?  INSTANT?
• Is the phone number for customer service or emergency information?
• What does that warning light mean?  Was there a break-in?  Or is there an error with the system?  12 errors?
• What do all the numbers mean?
• Why in the world do the 7, 8, and 9 buttons spell FAP?

In other news, we are settling in to the apartment.  The first few days, we kept the cats in the bedroom so that they wouldn’t get in the way while we rearranged and unpacked all our items.  Unfortunately, Jokulhaups is TOO SMART and figured out how to open the door.

Apologies for how blurry the photo is.

We ended up having to tie the bedroom door handle to the bathroom door handle so he couldn’t pull the door open.

Since I haven’t started my new job yet, I spend the days following the kitties around with a spray bottle and teaching them where they’re not allowed to be.  Jokulhaups has already figured out how to open the cabinets and drawers in this apartment.  In the old apartment, we Velcroed the cabinets shut, and he was still strong enough to open them.  In this apartment, there isn’t enough overlap between the cabinet body and cabinet door to add Velcro – I have no idea what we’re going to do!

When we took them to the vet, Dragon was weighed at 8 pounds, and Jokulhaups at 15 (the doctor said he isn’t overweight though).  He’s almost twice her weight!

I’d been hearing bits and pieces about Jiro Dreams of Sushi for a while and drooled over the trailer a few times, but never really got around to watching it despite its 98% on Rotten Tomatoes.  Last week, however, a foodie friend posted about it on Facebook, and I ended up having some good sashimi on Sunday, so I finally decided I need to watch this!

The first thing I have to mention is that the order of the topics in the movie didn’t completely make sense to me.  I was typing some interesting points on my phone as I was watching, and reading back on them now, they seem kind of random.  They would bring up Jiro’s sons, then talk about daily fish purchases, mention his apprentices, talk about his personal life again, then talk about his daily rice purchases… I’m going to reorder topics in this post in a way that makes more sense to me!

I never realized so much went into sushi – or perhaps this much only goes into really good sushi.  I liked watching his hand movements while sculpting a piece of sushi, as they were very deliberate and consistent, but also very artistic and beautiful.  I’ve commonly seen people in the US mix wasabi into their soy sauce and dip the sushi in, but from what I’ve read and heard, that’s not the “accepted” method in Japan.  In the movie Jiro put wasabi between the fish and the rice, then brushed soy sauce on top, and it was expected that you just eat the entire piece of sushi in one bite as is.  It puts so much trust and pressure on the chef to prepare food perfectly the way everyone enjoys!

It looks like it would be intimidating and maybe a bit awkward to eat there – he places one piece at a time on a plate in front of you, so you have to keep up with his meal pace, and he is always there in front of you.  I don’t know what I would do if I didn’t like one of them – I wouldn’t want to show it to him, and I’d have to eat it since the meal is so expensive (over 300 US dollars)!

I had never thought about where the fish comes from before.  One of my favorite parts of this movie was when they talked to the tuna dealer.  I find it so interesting that he specializes in tuna – all he does all day is select, buy, clean, and sell tuna.  The dealer said he could tell if the tuna will taste good by its texture – I can’t even imagine knowing anything so well.  The tuna auction looked so chaotic but exciting at the same time, and it was neat to see all the huge tuna lined up on the floor.

Shrimp, octopus, rice… everything they select and buy in the morning for that day!  He said that they massage the octopus for 40-50 minutes – it blows my mind that they pay that much attention to everything, just to serve one small piece of each type of sushi to each person.  I wonder if the octopus was alive while massaging though… and if not, if they massage before or after cooking.  They were slicing the eel while it was still alive; they staked it behind its head to the cutting board then sliced the body in half.

The movie mentioned that apprentices are under Jiro for 10 years.  For how much of a perfectionist the movie kept painting him as, he wasn’t as mean or strict to the apprentices as I expected – unless he acted differently for the movie, of course.  I don’t think I would be able to handle doing the same thing every day all day for 10 years.  With my personality, I can’t handle doing the same things every day!  The biggest thing that caught my attention, though, is that the apprentice said that one of the last things they are allowed to do is to make the egg sushi.  The highest honor isn’t even to make sushi involving fish!  I am now certain I don’t understand the art of sushi at all.

The one thing that irritated me about this movie, though, was gender bias, both by Jiro and in the focus of the movie itself.  At one point he tells his customers that he makes smaller pieces of sushi for the females, so that the meal moves at a consistent pace and everyone finishes pieces at the same time.  Such bullshit!  I want just as much sushi as anyone else.  And some women can eat more than some men.  I understand Japanese culture does still put more emphasis on sons and child order (his oldest son is still working under him since he is expected to take over for his father, but his second son got to open his own separate restaurant), but I thought Jiro himself might not be as traditional, since at one point, he says something like, “Why should I respect my parents, they never did anything for me!”.  The movie never mentions his mother or wife, and Jiro himself only mentions his wife once.  In fact, I’m still not sure if she is alive or not.  I googled “Jiro Ono wife” to find out and I just got a bunch of reviews talking about the lack of mention about those two females in his life.

Overall, a very enjoyable mouth-watering movie.  I need to go have some sushi this week now.

Haven’t written about this for a while, but I’m still working on it!  Here is the GitHub repository, and here is the progress.

I decided to use the new HTML5 “search” input type with a placeholder.  I think it’s neat – in Chrome and Safari, when you type something, there is an “x” added you can click to clear the text.  Placeholder works in my Chrome, Safari, Firefox, and Opera, but not IE (was not surprised).  I wanted to center the text in the search box, but “text-align: center” didn’t seem to affect the placeholder text for Safari.  I found a “::-webkit-input-placeholder” selector, but unfortunately, “text-align: center” on the placeholder text specifically still didn’t work.  It was odd to have the placeholder text left-aligned, but the text typed in centered, so I decided to just leave the text left-aligned.

It was also pretty annoying trying to style the input box in the first place, because nothing seemed to affect the style in Chrome or Safari.  I found a Stack Overflow question that was pretty enlightening: HTML5 Search Input: No Background Image in Chrome?  Apparently, the browsers that support the “search” input type (WebKit – Chrome and Safari) apply their own special styling, which is not currently accessible.  The other browsers don’t support “search”, so they just style the input like normal “text” types.  A solution in the answers was to use ”-webkit-appearance: none” to clear the default styling.  Worked for me!

Also made my little icons and author icons into sprite sheets (except the search ones – I think you won’t be able to see the second search one because it’s black), plus a favicon (look up)!

I think I’ll be editing the third (largest) layout version, based on feedback.  Not sure what I’ll do yet.

I decided to do the Evernote Cook-Along today.  Unluckily (or luckily?) Jack is out of town, so I ate all of the crepes myself!

Here is my Evernote Food note about it.  And here are two of the photos from the note!

Mommy, I’d like some of your bacon egg and cheese crepe!

For dessert: Nutella and bananas crepe!

I’m finally redesigning this site!  I’m putting it on GitHub for version control, but also because I think it’s neat to be able to learn from others’ source code.  Here is the repository.  In addition to fully commenting everything, I’m keeping notes on sites I find really useful while I’m working on this.

I’m attempting a responsive design (read Responsive Web Design!  It’s awesome).  I’ve decided to do basic layout structuring for three different layouts (small, normal, big) in stand-alone stylesheets first, then build up with media queries from the small one to the big one (my attempt at mobile-first).  So far I’ve done the normal and the small.  Next is to do the big layout, then combine them into one stylesheet with media queries so it’s actually responsive.  Then, add real styles instead of this ugly temporary yellow boxy look.  And finally… the part I’m unsure about… is integrating this with WordPress.  We’ll see!

I really like Media Queries, which is where I’m getting a lot of inspiration for responsive designs.  I’ve taken to resizing nearly every site I come across now, to see if it’s responsive.  That’s how I found the awesome little detail on CSS-Tricks – the narrower the width, the more worried the frog gets!  See for yourself!

I also wanted to note that HTML5 Boilerplate is awesome.  I’m not using it, because it’s a little too full-featured for me (I want to learn and start from the basics on my own instead of using a whole pre-built structure right now), but the comments in it are so useful and great to learn from.  I’m starting reading source code a lot more lately.  Which reminds me, I remember back when I was playing around with websites in middle school, there was that trend of disallowing right-click so that people couldn’t “steal” images or source code…  Things have changed so much now, there are even ads in source code!  Check it out – look at this source code of Blacktie.  I have no idea what that site is (I found it through HTML5 Gallery), and I found that source code ad on accident, but I think it’s awesome despite the fact that it’s an ad.  It’s an interesting way to get to your target audience!

GitHub repository, view experiment here.

I’m “done” as much as a random experiment can be done.  I’ve got a parallax effect based on mouse movement – I still can’t really figure out the best movements to make it look more 3D – and clicking on the landscape moves you “forward”.

My images are kind of retarded looking :( The overall effect is kind of confusing; I think I tried to put too many levels, so there’s too much going on at once.  I originally had this really complicated background too, with mini trees and bushes and mushrooms, but it didn’t make sense for that to stay so still while the other levels were moving forward.  Also, I didn’t draw that many possible images, so when they’re randomly selected, they repeat a lot.  It looks cool when they move forward on click though.

Oh well!  It was a fun experiment and I learned a lot.  Most importantly that I’m really bad at anything graphics related and should leave that to other people.

Now, on to use what I’ve learned to redesign BaconFriedRice!

Repetition in the landscape

My 6 possible images

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…

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

I finished this book a few weeks ago, but never got around to writing about it.  I loved it though!

Ever since I came across the idea of responsive design, I’ve been fascinated with it.  I just think it’s such a neat idea, and it seems so obvious after you hear about it.  After I finish the Infinite Parallax experiment I’m going to make a responsive layout for BaconFriedRice!  Yes, two years later, I’m finally going to actually work on it! (For real!)

Anyway, Responsive Web Design by Ethan Marcotte is amazing, especially because it is written by the guy who came up with the idea in the first place.  Just like all the other A Book Apart books, the writing tone is awesome, and the content tells you things you can do to create a responsive site right now.  He shows you how to do it by creating an example page that you can actually go view and play around with.

One thing I really like that Marcotte says is that a web designer’s canvas is the browser (page 3).  However, unlike other art mediums where the canvas is precisely selected beforehand, the browser continually changes, and you can’t rely on a consistent format, which make web design pretty challenging.  I’ve never thought of it that way before, but now I view it all in a whole new way.

Marcotte sees three ingredients of responsive web design, and breaks up the chapters accordingly: 1) a flexible, grid-based layout, 2) flexible images and media, and 3) media queries (page 9).  I won’t go too much into exactly what he says in the book, but I found it extremely helpful.  He breaks down the steps he takes to make a layout responsive, which makes it pretty easy to follow, and it seems like it’s not too hard to break into creating responsive designs.

Basically: read this book!

Also, he made an “over 9000″ joke :) He put comments above some media query breakpoint examples: “Default, linear layout”, “Small screen!”, “Desktop”… and “IT’S OVER 9000″!

Just read it!