Quick Tip

WebP Image Fallback Options

WebP is a relatively new image format which provides lossless and lossy compression for web images. It was developed and released by Google in 2010. Accroding to Google WebP format saves around 25-30% of image size which is a big saving for image-heavy sites. Even for normal sites, it saves a lot of network bandwidth and results in overall performance improvement of a web site (in turn a better ranking by search engines). Even though this format has been there since 2010, it is still not supported by all browsers.The good thing is that it is natively supported in Google Chrome and the Opera browsers which cover for bigger chunk of browser market share. For mobile sites this format has become a necessity to optimize load time of websites on mobile. Google provides tools to convert images from one format(png, jpg etc) to webp and viceversa https://developers.google.com/speed/webp/ If we are using webp format of[…]

Quick Tip

Configure X-XSS-Protection in ASP.NET

To enable X-XSS-Protection header in IIS add following to your site’s Web.config file.

Read more about X-XSS-Protection header here.

Quick Tip

Commands to Switch Hyper-V role on windows PC

Open command prompt with admin previledges and run following command to disable Hyper-V role on windows PC

Reboot the system after the command is run. Use the following command to enable the Hyper-V role again

Reboot the system after the command is run.

Quick Tip

Solution: Windows PC not reading Xiaomi Phone via USB cable

The first step is to enable developer option in the phone. Go to Settings -> About Phone and tap MIUI version 6 times. You will see a pop up notification confirming that the developer option is enabled. Now enable USB debugging in the phone Go to settings -> Additional Settings -> Developer options then enable USB debugging. Now connect your Xiaomi phone to your Windows PC via USB cable. When you connect phone to the PC, it might ask to select an option to connect for charging only or files transfer. Make sure to select files transfer option. On your computer go to PC -> C drive (or whatever is the installation drive of your Windows) -> Windows -> INF -> Look for wpdmtp.inf. Right click on wpdmtp.inf and click install with your phone plugged in. Now you should see the phone showing up under PC.

Compile Cordova App for iOS

I recently planned to compile my Phaser games for iOS App Store. These games were build using Cordova CLI and have already been published on Android Store so I already have a functioning game which was to be ported to iOS. I decided to document the steps I had to follow to get my game compiled and published to iOS App Store. You can develop the game on any platform of your liking but in order to compile and publish these games to iOS App Store you do need to have a Mac. It can not be done from Windows or any other platform. Steps to compile the game: Download MacOS installer for Node.js and install it on your Mac. Go to App Store on your Mac and install latest version of XCode. You need XCode to build the game. Open Terminal console (Finder -> Applications ->Utilities) on your MacOS and install cordova using npm utility of Node.js by[…]

Quick Tip

Send Email from GoDaddy Asp.Net Application

In my previous article we looked at how to use Google account and SMTP server to programatically send mail to an email address. We can use the same code with minor changes for GoDaddy application which is using shared hosting. We will develop a “Contact us” page here using SMTP server from GoDaddy. The first step is to create a web service

The app settings are as following

The HTML page code for the contact us page is as following

Now add the java script code as following in our HTML

The complete code can be downloaded from here. Be aware that if you are setting email address entered by the user in the “from” address while sending the email, it may end up in SPAM folder of your mailbox. Alternatively you can use “from” and “to”addresses from your application domain itself and append user’s email address in the mail[…]

Quick Tip

Send Email from Asp.Net Application using Google Account and SMTP

In order to send mail from the application we can use SMTP server from Google (which off course has certain limitations). We can use a Google mail account and send the mail using SMTP server from Google. This works very well for Asp.net applications which need to use a simple form such as “Contact Us”. An example of this is explained below. We will use AJAX to send the request to an ASP.Net web service which sends the mail from the server side. Create a web service as following

In order for the method to be called using AJAX make sure to uncomment [System.Web.Script.Services.ScriptService] in the web service code. Add following appsettings in web.config

Change values and replace email and password to your account credentials. Leave SMTPhost and port as-is. We will now create a simple HTML page to input the data

Now the last piece is[…]

Quick Tip

Different MasterPage for Mobile and Desktop in ASP.NET

Now a days more people have been accessing the web on mobile devices as compared to desktops and creating mobile versions of websites have become a necessity. In ASP.NET Web Forms application we can switch between different mastre pages basis which device user is using to access the site. This gives a lot of advantages such as changing layout of the pages, applying different style sheets and even load different content if the need be. To achieve this im ASP.NET Web Forms application simply define a base page as following

Now rest of the pages (such as example below) can simply inherit base page and all those pages will have different master pages for mobile and desktop.

We can simply check for IsMobileDevice property to find out whether or not device is mobile. This option checks of most of the available mobile devices and return a result but the[…]

Quick Tip

Pass Values from One Page to Another

When we need to pass values from one page to another, two most common ways it is implemented is to either use a query string parameter and append the data to query string in the URL, or use a postback to post the data using form submission. Recently I was required to pass some values from one page to another page so I went ahead and did a quick query string implementation to pass the values which worked pretty well until I looked at the analytics data which reported same page with different query parameter as different URLs. I didn’t like it (neither did my SEO team) since the query string parameters did not change the functionality of the target page. It just happened to be some additional data for the target page so I decided to go for alternate options. Next option was to use session state but that data is stored on the server[…]

Quick Tip

Responsive Image Overlay over Another Image

I was working on a gaming site which would have two modes to play and a title for each game. I decided to display two options on the game logo itself and since the entire website was responsive, I needed to handle some responsive stuff which I wanted to share here. Bootstrap 4 was used for overall responsive behavior in the site and the additional CSS required to handle individual game title is as following

There are 3 overlay images divided equally in height. Top container is set to relative and overlay images sections are set to absolute taking 1/3 height each. See below for the working example Click here to check this on your system. Try changing the browser window size to see how it works. The complete code for this is as following

You can download example code here.