David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞. » Microsoft

Application Pinning with META Tags

David Walsh — Mon, 14 Nov 2011 15:27:33 +0000

If there’s one thing I want you to learn from the wide range of blog posts I’ve written, it’s that it’s the small things matter when you’re creating your websites. Whether it’s a one-page showcase, a business website, or an enterprise web application, there are always small details you can add that will really help someone out…even if that someone is on a Windows PC. One of those small details is setting your website up for “pinning”, a functionality that debuted in Windows 7. Let me show you what it is and how you can implement it on your websites!

META Tags

There are a variety of META tags used. Here are the base tags:

These initial tags provide basic information about the site to be pinned. With those self-explanatory tags in place, you can now add “tasks” which can be links to any URL:

For the purposes of a blog like mine, the tasks could be links to my Twitter feed, Facebook page, and my LinkedIn profile. For a business website, tasks could be shortcuts to the user’s cart, different store departments, or a store locator!

As I mentioned above, this isn’t a groundbreaking website addition but it can be just another small detail that makes your website a bit more useful than the rest. Providing users quick ways to accomplish tasks on your website makes your web application a bit more useful!

Application Pinning with META Tags is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Edge & Mobile Browsers

David Walsh — Mon, 20 Jun 2011 14:29:03 +0000

From a developer’s perspective, the Web is moving faster than ever. Thanks to reinvigorated browser vendors, frequent releases of new mobile devices, and our own need for better APIs and tools, we’re seeing loads of movement across each platform. Since browser venders like Mozilla, Chrome, Safari, Internet Explorer, and Opera know we need the ability to test these features on desktop and mobile platforms, they have mostly been helpful in providing edge versions of their browsers. This post will show you what each vendor provides in the way of edge versions, as well as how to get them.

Most browser vendors offer edge and/or mobile versions in Windows, Mac, and Linux flavors, but this post will focus on Mac offerings. Their other OS counterparts are generally found in the same place.

Mozilla: Nightly & Aurora

Mozilla Aurora is a sneak peak into the next few versions of Mozilla. As of now (still within a few months of FireFox 4′s official release), Aurora is a snapshot of Firefox 6. Aurora is full of APIs and features that will be introduced in future versions of Firefox, including a re-enabled Web Sockets, the Element.dataset API, and so on. The nightly version is also available if you prefer to stick closer to the current version of Firefox. Nightly can be updated each day while a new version of Aurora is available every few weeks. Click the “Check For Updates” button within the “About” menu to update your version of each browser.

Mozilla Aurora Firefox Nightly

Mozilla Mobile Emulator – “Fennec”

Fennec is the codename for Mozilla’s mobile version of Firefox. Firefox Mobile is available for Android-based devices, but you can test your website with the Fennec emulator, available on each desktop platform.

Mozilla Mobile

WebitKit Nighty

WebKit Nightly offers a complication of a nightly snapshot of the WebKit codebase. At the time of publish, radial gradients are not supported by Safari but I was able to test them using Webkit Nightly. Webkit Nightly prompts you to update each day. WebKit Nightly could be considered a a beta for Safari.

WebKit Nightly

Chrome Canary & Chromium

Google Chrome Canary is a mesh between Google Chrome and the Chromium project, which is bleeding edge. Much like Mozilla’s Aurora, Chrome Canary is two to four versions ahead of the current release. Click here to read the story behind the name “Canary”. Open the About dialog to update your version of Canary. If you feel up to it, you can instead create a custom build of the Chromium trunk.

Chrome Canary Chromium

Opera Next

Opera Next is the pre-release version of the Opera browser. The latest alphas and betas are automatically installed, so you can try out Opera’s latest technologies. What I love about Next is that while Opera often releases snapshots, Next meshes those in automatically.

Opera Next

Opera Mobile Emulator

I wasn’t surprised to see that Opera was looking to offer a mobile solution, but I was pleasantly surprised as to how awesome Opera mobile was. Had Opera mobile been disappointing, I wouldn’t have considered trying to support it for my website. What I also like about Opera Mobile is they provided a nice emulator app, unlike the Android emulators.

Mobile Opera

Note: I also have an Opera wii emulator but I couldn’t find where I got it so I have not included it within this post.

Legacy Safari Installs

The Multi-Safari project provides multiple versions of Safari that you can test your websites against. This proved extremely helpful for me when I needed to support Safari 4 and 5, right around the original Safari 5 release. Provided you have a compatible operating system, you can get the original version of Safari!

Multi-Safari

Live on the bleeding edge of web development by testing and experimenting with code by using these edge browsers. Let me know if you have suggestions for additions to this page!

Edge & Mobile Browsers is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Turn Internet Explorer into Chrome with Chrome Frame

David Walsh — Wed, 23 Sep 2009 02:00:59 +0000

I’m just going to cut to the chase: Internet Explorer is rubbish. I don’t care what version you throw at me — 6, 7, 8…rubbish. Apparently Google agrees with me because they’ve released Google Chrome Frame, a browser plugin and META tag system that allows you to turn IE installs into a virtual “Chrome” install so that IE will support HTML5′s canvas tag and take advantage of JavaScript performance improvements featured in Google Chrome.

Step 1: The Plugin

The user must first download the Chrome Frame plugin at the Google Chrome Frame page. The install works on XP and Vista operating systems, IE browser versions 6, 7, and 8.

Step 2: The HTML META tag

To activate Chromified Internet Explorer you must add the following META tag to your pages:

That’s it! Check out a demo here:

View Demo

More Details

Jump over to the Google Chrome Frame page to get more details about this project. There’s a great video featuring Alex Russell (of Dojo fame) where he explains the reason for Chrome Frame and usage.

Our Savior?

I don’t believe so. There are two big problems I see:

Most IT teams are keeping their businesses employees in the dark world of IE6. Chrome Frame would be a great solution for employees looking to get with the 90′s but how many businesses give their employees proper permissions to install applications? No many.
Users who don’t know the difference wont put an effort into downloading this plugin (i.e. my grandmother doesn’t even know what a browser is, much less IE and why it’s bad).

Thoughts?

I’m very interested in seeing what you all think of this. Crap? Gold? Let me know what you think!

Turn Internet Explorer into Chrome with Chrome Frame is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Making IE8 Emulate IE7

David Walsh — Fri, 20 Mar 2009 12:55:27 +0000

As you probably know, Microsoft Internet Explorer 8 was “officially” released yesterday. If you were caught off guard by this and haven’t had time to test your sites in IE8, don’t lose sleep; you can make IE8 render pages like IE7 using a simple META tag.

The XHTML

It doesn’t get much easier than that. Don’t use this functionality as a crutch for too long though!

Making IE8 Emulate IE7 is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Sizzle and Peppy Selector Engines in MooTools

David Walsh — Tue, 24 Feb 2009 13:28:59 +0000

A few weeks back I touched on how you could implement the Peppy and Sizzle selector engines in MooTools. Both posts showed how to remove the default Moo engine from use and instead make each respective selector engine the one and only. It doesn’t have to be that way. You could use all three engines within the page as well.

Peppy, Sizzle, and Moo Together

//assuming that the JavaScript files we brought in via simple XHTML above...

/* MooTools */
var divs = $$('div');

/* Sizzle */
Window.$Sizzle = function(selector){
	return new Elements(new Sizzle(selector));
}
//sizzle usage
var divs = $Sizzle('div');

/* Peppy */
Window.$Peppy = function(selector){
	return new Elements(new peppy.query(selector));
}
//Peppy usage
var divs = $Peppy('div');

Why do this? Each engine has its advantages. Sizzle generally does better with Internet Explorer so if you detect that the user is using IE, you may want to use Sizzle to grab the elements instead.

In most cases the overhead of bringing in each engine makes this strategy overkill. It’s definitely an option though.

Sizzle and Peppy Selector Engines in MooTools is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

PHP, Microsoft SQL Server (MSSQL), and IIS: Connect and Query with ODBC

David Walsh — Thu, 31 Jul 2008 12:49:36 +0000

I was recently thrown a real curveball of a project. Instead of using a fresh MySQL database to pull information from, the customer required that we pull information from their new Microsoft SQL Server 2005 server. This isn’t the most desired method of PHP->Database interactivity but that’s what the project called for and that’s what I needed to do. Here’s how to get things going.

Connecting to Microsoft SQL Server 2005 from PHP

// the "driver" first
$virtual_dsn = 'DRIVER={SQL Server};SERVER=database.domain.org,45277;DATABASE=MyDatabase';
$connection = odbc_connect($virtual_dsn,'Username','Password') or die('ODBC Error:: '.odbc_error().' :: '.odbc_errormsg().' :: '.$virtual_dsn);

Choose Which Database

odbc_exec($connection,'USE MYDB');

Executing a Query

$result = odbc_exec($connection, 'SELECT FirstName FROM Names');

Using the Query Result

$first_name = odbc_result($result, 'FirstName')

Querying Tables and Columns with Spaces

// use brackets [] for tables and colums with spaces
$result = odbc_exec($connection, 'SELECT [First Name] FROM [Names Table]');

Like I said, while this isn’t the most desirable setup in the world, it will do. Big ups to Hostway for their help in configuring the server; they provided everything we needed.

To learn more about the ODBC functions, visit PHP.net

PHP, Microsoft SQL Server (MSSQL), and IIS: Connect and Query with ODBC is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

IE Says “Internet Explorer cannot open the Internet Site ________. Operation Aborted.” I Say “WTF?”

David Walsh — Fri, 04 Apr 2008 12:52:46 +0000

During the development of a recent website, I fitted the site with some awesome MooTools effects. Per usual, I would check each page with Firefox and once the page looked good, I’d switch over to Internet Explorer to make sure the site looked the same. That’s where the problem began.

Periodically, I would get a JavaScript-like alert box that said “Internet Explorer cannot open the Internet Site ________. Operation Aborted,” as show below:

After doing some research, I found a post by MooTools dev Aaron Newton that explained why the problem was occuring:

IE does this when you attempt to modify a DOM element before it is closed. This means that if you try and append a child element to another and that other element (like the document.body) is still loading, you’ll get this error. This will occur if you use .appendChild (which in Mootools includes .adopt, .injectInside, .injectBefore, etc.) or if you use Element.innerHTML = “” (or in Mootools, the .setHTML method).

The fix is quite simple: don’t do any processing until the DOM is ready.

window.addEvent('domready', function(){
  //do stuff
});

Click here to read Aaron’s full post. The moral of the story is not to modify elements that haven’t fully loaded!

IE Says “Internet Explorer cannot open the Internet Site ________. Operation Aborted.” I Say “WTF?” is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Override Vista and XP’s Themed Buttons and Scrollbars Using a META Tag

David Walsh — Wed, 26 Dec 2007 13:59:21 +0000

The first thing I do to any fresh Windows XP or Vista install is change the theme to old-school “Windows Classic” theme. Square gray boxes, in my opinion, are much better than the awful “rounded”, colored bars. The XP and Vista theme settings also bleed into Internet Explorer, shaping and color buttons in ways I don’t want.

Luckily, using an HTML META tag, I can tell the browser to ignore the theme’s settings and show the standard, gray button.

I’m not advocating this, simply showing how it can be done.

Override Vista and XP’s Themed Buttons and Scrollbars Using a META Tag is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The First Year of IE7 — Still Hated

David Walsh — Fri, 07 Dec 2007 04:38:15 +0000

The IEBlog posted The First Year of IE7 today and lets just say that the comments are anything but positive. Check out the scathing comments: http://blogs.msdn.com/ie/archive/2007/11/30/the-first-year-of-ie7.aspxThe First Year of IE7 — Still Hated is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The First Year of IE7 — Still Hated is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Prevent Double Margin & Padding In IE6 When Using CSS Float

David Walsh — Wed, 28 Nov 2007 14:16:46 +0000

My thoughts on Internet Explorer have been well documented; for those that don’t already know, I think IE hinders the internet’s progress and represents another embarrassment for Microsoft. That said, a majority of users still browse with Internet Explorer 6 so it’s important to make sure our customers’ websites look good in the browser.

One of IE6′s glaring mistakes is producing double padding and/or double margin when using the respective property on two floating DIVs that fall next to each other. Since I build websites using all DIVs, I run into this problem with every framework I create.

The Problem

The above title is misleading, as my code isn’t the problem — IE6 is. That said, the following code alone isn’t good enough:

#global-column-1			{ margin:0 0 0 33px; padding:0 20px 0 0; width:255px; float:left; }
#global-column-2			{ margin:0 0 30px 30px; width:250px; float:left; }

The above code will result in double padding in IE6.

The Solution

Use IE6-only CSS code to fix the problem in that browser.

#global-column-1			{ margin:0 0 0 33px; padding:0 20px 0 0; width:255px; float:left; } * html #global-column-1 { display:inline; }
#global-column-2			{ margin:0 0 30px 30px; width:250px; float:left; }

The “* html #global-column-1″ declaration is only viewed by IE6. The”display:inline;” code actually corrects the double spacing.

Shouldn’t developers and the browser creators be working together? Apparently not, as Microsoft never fixed this issue.

Prevent Double Margin & Padding In IE6 When Using CSS Float is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.