Thursday 30 March 2017

PhantomJS with AngularCLI and Karma

npm install --save-dev karma-phantomjs-launcher

Then update karma.config.js (lines 11 and 31):

image

You’ll now get the following error if you attempt to npm test or ng test:

image

To fix this just uncomment the following lines from your polyfill.ts:

image

Wallaby with Angular2 CLI

To get wallaby.js working after you have generated your project with angular-cli, you'll need to do the following:

Here are examples of Wallaby running my server code (simple data api returning json data) and the Angular UI:

image

image

Using lodash with Angular2 and TypeScript

You can use the same approach for Express, body-parser, cors, morgan, etc.

The typings file are stored under the folder node_modules/@types

Tuesday 28 March 2017

How to hide JS and JS.map files in VSCode

hide-js-map

hide-js-map-done

Using Auth0, Angular and ASPNETCore WebAPI

Auth0 is great for integrating security into your applications.

In this blog we’ll look at how simple it is to setup Auth0 and then create an Angular app that uses it.

1) Go to Auth0.com and setup your account:

image

image

image

2) Now we’ve got our Auth0 account we can setup our ASPNetCore WebAPI:

image

image

You can then download or fork the startup project.

Finally, let’s setup our Angular2 app:

image

Then download or Fork on GitHub (I’m forking on GitHub)

image

If either fail to download or fork you can manually download from here:

https://github.com/auth0-samples/auth0-aspnetcore-webapi-sample

https://github.com/auth0-samples/auth0-angularjs2-systemjs-sample

Identify font on a web page

https://fount.artequalswork.com/

fount

Drag their button to your bookmarks bar in your browser then navigate to the webpage where you want to identify the font, click the button and locate the web font you want identified – very cool!

The gif above was generated using ScreenToGif, another very useful tool.

Monday 27 March 2017

Live Writer not posting blogs with images

If you’re using Blogger and Live Writer no longer uploads your blogs containing images, here is the fix:

1. Open Google Photos

2. Create an Album called Open Live Writer

It’ll now work!

Travis-ci.org your GitHub project

Step 1:  Register your GitHub project with travis-ci.org

travis-ci

Step 2:  Create a .travis.yml file

Step 3:  Add a test command to your package.json (see line 8)

Step 4:  Add a .eslintrc

How to add GitHub badges

Here is an example of some GitHub badges on a project:

It’s really easy to do, you just need to register your project with david-dm.org and travis-ci.org. Here is the markdown I used within my readme file:

In my next blog posts I'll show examples of how to integrate online TravisCI for the build badge.

NPM globally installed packages

Capture

Installing Windows10 on Aspire S7

Acer kindly have the Aspire S7 laptop on lockdown so you can’t easily boot from USB to install a new “clean” version of Windows.  There is a way around it though so here are the hoops you have to jump through:

1. Create a bootable Windows installer on your USB drive by downloading the Windows ISO then installing RUFUS to create your USB from the ISO.

2. Restart your computer and enter the BIOS screen.  You can do this before Windows boots up, by pressing F2 (by pressing function and 2 keys).  If F2 doesn’t work try F8 or F10.

3. Select “Boot” menu and change from UEFI to Legacy and set the boot order so that USB HDD is at the top.  Save and Exit.

4. Put your USB drive into your laptop and Windows installer should start.  You can now delete any old partitions and create a new drive.  The problem is this drive won’t be able to hold windows due to it being GPT partition style (arrrgh!) so we need to jump through an extra few hoops.

5. From the “Repair” menu option in the Windows installer window, select the command line option.

6. In the command line use the following commands:

7. You’ll now be able to go through the Windows installer and install into your drive.