Javascript

Microsoft Edge Picture-in-Picture

Small update: Edge now supports picture-in-picture with a little button out of the box! So you no longer need the code snippet.

Here’s a quick little helper to pop out video players in Microsoft Edge.

requestPictureInPicture

Edge (like Chrome these days) supports picture in picture mode for videos but it’s not always apparent how to actually pop out a videoplayer. Here’s a quick one-liner that you can try in the browser console:

Uploading files - a simple approach

Here’s a nice way of getting images to your server using a little bit of Javascript and HTML. We’ll be using the FileReader API that comes with Javascript and is supported in all major browsers.

For this example we’ll need some HTML from which we can select files and show a preview:

<div>
    <input id="fileInput" type="file" />
    <button id="clearFile">Clear</button>
    <button id="uploadFile">Upload</button>
</div>
<div>
    <label>Preview</label>
    <div>
        <img id="preview" />
    </div>
</div>

We have an input element set to type="file" to select the file(s) we want to upload. Two buttons for submitting and clearing our inputs and an img where we can show a preview. This demo only depends on jQuery, which is only used to make performing a POST to the webserver so much simpler. Feel free to substitute that with whatever you like best.

Date validation in AngularJS

Another angular post! This time we take a look at how to create a directive that ensures the user enters a valid date (and/or time).

Let’s start with some boilerplate stuff first. I’m going to assume that you have something working Angular already, we will only cover the date validation directive in this post. Here is some HTML.

<div ng-app="validDateApp">
    <div ng-form="myForm" ng-controller="testController">
        <input ng-model="myDate" my-valid-date name="myDateInput" type="text" />
    </div>
</div>

And it’s Angular app to go with it:

Simple dialogs with AngularJS and TypeScript

While working an Angular (1) web app I ran into the age-old problem of showing the user notifications when certain conditions are met. Show them a little pop-up, in simple terms.

So what does it take to show a popup? We know the dialog element exists but cannot be used in this case due to browser requirements. The easiest way I could think of is adding a fixed positioned div the the user on top of all other content. Add some CSS in there to make it look nice and we have dialogs.

The dialog element

I was grinding my teeth on a z-index problem today. I needed to cover the entire webpage to show something was happening and nothing else was to interrupt. Some elements (for whatever reasons) were poking through the overlay and nothing seemed to fix my problem with the plain old position: fixed element I was using to cover the page.

So after getting fed up with looking for possible fixes I spent a bit of time looking for alternatives and came across the <dialog> element.

Express route management

Setting up a webserver with Node and Express is easy very easy.

Here is a small example:

var express = require("express");
var app = express();

app.get("/", function (request, response) {
	response.send("Hello world!");
});

app.listen(3000);

Running this and navigating to http://localhost:3000 will give you the following result:

If you only have a few of those endpoints (app.get etc.) things will be fine living in the same index.js file. But what if this starts growing? You add more and more endpoints to your index.js and before you know it you have a 1500 line Javascript mess. Here is a good way of tackling that problem before it rears its head.

RabbitMQ with NodeJS on Cloud Foundry

I’ve been having some more fun with Cloud Foundry deploying Node apps and wanted the apps to communicate in a more disconnected way. A messaging system is a good fit for such a requirement and lucky for me, (Pivotal) Cloud Foundry has RabbitMQ-as-a-Service for me to use.

So what are we working with? The code is Javascript running on Node, RabbitMQ for the messages and Cloud Foundry is hosting it all.

POST-ing JSON to an ASP.NET Web API controller

So you want to post some JSON to an ASP.NET Web API controller?

I bet you’ve written this more than you wanted to:

$.ajax({
	type: "POST",
	url: url,
	data: JSON.stringify(data),
	dataType: "json",
	contentType: "application/json; charset=utf-8"
});

I hate that work-around where you specify all sorts of stuff that you don’t really want to specify (like dataType, contentType, etc…). This is all required because the friendlier $.post(...) will send your data in a Form encoded way.

Overwriting a function in Javascript

A quick little post about overwriting a function in Javascript.

Take the following piece of code:

function Thing() {
    this.Load = function () {
        // Do stuff some specific way.
    };
};

When we want to creat a new Thing we do:

var newThing = new Thing();

Easy enough. But what if we have a corner case where the Thing needs to load data in another specific way?