muonlab

random .NET and web development musings

Take your pkcs12 (pfx) that you exported from Windows MMC or wherever, get yourself OpenSSL and run:

Public key:

openssl pkcs12 -in mycert.pfx -clcerts -nokeys -out publickey.txt

Open up publickey.txt and trim anything before the line:

-----BEGIN CERTIFICATE-----

Private key:

openssl pkcs12 -in mycert.pfx -nocerts -nodes -out privatekey.txt

Open up privatekey.txt and trim anything before the line:

-----BEGIN PRIVATE KEY-----

Chain:

openssl pkcs12 -in mycert.pfx -nodes -nokeys -cacerts -out chain.txt

Open up chain.txt and trim anything outside the lines:

-----BEGIN CERTIFICATE-----
-----END CERTIFICATE-----

then if you have multiple certificates, reverse the order of the certificate blocks (i.e. move the top certificate to the bottom).

Next you need to use the AWS CLI to upload your certificate:

with the CLI in your PATH, from the same dir (important) as the three certificate files, run:

aws iam upload-server-certificate --server-certificate-name --certificate-body file://publickey.txt --private-key file://privatekey.txt --certificate-chain file://chain.txt --path /cloudfront/

You can add --debug for mildly useful error messages

If your index page is slow to render, you may find you experience a flicker when calling:

navigator.splashscreen.hide();

i.e. the splash screen hides, you get a blank page, then your content appears.

You can remedy this by deferring the hiding of the slash screen until a few animation frames after you’ve finished drawing.

You may be able to achieve this using a setTimeout, however it will depend on what the rest of your code is doing.
A better approach (for writing your whole app anyway – regardless of this problem) is to use asynchronous DOM I/O, using something like fastdom.

Then you can simply do:

fastdom.defer(2, function () {
    navigator.splashscreen.hide();
});

This of course assumes that you’ve done all your other DOM I/O asynchronously (in the first animation frame). You may need to defer more than 2 frames depending on your setup.

Boundarizer is an excellent script from Paul Lewis that highlights layout boundaries in your page.

I’ve taken that script and bundled it into a Chrome extension to make its use far easier.

Install the extension

This is currently a beta version, feedback and pull requests welcome :)

Checkout the source on GitHub.

I have lots of calls to jQuery’s focus() method in my sites:

$('input:first').focus();

However on mobile devices you might not want to be calling this, because focus() doesnt open the keyboard, but does focus the element. Under certain cirumstances you might want to prevent the focus from happening to give a better user experience.

You can do this with the following code:

$.event.special.focus = {
	trigger: function (e) {
		e.preventDefault();
		return true;
	}
};

You will only want to apply this when your responsive site is being displayed on a mobile device.

thanks to pushOK on StackOverflow for this jQuery insight.

Check out this blog post:

http://www.pretentiousname.com/timesync/

Essentially you need to create a scheduled task that runs

W32tm.exe /resync

As often as you deem necessary (I have chosen hourly).

Here is an exported scheduled task that you can use:

<?xml version="1.0" encoding="UTF-16"?>
<Task version="1.3" xmlns="http://schemas.microsoft.com/windows/2004/02/mit/task">
  <RegistrationInfo>
    <Date>2013-11-28T09:19:59.2378</Date>
    <Author>OPS-02\Administrator</Author>
  </RegistrationInfo>
  <Triggers>
    <CalendarTrigger>
      <Repetition>
        <Interval>PT1H</Interval>
        <StopAtDurationEnd>false</StopAtDurationEnd>
      </Repetition>
      <StartBoundary>2013-11-28T09:17:40.4914</StartBoundary>
      <Enabled>true</Enabled>
      <ScheduleByDay>
        <DaysInterval>1</DaysInterval>
      </ScheduleByDay>
    </CalendarTrigger>
  </Triggers>
  <Principals>
    <Principal id="Author">
      <UserId>S-1-5-19</UserId>
      <RunLevel>HighestAvailable</RunLevel>
    </Principal>
  </Principals>
  <Settings>
    <MultipleInstancesPolicy>IgnoreNew</MultipleInstancesPolicy>
    <DisallowStartIfOnBatteries>false</DisallowStartIfOnBatteries>
    <StopIfGoingOnBatteries>true</StopIfGoingOnBatteries>
    <AllowHardTerminate>true</AllowHardTerminate>
    <StartWhenAvailable>true</StartWhenAvailable>
    <RunOnlyIfNetworkAvailable>true</RunOnlyIfNetworkAvailable>
    <IdleSettings>
      <StopOnIdleEnd>true</StopOnIdleEnd>
      <RestartOnIdle>false</RestartOnIdle>
    </IdleSettings>
    <AllowStartOnDemand>true</AllowStartOnDemand>
    <Enabled>true</Enabled>
    <Hidden>false</Hidden>
    <RunOnlyIfIdle>false</RunOnlyIfIdle>
    <DisallowStartOnRemoteAppSession>false</DisallowStartOnRemoteAppSession>
    <UseUnifiedSchedulingEngine>false</UseUnifiedSchedulingEngine>
    <WakeToRun>false</WakeToRun>
    <ExecutionTimeLimit>P3D</ExecutionTimeLimit>
    <Priority>7</Priority>
  </Settings>
  <Actions Context="Author">
    <Exec>
      <Command>%windir%\system32\sc.exe</Command>
      <Arguments>start w32time task_started</Arguments>
    </Exec>
    <Exec>
      <Command>%windir%\system32\w32tm.exe</Command>
      <Arguments>/resync</Arguments>
    </Exec>
  </Actions>
</Task>

This shall be a dumping ground that I keep updated with useful resources for optimising web sites.

Tools

Blogs

Videos

Tweeps to Follow

Three simple steps:

openssl pkcs12 -in mycert.pfx -out mycert.txt -nodes

Then, to generate your encrypted private key

openssl rsa -in mycert.txt -text -out mycert.key

And your certificate:

openssl x509 -inform PEM -in mycert.txt -out mycert.cer

Bosh.

The other day something happened that caused the insert part of me running the SQL Azure Migration Wizard to abort, leaving me with a bunch of local .dat files and no data on my destination server.

To upload the data, you need to run the following command:

bcp database.dbo.tablename in dbo.tablename.dat -n -U username -P password -S remote.server.address.com -b 200 -h"TABLOCK"

You can play with various values for -b, the batch size. I found 200 worked reasonably although I didn’t investigate too much.

Here is a great post on troubleshooting your AWS ELB.

The point that caught me out for about 10 hours today was that if you have your ELB configured for multiple Availability Zones, it doesnt matter if your assigned instance list doesn’t contain any instances from some of the AZs, it will still route traffic to those zones, which will get lost and result in a 503 (or 504/324).

So, DONT assign AZs that dont have any in-service instances running.

You want your site to issue far-future cache expiry values for resources like CSS and JS to reduce bandwidth usage and decrease page load speed.

However, when you release new code, you want everyone to receive this a.s.a.p.
But how do you achieve this when they all have cached versions that are cache-valid for a week or more?

Here’s what I do.

Create yourself a class such as this:

public static class Cacher
{
	public static readonly string Value;

	static Cacher()
	{
		Value = DateTime.UtcNow.ToString("yyMMddHHmmssfff");
	}
}

Then, change your script and css tags from:

<link rel="Stylesheet" type="text/css" href="/assets/css/all.css" />

to:

<link rel="Stylesheet" type="text/css" href="/assets/css/<%: Cacher.Value %>/all.css" />

You can then use a mod_rewrite/asapi_rewrite rule to remove the value:

RewriteRule ^assets/css/[^/]+/all.css /assets/css/all.css [L,NC]

The reason you want the value in the path and not in the query string is that some caches refuse to cache content on URIs which include querys, regardless of the cache-control headers.

Alternatively, you could make the value be the current assembly version. It depends on your use-case.