Category: Tips & Tricks

Test out a simple and free demo website on Azure

You can test out a simple HTML/Angular/front-end/ASP.net/nodejs based website real quick and simple on Azure for free.

Steps:
(This is what i did to test out an Angular app real quick)

  • Make sure you have a free Azure Account
  • Login to Azure portal: https://portal.azure.com/
  • Create a new resource “Web app”
  • Choose new resource group “WebDemo” (or use an exsisting)
  • Set web app name
    Will get this address: http://[myappname].azurewebsites.com/
  • Runtime stack: ASP.NET 4.7 (this will work fine for Angular/html frontend web sites app etc)
  • Region: Select region closest to you
  • SKU and size: Under the “Dev/Test” tab i choose the F1 shared infrastructure (free to use 60 min/day “compute” time)

Next, next, when finished on the App Service “Overiew” tab you will see this information:

URL
FTP/deployment username
FTP hostname
FTPS hostname

Use it to deploy the website with your favorite FTP client.
Deploy to folder /site/wwwroot on the server.

See this post regarding setting up FTP access credentials: http://blog.wsoft.se/2018/04/20/accessing-azure-web-app-with-ftp/

 

 

Auto hot key script – remap next/prev track missing media keys

; Auto hot key script for shortcut keys for spotify/remap missing media keys

; "CTRL + MEDIA VOLUME UP" for previous track
<^Volume_Down::Media_Prev

; "CTRL + MEDIA VOLUME UP" for next track
<^Volume_Up::Media_Next

; Map media play button to open spotify
Launch_Media::Run, "%userprofile%\AppData\Roaming\Spotify\Spotify.exe", "C:\", max

Above will make ctrl+volume keys control current track.
“Launch media”-button will open Spotify.

For AutoHotkey

Useful Windows Defender exclusions to speed up development environment

If you work as a developer with tools such as Angular, Java, Node, Git etc. here are some useful exclusions to add to Windows Defender. It will speed your development computer up.
(In windows 10: search for “defender” -> “Virus & threat protection …” -> “Exclusions” -> Add or remove exclusions).

Node.js:
Process:
node.exe

Folders:
%userprofile%\AppData\Roaming\npm
%userprofile%\AppData\Roaming\npm-cache

Your projects/repos folder:
C:\Repos

IDEs:
File: C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\Common7\IDE\devenv.exe
Folder: C:\Program Files\JetBrains\WebStorm 2018.3.4

Various tools/processes:
Process: java.exe
Process: git.exe
Process: SourceTree.exe

There might be improvements depending on which type of exclusions that is most efficient. E.g. folder exclusion instead of a single exe file etc.

Warning! This means the above processes, folders and files are no longer under protection. Use at own risk. 

Adding exclusions using powershell:
Start powershell as administrator.
Enter this:

Add-MpPreference -ExclusionProcess node.exe
Add-MpPreference -ExclusionProcess git.exe
Add-MpPreference -ExclusionProcess SourceTree.exe
Add-MpPreference -ExclusionProcess SourceTree.exe
Add-MpPreference -ExclusionProcess devenv.exe
Add-MpPreference -ExclusionProcess Code.exe
Add-MpPreference -ExclusionPath C:\Repos
Add-MpPreference -ExclusionPath %userprofile%\AppData\Roaming\npm
Add-MpPreference -ExclusionPath %userprofile%\AppData\Roaming\npm-cache
Add-MpPreference -ExclusionPath "C:\Program Files (x86)\Microsoft Visual Studio\2019"
Add-MpPreference -ExclusionPath "C:\Program Files\JetBrains\WebStorm 2019.3.3"

More info regarding exclusions:

You can exclude certain files, folders, processes, and process-opened files from Windows Defender Antivirus scans. Such exclusions apply to scheduled scans, on-demand scans, and always-on real-time protection and monitoring. Exclusions for process-opened files only apply to real-time protection.

When you add a process to the process exclusion list, Windows Defender Antivirus won’t scan files opened by that process, no matter where the files are located. The process itself, however, will be scanned unless it has also been added to the file exclusion list.

The process exclusions only apply to always-on real-time protection and monitoring. They don’t apply to scheduled or on-demand scans.

From: https://docs.microsoft.com/en-us/windows/security/threat-protection/windows-defender-antivirus/configure-exclusions-windows-defender-antivirus

 

 

Setup Virtual Machine for testing browser Microsoft Edge version 18

I needed to test a locally developed website in old legacy browser Microsoft Edge version 18. My system is Windows 10 using Oracle VM VirtualBox software.

Here is how to setup the Virtual Machine for accessing an Angular website on the “localhost” hostname. The website also makes requests to a localhost Java based REST API. E.g. upon entering http://localhost:4200 in the VM it should work the same as in the host OS.

Download Edge Virtual Machine

VirtualBox software: Oracle VM VirtualBox software
Edge Image: https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/
Use the “Virtualbox” VM image.
Direct link:
https://az792536.vo.msecnd.net/vms/VMBuild_20190311/VirtualBox/MSEdge/MSEdge.Win10.VirtualBox.zip
The VM password is: Passw0rd!

Make Angular development server available as “localhost” in the VM

Setup network:
In Oracle VM VirtualBox -> Settings -> network -> Attached to: “NAT”

Advanced -> port forwarding:
Name:”Angular server”, Protocol: TCP, Host port: 4200, Guest port: 4200
(dont set host and guest IP)

The above makes the Angular web development server (ng serve) available on http://localhost:4200 in the VM.

Make a Java Spring backend API available as “localhost” in the VM

(In the VM environment)
Add to the c:\windows\system32\drivers\etc\hosts file:

10.0.2.2 outer

The above config tells the VM OS to expose all requests of 10.0.2.2 to the “outer” hosting machine.

(In the VM environment)
Start an elevated cmd and enter this:

netsh interface portproxy add v4tov4 listenaddress=127.0.0.1 listenport=8081 connectaddress=10.0.2.2 connectport=8081

The above command will forward all requests for localhost:8081 to 10.0.2.2:8081 (which the hosts file made available for the “outer” host OS).

Angular *ngFor calling method multiple times problem

Background:
When using *ngFor directive try to avoid using methods inside the *ngFor loop.
When methods are used inside the *ngFor template databinding Angular triggers the method on every possible change detection. Angular does this because a method has side effects, its “impure”. Angular don’t know if the return value of the method has changed, and triggers a change detection check as often as possible.

Result:
If you set a console.log() inside your method that is called from within a *ngFor loop and tries to trigger some sort of change detection interaction (e.g. component init, click or mouse scroll depending on component implementation). You will see that the method is being triggered many more times than expected.

Example problem:
(heroes.component.html)

<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <h5>{{getHeroName(hero)}}</h5>
  </li>
</ul>

(heroes.component.ts)

getHeroName(hero: Hero) {
  console.log(hero.name);
  return hero.name;
}

The console.log will log 21 times on init and another 20 times for every “click”. The expected result is 10 console.logs upon init.

Above example could be fixed by instead calling the name property on the iterated variable (hero):

<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <h5>{{hero.name}}</h5>
  </li>
</ul>

Solution:
Use a property inside the *ngFor directive instead, so prepare a collection with correct data and save to properties instead of using methods. So the template will iterate over an already “prepared” model collection.

If call on method inside the *ngFor directive is hard to avoid, at least make sure the code is fast and is performant since it will be called many, many times in a row.

Source: https://www.reddit.com/r/Angular2/comments/59532r/function_being_called_multiple_times/

Making games: Where do I start? – Game Code School

So you want to make a game? Games can be powerful! To the gamer they can entertain, motivate, educate, persuade. They can cause visceral feelings like excitement, happiness, sadness and even fear. To you, the creator/programmer/designer, making games can give immense satisfaction and personal advancement, perhaps even fame and wealth.

Source: Making games: Where do I start? – Game Code School