The Good

• The Preview mode is awesome.  One click there, one click back.  Smooth and it just works. 

Today I finished my creation!  It is simple, and not finished, but it lives.  

(My sites usually end up like Walle, while in my head they are Eve.)

I will link it into my main site tomorrow.  I learned a lot building this little site.  I spent probably 2 hours trying to fix a bug that my dad saw and fixed in 3 minutes.  I used legit jQuery for the first time. I also used a new css framework, the Skeleton.  I used the Apple API's to access the large format images of the app icons, and I made a working button.  In addition to all that, I learned that I have a lot to learn.  

#LetsDoThis

I learned about Blueprint today, a CSS framework. I like it.  But at the moment, it is not responsive. So I decided to use Skeleton instead.  To use a framework, you have to understand it.  It doesn't do everything for you.  But it does make it a lot easier.  For example, if you wanted to make a 3 column layout in Skeleton, you would define you object with a class of "three columns" and the framework does the rest.  You still have to worry about how big the object you are adding is, and how it reacts, but it arranges it for you.  

I didn't finish the project that I was working on, but be prepared to be blown away with a nice 3 by 3 grid tomorrow. 

It took me about 45 minutes.  It would have been quicker but I added the css line by line in order to see the effect that it had on the content.  It is really a great feeling to create something and be able to put it on the internet where anyone can access it. I put up a 2 minute video of the 45 minutes of work that went into it being replayed in 2 minutes.  Behind the scenes video. 

I intend to register a domain and put this up permanently.  Which do you think is better? 

Or something else? I am leaning towards thesixbees because the I am worried people would read the first as "The Six Bess".  What do you think? 

So entering the city and state on every form is bad too.  If you have a correct zip code, you know the city.  Then I found this nifty tutorial to auto fill the city from the zip code. Check it out.  Smooth.

I decided to look into zip codes a little more. 

From Wikipedia. 

Interesting.  I pledge to never make anyone fill out a zip code and a city.  

So 2 weeks ago I said I would have my website up.  It is! Unfortunately not on my domain joshdance.me.  It is on a random domain that I had registered for a different project.  But I will soon move it here.  

Recently, I have seen certain chunks of code, or patterns pop up in many designers work.  I wanted to know why and happily, today I uncovered the mystery of the Phantom Comments.  

Sometimes in code, programmers want to write something that only the people who look at the code see.  It is not meant to be displayed, or operated on by the computer.  You set these comments off by putting in a comment symbol and then the comment.  In html the comment symbol is this:

<!--"comment goes here"-->

Simple right? But I was confused by a statement that I saw on many webpages.  It went like this. 

<!--if(a string of computer code)-->

The comment had what looked like code in it.  At first I thought that maybe the programmer just wanted the code not to be seen by the computer, but then why would she take the time to write it? I searched google but didn't find much. However, I am happy to report that today, I solved it.  

I was reading this little tutorial and came across a part where the author says, "and then we throw in this html5 shiv", and then he used the confusing code! I thought to myself, "Why it must be called the html5 shiv! So I promptly googled and found this article about the html5 shiv on Wikipedia.  As usual, it is all Microsofts fault.  :) Older versions of Internet Explorer doesn't implement CSS very well.  So everyone puts in this little piece of code to fix their website in IE.  Mystery solved! But then I had one more question.  If the code is in the comment, how does IE even see it?  Back to google I went. When I searched for "if statements in html comments", I found this article about CSS conditional comments. Guess what? Code in comments only works in this one instance in IE.  Therefore it is only used to fix rendering problems in IE.

Next week I am going to continue digging into CSS and making it happen.  #LetsDoThis. 

(This picture just about sums up the day.) 

I had some issues with CSS spacing and margins.  There were gaps where I didn't want them, and things were missing where I did want them.  I didn't learn any new tidbit today but I did learn one essential programming principle.  Press on!

The feature was this: I wanted to have tooltips pop up giving a little more info on the social network site icons.  Not just any yellow standard tool tips. No sir, I wanted custom tooltips. 

(None of that standard yellow stuff. Custom or bust.)

I found this article about tooltips with CSS and HTML5. Very nice.  However, when I implemented it, I got my custom tooltip, AND the standard yellow.  Not good.  I then spent a lot of time reading articles and trying different things, working towards perfect tooltips. I learned a lot on the way. 

I learned about the z-index property of CSS.  Basically when items are positioned absolutely, they can overlap.  The z-index controls which come first.  The higher the number the higher they are in the stack.  The items are drawn to the screen in z order from low to high.  So a z-index: 1, would beat a z-index: -1.  

I learned about css positioning.  The key thing I learned was that you can position things using negative pixels. For example left: -7 is what I used to position the object 7 pixels away from the left edge in the negative direction. 

(Here is my very quick visual representation of this phenomenon.)

Yes I had learned these bits of knowledge but my original problem of double tooltips was still lurking.  I kept looking.  I eventually found this article from css-tricks that basically stated "It won't work using a title tag."

I was not to be deterred. I returned to read the original article and.... found the solution. data-tooltip.  HTML5 can have custom data tags.  I made my links a certain class and pulled out the custom data and boom baby.  Custom tooltips. 

(Beautiful.)

I had avoided this because css doctor says "You shouldn't use data for CSS styling hooks, because if the data is that important, it should be a presented differently."  This is unfortunate because they are right. The tooltip provides a little extra information.  I belongs in the title tag. But this is precisely what causes the double tooltip problem. 

So I have spent an hour working on these tooltips.  I have found a solution, but a nameless faceless standards body says I should not do use the solution.  

So I used it.  A it works wonderfully.  Check it out live here. 

PS - I think standards are essential and I try to follow them in all the important things.  For example, screen readers would not read my custom tooltips. But they are not essential to navigation which is why I feel this work around is acceptable for now.

Today I made some serious progress on ye olde website.  I downloaded the Goldilocks Responsive Boilerplate and went to town.  It is super simple so far, but I like the direction it is going.  

I also started getting my hosting set up. It was quite the beast.  Nameservers, A records etc.  I had to remember some of the stuff I learned in ISYS and I had to Google quite a few things. But it is up.  As in live on the interwebz.  Want to see it? 

The domain name is one I had registered a while ago and just threw up on there.  Drag the window size around and see the responsive smoothness. 

I will keep making improvements to it every day till Friday.