Black Background on Combined Images

I was asked to research about a strange behavior when we combine two images, each image becomes small and the rest of the extra space is filled with black color. After doing a bit of research and making sample applications, I found out that it has something to do with image dpi.

Each image is scanned with 240 dpi while Windows default to 96 dpi. That means, the image is scaled down, so I simply get the least dpi and set it as dpi for the combined image. It works for now, though I can see the potential problem if somehow the horizontal and vertical dpi are different.

Dim image1 As Bitmap = ...(code to get image) --> has 240 dpi
Dim image2 As Bitmap = ...(code to get image) --> has 240 dpi

Dim combinedImage As New Bitmap(...) --> default to 96 dpi

Dim horizontalResolution As Single = Math.Min(image1.HorizontalResolution, image2.HorizontalResolution)
Dim verticalResolution As Single = Math.Min(image1.VerticalResolution, image2.VerticalResolution)

combinedImage.SetResolution(horizontalResolution, verticalResolution)

IdentityServer AuthorizeAttribute

I attempted to use ResourceAuthorize attribute in my personal project which uses Thinktecture IdentityServer 3. When testing around, I suddenly realize not only ResourceAttribute is not working, the AuthorizeAttribute was broken as well. Spent hours testing and finally found out that it was caused by a slash ("/") at the end of my issuer.

So "https://www.test.com/" does not work, but "https://www.test.com" works somehow. The AuthorizeAttribute now works but at this time, I'm still checking why troubleshooting my ResourceAttribute.

Edit: Apparently my ResourceAttribute was not working because one of the scopes is invalid and my intended scope is after that which eventually was not processed. And the requested claims will be included in the access_token.

Putting 2 HTML Elements Side by Side

Many times I have to battle on which methods are the best in putting two HTML elements side-by-side. Let say we have the following elements:

<div class="Container">
   <div class="LeftColumn"></div>
   <div class="RightColumn"></div>
</div>

Based on my own experience and preference, I usually use one of these 3 css options. For clarification, they are by no means comprehensive ways to style two elements nor the points are meant to capture all possibilities.

Option 1:

.LeftColumn, .RightColumn {
   display:inline-block;
   width: 50%;
}

Option 2:

.LeftColumn {
   float: left;
}
.RightColumn {
   float: right;
}

Option 3:
.Container { display: flex; flex-direction: row; justify-content: space-between; }

Each option has its own characteristics.

Option 1:

• It will create a gap between the two elements.
• If browser is shrinked width-wise, the second element will not be automatically wrapped.

Option 2:

• The first element will be anchored to the left and the second element will be anchored to the right.
• To prevent the next element from being rendered unexpected, a third element with css property of clear: both is needed.
• If browser is shrinked width-wise, the second element will be placed underneath the first.
• vertical-align property and some other properties have no effect.

Option 3:

• Same points as option 2 but without the need of the third element.
• New CSS 3 properties but it has more ways for customization.

Import Text Files with Garbage Characters

I had a case in which we use VB.NET to import a text file and it didn't work properly. My code at first was:

Dim someString As String = Encoding.ASCII.GetString(someByteArray)

After researching for a while, I found out that the text file is encoded using UTF-8. Thus, switching it to the following code make it work properly:

Dim someString As String = Encoding.UTF8.GetString(someByteArray)

Encoding matters!

The agony of display: inline-block;

Ok, I have two div tag that I want to put side by side, so I use display: inline-block; css property.

<div style="display: inline-block; width: 30%;">...</div>
<div style="display: inline-block; width: 70%;">...</div>

I'm surprised to see there is a gap between the two divs somehow. And found out the way to fix the problem is to bring the divs together in the markup without any gap:

<div style="display: inline-block; width: 30%;">
...</div><div style="display: inline-block; width: 70%;">...</div>

Ugly, yes, but it fixes the problem.

Edit: I have another case in which I want a gap between the two divs, so I don't bring the two divs together but I found out that somehow the second div is being put under the first one when printing. I ended up setting the second div with width of 69% so the total is 99% instead of 100% to make it work.

Autocomplete and Radio Button

When I created my web page, I noticed that the state of my radio buttons stays when I navigated away to another page and then back to the same page. I was confused at first and quickly found out that by default the browser (in my case, firefox) has autocomplete enabled by default and was saving the state somehow. Quick search online allow me to turn the feature on/off by adding autocomplete attribute.

<input type="radio" autocomplete="off"/>

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

HTML Object Tag and Silverlight Plugin Reload

I have a Silverlight plugin that I don't want it to be refreshed or reloaded. But in my case, it always reloaded itself though nothing on the page caused a postback. Later on, I found out that I have a javascript code that hide and show the container of the plugin (div with id of someDiv in the code below).

<div id="someDiv">
  <object data="data:application/x-silverlight-2," type="application/x-silverlight-2">
       ...
   </object>
</div>

Apparently that causes the object tag to reload the plugin. My workaround thus is to set the height of the object tag to 0 px, that solves the problem.

ASP.Net Membership, Create User and Invalid Email. What?

I was testing ASP.Net Membership user registration logic in my server. It runs fine till it throws "The E-mail supplied is invalid" error. Weird thing is I found out that all my data are correct through debugging and double checking my entry. Quick search says that requiresUniqueEmail attribute on Membership provider tag set to true is the problem. Ironically, I only have one email in the database.

Brushing my confusion aside, I remove the attribute, but it still doesn't work. And eventually found out that setting requiresUniqueEmail="false" fixed the whole thing.

Later on I also found out that by default, the attribute has value of true. That explains why removing the attribute doesn't work.

https://msdn.microsoft.com/en-us/library/system.web.security.membershipprovider.requiresuniqueemail(v=vs.110).aspx

I have yet found out why it doesn't work when it has true value and no data in the database. Hopefully one day when I have time to dig deeper.

ASP.Net Migration Error

I did a lot of updates on my project and since I use Entity Framework Code First, I depend on migration commands. This time, my Visual Studio suddenly does not recognize the commands. I have the following error message when attempting to enable migration:

The term 'Enable-Migrations' is not recognized as the name of a cmdlet, function, script file, or operable program

Some people say to reinstall entity framework with the following command:

Install-Package EntityFramework -IncludePrerelease

But it didn't work for me since I have it installed, so I find a way to force reinstall the package which works! The command as follow:

Update-Package -reinstall EntityFramework -IncludePrerelease

Deleted Data Row and LINQ

Another interesting programming problem. I have the following code in VB.Net which throws error:

dataRow.Delete() 'One of the rows in dataSet

dataSet.Tables("TableName").Rows.Cast(Of DataRow).FirstOrDefault(Function(dr) dr("ColumnName") = certainCondition)

Problem

The error says "Deleted row information cannot be accessed through the row". Pretty clear message, so I did the following:

dataSet.Tables("TableName").Rows.Cast(Of DataRow).FirstOrDefault(Function(dr) dr("ColumnName") = certainCondition AndAlso dr.RowState <> DataRowState.Deleted)

Solution

But the code above throws the same error. Apparently the deleted check has to be the first condition which again makes sense. Thus, the following code runs perfectly fine:

dataSet.Tables("TableName").Rows.Cast(Of DataRow).FirstOrDefault(Function(dr) dr.RowState <> DataRowState.Deleted AndAlso dr("ColumnName") = certainCondition)

There you go.

If Operator and Nothing on VB.Net

I encountered an interesting thing recently in my programming experience. I have the following method:

Private Sub SomeMethod(parameter As Nullable(Of Double))
   If parameter.HasValue Then
      'Do something
   Else
      'Do something else
   End If
End Sub

Problem

To call it, I use the following:

SomeMethod(If(someObject.IsTrue, Nothing, someDouble))

However, it didn't work as I expect it to be. The one that confused me is, the HasValue always returns true although Nothing is being passed to the method. 

Solution

It took me awhile to realize that the If operator in this case will return the same type for both results (true and if false). And in VB.Net, Nothing equals default value which for Double is 0.0 while I want Nothing to act as Null. Thus to fix the issue, I have to rewrite it as:

If someObject.IsTrue Then
   SomeMethod(Nothing)
Else
   SomeMethod(someDouble)
End If

Truthy or Falsey on Non-Existing Element Using jQuery Selector

In JavaScript, there are terms called truthy and falsey. It is a very interesting way to find if an expression evaluates to true or false, so I decided to make use of it to evaluate whether the element selected by jQuery exists. For example:

if ($('#elementId')) {
   //Do something if element exists
} else {
   //Do something else if element doesn't exist
}

Problem

When I used it against a jQuery variable that is supposed to hold HTML elements that met certain selector, it didn't work correctly. The problem is there is no element in the variable but it evaluates to true. This is due to jQuery returns Object [ ] which is empty array of object and the array itself exists thus the expression returns true.

Solution

Some suggestions I found online are:

1. Use length properties, so it becomes if ($('#elementId').length){}
2. In jQuery version 1.4 or above, you can use $.isEmptyObject() function

Another way that works for me is to get its first element:

if ($('#elementId')[0]){}

The one that I often used lately is:

var elements;

if (elements && elements.length) { }