Angular 4

I'm starting on Angular 4. Going through the Tour of Heroes Tutorial.

I've done plenty of Angular 1.x in industry and feel comfortable with it.

Angular 4 looks like a completely different beast altogether.

Some initial thoughts:

• Coming from a C#/Java background, I like TypeScript
• However, I do not like the concept of transpiling. I think it's asking for trouble, and I have no doubt at some point I will end up troubleshooting/debugging ugly transpiled JavaScript.  
• I really think that the JavaScript V8 Engine and other JavaScript Engines should run bytecode.  Both JavaScript and TypeScript should be compiled 1st class languages, similar to how Java and Groovy are both compiled to ByteCode, as C# and F# are both compiled to MSIL.
• I've found my IDE: Visual Studio Code. This thing is beautiful and responds very quickly and feels light and easy to use.  It's even better than WebStorm and Visual Studio .NET.  I do hate having 2 IDEs (Visual Studio Code, Visual Studio .NET) for front-end/back-end though. 

Govern CMS

To-date, I've filled out 45 RFPs.

One common trend I've noticed is a need for Content Management System (CMS) Software.

Other than Website Redesign (which cannot be generalized), CMS comes in 2nd for "Most Requested Software".

So, I figured I would build a CMS System.  I have an informal CMS backing Municipal Agenda, so I figured i'd take the time to extract and formalize it into a standalone product.

To get there ...

First, the Data Model.  Everything starts with the Data Model.

More to come.

I've thought about using this as my opportunity to learn F#. 

The problem I will encounter is that this is not a common language, and if customers want to look under the hood, it will be a mark against me.  Nope, going with the tried and true C#. 

WCAG 2.0 Color Contrast Ratios

Today I learned about WCAG 2.0 Color Contrast Ratio Requirements.

WCAG 2.0 requires that the foreground and background colors have a 4.5:1 contrast ratio at Level AA and a 7:1 contrast ratio at Level AAA.

Now, I don't know what a 7:1 contrast ratio looks like, but my gut feel is it's like black on white or white on black.

So, I'm targeting WCAG 2.0 AA Compliance for all my sites.  That's sort of the gold standard, anyway. 

My WCAG-compliant labels: 😊

.label-default {
    color: #FFF;
    background-color: #777;
}
.label-danger {
    color: #FFF;
    background-color: #a30909;
}
.label-warning {
    color: #FFF;
    background-color: #a36c06;
}
.label-success {
    color: #FFF;
    background-color: #124400;
}
.label-info {
    color: #FFF;
    background-color: #027091;
}
.label-primary {
    color: #FFF;
    background-color: #003FBB;
}

Twitter Bootstrap 4

I've migrated my Recruiter Review Site to Twitter Bootstrap 4 so that I could use a more modern Bootstrap Theme: Real BS 4.

To say that it's been painful would be generous.

Most of my pain has been caused by Twitter's decision to remove Glyphicons from Bootstrap 4.

I would love to know why anyone thought that this was a good idea.

It broke my Bootstrap Star Rating widget, and it's been a LONG road back this evening, after I downloaded the source code for the widget and took it apart, turned it upside-down before figuring out the cause.

For anyone who needs to re-introduce Glyphicons to Bootstrap 4, follow this Stackoverflow Post.

HTTPS everywhere

I am enforcing HTTPS everywhere on my new projects.

In order to do so, I redirect any attempt to access HTTP URLs to HTTPS. 

This was a bit of a struggle.

I tried the recommended approach:

This did not work, which was surprising. I ended up having to install an Azure Web App Extension:

Now, I am forcing HTTPS everywhere, on all my resources.

WCAG 2.0 Compliance

So, a lot of the RFPs I've been bidding on are looking for WCAG 2.0 Compliance (accessibility for people with disabilities).

I figured the best thing to do is make my own site WCAG 2.0 Compliant.

I am striving for AA status on all 4 categories.

So far, here is what I am finding:

• Color Contrast.  This is big.  Like no light yellow buttons with white text.  Okay, that's atrocious for fully-abled people, but still, I've had to make a lot of changes along those lines. The biggest net effect is my site looks cleaner, crisper, more defined.  There were some beautiful aquas that had to go, since neither black nor white text provided enough contrast.  I also made my help blocks solid, instead of a faded out ghostly grey.  All of these are overall site aesthetic improvements. 
• alt attribute for img tags.  This is just good HTML practice.  I used to do that consistently as a high school kid building websites, I just got lazy.
• aria-label attributes for input tags.  This is new to me, never heard of that attribute before today. Looks like it's an assistive technology thing.

HTML5 Video hosted in Azure Storage

If you are like me and hosting Video files (MPEG / WEBM / OGG) in Azure Storage, you will probably need to do the following so that the MIME type comes down correctly:

        public static CloudBlockBlob UploadAndSaveBlob(CloudBlobContainer blobContainer, String text, String contentType, String extension)
        {
            string blobName = Guid.NewGuid().ToString() + extension;
            // Retrieve reference to a blob. 
            CloudBlockBlob blob = blobContainer.GetBlockBlobReference(blobName);
            // Create the blob by uploading a local file.
            blob.UploadText(text);
            // Set the Blob content type
            blob.Properties.ContentType = contentType;
            blob.SetProperties();

            logger.Info(String.Format("Uploaded text file to {0}", blob.Uri));

            return blob;
        }

and call the method, passing in a contentType of "video/mp4" for example.

This will set a ContentType Property on your Blob.

Also, you will probably need to install a WebM plugin for IE (which is oddly enough put out by Google, nice to see they're looking out for IE).

Back on another project and new EDMX

Finally settled on a 3rd Party Mail Sender: SendGrid.

Out of all the ones I tried:

• SendGrid
• MailGun
• SparkPost

SendGrid is the only one that has consistently sent out my emails.  Which is an important feature of a 3rd party emailer.

Plus, Azure provides free sending of SendGrid Emails with your subscription. 

If Azure provided SMTP servers and a mail infrastructure, I totally would have just handled this in-house.  However, they outsourced this to SendGrid.

My new EDMX.  Still elegant, but growing: