Some background on what I have installed:

• Windows 7
• Visual Studio 2008/2012
• Google Chrome and Firefox
• Sublime Text 2
• …HP Crapware…

I am currently learning Backbone.js, so I was going through some tutorials on how to hookup a Model, View and Collection.  The first thing I did was pull jQuery, Backbone and Underscore from a CDN, and put in some of the tutorial code for the view and the model into the html page using my editor of choice, Sublime Text 2.  I ran the file in Chrome, and it works! Great.  The html file looked a bit messy with all this javascript, and I needed to organize my thoughts for learning a View and Model, so I made a separate js file for my View and another for my Model… copy, paste, save, add the reference in the html file, save again.  Updated my references:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script src="view.js" type="text/javascript"></script>
<script src="model.js" type="text/javascript"></script>

OK done. Open up Chrome, and run the file, console spits out:

Uhmmm….???  Well at least Chrome gives some feedback, Firefox didn’t output anything to the console, and the page just didn’t work.  After some googling, I came across a few people who have encountered this issue:

http://stackoverflow.com/questions/12003107/resource-interpreted-as-script-but-transferred-with-mime-type-text-plain-for-l

Apparently, when you install Visual Studio 2012 it decides to add a key in the registry defining the content type.  What does it define it as?

text/plain!!!

Why Microsoft, why??

Solution

The solution is simple, but requires a change in the registry, so please don’t message me if you don’t know what you are doing, and break your registry.

1. Run -> regedit
2. Go to HKEY_CLASSES_ROOT\.js
   
3. To fix, there are two options
   • Open up the entry ‘Content Type’, can change the value to ‘text/javascript’ (Recommended), or
   • You can remove the entry ‘Content Type’ altogether, (I check my old computer, and the entry doesn’t exist).

That’s it, hope you don’t flip your table in rage!

So, the issue is when making changes to a table design, and there is data in the table, SQL Server will put the data in a temp table, drop the table, and recreate it with the changes, and then reinsert the data.

If you are changing an existing table, with potentially thousands of record, then I could see the benefit of keeping this feature on, not only will it take a long time to save the changes (because it will have to backup all the records, then reinsert them), but it protects you from accidentally corrupting your data, or making changes if you don’t know what you are doing.  However, if you are a developer, and you are building a new app, and need to tweak your DB design, then this can get annoying.

So you want to turn it off?

Tools -> Options -> ‘Designers’ tab

-> Uncheck ‘ Prevent saving changes that require table re-creation’

Problem Fixed!

The Experiment

The basis of this experiment comes from an article I ran into by Alex Le, where he created a wonderful piece of Javascript code to Detect the connection speed of a client.  A little background on his code:

• It takes the image url, and the byte size of the image.
• Gets the current time, queues up a new image object, and using the Image.onload() event to get the time after the image has completed loading.
• Takes the difference of the start time and the end time.
• Uses the byte size of the image divided by the difference in time to find the Kbps.

Simple enough.  Time to set a benchmark. Desktop tests using Speedtest.net via Toronto to New York (Optimum Online):

Mobile speed tests using Speedtest.net iOS app over 3G via Toronto to New York (Optimum Online):

Single File Test

Using the Javascript code from Alex Le, I have made a demo page which will download a 712,817 byte image (800 x 600 resolution of random noise), and output the speed and time it took to download.

Bandwidth Speed Test – Single File

Here are my results:

Using the benchmark reference, it is clear that the numbers returned for the desktop tests are clearly below what was expected, mobile was closer but still under.  However, since we know the exact size of the file (712,817 bytes), and we can use either Chrome Developer Tools or Firefox’s Firebug to check the runtime (the time it took to download), with some math we can validate that the speed returned is accurate.

Why the difference in speed? Something Alex Le touches on, is that the file is simply not large enough to get an accurate measurement.  It has completed downloading the file before hitting peak bandwidth, we can clearly see this on the desktop, mobile tests look more accurate because it is a lower bandwidth device which can get closer to its peak.

Multiple File size Test

If file size is the issue, then lets see what reasonably file size will bring a better result.

Bandwidth Speed Test – Multiple File

While we hit the mark for the Mobile test, the Desktop speed is still far off, but an important number out of this test is the time for the largest file which is almost 5 seconds, this number is in the range where it can start to impact the user experience.

So what can we use this for?

When we look at the numbers we can get a good idea of how large the bandwidth pipe will get as the browser downloads the webpage.  Using the file size 712,817 bytes (the same as in the Single file test, and Test 3 from the Multiple File) as the relative size of many websites, we can average the bandwidth will get up to around 2MB on Desktop and take 2.6 seconds to download a webpage, and on mobile 1.5MB and 3.6 seconds to download.  Referencing the article “How Loading Time Affects Your Bottom Line“, it is the time it takes a page to load which is the important factor when considering user experience, and from the Multiple File test, we can see the estimated load times for various sizes.  If we target a page load time to be under 2 seconds, that means that on the Desktop we need to target around 400KB of data to be transferred  and on around 177KB on Mobile.

By controlling what is being sent to the client, we can speed up the initial load time, here are a few thing to consider:

• Lazy loading images
• Lower resolution images
• Lazy load content
• Prioritize media to be loaded (example: disable videos; turning off full screen backgrounds)

Finally…

This was just a simple experiment to see if I could get the client bandwidth using Javascript, and I can see that there is a lot more work needed to get the accurate speed.  I think it makes more sense to go down the path of figuring out how to control what your website sends down the bandwidth the client is giving you, within a reasonable time.

I combined both tests: Connection Speed Test Demo

References:

Connection Speed Detection with Javascript

Detect connection speed with JavaScript

There are many way to implement tabs on your site.  Here is my way:

HTML

<div class="tab-wrapper">
    <ul class="tab-title">
        <li class="tab1 active"><span>Features</span></li>
        <li class="tab2"><span>Specifications</span></li>
        <li class="tab3"><span>Related</span></li>
    </ul>
    <div class="tab-container">
        <div class="tab1 active">Feature Content</div>
        <div class="tab2">Specification Content</div>
        <div class="tab3">Releated Content</div>
    </div>
</div>

The few key things to the HTML is to keep your tabs (the actual tabs) grouped in their own div, and keep the content grouped in a separate div. As you can see, the class name for each tab name(in <li>) corresponds to the class name of the div which has the content. So you can name the classes whatever you like, but it needs have both an li (for the tab/title) and a div (for the content), and can only have that class name in it and/or ‘active‘ which you will find out in the jQuery. I keep everything housed in the ‘tab-wrapper’ for some isolation. Also make the first tab active, so that something is selected on page load.

CSS

<style>
.tab-wrapper { display:block; position: relative;}
    .tab-wrapper ul.tab-title { clear:both; width: 100%; }
    .tab-wrapper ul.tab-title li { float:left; display: block; text-align: center; cursor: pointer; background: #333; color:#CCC; }
    .tab-wrapper ul.tab-title li.active { background: #CCC; color:#333; }
    .tab-wrapper ul.tab-title li:hover { background: #CCC; color:#333; }
        .tab-wrapper ul.tab-title li span { }
.tab-wrapper .tab-container { clear:both; float:left; width: 100%;  }
    .tab-wrapper .tab-container > div { display:none; border: 1px solid #111; }
    .tab-wrapper .tab-container > div.active { display:block; }
</style>

These are all the styles you should be worried about, style as you please, the most important is to make sure ‘.tab-container > div‘ is ‘display:none‘, which will hide all the child divs in the container, and that ‘.tab-container > div.active‘ is ‘display:block‘ so it will display the active tab.

Javascript

<script>
$(document).ready(function(){
	$('.tab-wrapper ul li').click( function() {
		$('.tab-wrapper ul li').removeClass('active');
		$('.tab-wrapper .tab-container div').removeClass('active');
		var className = $(this).attr('class');
		$(this).addClass('active');
		$('.tab-wrapper .tab-container').find('div.'+className).addClass('active');
	});
});
</script>

So what we are doing is managing the class ‘.active‘, which determines what is being displayed. We do this on the ‘click‘ event for the tab titles. The first step is to remove the ‘active‘ class from the tab titles and the tab content containers, this is so we can isolate the class name, which matches the content. Store the class name of the ‘<li>‘ that was clicked, and use it to find and add the ‘active‘ class to the content container.

Tab Demo

Feel free to use, modify, and share!

Background

Well, after some searching around it seems to be a known bug with Fireworks.  Let me explain, I have a simple two monitor setup running on Windows 7, monitor 1 has a resolution of 1920×1200, monitor 2 has a resolution of 1920×1080.  The last time I used Fireworks, I used it on my second monitor, did some stuff, and exited on that second monitor.  Today, I opened it, moved the Fireworks window to my main monitor, opened the image to modify, and found out the tools didn’t work.

Bug

The bug is that Fireworks and Windows 7 seem to have an issue with communicating the mouse coordinates with the screen resolution settings.  When you first start Fireworks, it will receive the correct dimensions and coordinates of the window from Windows, however once you start moving, resizing or maximizing, all is lost, and Fireworks doesn’t know where your mouse pointer is.

Solution

Put Fireworks where you want it.  Exit the program.  Start it again. Do your thing, and don’t move the window.  I’ve noticed that it still doesn’t seem to work while maximized, so I just make it as large as possible.

Reference: http://www.webmasterworld.com/website_technology/4250377.htm

1. Find the font you want to use (.eot/.woff/.ttf/.svg), and upload it to your site.
2. Open up your CSS file, and add the following:

   @font-face {
   	font-family: 'MyWebFont';
   	src: url('webfont.eot'); /* IE9 Compat Modes */
   	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   	     url('webfont.woff') format('woff'), /* Modern Browsers */
   	     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
   	     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
   	}

   Replace ‘MyWebFont’ with the name of the font you are using, and make sure the path to the font is correct.
   See The New Bulletproof @Font-Face Syntax for a wonderful explaination.

3. Next, is simply add:

   font-family: 'MyWebFont';

   where you like in your CSS to magically have your new font implemented.

The Issue

404 File Not Found!

What?

Unfortunately IIS doesn’t may not be aware of the mime type for the font files (.eot/.woff/.ttf/.svg), so it refuses serve it to the client. This can resolved very easily by adding a few lines to your webconfig file, in :

<staticContent>
    <remove fileExtension=".eot" />
    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    <mimeMap fileExtension=".otf" mimeType="font/otf" />
    <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
</staticContent>

Ref: IIS 7 Web.config change for HTML5 and CSS3 mime types

PS: Ban Comic Sans

The problem:

I have a stored procedure which inserts a new row into a table.  I need the primary key or @@IDENTITY/SCOPE_IDENTITY() returned.  It is not. Why?…This is what the code generally looked like:

CREATE PROCEDURE dbo.table1

@firstname NVARCHAR(255),

@lastname NVARCHAR(255)

AS

INSERT INTO table1 VALUES (@firstname, @lastname)

SELECT SCOPE_IDENTITY()

Now, when I run the query in SQL Server, I get the output I want, which is a single row containing the primary key which was just inserted.  When the query is run in my app, the entry gets inserted, but no value is returned (side note, I am not using Visual Studio, or any other IDE with debugging tools, so all output is ending up on an rendered html page).

Solution:

In the stored procedure, (after my parameters but before the logic) put:

SET NOCOUNT ON

This will suppress the SQL Server message regarding the number of rows affected.

SET NOCOUNT ON prevents the sending of DONE_IN_PROC messages to the client for each statement in a stored procedure
From: MSDN

It’s an annoying little quirk, which I am sure can be useful, but in the long run seems to send unnecessary data across the network, and if you look at the above MSDN article, Microsoft suggests that by turning it on, you can get a significant performance boost, especially when your stored procedure will affect many rows in your database.

Here is the final:

CREATE PROCEDURE dbo.table1

@firstname NVARCHAR(255),

@lastname NVARCHAR(255)

AS

SET NOCOUNT ON

INSERT INTO table1 VALUES (@firstname, @lastname)

SELECT SCOPE_IDENTITY()

Reference:

@@IDENTITY crisis

SET NOCOUNT (Transact-SQL)

Here’s a brief of the error message:

Setting up libgtk2-ruby1.8 (0.19.3-2ubuntu1) …

Setting up libgtk2-ruby (0.19.3-2ubuntu1) …

Setting up rbbr (0.6.0-3ubuntu1) …

Errors were encountered while processing:

gnome-icon-theme

empathy

evince

evolution

evolution-exchange

gnome-control-center

Setting up gnome-icon-theme (2.31.0-0ubuntu2) …

update-alternatives: error: alternative path /usr/share/icons/gnome/scalable/places/ubuntu-logo.svg doesn’t exist.

dpkg: error processing gnome-icon-theme (–configure):

Looks like some images were not reinstalled during the rollback.  Here’s a link to the resource:

http://www.parsix.org/browser/pkg/vinnie/main/gnome-icon-theme/trunk/debian?rev=6662

Copy the all the .svg files into the /usr/share/icons/gnome/scalable/places/ path, run:

sudo apt-get clean all
sudo apt-get update

Then to verify everything is working correctly:

sudo apt-get install -f

Hope it helps!

Pivot in Access

Quick example of Access:

TRANSFORM SUM(T1.Amount) AS SumOfAmount
SELECT T1.ID, T1.Name, T1.Date
FROM T1
GROUP BY T1.ID, T1.Name, T1.Date
PIVOT T1.AmountType

So as you can see, in Access you can basically define anything as an AmountType (in this context you would input this in T1 in the AmountType column), and it would display in your pivot table.  So in the future you could add a Discount type or another Tax type directly into the source table, and the Pivot table would recognize the change.

Pivot in SQL Server

In SQL Server, the columns must be defined in the Pivot query for it to work. If you are using a View, there doesn’t seem to be a dynamic solution, if there is please let me know. Here’s my View:

SELECT *
FROM (
SELECT T1.ID, T1.Name, T1.Date, T1.AmountType, T1.Amount
FROM T1) AS S
PIVOT (Sum(Amount)
FOR AmountType
IN ([Cost], [GST])) AS P

So, any additional Type you include in your source table must be included in your Pivot table.

Dynamic Pivot in SQL Server

A Dynamic Pivot table can be created, but you have to generate the SQL statement manually and execute it in a Stored Procedure:

DECLARE @SQL NVARCHAR(2000)
DECLARE @QUERY NVARCHAR(4000)

SELECT @SQL = STUFF((select distinct '],[' +AmountType from T1 FOR XML PATH('')), 1, 2, '') + ']'

SET @QUERY = N'SELECT *
FROM (SELECT T1.ID, T1.Name, T1.Date, T1.AmountType, T1.Amount
FROM T1) AS S
PIVOT(Sum(Amount)
FOR AmountType
IN (' + @SQL + ')
) AS P'

EXECUTE (@QUERY)

Here are my sources (many thanks):

Pivots with Dynamic Columns in SQL Server 2005/2008

Pivots with Dynamic Columns in SQL Server 2005

Dynamic Cross-Tabs/Pivot Tables

Fix

I accidentally solved this.  I just went select all (alt-a), under the ‘Review’ tab, select ‘Set Language’, then whatever language you want to use.

No idea how the language changed, but here you go, hopefully it helps someone.