Day 4 working on Mock up page

So I didn’t have time to type this up Saturday when I really worked on the page. But I learned/worked a good bit on the page Saturday.

I finished up some finishing touches on the CSS.  Of course I had to go back at times and debug/rework some things, but most of it was finished by this time.

Then I got to work on the JavaScript.  This consumed most of Saturday.  First I wanted to tackle the JSON (dynamic content) section of the page.  So I had to rewatch some videos on Team Treehouse about how JSON worked again, and how the short cuts in jQuery make everything easier.  Once I had that, then I realized that all this will not work until I get Nodejs and Grunt running on my computer. When I first trying getting Node/Grunt working, I kept getting crazy error messages, and I had no clue how to get it all to work.  I probably spent a good 3-4 hours just trying to get everything to never work.  This time, I spent less than an hour, and got it all up and running (except for LiveReload… not sure why that isn’t working).  I was super pumped.

This led me to get to work on JSON.  I made sure I was getting proper responses first by printing to the console first.  Then I had to figure out how to access the information in the JSON file.  I used the argument to pass the response to the server connection, and this allowed me to play with my JSON.  Now let me stop here and mention that I have been writing on paper how I would use the JSON information before all this.  I wrote out what I thought would be the best process/logic to accomplish what I needed to.  Sure enough, I banged away on each piece one by one.  Loops, if/else statements, and more.  It felt great considering that I haven’t really used JSON for anything I have ever done personally.  But it was all making sense, and I was getting super pumped over it all.

I think my personality is a bit different than the typical developer (or from what I have noticed).  When I notice developers get past something, they seem to be really relieved, get a tiny bit excited, then move on.  Imagine a crazy person cheering for a football team (“Let’s go! Let’s go! Bring it!)… yea that is how I was after getting through most of the JSON and having things seemingly work out like I wanted to.  It was an awesome feeling.

Then I moved on and added some CSS3 transitions to the menu to make it look nice.  I had a linear gradient on the background, and it wouldn’t work.  So I ended up just adding another color to the background, and that fixed it.  Not sure exactly why, but I am going to guess that it has something to do with the property not working with gradients, but it noticed another color as a second option and used it instead to make the transition.

Then I had to make the page functional and presentable in IE8+… yea.  Some tips here

the psuedo-element ::after does not work in IE8… just use the psuedo-class :after

nth-child(n) selectors do not work also.  I used a work around of :first-child + li + li… how many ever time I needed to for it to match the menu item

move the class modifying the nth-child(n) selector to the last li

I am almost finished I think.  I have to add some shadows in .jpg form to the sides and bottom of the page.  I haven’t really decided how I want to do that yet, but I have some ideas about using position: relative and just moving pixels to where it needs to be.  We shall see.

At the end of the day, I felt really good with what I had done.  If anything, I learned so much it was really exciting.  I decided to reward myself with some Destiny.  Hopefully I will be finished by the beginning of next week.

Posted in Blog Posts Tagged with: , , , , , , ,