Quick Tip

Shun window.onload in HTML5 games

A lot of javascript developers have been using window.onload casually in their code but this is something which we should completely avoid since window.onload is only called once and if there are multiple window.onload events, then only the last onload event gets called. In our Phaser games we normally initialize the game as following

window.onload is called after the main HTML, all CSS files, images and other resources have been loaded and rendered. We don’t want to stall loading of the game and its resources until everything else on the page has been loaded and rendered so as soon as initial HTML document has been loaded and parsed, we can start loading our game without waiting for page stylesheets, images, etc to finish loading. An alternate approach for this using vanilla javascript would be

This starts loading the game as soon as HTML DOM is parsed and ready and no fear of having to change[…]

Add Link to Rating Feature in Windows UWP App

In oder to add a link to rate your app following code can be used in javascript UWP app

Replace storeID with your app’s Store ID and call “rate” method on a button click event which will open the app in windows store with rate popup overlay.

App Promotion Trick for Windows Store App

If you are a publisher who has published multiple UWP apps in the windows store and want to add a catalog of all your other apps in your UWP app, then there is no need to write a lot of code to achieve this capability. Microsoft has provided URI scheme to launch the Microsoft Store app to specific pages in the store. We can use search capability to find products from a specific publisher and simply launch that URI using LaunchUriAsync API method. For ex. in order to launch all products published by some “XYZ Corporation” in the windows store we can simply call the following URI ms-windows-store://publisher/?name=XYZ Corporation Following code example demonstrates how this can be achieved using 3 lines of code in Javascript store app

Simply call this method on on some action such as a button click and it will launch a new popup window containing all apps from[…]

Open Share Dialog from Universal Windows Javascript App (UWP)

Opening Share Dialog Popup in Windows Universal App is very simple and with a few lines of code, this functionality can be quickly added to any app. The code below can be used to share an app’s web URL (you can use MS Store URL of the app as well) in UWP Javascript application

In the application page ready event we need to initialize DataTransferManager and attach an event listener for “datarequested”. In that method you can set title, display, web link properties which will be used by the dialog popup. Store ID of the app can be found from “App Management -> App Identity” page of the specific app in your developer account. In order to launch Share Dialog Popup simply call “showShareUI” method on some action (such as some button click etc). This will open dialog box as following Share Dialog Popup displays the title and description at the[…]

Quick Tip

Display CPMStar ads at the start of HTML5 game

Create a css file as following

Create game HTML as following

Replace cpmstar_pid with your pid The ad is initialized and loaded as soon as HTML is loaded. The ad is positioned on top of HTML5 game area. We will initialized a timer which will enable closeAd button after a predefined interval (normally 5 or 10 secs)

Below is the skeleton game code.

 

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

Trim object info in Javascript

Use this method to trim JS object values and display only the required info (which I do a lot for deugging purposes). Here is what gives me a concise info I am looking for while debugging my code in JS.

Now the example on how to use it is as following

With some objects having hundreds of properties and printing those values and searching for just the right info is an easy task with these functions.

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

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[…]