Nikki's Lunch

The image in <canvas> appears to be bad quality when we scale it down. Apparently it is due to linear interpolation algorithm used by the browser because it is fast. I also learn that scaling down requires resampling while scaling up requires interpolation. Searching online, I found pixel perfect resampling algorithm. http://stackoverflow.com/questions/18922880/html5-canvas-resize-downscale-image-high-quality I thus ran the image over the algorithm before having the canvas redraw it. It is a good stuff and improve the quality of the image.

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.SetResoluti...

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.

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. O...

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!

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.

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