IE 8.0 - First Impressions and Rendering

Unfortunately, I’m at home nursing the flu rather than living it up in Vegas at MIX08 so I’ve had to experience the fun vicariously through the thousands of blog posts, twitters, and videos of nearly every second of the event.

A big kick off revolved around the first Beta release of Internet Explorer 8.  Being adventuerous and well, not having anything else to do, I downloaded the x64 Vista version and have been hitting various web sites that I frequent to see how things look.

The IE Interface

Overall, IE 8 currently looks a LOT like IE7.  In fact, it takes a bit of hunting to find any differences what-so-ever.

The new “Favorites Bar” (or was that old) seems to be built to hold the new WebSlices, which I haven’t quite grasped yet (I don’t use eBay, sorry).

The Phishing Filter has been renamed the “Safety Filter”, which was immediately turned off.  I’m assuming Phishing was too difficult to explain (which is OK).  The concept is cool, I’m just not sure I want Microsoft being the “safe site” police.

Beyond that, I haven’t seen any other “changes”.  Let’s hope the real excitement is in the rendering.

Rendering

The tout of IE8 is it’s successful passing of Acid2, a standards-based rendering assessment.  Sadly, this is just in time for Acid3, which it not only doesn’t pass (nothing passes right now), but it does worse than most other “current” browsers only scoring a 17/100.

So, what about real sites?

Here are a few of the more common sites I visit and the results:

iGoogle – Renders OK, albeit VERY slowly.  Accuweather.com and del.icio.us web parts require mousing over the empty boxes to display their contents.  There is also a bunch of odd spacing at the top of the Gmail web part.

Gmail – Renders OK, very fast.  I couldn’t find any issue with Gmail at all.

Microsoft Exchange 2003 OWA – Works great, very fast. 

Microsoft SharePoint 2003 (SPS) – Works very well.  Renders extremely fast from page to page.  Mouse overs, context menus, etc. seem to work even better than in IE7.  Hah.

Microsoft SharePoint 2007 (MOSS) – Works.  Still requires “accepting” the “Name ActiveX Control”, which is REALLY annoying, but the site renders just fine.  Also renders a bit slow, but that’s just MOSS2007.

Weather.com – Works. A few positioning snafus, but everything is functional.  See image below.

Linkshell Fourms (built on VBulletin 3.6. – Works great.  The PHP-based forums work like a champ for my FFXI linkshell.  Thankfully!

Virtual Server 2005 R2’s Control Panel – Does not work.  Unfortunately, none of the menus work.  You cannot create/update/add anything or view the status of a running VM.  I can bounce back to IE7 emulation mode and it works OK.

MSDN Subscriber Downloads – Sorta works.  I’m assuming the new version of this site will resolve these issues.  So far, the site “works”, but renders a bit funny when you move the frame bars around.

FFXI Auction House – Does not work.  The side navigation bar is covered up and inaccessible.  Without that, it’s almost impossible to browse through the site (searching for EVERYTHING gets a bit tedious). See image to the right.

Twitter.com – Sorta sometimes works.  The functionality of the site is there, but the background and themes to the site are a bit haywire.  And updates aren’t being processed without a logout/login.  Ehh, odd.

WordPress – Does not work.  For some reason, the wp-admin console simply blanks the page out.  There’s a brief flash of it rendering, and then poof, just white.  I can View Source and see the code, refresh and see the flash, but haven’t been able to fix this one without dropping back to IE7 mode.

My Blog (Freshy Theme) – Sorta works. Well, this blog doesn’t render right either.  The Search bar at the top right of the screen is covered up and missing the [Search] button.  The right-hand bar no longer trails to the end of the page, but stops at the end of the content (assuming the height:100% failure), The main body footer is now the footer to the right-hand bar.  There are a few other z-index issues here and there, but those can be fixed (I’m assuming).

My Photo Site – Does not work.  Hmm, sucks.  Unfortunately, the menus doesn’t work.  Well, let me reword that, they work, but if you try to move from the Parent Menu to a Child Menu item, the menu disappears.  I’m assuming it’s a spacing issue for the mouse overs, but I’m not sure.  Ugh.

Random sites – I noticed most sites that I authenticated to, the hash out for the password turned up as an invalid character.  See below.

Things I Wish It Had

NoScript.  I really like FireFox’s NoScript plug in—especially with all the shakeup and paranoia regarding compromised accounts in FFXI.  I wish IE had something similar built directly into the browser.

Built-in support for social bookmarking.  Does anyone use Favorites or Bookmarks anymore?  I totally rely on del.icio.us and would LOVE to see better support for that in IE8.  I don’t want an annoying button that was put out by Yahoo, I want to open an Explorer Panel (like my Favorites) and see the heirarchy of my tags.

Conclusions

Well, for Beta 1, it’s not half bad.  It starts up instantly, looks clean, and appears to integrate into Windows Vista just fine.  If a few of the odd rendering snafus can be addressed (either by releasing WHY it doesn’t work or tweaks to the rendering engine in IE), I look forward to the next release.

Tags: IE8, Internet+Explorer+8, First+Impressions

Technical difficulties at WordPress

It appears WordPress is having “a moment”… CSS customization is down and our blogs have reverted to the OTB formatting.  Bleh.

More information at http://en.forums.wordpress.com/topic.php?id=22160&replies=31.

Fun times.

Update: Fix’d.

Tags: WordPress, CSS

Migrating to a new Web Gallery

I’m currently migrating to a new version of Web Gallery (code and such coming soon); so photos may be a bit screwy the next few hours. Thanks for understanding.

[Update: Everything’s up and running! 

Over the next couple of days, I’ll post up the code for the new v2.0 of the Web Gallery project as well as a quick walkthrough of what changed.  I’m still finishing the admin areas, but the “user” side of the site is up and operational.

http://photos.tiredstudent.com]

Tags: Web+Gallery, WordPress, Updates

New Articles Section and AJAXing in .NET Article

Last year, I had several requests to take my “longer” blog posts and series and make articles out of them.  I understand where readers are coming from and empathize—reading 4–5 posts that are 2–3 pages long across a week of entries can be… very disconnected.  In addition, code formatting, images, and such are difficult to get exactly right on a blog image (I tend to avoid capturing code in images so that it’s still searchable).

So, to that, I’ve added a new section to the blog, Articles.

In this, I’ll tend to focus on using the blog for short bits of information, key points, and summaries of various topics.  The Articles section will be for the longer, in-depth reviews of technologies, practices, and guides.

The first post in this section is from the recent AJAXing in .NET series. 

Tags: Blogging, Articles, Volta, Script#

Creating a Countdown Image Handler in ASP.NET

I love WordPress—it’s by far one of the best packaged blogging engines I’ve come across and has kept my DIY tendancies at bay for several years now.  With the structure of WordPress, however, comes restrictions.  My biggest complaint is that I can’t place JavaScript tools or components on my page. 

In the past few months, one thing I would have liked to have was a little “countdown” to graduation, the holidays, whatever.  That’s brilliantly simple with JavaScript.  Meh. :(  I looked at a few other sources, but they required registration and made the images HUGE.

So, this afternoon while catching up on my Top Gear obsession on BBCA, I coded up a quick HttpHandler.

You can see an example of the image created by this on the right side of the blog—the Graduation countdown ticker.

Download Code: .NET 2.0

The handler accepts two optional variables, width and height, and two required variables, eventText and eventDate.

By default, the width of the image is 100px and the height is 120px—about the size of a standard small banner.

For this code, the most important namespaces are System.Drawing and System.Drawing.Imaging.

First, we need to create a new Bitmap image to hold our graphic.

Bitmap imageBitmap = new Bitmap(width, height);

Next, create a drawing pad, of sorts, in a Graphics object and associate it with our new bitmap image.

Graphics graphicObject = Graphics.FromImage(imageBitmap);

graphicObject.FillRectangle(

new SolidBrush(Color.White), 0, 0, width, height);

Since, by default, the background is Black, call FillRectangle (from 0,0 to the max width and height) to fill the background with White.

Our next task is to create a border around the image.  I chose a black border with a 2px width.  The draws are in order of top, left, right, and bottom lines.  Note: I’m sure there’s a better way to do this by creating an empty rectangle or something…

Pen borderPen = new Pen(Color.Black, 2);

 

graphicObject.DrawLine(borderPen,

new Point(0, 0),

new Point(width, 0));

 

graphicObject.DrawLine(borderPen,

new Point(0, 0),

new Point(0, height));

 

graphicObject.DrawLine(borderPen,

new Point(width, 0),

new Point(width, height));

 

graphicObject.DrawLine(borderPen,

new Point(0, height),

new Point(width, height));

Our final touch is to put the text onto the image.

Font textFont = new Font(“Arial”, 8, FontStyle.Bold);

SolidBrush textBrush = new SolidBrush(Color.Black);

 

string imageText = eventText + “: “ + countdown.Days + “d”;

 

graphicObject.DrawString(imageText,

textFont,

textBrush,

new PointF(2, 2),

null);

To “type” onto an image, create a “font brush” with the assigned color, font face, and size.  Instead of drawing a line or shape, use DrawString.  The fourth paramenter(new PointF(2,2)) specifies where to begin the text—you can get more creative than this and figure exact locations based on image size.

Finally, use the context supplied by the ProcessRequest method to return the image to the consumer.

context.Response.ContentType = “image/gif”;

imageBitmap.Save(context.Response.OutputStream, ImageFormat.Gif);

That’s it! 

If you’re interested in the source code, the link is at the top of the post—download and enjoy!  As I update the code, I’ll post it up.  This has lots of room for improvement, but is a nice starting point for those who want to put a dynamic image on their hosted blogs.

Tags: Imaging, asp.net+2.0, ihttphandler, WordPress

WordPress Supports Code!

using System; /// /// Summary description for Class1 /// /// public class WPCodeTester { public WPCodeTester() { Console.Out.WriteLine("This is a test!"); } }

The folks at WordPress now have special language tags for those of us who post up code.  This is just a simple post to show what C# code looks like.

As you can see the view and copy commands are pretty cool, but the formatting leaves MUCH to be desired from.  While the attempt is awesome, I think I’ll stick to what’s been working—copying from Visual Studio to Word 2007 and then to BlogJet.

Tags: wordpress, coding

Review: Windows Live Writer 1.0 (Beta)

NOTE: I’m using WLW to post this, so you can see a difference in the post style, layout, etc. 

After WordPress? Matt blogged earlier this week regarding the latest Windows Live Writer (WLW) beta as a ?fantastic Windows blogging client?, I decided to give it another chance.  I had tried it, before settling (and paying for) BlogJet several months ago and just couldn?t get into it.  It still seemed clunky at the time and did a HORRID job of copy/pasting code from Visual Studio (a primary use for my blog).  If I didn?t have the aspect of code, I?d have probably stuck with it.

So, where are we today?

I installed, avoided all of the annoying Microsoft Live service popups, and associated it to my blog without any issues.  The new detection sequence is nice, but no real added advantage over BlogJet.  The XML-RPC works well and I credit WordPress for that, not a specific blogging engine.

If you click on the picture to the right; you?ll notice that it does a great job of importing the ?theme? of my blog in, creating a more WYSIWYG feeling.  BlogJet can?t do this, but it?s never really affected me.

You?ll also notice, as Matt pointed out, that the new interface recreates the WordPress dashboard within the application?easy access to stats, comments, etc.  I really like this as it helps recreate the interface on the local machine I?m on.

I also like the little things: Word-esque spell checking (you get used to the red underlines–I know I do at least), image effects, and such. 

Wichita, KS, USA

I also really… really… REALLY like the “insert map” feature.

Insert Map, while I can’t see myself using it a lot, is truly cool; it allows you to type in an address, connect to Virtual Earth, and mash up a map right here in the blog.  It’d be great for blogs that discuss events and such.  Here’s an example of the inner city area of Wichita, KS (where I work).  Can you see my office?

 

 

So, we have pictures, graphics, and pretty layout–we’re starting to sound like an Apple commercial.  So what about the real stuff–what about code?

Blogging About Code in WLW

WLW has the ability to have plugins–which is a huge bonus over BlogJet (extensibility is GOOD!) and there are a few that are specifically targeted to pasting in Visual Studio code.  Neat.  They claim to fully support the color coding and translate the odd rich text into HTML.  Right now, to get the code to look “pretty”, I copy it from Visual Studio to Word 2007, redo the spacing (never need to redo the actual text or coloring, that works perfect), and paste it in.

So, let’s take a method I was dinking with yesterday for a newsgroup post.  Using “Insert From Visual Studio”, we get:

    private static string CreateJustifiedText(string stringValue1, string stringValue2, int maxLength)
    {
        int stringLengths = stringValue1.Length + stringValue2.Length;
        int dotsNeeded = maxLength - stringLengths;
        string dots = "";
        for (int i = 0; i < dotsNeeded; i++)
        {
            dots += ".";
        }
        return stringValue1 + dots + stringValue2;
    }

Okay, so it surrounds it with <code> tags, which is OK… but doesn’t do anything about the formatting or width of the post.  It also doesn’t pay attention to the left alignment, leaving it indented (with spaces).

The second tool, “Insert Source Code Snippet” does a bit nicer of a job… but I’m not fond of how it recolors everything–especially the neon colors that it seems to use. 

Code Snippet

0:      private static string CreateJustifiedText(string stringValue1, string stringValue2, int maxLength)1:      {2:          int stringLengths = stringValue1.Length + stringValue2.Length;3:          int dotsNeeded = maxLength - stringLengths;4:          string dots = "";5:          for (int i = 0; i < dotsNeeded; i++)6:          {7:              dots += ".";8:          }9:          return stringValue1 + dots + stringValue2;10:      }</PRE

 

I do like the cool (read: spiffy) boxes that it creates and the odd overshadowing effect.  It is, however, still formatted incorrectly.  The biggest downside is still that the formatting flows off… and that you can’t insert text UNDER the box… I had to remove the code (just now) and readd it after adding additional space here to type.  Bleh.

Finally, pasting code with the simple “as formatted HTML”. 

private static string CreateJustifiedText(string stringValue1, string stringValue2, int maxLength) { int stringLengths = stringValue1.Length + stringValue2.Length; int dotsNeeded = maxLength - stringLengths; string dots = “”; for (int i = 0; i < dotsNeeded; i++) { dots += “.”; } return stringValue1 + dots + stringValue2; }

Eww.  Just… eww.  It appears to lose all of it’s formatting (or just gives up).  Bad deal.

Final Thoughts

So, with the exception of the code issues, will I stick with WLW a bit?  Unfortunately, probably not.  While I’m all about free, being able to post up code is one of the primary reasons for my blogging–and the tools it provides right now just cannot do that.  We’ll see if, eventually, the Live team can come up with a blogging tool that is not only “pretty,” but functional for coders.

Technorati Tags: windows live writer blogjet wordpress

Two Year Anniversary of Blogging… sorta.

I was kind of hoping for a bit of fate, but it was a few days early.

June 9^th, 2005 was the first “WordPress” blog entry and when I started blogging more frequently.  Back then, most of my entries were personal, political, or random things that happened at work on in EQ2.  Lately, now having a bit more focus and idea of what I want to blog about, I’ve blogged about mostly technical and development topics.  All in all, it’s been great and met exactly why I started blogging—to provide others out there with some tidbit of information (given Google is doing it’s job) and provide me with a space to jot down thoughts, ideas, and processes so I don’t *cough* forget them *cough*. 

But, in the past year or so, I’ve been shocked by the traffic.  I realize it’s not much to a huge blogger, but the blog reached 20,000 hits mid-day yesterday.  Here are the rest of the stats, as of right now:

Blog Stats

Total Views: 20,095

Best Day Ever: 227

Views today: 97

Totals

Posts: 285

Comments: 126

Tags: 29

Spam

Akismet has protected your site from 8,187 spam comments.

285 posts in 104 weeks puts it at about 3 posts per week; which, all things aside, seems like a lot to me.  I do not plan to, however, face the same situation as Michael Howard did this past week—I prefer the mix of topics (because that’s who I am) and most likely the  blog will never be dedicated to an exact topic.  Tags and tag-specific RSS feeds can help those who don’t care about certain topics; past that, .

Finally, I want to thank those who read, have commented and emailed, and constantly remind me that this content is actually being read and used by individuals in the community—and to keep it up.  That’s a huge motivator for me and I appreciate it.

 

Tags: anniversary, blogging, wordpress

Creating Information From Data…

I think, however, that simply calling the current school-age generation a “generation of editors” is a little too limiting. It’s true that today’s kids don’t have to hunt down kernels of information as if they’re ancient Cro-Magnon scrounging for roots and berries. Instead, it seems to be replacing those hunting-and-gathering skills with the ability to synthesize and combine information in ways that my own Baby Boomer mind can’t always grasp.

Are We Just Editors Now? by Loyd Case of ExtremeTech

This article from ExtermeTech’s Loyd Case caught my attention this morning.  He, as ironincally has he notes, is responding to Bill Harris’ article entitled “Information”.  In it, he notes how disecting information has changed through the generations.  Both authors are comparing times to those of their generation (mid-to-late 40’s to 50’s) and even that of my parents (70’s) in how information is acquired and decoded.

So if you were researching something, you’d have to pull out a rack in the card catalog according to the alphabetized subject and flip through the cards. If you got lucky, the title of a book or a brief description would point you in the right direction. Then you had to actually find the book, skim through it, and hope that you’d find some information.

I know what you’re thinking about now: you’ve got to be freaking kidding me.

Dubious Quality: Information by Bill Harris

I remember that.  I’m, in spite of the target audience, in my 20’s and I remember the card catalog (my small, rural school district was a bit late in adopting technology).  I even remember the dewey decimal system—inspite of all attempts to forget it.  But, I’m also part, I believe of this age of information mashup—using Google or whatever information source of choice, and finding bits and pieces of data here and there, applying logic and care (ala: not everything you read on the Internet is true—you’ve had this lecture, right?), and then turning that data into information for your purpose.

Now, looking forward and seeing what the youth of today are doing is astonishing.  Collaboration, sharing, information overload using MySpace, Facebook, YouTube, even here on WordPress.  The alpha site for Popfly is a great example of the current demand—taking dozens of information services and mixing and mashing them together to come up with a solution: a photo album that contains music referenced by keywords in each photo, an address book with photos from Facebook and a map using Maps, etc.

I do agree with Loyd’s assumption that these are not “editors”, as that, to a degree, implies that nothing new is being created; however, this generation advocates data and services as multi-purpose tools and excel at finding new ways to use data and turn it into information, not simply finding a source of reference and citing it in a book report.

 

Tags: information, popfly, facebook, youtube

Theming without a Cause

So, I figured, “Hey! I like the new Ocean Mist theme, I’ll give it a shot!”  Bad move.  Cool theme, but too narrow and too large of fonts for source code.

The issue?  I didn’t bother to check to see if the theme I was using was still in the list… it’s not.  *sigh*

Please be patient while the blog goes through a multicolored adventure while I try to find something that doesn’t make me blind with color and is still readable for code and such… or I may end up getting beaten down and getting the extra “Edit CSS” package.  Grr.

Update [4:18 PM]: *twitch* Okay… wow, it appears that the DIV tags are named different theme-to-theme.  Fun times.  Anyway, back to Freshy; I like it and it looks clean given I can figure out how to widen it without breaking it.

I discovered that:

#page { width: 95%; } is a bad thing.  Yeah, don’t do that.

I also noticed, that, for some reason, if you look  at the right side of the navigation bar at the top; it’s broken at the end.  Ehh.. /sigh I wonder what broke that.  Oh well, something to dink with during vacation…

Update [ 2:12 PM]: Wild hair… editing again. 

Update [10:44 AM]: Okay, so, I like this theme. I broke down and bought the CSS editing and dinked with how code is rendered and the huge freaking banner at the top.  I like the little snippet of it, but the whole image of the pantone cards was a bit much.  As someone said, it adds color to the site.  Yay?  Anyway.  I’m still fighting with how <pre> tags are handled for code.  Also, if ANYONE knows how to make this page wider, please let me know.  800×600 ftl.

Update [9:00 AM]: Testing different format types.  Yeah..