Wednesday, February 29, 2012

Hello Out There

When I started this blog, I figured that the cloak of anonymity would hide me pretty well. How many people are going to look at it, even on the internet. And for the first several years it was true, I'd average 20 or 30 hits a month, probably half of them being me.

Over the past year though, the numbers have been going up. In fact this month I almost doubled the past highest, from 417 to just over 700. While still nothing huge, this is far beyond me or my friends, so some of you out there must be people I don't know. It's to you that I send this greeting! Thank you for stopping by and spending some of your time here with me. I hope that what I post entertains or educates you.
 

Tuesday, February 28, 2012

Michigan Primary

With 65% of the vote in, Romney is leading Santorum 40% to 36%, which makes me breath a sigh of relief. As the results started coming in, Santorum seemed to be winning for the first hour, but things turned around as the urban counties started reporting in more heavily.

It's bad news for Obama, who'd love to face off against Santorum. Santorum who has said that the separation of church and state makes him want to throw up, that the idea of everyone going to college is elitist snobbery, and that Satan is attacking the US.

Romney though, is not really all that different from Obama, so he'll have a better change with independents. I still am predicting an Obama win though, even against Romney. That's for next fall however. For now, onward to Super Tuesday!
 

Monday, February 27, 2012

Saving Energy

It would be much easier to get people to save energy if things like this were more common.


 

Saturday, February 25, 2012

2012 Interactive Achievement Awards Opening

I've played around with stop motion video making, using LEGOs. I don't pretend to be an expert though. Experts exist though, as demonstrated by this incredible video my mom emailed me a link to today.

Try and identify all the video games.


 

Friday, February 24, 2012

CSS3 Proposal - Width/Height % Behavior Change

Under current CSS rules, specifying width or height (or their respective min-'s) by percentage is relatively easy, yet it's unnecessarily limited. I say this because when you specify a width using a percentage, you only have control over one of the three things you are specifying.

Example:

<div id="container">
    <div id="content">
        Content
    </div>
</div>

#container
{
    width:500px;
    height:200px;
}
#content
{
    width:100%;
    height:100px;
}

Content is inside Container, and Container is Content's parent. Content has a width of 100%. What exactly does that mean though? It means that Content's width should be equal to 100% of it's parent's width. That is three separate values, but under current CSS rules, we only can change the first. The second is locked into Parent, and the third is locked into being the same as the value being specified.

Imagine for a moment if the user wanted to make a flexible grid of squares, for a mobile phone. A container, set to 100% width of the screen, and then inside of it, three squares, each 28%, with margin-left of 4%.

<div id="container">
    <div id="content">Content</div>
    <div id="content">Content</div>
    <div id="content">Content</div>
</div>

#container
{
    width:400px;
    height:200px;
}
#content
{
    width:28%;
    height:28%;
    margin-left:4%;
    float:left;
}

Square
Square
Square

Height and width are both set to 28%. But the panels aren't square. This is because you want both width and height to be 28% of the parent's width, and right now height is set to 28% of the parent's height. Looking around, there is no way to change this as of now, so here is my proposal.

Height: valueof location value

Ex: Height: 28% auto width;

  • The first of the three values would be exactly the same as it is now, a percent.

  • The second would be location. It could be any class or id, or auto, which would revert to the parent container. Additionally leaving it blank would revert to auto, to parent container.

  • The third value would be what value to grab from the location. Currently, by default it is set by the value that you are changing. Width = width, height = height. But you'd be able to put in any other number based css value instead.

  • An added benefit is full backwards compatibility. Old browsers would ignore the second two values, and browsers that support the new rule will set any blanks to auto, so all old code will function exactly as it does today.

    I'm not sure how one goes about submitting a new rule proposal to be added to CSS, so if anyone knows, please comment and let me know. Also, if you have concerns or suggestions about the proposal, please let me know as well.
     

    Thursday, February 23, 2012

    Scrolling on Mobile

    Scrolling on mobile devices is quite a different proposition than scrolling with a mouse and keyboard. The user touches the screen with one finger and flicks up or down to move the page. It works well when your entire page scrolls. It doesn't work quite so well when you only want a portion of your page to scroll.

    I became aware of this issue through a completely separate problem. The mobile version of the company booklet I'm working on needs to have a navigation/options bar fixed at the top of my page. The rest of the page should scroll.

    Reading this article, I almost gave up hope. However, a thought occurred to me that I can't find in the article. Place the navigation bar at the top, width 100%. Then place a content box in, with

    position:absolute;
    top: (height of the navigation bar)
    bottom:0;
    width:100%;

    It can't scroll, because it ends at the bottom of the screen exactly. Then, set the content box to have overflow:scroll. This lets you scroll it with a single fingered touch, the same as you'd scroll the entire page. To the user, it looks like the entire page is scrolling except for the fixed navigation bar at the top.

    A perfect solution, right? Not exactly.

    Turns out that while this does work perfectly on iOS 5, it doesn't work on previous versions of iOS, or on Android 2.3 and down. Works on Android 3 and 4, but so few phones are getting upgraded, that doesn't help. So what do we do to fix it? Turns out there's a great javascript solution already full devised, by Chris Barr. He wrote up a nifty little write up explaining it, and when I tried it out, it worked almost perfectly.

    There is a problem with green outlines, and I can't really be more specific than that. I don't have an Android 2.3 phone, I've been having a friend test the page I'm working on, and text me back problems, and she says there's a green outline that appears, and then stays fixed on the screen, ignoring the scrolling. More details when I get them.
     

    Wednesday, February 22, 2012

    Rick Santorum

    A friend sent this to me on Facebook today. Soooooo true.



    Also, another one, but this is most certainly NSFW Link
     

    First Mobile Site

    As I've mentioned now several times, my current project is an online company booklet for students attending CESAC's Career Fair. It will pull company data directly from the registration servers, and display an interactive company list, as well as a map of the fair, and a homepage with some general info.

    One of the main goals for this has been to learn about mobile design, and get to the point where I feel comfortable working with mobile sites. I believe I've accomplished that, and the site is now at the point where feedback will help. I have a flipphone, (can't afford a data plan!), so I have to resort to borrowing friends' phones or having them check. However, I figured I'd show it off here, maybe you all can take a look and let me know what you think in the comments section.

    The homepage is done, the company list, with fake data, is mostly done, and the map is semi done. All should change as you use different size browsers, up to 1500px wide screens.

    Company List, Map

    Thoughts?
     

    Tuesday, February 21, 2012

    Ghost by Veela

    New song featuring Veela. It's got less of a dubstep feel than some of the previous ones, instead actually reminds me a lot of Beautiful Lies, by B Complex in feel. So with no further adieu:


     

    Sunday, February 19, 2012

    Hiding A Dropdown Menu By Clicking Anywhere, jQuery

    As I think I've mentioned before, my current project is an online company booklet, for the CESAC career fair. I've been working on drop down menus for it today, specifically the javascript code powering them.

    In the past, I've created drop down menus with CSS only, because I hate relying on javascript. However, for touch screens, drop down menus must show on click, not on hover. For that, CSS won't do the trick.

    Making a drop down menu with javascript is quite easy. You give the button and the menu similar classes, then create an if/else statement, where on click, the code checks to see if the menu is visible. If it is, it hides the menu. If it's already hidden, it shows the menu. The problem is, clicking elsewhere on the page does nothing. The only way to rehide the menu is to click on the button again.

    To fix this, I put in a separate statement, saying, $(document).click, which checked to see if the menu was visible, and if so, hides it. The problem is, it runs after the button click statement. So if the menu is visible and you click on a random part of the page, it hides it. If it's visible, and you click on the button (which is still part of the document), both statements hide it, still okay. If it's hidden though, and you click the button, the button statement shows it, then the full document statement hides it. Since it starts out hidden, you can never see it.

    After an hour of research and trying things, I figured out how to fix it. The key is in order of operations. You want the full document check to happen first. That way if you click on the button, the button statement will happen AFTER the full document statement, and remain in control.

    The javascript we need is window.setTimeout(function(){ }, 1);

    You place that around the action that shows the variable, in the button statement. For me, it ended up being window.setTimeout(function(){ $(child_id).show(); }, 1); This delays showing the menu until after the document click statement checks to see if it's visible, and so doesn't hide it if not needed. And works.
     

    Saturday, February 18, 2012

    Windows' Logos

    Microsoft recently unveiled the new logo for Windows 8, and many people hate it. Personally I think it harkens back to the Windows 1 logo, way way back, though I actually like the original better. I dug up all the logos that Windows has used over the years and lined 'em up chronologically. Take a look.

    Windows 1

    Windows 2-3.1

    Windows 95-2000

    Windows XP

    Windows 7

    Windows 8
     

    My Productive Saturday Mornings

    I've grown to love Saturday mornings this semester. It started as my traditional love for any day that I could sleep in on. My class schedule this semester though always leaves me on sleepy on Friday nights, and so I've been going to be early, (before midnight, crazy!), and then waking up on my own on Saturday morning.

    Now if you are someone who's used an alarm to wake up your entire life, let me tell you, the feeling of waking up at the right time, all by yourself ... is invigorating. You wake up, not drowsy, and just .. in a good mood. That's how I feel in that situation, anyway.

    It's been three Saturdays in a row now that this has happened. And I've been using it to get stuff done. Get up, walk down and put in a load of laundry. The half hour timing is just enough to come back, brush my teeth, grab a shower. Then back down to the laundry room, flip to the dryers. Then 45 minutes, normally I grab my shortest homework from the next week and finish it. Go down, grab laundry.

    Suddenly, it's still Saturday morning and everything is done.

    Messing around on Facebook, watching TV ... it's all so much more relaxing when there's nothing else that one Should be doing. While I normally don't care, (I normally procrastinate), in this case, it's becoming a habit. And a useful one. My productive Saturday mornings.
     

    Wednesday, February 15, 2012

    Song of the Day: Venetia, by Saint Empire ft Veela

    I discovered Veela last fall, and have been hooked on several really great songs, like Fall Silently and Night Vision. Found a new favorite though. My only complaint is that it's too damn short! Gotta put it on repeat.


     

    Sunday, February 12, 2012

    Even Robots Can Dance

    Scifi battles, plus music and dancing ... this commercial has it all. Enjoyable to watch in it's own right, it makes me happy with watching advertising.


     

    Saturday, February 11, 2012

    Flexible Website Layout Tricks

    In the past week I've spent quite a bit of time playing around with flexible layouts. Or to be more accurate, layouts with fixed elements on the edges a flexible center. Sites like Wikipedia utilize this category of layout very successfully, and I've been trying to figure out how it's done.

    First, a review. Websites in general are built around containers. Containers within containers, each one's attributes can be control, from dimensions on the page to the way text inside looks. For the layout of the page, we are only concerned with three attributes. Size (height, width), extra spacing (margin, padding), and borders. CSS allows height and width to be set both as fixed lengths and as percentages of the parent container. The problem though, is that one can't use a combination.

    Say you have a header, it needs to be exactly 50px in height. Then you have a content box, that should take up the rest of the page. Ideally, you'd tell the content box to by 100% minus 50px. But you can't combine % and px. They best way around this is not to set height at all. You instead use positioning.

    position:absolute;
    top:50px;
    bottom:0px;

    And suddenly, you have it going all the way to the bottom. But what happens if your content is longer than your page? Doesn't work anymore. In that case, you put another div inside the positioned one, and add your styling to it. Don't give it positioning information. Without it, it will just conform to the content inside it, and will apply the styling. But when the content is less than page length, the positioning of the main outside one will take precedence.

    Another thing I've figured out recently is how to set inside borders. Borders, along with padding and margin, are set "in addition" to height. If you have a box that is 100px wide, with a 1px thick border around it, it's actually 102px wide total. If you set a box to be 100% wide, it will take up 100% of the screen. But you add a 1px border, and suddenly, it's exactly 2px wider than the screen, no matter how wide the screen is. There is a way around this though. Take the box below as an example.

    <div style="height:100px; width:100px; text-align:center; background-color:lightblue;">
        Test
    </div>

    Test

    Now, add a new div container, inside the one you wish to add a border to. Make it 1px wide, 100% tall, background-color whatever you want to the border color to be, and display:block, so that it displays with no text in it. Finally, set it to float to the left.

    <div style="height:100px; width:100px; text-align:center; background-color:lightblue;">
        <div style="height:100%; width:1px; display:block; float:left; background-color:black;"></div>
        Test
    </div>

    Test

    Now, add the same div, still inside the container, still before the text, and change it to float right instead of left.

    <div style="height:100px; width:100px; text-align:center; background-color:lightblue;">
        <div style="height:100%; width:1px; display:block; float:left; background-color:black;"></div>
        Test
        <div style="height:100%; width:1px; display:block; float:right; background-color:black;"></div>
    </div>

    Test

    And you have a border inside. In a real website of course, you'd place that styling in a css style sheet, and just give the border divs a class of something like leftborder, and rightborder. And it does make the HTML code look somewhat bulky, admittedly, but it's the best way I could find.

    The same thing can be accomplished with padding, by just making the width thicker, and the background-color transparent. Margin I haven't figured out yet, but I'm working on it.

    Know a better way? Leave a comment!
     

    Friday, February 10, 2012

    Wednesday, February 8, 2012

    A Good Day

    Yesterday was one of those days when everything lined up really nicely. Where I ended up going to bed thinking, that was really nice, nothing about it could have been better .. it was a good day.

    I woke up at noon, sleeping in as I do every Tuesday. I went to my first class, my surveying lab, and got back the lab from last week. For the first two weeks I'd missed points on stupid errors, so looking at the 20/20 really raised my already high spirits. We proceeded to go over the work for next week, and it ended up being a much shorter lab than normal, so I got out after only 40 minutes instead of 2 hours.

    I then took the bus down to the movie theater to ask them to donate a date for the CESAC Date Auction. I wasn't expecting much, because last year, only one place out of the five I went to actually gave me anything. Right away, the movie theater gave me enough free stuff for not one but really two dates. I then went to the next place on my list, Panera Bread, which said yes.

    I stopped by the library, and the lady gave me a new library card for free, since it had been so long ago I'd lost my original. And I got a new book that I've been really looking forward to.

    I then took a break, and with some coupons that I'd saved, I went to Arby's for a late lunch. Now, this might just by my local Arby's, but every time I go in, the experience is great. The staff is always super friendly, and half the time ends up upping my fries or sandwich size just because they're feelin' generous.

    So I walked in, and to start with, they let me use two coupons, even though the coupons said only one per meal. Then, I sat down to wait, and the lady actually brought my food out to me, where I was sitting. Finally, after I finished, as I walked out the door, the closing door hit my hand, and I dropped my cup, spilling it everywhere. The staff member who was cleaning told me to go inside, grabbed me a new cup, and let me fill it up. It was wonderful. Great, great place.

    I had my second class of the day at the point, and it was an exam. One which, I hadn't really studied for at all, given how easy a class it is. Social Psychology, I was making a bet that the exam would be as easy as the class had seemed, and I was right. With no studying, I'm almost sure I Ace'd it.

    I then went to the first ITaP Student Advisory Council meeting, which always makes me feel good. Everyone's dressed up, there's 6 or 7 students, and 4 or 5 really high up people from ITaP. It's a place where you can actually have a big impact, because everyone uses the computer systems, and if your ideas are good, they get implemented, not lost in the bureaucracy.

    Finally I walked home, and checked Facebook, then settled down with my new book until sleep.

    A good day.
     

    Sunday, February 5, 2012

    Corning’s Second Day of Glass

    Nearly a year ago, Corning (maker of Gorilla Glass), released a video encapsulating it’s vision of the future. It’s since gotten 17 million views on youtube, and started numerous discussions and responses.

    In the video, Corning predicted large scale desktop touchscreen displays, bigger video screens, and dynamic billboards. And while much of the video is still in the future, the OLED TV’s shown by LG at this year’s CES do seem to bring the video to life.

    Read my full article at TekGoblin.com.
     

    Flexible Layout Problems

    As I said yesterday, I'm working on a new project for CESAC. It will automate our date auction nomination process, letting students enter their nominations via a laptop, instead of a sheet of paper.

    Yesterday I drew some logic chains to figure out what all I'd need to do, if I wanted to do it right and include proper validation. I then started working on it, and immediately got stuck on the design of the submission page.

    The design is fixed width at 1000px, but I wanted it to be flexible vertically, so that it always fills the page up and down, but without a scroll bar. The problem is that the bottom section is comprised of 4 small images, all of which are different heights. Having them change in height would be a mess.

    So I decided, they'd be fixed. The top picture though, would change. It would need to be 100% of the height of the page, minus 384px of the bottom section. Then slap in the CSS3 border-size:cover; style, and you've got a winner.

    Simple no? No. Problems abound. First, there's no easy way to specify a percentage minus pixels. A gross oversite of CSS I believe. Second, any solution is only going to work in modern browsers. Firefox 4+, IE9+, Opera, Chrome. The big problems being IE7 and IE8, which are still very widespread. If you want to do it though, without javascript though, you'll have to abandon the older browsers.

    As off CSS3, if you specify "height:100%-384px;", along with "top:0; bottom:384px;", if works. Having "top" before "bottom" fixes the position from the top, and having "bottom:384px;" does the same thing as a "margin-bottom:384px;". But you need all 3 of those, along with "position:absolute", or it won't work. Seems repetitive, I know.

    Anyway, while the PHP still hasn't been created (my plans for today until the Super Bowl tonight), the design is finalize .. I think. Check it out below. If if goes longer than your page, causes scroll bars, please leave a comment and let me know what browser you are using. (Unless it's IE7 or 8, in which case do a better job reading).

    Nomination Page

    PS. Thoughts on the submit button? I designed the the images myself with Photoshop.
     

    Saturday, February 4, 2012

    Date Auction Nominating

    CESAC hosts a date auction each year, for charity. And each year, we ask CE students to nominate the students they want to be auctioned off. We then tally up the nominations, and ask the top 10 men and women. If one says no, we move to the next person on the list.

    The problem is that to do this, we have students write down names on a piece of paper, and then one CESAC members sits in front of Excel for several hours tallying them all up. I've decided to try and address this (even though I'll be gone by the time the next Date Auction takes place).

    The idea is, we have a laptop set up, and students come in, type in the name of the student they are nominating, and then click submit. What I hope to do is get access to the CE database of CE students, so that the PHP can quickly check it, match the name entered vs the list, and validate that it really is a CE student. If it's not, the PHP would grab the 5 closest last names, and give an error message, along with the possible corrections.

    I did the first step today, creating the portal. Put in some pictures from past CE events, and made sure that it would fit on any screen and look right, which took a bit of time. The next step is getting access to the CE database, which will have to wait until Monday.

    In other news, I've finished overhauling the main CESAC website, so it's now up to code. Should be possible to look into widening it now, and even trying out different styles and looks. That I might pass off to the next guy though.
     

    Thursday, February 2, 2012

    Musical Memory

    Ever notice how songs are tied into specific memories? Or to ... general memories, like few months that were very memorable? Nearly every day last summer, I'd wake up and go to work, I'd walk the exact same path, and I'd almost always listen to one song to wake me up. Now every time I listen to it, I think of that place, that walk, and the job I had at the time.

    (Slow at the beginning, how does it wake one up? Wait until 50 seconds in.)