How and Why I Wasted My Time Today — or — A New (FAIL) Way to Run Internet Explorer on Your Mac

I discovered on Hacker News the promise of running Internet Explorer on my mac. This is a big issue in the Front-end Development world since it is crucial that the sites you develop work properly on ALL of the required platforms. From time to time there are circumstances where you don’t need to support Internet Explorer. But for the most part, making your sites look good in Internet Explorer is the bane of a Front-end Developer’s existence. There are hacks, work-arounds. Many of the wonderful new features that modern browsers offer can be done reasonably well across the board. However, it tends to waste precious time.

A big problem – specifically for people who enjoy developing on macs – is that you cannot easily run Internet Explorer on a mac. Now, with the Intel macs you can run Windows, and thus run IE. But it can be costly. There’s $120 for Windows 7 itself. If you don’t want to reboot every time you want to check your site in IE you have to put down another $80 for some virtual machine software – Parallels Desktop and VMware Fusion are both pretty good. If you run one of those you really should have at least 4GB RAM, another $50 (Amazon $30 if you catch a sale). The list can go on but you get the idea.

There’s the cheap route of running Wine but I found that that only worked reasonably well with IE7 and there’s not install package for IE9. It’s a great project in theory, but unfortunately not a solution.

Back to Hacker News. The original link seemed dead. It might be that the server of the link submitter goes back up at some point. But one user posted a link in the comments to xdissent/ievms a project in GitHub.

“Microsoft provides virtual machine disk images to facilitate website testing in multiple versions of IE, regardless of the host operating system. Unfortunately, setting these virtual machines up without Microsoft’s VirtualPC can be extremely difficult. These scripts aim to facilitate that process using VirtualBox on Linux or OS X. With a single command, you can have IE6, IE7, IE8 and IE9 running in separate virtual machines.”

It sounds incredibly promising! A free way to run Internet Explorer on my mac! Awesome!

So I tried it. (Instructions below, as I posted to Hacker News)

  1. Install virtual box –  Go with the “VirtualBox 4.1.2 for OS X hosts x86/amd64” option.
  2. Copy the command that is most relevant from you from here: the Github repository (starting with ‘curl’)
  3. Open up your terminal window paste, hit the ‘enter’ key
  4. Hit the town, it can take some time, depending on your connection speed that is.

Note: #4 is relevant. It took a few hours. Downloaded at an average speed of 1mb/s. 11+minutes per package of 700mb. The first installation will have 7 parts (each additional installation – IE8/ IE9 – has 4 parts each). That’s about an hour and a half for one installation.

First drawback:  Finally, after the script ran, I was down 30GB space on my hard drive. Compared with VMware which only takes 10GB, for a 3 year old Macbook 30GB can be a LOT of space!

Second drawback: After trying it out it seems that while “Microsoft provides virtual machine disk images to facilitate website testing…”  Microsoft only provides it if you are running off an activated version of Windows. So It’s not free either.

Considering those two drawbacks I deleted the installations – which was no easy task, most of the bulk of the files were in hidden directories stashed in nowheres land.

Conclusion: If you already own a valid key for Windows 7, have a hard drive with a lot of space on it, and are considering buying virtual machine software. Check this out – it’s a good alternative. It’s a very convenient script.

Otherwise…

Sigh.

There are no free lunches…

Hopefully one day we will be able to not waste our time checking our sites in Internet Explorer, whether that means that a CONVENIENT tool becomes available, so it’s not a waste of time, or perhaps IE will die someday… Yeah right!

Update: As a result of writing this post I got a beta invite to BrowserStack – an online, in browser, cross browser, development tool. It looks promising. More about it to come…

The Many Facets of Content Pertaining to Responsive Web Design and Object Oriented CSS.

I recently stumbled across Ethan Marcotte’s article on A List Apart  about Responsive Web Design and immediately bought the book, then ate it up.

Reading the following two sentences were the Ah-HA experience of the book for me:

“Rather than creating disconnected designs, each tailored to a particular device or browser, we should instead treat them as facets of the same experience. In other words, we can craft sites that are not only more flexible, but that can adapt to the media that renders them.”

I remember when working with one of my previous clients I was asked to redo one of their pages and I was surprised to see how much duplicate code a previous Front-end developer had used on the page. One example, there were several tabs on the page I was working on and some of the content in the tabs overlapped. But instead of using the same content and simply changing the style to match each tab my predecessor had loaded up the DOM with duplicate content – overloading the browser memory and slowing down page load. In addition, the content was filled via a query to their database, so that makes two queries for every time the page was loaded.

In contrast, the last place I worked put a strong emphasis on implementing Object Oriented philosophies in Front-end functionality. I’ve been known to implement OOP from time to time – just like the next guy – but there is a conceptual jump between its application in the visual realm vs. the world in which it developed – server side, heavy lifting.

When you need to do visual work it doesn’t necessarily come intuitively to abstract the code pieces so that you can reuse them elsewhere in different circumstances. But when making AJAXed content pages, once I took the extra time at the beginning to map it out it saved a lot time with future pages and, of course, ran much more efficiently. (We’re talking about a reduction of 30 seconds in load time…)

Object Oriented CSS

The application of Object Oriented concepts to front-end projects doesn’t stop with Javascript. The main two principals upon which Object Oriented CSS is built on are:

  1. Separate structure and skin.
  2. Separate container and content.

This abstraction allows for the creation of reusable modules a.k.a. classes that can be applied across your site. If you want the same feel – that would be a skin class. If you want to keep similar paddings / layouts – you’d use a container class. The term “class” is pertinent here. I’m not sure I’d use the framework that the project has put together. It’s not bad, it’s just another framework to work with… But the systematic approach they apply did helped me flesh out techniques I had already been implementing (said content page with duplicate content above).

Object Oriented Web Design

Reading about Ethan Marcotte’s Responsive Web Design was familiar to me because it is essentially another application of principals above. But here, the skins are restyled to fit the media upon which the content is viewed.  The model is the same, it’s the view that needs to be optimized per device… and our media queries work as a wonderful controller.

Abstracting the content from container is extremely powerful. Having played with responsive design for a bit now, I don’t see why I wouldn’t build my webapp to work equally well in mobile AND computer browser – and no need for that pesky mobile subdomain everyone is using these days.  Since native apps mean that your user will have your icon sitting there on their mobile desktop, I don’t think that responsively designed webapps would replace native apps — not to mention the power you can only truly tap into when developing natively.

That being said, a startup can get their concept out there much quicker with much less funding up-front using a service like phonegap, and only having to invest in web developers to get off the ground. It’s all just different facets of the same beautiful web.

How to add a divider between menu items in css using only one selector

A popular way for dividing between menu items, or elements in general is the single border.

li { border-right: 1px solid #000000; }

The problem with doing that is how do you not have the border after the last element?

One solution is to add a border to all of the list-items then remove it from the last one:

li:last { border-right: none }

But this solution is not elegant. It get’s the job done, but it adds an extra line of code. So what can we do?

This is where the CSS Adjacent Sibling Combinator (a.k.a. the plus sign) or the CSS General Sibling Combinator (a.k.a. the title) come in handy.

The CSS Adjacent Sibling Combinator

This will target a specified element that is adjacent, in the DOM tree, to another specified element as long as they share the same parent and first sequence immediately precedes the second one.

For example, if you would like to style every h3 element that is adjacent to an h1 element white you’d do this:

The HTML markup would be:

<hgroup>
    <h1>Title</h1>
    <h3>Tagline</h3>
</hgroup>

The CSS to target the h3 tag would be:

h1+h3 { color: white; }

Though, if you tried targeting the h1 tag like this:

h3+h1 { color: white; }

It wouldn’t work because the h3 tag does not precede the h1 tag in the HTML markup.

Or if you had an h2 tag in between the two elements, the style also would not be applied to the h3 tag…

<hgroup>
    <h1>Title</h1>
    <h2>Secondary Title</h2>
    <h3>Tagline</h3>
</hgroup>

because the tags are not adjacent to each other.

The CSS General Sibling Combinator

Now let’s say you DO want the style to apply in the example above?

The General Sibling Combinator will target a specified element that is a sibling under the same parent element of another specified element even if they are not next to each other as long as the first specified element precedes the second one.

Meaning that in the second html example we could apply a style to the h3 tag using the following code:

h1~h3 { color: white; }

Even thought the h1 and h3 are not adjacent to each other, since they are still siblings, the style would be applied to the h3 element.

However if you tried the following:

h3~h1 { color: white; }

The style would not be applied.

Using the Sibling Combinators to Solve Our Problem

Back to the menu problem. How do we add a border in between each menu-item, but only use one line of code to style it?

li+li { border-left: 1px solid #000000 }

i.e. Every list-item that comes right after another list-item should have a border to it’s left.

Or you could do this:

li~li { border-left: 1px solid #000000 }

Which basically means that every list-item that has somewhere, under the same parent, another list-item before it, that list-item should get a border to it’s left.

Voilà! There you have it!

Gaming the Sibling Combinators

Lea Verou uses this technique used to create an actual game of Tic-Tac-Toe in pure CSS. The only Javascript used to make the game functional is for setting up the board. Aside from that, the conditions used to monitor the game use the Sibling Combinators. When I first saw this I printed out the stylesheet to read on the bus home. It’s a brilliant use of CSS and I have to admit that I’m jealous that I didn’t think of it first.

Feedback

Have you seen the Sibling Combinators used elsewhere? Have you seen another elegant solution for the border in a menu? Please share below.

Yaniv Cohen, R&D Team Leader, WorldMate

“Jack is an outstanding web developer.

Jack has an amazing ability to learn new development methodologies, adopt and implement them quickly and correctly.

During the time we worked together he has proven to be a great team player who goes beyond his duty to reach company goals.

Jack will be a significant asset for any company he will ever chose to work for.”

Eilon Carmi, Product Manager, WorldMate

“I’ve worked side by side with Jack at WorldMate. Jack’s work was professional, precise, flawless and creative. Jack is a very talented developer, his knowledge enabling him to create smart and efficient code and his eye for details guarantees an accurate result with an impeccable finish. I’m really glad to have had the opportunity to work with Jack and hope to work with him in the future.”

Steve Spinner, hired Jack as a IT Consultant in 2010

“I chose Jack as my programmer for the back end of two major websites using WordPress 3 as the CMS system. His programming knowledge as well as his knowledge of WordPress made it a pleasure to work with him. No design problem or bug was insurmountable. He was available at all times when we needed him, even after the site was online and we needed a “few tweeks.”.

i can without any reservation, recommend Jack”