Task runner cant load tasks

Moving a Gulp file outside of your web root can cause visual studio too loose visibility and stop running your gulp taks.

To enable visual stuido to see your gulp task file

  • Go to Tools > Options > Projects and Solutions > External Web Tools
  • Reorder so that $(PATH) is above $(DevEnvDir)\Extensions\Microsoft\Web Tools\External

Thanks to the stack overflow post of this answer

https://stackoverflow.com/questions/31301582/task-runner-explorer-cant-load-tasks/31444245 

Advertisements

Creating a Google API Key

Back in June, google posted on blogspot they would no longer be supporting keyless to their API’s and included updates to the pricing structure for all accounts.

Changes to the pricing structure mean that maximum number of requests that can be made per day using the free tier has been reduced to 25,000 per day. Although this seems like alot, if your app heavily uses geolocation for user experience, this can total up quite quickly. Lets hope Pokemon Go has upgraded to the paid version 😉

If you are like me and use the Google maps in client solutions, you may be faced with this

GoogleMapsSomthingWentWrong

When opening the console log you may get an error like this

“Google Maps API error : RefererNotAllowedMapError”

There are a range of exceptions that can be thrown from the API, all of which have a link in the console log to the specific error. Here is the list of Javascript Exceptions
Referer Not Allowed Map Error, indicates that a request to the API has been made, but the URL of the site has not been added to the domain list to grant access.

In you solution, check your access to the API. Anyone using V3, access should look like this. Notice that there is no API key. You will need to append the script tag you are using with your new API key.

Before you continue, ensure that you have an active google account and access to the server and web root. You will need to upload a file.

How to create a new Key

Log into https://console.developers.google.com/flows/enableapi with your google account and read and agree the terms and conditions.

The opening menu will allow you to create a project for all the subdomains for your project. This can be done in the project dropdown menu.

GoogleMapsCreateAProject

Name the project appropriately.

GoogleMapsCreateAProjectName

The API Manager dashboard will then appear where you can enable API access for each product individually. We will be using the “Google Maps Javascript API”.

Select Google Maps Javascript API.

GoogleMapsAPIManager

Click the enable button

GoogleMapsEnableJavaScriptAPI

This landing page contains all of the statistics for you API usage. You now need give access to your credentials to use the service.

GoogleMapsGoToCredentails

Click the “Go to Credentials” button, which will redirect you and open a dialogue box

GoogleMapsAddCredentails

Ensure that the two drops match and click “What credentials do I need?”

GoogleMapsAddWebsiteToCredentails

Give the credentials a  name.

You will need to specify the domain name that will be used with the API. Call calls are made across HTTP. Using multiple domains for this project can be achieved by adding prefix of an asterisk.

 Click “Create API Key”

GoogleMapsGetYourCredentails

Take a copy of the key, but you can see it on the next page

GoogleMapCredentailsOverview

You will need to associate every domain with the key.  Click  “Domain verification”.

GoogleMapDomainVerification

Once the pop up has loaded click “Add domain” and add a full domain name.

GoogleMapDomainVerificationAddADomain

This will create a web hook to prove you own the domain. Enter a name and click Add domain. You will then be prompted to prove that you own the site.

GoogleMapDomainVerificationVerifyOwnership

Click “Take me there”

GoogleMapDomainVerificationVerificationMethod

This is where is gets a bit tricky.

DON’T CLICK VERIFY. 

You have now have two options to prove your ownership of the domain either a domain name provider or HTML file upload.

The domain name provider requires you to change the DNS record to include the verification number. This is the slower option as the DNS may need to propagate around the internet, which could take up to 48 hours.

GoogleMapDomainVerificationDomainNameProvider

The second option is HTML file upload. This is the quicker option, but requires you to have access to the root of the web site.

We are going to use the HTML file upload option.

To gain access to the correct menu, click on the back arrow in the top right of the screen to be redirected back to webmaster central.

GoogleMapDomainVerificationAddAProperty

Click “Add A Property” and enter the domain of your site. You will the be redirect to the HTML file upload option.

GoogleMapDomainVerificationWithHTMLFile

Follow the steps above and upload the file to the root of your website. Verify that you are not a robot and click “Verify”.

If you are running multiple sub domains, repeat this process with all the sites. However, the file will be the same for each.

Now you have created an API key, you will need to add it to the API script call in your website. Add in the key as a query string parameter and deploy to all of your domains.

src="">https://maps.googleapis.com/maps/api/js?v=3&key=">

Once you have completed this, it should take roughly 5 minutes for everything to kick in. Now refresh the page with google map and the map

ALL the Shares!!

Customizing the content that you need your users to share on social media couldn’t be easier. I have integrated this with the Umbraco CMS to allow for web administrators to tailor the content that is shared.

Add the following code to your project page and amend accordingly. Once the code is deployed to a publicly accessible URL (This will not work on your localhost!), you will need to run the URL through the following validators to ensure that your content is being found correctly.

https://developers.facebook.com/tools/debug/og/object/

https://dev.twitter.com/cards/types/summary-large-image
https://cards-dev.twitter.com/validator

Place the following in the head of your page

<meta property=”og:url” content=”@Umbraco.NiceUrlWithDomain(CurrentPage.Id)” />
<meta property=”og:type” content=”article” />
<meta property=”og:title” content=”@CurrentPage.facebook_title” />
<meta property=”og:description” content=”@CurrentPage.facebook_summary” />
<meta property=”og:image” content=”@CurrentPage.MediaFile(“facebook_thumbnail_image”).Replace(“https”, “http”)” />
<meta property=”og:image:secure_url” content=”@CurrentPage.MediaFile(“facebook_thumbnail_image”)” />

<meta name=”twitter:card” content=”photo” />
<meta name=”twitter:site” content=”@Umbraco.NiceUrlWithDomain(CurrentPage.Id)” />
<meta name=”twitter:title” content=”@CurrentPage.Twitter_Title” />
<meta name=”twitter:description” content=”@CurrentPage.twitter_summary” />
<meta name=”twitter:image” content=”@CurrentPage.MediaFile(“twitter_thumbnail_image”)” />
<meta name=”twitter:url” content=”@Umbraco.NiceUrlWithDomain(CurrentPage.Id)” />

Place the links in the body content.

<a href=”@String.Format(“https://www.facebook.com/sharer/sharer.php?u={0}”, Umbraco.NiceUrlWithDomain(CurrentPage.Id))” >Facebook</a>

<a href=”@String.Format(“http://pinterest.com/pin/create/link/?url={0}&media={1}&description={2}”, Umbraco.NiceUrlWithDomain(CurrentPage.Id), CurrentPage.MediaFile(“pintrest_thumbnail_image”), CurrentPage.pintrest_summary)”></a>

<a href=”@String.Format(“http://twitter.com/intent/tweet?status={0}”, Umbraco.NiceUrlWithDomain(CurrentPage.Id))”>Twitter></a>

HTML 5 offline apps with MVC

If this is your fist exposure to the HTML 5 Manifest, I recommend HTML 5 Rocks beginners guide!

Offline applications are becoming increasingly popular for your user base to continue interacting with your product when an active internet connection is not available. This makes is easier to demo a product when you visit a client.

Below I have included some real world scenarios that you may encounter during expanding an application to be made available offline.

Authenticated views

On load, your browser will try to load your manifest files and try to resolve each of the URL’s to cache the content. If there are pages in the manifest that are behind some sort of authentication process, the manifest file will fail and the cache content will be deleted as the browser will receive a 404 error. The same applies if your authentication process is role based.

Cross site scripting

With ASP.NET you can stop Cross Site Request Forgery (CSRF) by including the anti forgery token. If your page has one of these and it has been included in the manifest, your page will throw an exception as the cookie would have been expired.

Content

When your content team update the website, they will expect to see the content straight away. The manifest file can’t detect if there has been a change to the content of the cached page, it will only know of there is a change once the manifest file has either been changed or deleted.

You only need to change one character in the manifest file for the browser to request a new one when the application is back on line. One way around this is to programatically add something like a date or a version number in the manifest for the browser to request it again.
Check out Sergi Dorogin‘s blog on how to do this.

By doing this, when the browser connects back to the website, the manifest would have change and the new content will be brought down cached in the browser.

Client side events

On load, your browser will go through a series of events to handle the manifest. Ben Nadel has a great post on the events and how to use them.
You may be asked to programatically void the cache client side to force a new one down. This won’t work as the client side events aren’t designed to do this.