Team Ravenglass

IE10's compatibility mode and framesets

Fri, 17 May 2013 12:47:00 -0400

Every once in a blue moon you stumble into some legacy code that uses framesets -with each frame in the set having its own IE specific hacks to make IE think that the frame's contents need to be rendered as IE 6, 7, or 8. So what's the big deal? Certainly the fine folks at Microsoft would expect this! These rare situations worked fine in IE 9, and as such it should work in 10! But lo-and-behold, it doesn't! In IE 10, you see a frame that renders as a blank white page, and when you resize the window it's content appears. In IE 10, all pages rendered as part of a frameset need to be rendered in the same document mode (Either 10, 9, 8, 7 or quirks) -- This means you cannot have one page of the frameset with a X-UA-COMPATIBLE http header set to something other than what the other pages are rendered as. If one frame is rendered in compatibility mode, all the others must be as well. The good news is it is a simple fix -- either remove the need for the special document mode, or set the entire frameset to render in the special document mode.

Box-sizing:border-box

Fri, 17 May 2013 11:17:00 -0400

As you might know, adding padding to any element with CSS increases the width of the element. So if you add 10px padding to a 100px div, it actually becomes 120px wide (10px are added to each size). If you really only wanted a 100px div, you need to make the div 80px and add padding of 10px. This addition of padding even applies when you set a width of 100% to an element - it actually becomes 100% plus your padding on each side! Intuitive, right? Yeah - not so much. I think most of us, when adding padding to a div, mean that the width should be the width and the padding should be inside of that - not on the outside. Enter box-sizing:border-box. This will change your life. Here is a recommendation for your CSS going forward that I found on a GREAT article on this subject : * { Box-sizing: Border-box } FTW by Paul Irish.


/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

This gives you the box model you want. Applies it to all elements. Turns out many browsers already use border-box for a lot of form elements (which is why inputs and textareas look diff at width:100%; - Click here for a great article on form styling) But applying this to all elements is safe and wise. Check this article out for a great write-up on the subject and happy coding! http://paulirish.com/2012/box-sizing-border-box-ftw/

Miscommunication

Fri, 10 May 2013 15:59:00 -0400

At Ravenglass, communications aren't just part of our business, they dominate our business. Whether it's understanding customer requirements, building effective solutions, or explaining systems and processes to new team members, communications are the key to agile, consultative application development. Seth Godin's recent "Miscommunication" blog advocates for something that we strive to do every day at Ravenglass: When in doubt, ask.

Hyperlink and Tables in IE

Fri, 10 May 2013 12:05:00 -0400

In Internet Explorer you cannot put a hyperlink around a table; like this <a href=""><table><tr><td>...</td></tr></table></a> and expect the whole table to be clickable. This method works fine in other browsers such as FireFox, Safari, and Chrome. Here is a simple work around: <table class="tableLink" onclick="window.location='/';"><tr><td>...</td></tr></table> Doing this makes the whole area clickable, but none of your regular hyperlink attributes are there like the underline, the blue text, and the cursor changing. If you would like to mimic a hyperlink use the following styles. tableLink{
  cursor:pointer;
  color:blue;
  border-color:blue;
  text-decoration:underline;
} Here is a example that represent the initial problem and the work around. If you play it in Internet Explorer you will notice the problem.

Tips for Sending Emails in SSIS Packages

Wed, 08 May 2013 12:10:00 -0400

The purpose is this entry is to give a basic introduction to using the SQL Server Integration Services (SSIS) Send Mail Task and detail a couple of quirks that I've run across. To send email via an SSIS package, first you need to drag the "Send Mail Task" into your control flow. Then, it is as simple as setting up your SMTP Connection and configuring the To, From, Subject and Message fields. The task editor dialog gives three pages where you can configure these options, General, Mail and Expressions. You can get to the task editor by double clicking on the task, or right clicking and choosing "edit". These pages are described below:

General - allows you to set the name and description
Mail - allows you to configure most fields for the mail task. This includes the to, from, subject, message, etc fields
Expressions - allows you to evaluate expressions and set the value to specific properties on the mail page.

All of the fields on the mail page can have a static value, or use an evaluated expression based on variable data. Static values are entered directly on the mail page, within the task editor dialog. Variables can be used by going to the expressions page and adding the appropriate "property" for the field you want to populate, then adding an associated expression to determine the value. One element of confusion that I've noticed in this area (specifically with the "to" field) is that when there is an expression using the ToLine field, it automatically populates this field on the mail page with the value of the expression. This means that if you attempt to change the "to" field directly, it will let you change the value and apply the update, but will appear to lose/overwrite your changes when you re-open the task, without any explicit notification that it is using an expression (as of Microsoft Visual Studio 2005, anyway). Another important piece of information with email tasks, is to make sure to separate all email addresses with a semi-colon. Using commas will only send to the first address in the list. You can also read more about the send mail task here. Do you have any other tips, comments, etc, when using the Send Mail Task in SSIS? If so, please share them below. 'Til next time, Bridget

How to fallback from CDN to local jQuery

Fri, 03 May 2013 13:35:00 -0400

External dependencies are, in fact, external. As such, they are calculated risks with tradeoffs. CDNs are great, but for those minutes or hours that they go down a year, they can be very annoying. How can we as application developers fallback gracefully when an external dependency like a CDN goes down? With JavaScript we can detect when our CDN-hosted JavaScript resources like jQuery or jQuery UI aren't loaded successfully and try again to load them from local locations. One way to create a CDN fallback is to check for a type or variable that should be present after a script load. If that variable is not there, try getting that script locally. Note the important escape characters within the document.write. Here's a jQuery example:

Or you can do something like this:

You can also use RequireJS, which has a great shorthand for fallback URLs:


requirejs.config({
    enforceDefine: true,
    paths: {
        jquery: [
            '//ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min',
            //If the CDN location fails, load from this location
            'js/jquery-2.0.0.min'
        ]
    }
});
 
//Later
require(['jquery'], function ($) {
});

As always, plan for the worst and hope for the best!

Compatibility Cheatsheet for Web Developers

Tue, 30 Apr 2013 11:32:00 -0400

This is a great resource for checking compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers. Bookmark it! http://caniuse.com/

jQuery 2.0 has been released!

Fri, 19 Apr 2013 13:24:00 -0400

The latest jQuery has been released, version 2.0. This new version sounds exciting, with its smaller size and increased speed/performance, due to dropping support for IE 6, 7 and 8. A note to developers who need to accommodate older browsers: there is no need to worry, the jQuery team says that they will continue to support the 1.x branch. Remember to test thoroughly before upgrading to the latest version of jQuery! You can read more about this release on the official jQuery 2.0 blog entry.

CMYK vs RGB

Wed, 17 Apr 2013 15:06:00 -0400

I recently discovered that all versions of Internet Explorer below IE9 do not support displaying JPEG/GIF image files saved using the CMYK spectrum. All that shows up in their place is a broken image logo with a small red X. Here is a nice article on the differences between the two color spectrums RGB versus CMYK. The basic rule of thumb is that for anything viewed online it should be saved using the RGB spectrum, if you're printing it, then CMYK is the way to go. I had found this blog post explaining which browsers JPEG/GIF images saved using the CMYK spectrum display in Image not showing in IE8 due to CMYK encoding

In my research their were many sites about converting RGB to CMYK, but it seems that most people do not want to go the other way. No matter what, when you convert to a different spectrum the colors of the images are going to be distorted. At first I used a website that was supposed to take an image saved in the CMYK spectrum and upload it, the site then converts it to RGB, when I did this the colors were extremely washed out. In the long run I wound up using GIMP to convert the image to RGB and uploading it to the site, while the colors still changed it wasn't nearly as drastic as the website's version.

Browsers Browsers Browsers

Tue, 02 Apr 2013 15:18:00 -0400

This is more of a research blog entry. Everyone has their preferences of which browser they use and why. I personally use Firefox at work and Chrome at home and have a strong dislike for IE (mainly because I am a programmer). The reason I use FF at work is because I like the debugging tools it has to offer.

I wondered if others shared my strong dislike for IE so I did a little research and this is what I came up with. Globally Chrome is the most widely used web browser. According to the Browser Statistics page on the w3schools website 50 percent of users use Chrome, then Firefox, IE, Safari, and Opera in that order. In this list of 2013 Top Ten Internet Browser Comparisons Opera beats out Safari in the ratings, but the rest of the positions are the same.

Chrome first made it's debut in September 2008 and stole the number one spot in March of 2012. The rating on the Top Ten Website is 9.85/10. The below chart indicates the same and was published in May of 2012. (Source: Mashable)

FireFox peaked in July of 2009 with 47.9% of users. This was just before Chrome really took off running. The rating on the Top Ten Website is 9.33/10.

The w3Schools statistics also show that in 2002 Internet Explorer was used by 85.8 percent of users, but this was because there was nothing better. The rating on the Top Ten Website is 9.08/10.

Safari had it's highest percentage of users in April of 2012 with 4.5%. My personal opinion is that Safari is only in the running because Apple used to force it on their users without an option. The rating on the Top Ten Website is 8.70/10.

Opera has been around since March of 2003 and at it's highest only had 2.6% of users. The rating on the Top Ten Website is 9.03/10.

What browser do you use and why?

Filter bubbles: You should know about them

Wed, 27 Mar 2013 18:48:00 -0400

I thought I'd take a slight detour from my usual coding tips and tricks and mention something I've been finding more and more prevalent in the web. The web as a tool is a powerful thing, it gives us an avenue to all kinds of information that we might never have otherwise had access to. Filter bubbles are a way websites limit searches or other content to tailor results to your interests. This may sound like a great thing, but it can lead to a self induced version of digital group think. I recently was viewing a TED talk on this very thing and it explains filter bubbles quite well. I definitely think it's worth a watch. If you are not aware of filter bubbles and you are a web user, check it out: http://www.ted.com/talks/eli_pariser_beware_online_filter_bubbles.html -Jonny

FOR Loops Overwriting Ajax Responses (and how to fix)

Tue, 05 Mar 2013 17:19:00 -0400

I encountered a problem today with a FOR loop inside of a JavaScript function. This for loop makes Ajax requests (using jQuery 1.8.1) and populates a specific div, based on where we are in the loop, with the results of the call. However, we noticed that it stopped updating all of the divs and appeared to populate the last one multiple times.The ultimate reason was simple - the variables were being overwritten. As Ajax is asynchronous, the FOR loop does not need to wait for the Ajax call to complete before moving onto the next iteration of the loop. By the time the Ajax response was returned, the div id variable had been updated to represent a different item from the array that we were looping through. Below is an example of how the code was, when we were experiencing this issue:

Based on my research, one built-in, but more dangerous option, is to utilize the jQuery.ajax() "async" attribute. This would automatically send all Ajax calls synchronously, however it may temporarily lock the browser and prevent any other actions while the request is active. This can be detrimental for keeping people on your site. So, I found a different option. As the issue is ultimately that the variables are being overwritten, moving the Ajax call into its own function will isolate those variables and prevent them from overwriting each other. Below is an example of the updated code:

With this update, the tool appears to work beautifully again. Have you ever experienced a similar issue? If so, how did you work around it? Please share your experiences in the comment section below. 'Til next time, Bridget

I switched to iPhone 5 from Android and could not be happier.

Thu, 28 Feb 2013 02:10:00 -0400

Let me come right out and say it, I used to be the biggest iOS and iPhone hater. I have owned an android device since the Droid 1. I declared myself the winner in the smartphone wars, I was on the winning side.I was not locked into high prices or dictated developer rules. I had flash, and could use my phone as a USB drive. I for all intensive purposes made fun of all my friends who had iPhones. I would mock every news story, every microcosm of hype that surrounded Apple. I loved Samsungs ads that mocked iPhone commercials and iPhone fanatics. I spent the last 5 years of my life constantly in an all out war with every hipster or tech geek who loved all things Apple because they were on the high and mighty, they were self proclaimed "cooler" and "hipper", and in this war of devices I had it right, I was winning, I was open source, I had a 5 inch screen, I was an Android user.

So now that that is in the open I can say with some irony.... I switched to the iPhone 5 and could not be happier.

It really all started when I bought the Droid Bionic, which came out soon before the Droid Razr. It was the cream of the crop (as all new android devices are). I had upgraded from my Droid 1, and it was leaps and bounds better. I had 4G (suck it iPhone users stuck on 3G), I had Flash in the browser and so much more. I was singing praises from the mountains for my new Android device.

Then it happened...

A new device came out weeks later making me feel dumb. That device over there is faster, has a better screen and battery life. That device over there is either the next "better" version of Android or will get the next version soon. You with the Bionic, we are working on it.

Then it came, the long talked about and lauded update to Ice Cream Sandwich (Android 4) for my Droid Bionic, and that is what drove me away. The phone became a nightmare. It became a slow, buggy, laggy, POS that my wife and I wanted to constantly throw against a brick wall. You could not open an app, make a phone call, play words with friends without a constant wait time of 10-30 seconds. I would open the browser or facebook and just sit there and wait, sometimes forever to the point where I would cry out "I hate this phone!!!!".

What happened? Where was this magical device I had waited months to buy vanish too?

Then it hit me like a ton of bricks and started to all make sense. This was exactly what happened with my Droid 1. These were the same complaints, same issues, and same frustrations I felt before I switched to the Bionic. This is the pain of being a Android user. So I said to my wife, lets get an iPhone for our next phone (she had been wanting one for years). Finally after the 1500th time our phones locked up or could not get a good signal we had finally had it.

We woke up that morning and ate breakfast, then drove to the mall, walked into the Apple store with cash in hand and said.."we want to buy 2 iPhone 5's". We bought them out of contract for full retail (that is how unhappy we were). So it has been about a week, but I can already tell we have sunny roads ahead. I can see it now, I can see why my friends and neighbors love their iPhones. This is a beautiful device. It is responsive, super fast, and easy to use.

At this point, I think my next device after this iPhone when I can upgrade, will be the next iPhone. My iPhone hate was a phase that I think all of us tech geeks go through that have never owned one (I still know quite a few). But like all phases, one grows out of them. If you can afford it, buy an iPhone 5, you will not be disappointed.

IE10 released for Windows 7

Wed, 27 Feb 2013 14:55:00 -0400

As a quick heads up, if you haven't heard yet, as of yesterday, IE 10 is in the wild for Windows 7. In a few short weeks, most PCs running IE9 will automatically receive the update, and IE9 will be the last major version for Windows Vista. You can read the MSDN announcement here: MSDN Announcement

Objects and Embeds

Wed, 20 Feb 2013 15:36:00 -0400

The goal was to remove the video(s) from email html code and replace them with an image that anchors to the video on the web version of the email page. In order for this to work you need to add an anchor tag (i.e. <a id="anchor"/>) to the version of the page viewed on a web browser and add the anchor (i.e. #anchor) to the email version.

The first issue I encountered was that the text that had the video was brought in as one giant string. In order to add anchors and change it you would need to use string functions.

On top of that another problem exists, which is the many ways you can add a video to code.
Here are the different styles I found within various texts I was working with:

<object>...<embed>...</embed>...</object>
<object>...<embed.../>...</object>
<embed>...</embed>
<embed.../>
Also articles having duplicates which include

Any Combination of the above
Two or more of the same kind

The first hurdle was regular expressions. I ended up with this one for the object tag (<object(.+?)<\/object>) this catches everything inside an opening object tag and its closing object tag. We needed to add the non-greedy functionality because on text with multiple object tags it would match the very first object tag and the very last object tag and delete everything in between. The embed tag regular express is similar (<embed(.+?)(<\/embed>|\/>)) the big difference here is that it looks for the two different ways an embed tag can be closed.

I needed a way to tell if an embed tag was inside of an object tag as I did not want to add an anchor twice. Originally I had thought the array returned by the REFindnocase function gave the positions of anything matching the regular express handed to it. Which would have been perfect as I could compare the positions of the object tags with the position of the found embed tag. It however does not do that, instead it gives the position and length of the first occurrence of a match in the string handed to it. solution

I created a function that took in a string of text and a variable isEmail, so that it would know whether to add an image with an anchor or add an anchor tag. I set a variable tempString equal to the original string.

Object Loop

Goes through tempstring and finds an object tag. If it is the email version it replaces the video with an image and an anchor with an id equal to a counter incremented in the loop (The counter is used to id the anchor tag to ensure each image is anchored to the correct video.). Else for the web version it adds an anchor tag before the video also using the counter. At the end of the loop tempstring is set to MID(tempstring, position+length, length(tempstring)); which is the rest of the string after whatever object it matches. When no matches are found the loop breaks.

Embed Loop

The embed loop was little trickier because of their being embed tags nested within object tags. For the email version since the first loop replaced all the object tags (and also the embed tags within them) it was just a straight forward spin through the loop to replace any other embed tags in the code. For the web version before I entered the embed loop I looped through the text to find the object tags and set their position and length into an array (what I thought REFind would do). I then ran the embed loop and did a check to see if the position of the embed tag was between the position of the object tag and the end of the object tag (position + length) if it was then I ignored it. If it wasn't that meant the embed tag was outside an object tag and needed an anchor added to it. I used the same counter and anchor functionality as in the embed loop.

I found this task really challenging because I was hung up on the logic. I wound up taking it step by step and using a smaller sample text to figure it out. I was really surprised that the REFind function didn't do what I thought it did. Having four different ways to insert a video into code also says something about implementing and using best practices in the work place.