A very simple and unsafe :-), self-signed, CORS https node.js dev stub service in TypeScript


const https = require("https"); const fs = require("fs"); // To create the key.pem and cert.pem files for dev, use opensll: // openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem // // Cert and key are created for hosheader "stub.service.am.dev". // Make sure the hosts file on windows contains: // 127.0.0.1 stub.service.am.dev const options = { key: fs.readFileSync("./key.pem"), cert: fs.readFileSync("./cert.pem") }; const port = 4433; https.createServer(options, function (req: any, res: any) { // Allow calls from all domains, for all methods ans request headers. res.setHeader("Access-Control-Allow-Origin", "*"); res.setHeader("Access-Control-Allow-Credentials", true); res.setHeader("Access-Control-Allow-Methods", "*"); res.setHeader("Access-Control-Allow-Headers", "*"); res.end(`Request received on server. Path Hit: ${res.url}`); }).listen(port, function() { console.log(`Stub service listing on ${port}`); });


Just enter https://stub.service.am.dev:4433 and it should respond with:

Request received on server. Path Hit: undefined

Fix in IE – Angular 1.6.1 Disabling automatic bootstrap. <script> protocol indicates an extension, document.location.href does not match.

When using angular 1.6.1 in IE9, IE10, IE11, I was getting the error:


Disabling automatic bootstrap. <script> protocol indicates an extension,

document.location.href does not match.


This seemed to be an 1.5.x issue, that was fixed in 1.5.11, but I was getting the error in 1.6.1.

To fix the error I switched from automatic bootstrapping (ng-app) to manual bootstrapping.

So I changed: <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app=”myapp">

to: <html>

And after my module declaration:

angular.module('myapp', []);

angular.element(document).ready(function () {
angular.bootstrap(document, ['myapp']);
});

Align radio buttons with label on one line

Use relative positioning for the input element and correct the top position of the input, based on the line-height of the element containing the input element.

image

<!DOCTYPE html>
< html>
< head>
    <meta charset="UTF-8">
    < title>Align radio button with label on one line</title>
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
   
    <!–<link rel="stylesheet" href="plain.css">
    <script type="text/javascript" src="plain.js"></script>–>
    <style>
        .radio-container {
            box-sizing: border-box;
            font-family: ‘Open Sans’, sans-serif;
            font-size: 13px;
            line-height: 30px;
            margin: 0;
             outline: 0;
            overflow: hidden;
            padding: 0;
        }

        .radio-container input {
             box-sizing: border-box;
            margin: 0;
            outline: 0;
            padding: 0;
            position: relative;
            top: 9px;
            vertical-align: top;
         }
    </style>
< /head>
< body>
    <h1>Align radio button with label on one line</h1>
    <div class="radio-container">
         <input name="red" type="radio" value="red" checked="checked">
        red
        <input name="green" type="radio" value="green">
        green
        <input name="blue" type="radio" value="blue">
        blue
    </div>
< /body>
< /html>

Fix: stand alone / offline update Chrome 52 to Chrome 54 doesn’t seem to work

I could run the offline / standalone Google Chrome 54 installer, but when I started Chrome after the installation, it was still Chrome 52, turned out Chrome 54 was added too the Program Files folder as: new_chrome, when I removed the chrome.exe and renamed the new_chrome.exe to chrome.exe the problem was resolved:

image

Finally my XPS 13 charged by a USB Type-C dock and connected to a 4k display at 60hz


From the moment I red about USB Type-C and the possibility to charge and dock my laptop with one cable I was eager to try this. My Dell XPS 13 has a thunderbolt 3 / USB Type-C dock and it is able to charge itself via this port. Dell offers a thunderbolt 3 dock, but there are many troubles with it and it is very expensive and it is not compatible with other systems.

So I decided to wait, until a company created a universal USB-C dock that would charge my XPS 13 but also would charge a mac book.


It is even rumored that the new mac pro’s will get USB-C charge ports.


Just last week I found out that CallDigit offers a USB-C dock, that would charge my XPS 13 and would connect to my Samsung 28 inch 4k monitor at 60hz via a display port 1.2.

I live in the Netherlands, so I ordered the dock at: http://eustore.caldigit.com/screen/product/f0d13a71-4b3d-4675-a958-ad06b752a046


I ordered the dock on a Monday evening an it was delivered to me on Thursday evening the same week.


I connected all my peripherals to the dock:

  • Samsung 28 inch 4k display u28e590
  • external USB 3.0 2TB HDD
  • external slimline DVD writer
  • senheizer headset
  • wired gigabit ethernet
  • Wireless Microsoft ergonomic keyboard and mouse


Then I plugged the dock into the power outlet.


Then followed the magic:

I took the USB-C cable from the the dock en plugged it into my Dell XPS 13. I booted the Dell XPS 13 and……… Yes, the dock powers my laptop and the Samsung monitor worked, but I noticed that the text was a little blurry, nothing extreme, but I noticed it, most of the time, this is caused by the fact that the Samsung monitor is not working at the native resolution (4k) but a lower resolution like quad hd (2560 x 1440) and this was the case.

After I received a new firmware update from calldigit, this problem was resolved and now my display works perfectly at 4k and 60hz!!!!!



calldigit_usb_c_dock

Animate the navigation between pages with CSS3 and Angular 1.x

Just created a code pen to demonstrate the navigation between pages in Angular 1.x by using css3.
The animation should mimic scrolling the pages from top to bottom, now I could have just  used TypeScript,
to calculate the correct scroll position, but in this case I wanted to use pure CSS3.
I had some difficulties to create this animation, because my first reaction was, to try and use ng-if or 
ng-show / ng-hide, to hide the pages that are not visible. After hours of trying, I did not succeed, 
so I tried a different approach, by stacking the pages on top of each other and moving “previous pages” 
outside of the list at the top and moving next pages outside of the list at the bottom, without using 
ng-if or ng-hide.
Note:
- by using a translateX you could make the pages scroll from left to right instead of from bottom to top.
- by switching the values for translateY, you could make the pages scroll from top to bottom.
http://codepen.io/roelvanlisdonk/pen/YGZqgO/"
image