PeterKellner.net

MACBook PRO running VMWARE Fusion with Visual Studio

Peter Kellner — Tue, 07 Feb 2012 12:59:28 PST

I’ve been a macbook user for about 2 weeks now. As a Microsoft guy, it’s really important to me that the Macbook run Windows 7 really well. So far, I’m not impressed (hopefully this will change once you all give me some good advice). I’ve set up bootcamp on half my SSD drive and OSX Lion on the other half. VMWare seems to run reasonably well, but when I try and run Visual Studio I get lots of hanging and very very slow performance. I’ve got 16Gig of RAM and the latest macbook with a core i7. I’ve tried giving VMWARE 4 or 8 GB’s of ram, but have the same issues.

I’ve also run bootcamp native and had some hanging also, but not as bad as Fusion.

Anyone else have similar experiences? Any suggestions? I’ve heard that macbook’s are awesome at running windows 7. So far, I have not experience that.

HTML5 Media Queries, Tablet Verses Phone, Anything but Intuitive

Peter Kellner — Thu, 02 Feb 2012 18:57:22 PST

Background and Introduction

I’m building a mobile touch application that uses SenchaTouch 2 on the client and Microsoft’s ASP.NET EF Code First on the server. Things have been moving along pretty quickly because both of these toolkit’s are awesome. I got stuck for about 2 hours on what I thought should be a very simple problem. I’ve basically got a two panel application where on the left panel I want to be able to show a “display second panel” button if I’m on a small screen, and if I’m on a big screen I don’t want to show that button, but I do want to show the second panel. Basically, here is what I want my app to look like using HTML5 Media Queries.

Tablet Mode	Phone Mode

Notice that the Tablet Mode is wider than 480 pixels and the Phone Mode is narrower (OK, take my word for it). As you collapse the browser you will see it automatically change.

How It Works

Basically, an HTML5 media query is no more than letting you have CSS that only gets run under certain circumstances. That is, the browser window is less than a certain width (or great than), or even something like printing. I first got introduced to media queries a while back when at our code camp (Silicon Valley Code Camp), we had people complaining that when they printed their schedules, it included all our “junk” on the left and right margins. The solution was to use a media query that said “if printing, add a special css to those columns telling them not to show”.

My Problem and Solution Today

The media query itself that you put in your css looks like the following:

@media only screen and (max-width:480px) {
           .showOnTablet {
               display: none;
           }
       }

It’s actually pretty simple. It says anything you assign the class “showOnTablet” to, will render it invisible. If you think about it, you could order the problem I outlined above lots of ways. The “if” statements are very stragiht forward (or so I thought). It may be (OK, likely is) my lack of understanding of CSS, but at the end of the day, to make the Media Query work, this is what I had to do in my css (style) file.

1. Set all my DOM elements I want to display to visible.

2. Create a media query for each item I want to make invisible.

Sound simple right?

So, here is what does not work.

1) Have one media query for each object (div or span) that sets one item visible and one item invisible

2) Set both objects (div or span) to invisible, then have the media query make them visible

I would not 100% swear to what does not work, but I can promise if you follow what I show does work, that will work for you also.

The HTML Page (finally)

DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Brain Bashing With HTML5 Media Queriestitle>
    <style type="text/css">

        .floatRight {
            float: right;
            margin-top: 10px;
            padding: 5px;
            background: Yellow;
            border-radius: 22px;
        }

        .left {
            margin-top: 10px;
            padding: 5px;
            background: red;
            border-radius: 10px;
        }

        .showOnTablet {
            display: visible;
        }

        .showOnMobile {
            display: visible;
        }

        @media only screen and (max-width:480px) {
            .showOnTablet {
                display: none;
            }
        }

        @media only screen and (min-width:481px) {
            .showOnMobile {
                display: none;
            }
        }
    style>
head>
<body>
<div>
    <div class="showOnTablet floatRight">
        RIGHT PANEL
    div>
    <div class="left">
        LEFT PANEL  
        <button type="button" class="showOnMobile">
            Show Panel Info (not really)button>
    div>
div>


body>
html>

Take Defaults! (not customizations) When Installing Software

Peter Kellner — Tue, 31 Jan 2012 21:55:11 PST

Some Background

Years ago, my friend Bill Venners of Artima told me a life long lesson that I always seem to forget. He said that when people design installation programs, they always thoroughly test the “default” installation but not all the corner cases around custom options.

Today, while configuring my new MacBook (Best Windows 7 Computer Laptop they say), I learned this lesson all over again. So, here is the story.

How To Split Your Hard MacBook Primary Drive 50/50, IOS Lion and Windows 7

My thinking is that I need to first allocate a NTFS partition on the MacBook that takes half my hard drive and let the OSX Lion install take over the rest. After about 10 iterations of IOS complaining that it did not have enough resources, I finally decided to take a step backwards and ask myself “how would my mom be able to do this?” and we all know that Mac’s are designed for my mom. So, with that thinking, I just let the IOS Lion install take over the entire disk. Then I ran the Boot Camp Assistant. It asked me how much of my hard drive I wanted for Windows, I said 50% and everything ran perfect. No partition magic, no special setup, just take the defaults with bootcamp!

A SenchTouch2 Simple Example Using Tab Pages and Buttons

Peter Kellner — Tue, 24 Jan 2012 21:47:41 PST

Again, I find myself going back to basics when trying to make my SenchaTouch2 Project work. Today, I updated my framework to Sencha’s latest alpha release of the tools (p4). I often make these examples because I’m trying to prove there is a SenchaTouch bug and usually find out it’s my bug somehow. So, since I went to the trouble of making a simple example of two stand alone buttons that switch between tab pages, I thought I’d blog it.

Here is what we get ultimately. When clicking on b1 or b2, the home and the contact tab are selected automatically (same as clicking on those two items in the tab bar).

One thing I find a little odd, is that to create the class, you say Ext.TabPanel and not Ext.tab.Panel. (OK, I just tested that and both work)

And, here is the code:

DOCTYPE html>



<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AgelessST2title>
    <link rel="stylesheet" type="text/css" href="sencha-touch-2.0.0-pr3/resources/css/sencha-touch.css"/>
    <script type="text/javascript" src="sencha-touch-2.0.0-pr3/sencha-touch-all-debug.js">script>