Forem: Bemn

Fixing AjaxControlTookit Unexpected Page Reload in ASP.NET Web Form Application

Bemn — Fri, 12 Feb 2021 04:44:24 +0000

Table of Contents

😨 Problem
Expected vs Actual Behavior
- Expected
- Actual
😀 Solution (Part 1): Updating AjaxControlToolkit
- Nuget Package Update
- Some Breaking Changes
- Different __ doPostBack() in Firefox?
😀 Solution (Part 2): Adding <asp:AsyncPostBackTrigger>
- The Working Code Snippet
Summary

😨 Problem

TL;DR: see Summary and the working code snippet if you want to try it right away.

In my company there is an old Web Form Website running .NET Framework 3.5. I migrated it to an ASP.NET Web Form Application running .NET Framework 4.7.2 few months ago. The website is running just like the old one but recently a user reported that:

a <select> list which should triggers an AJAX call and refresh part of the page does not work. Instead, the page is reloaded everytime when the item in the <select> list is changed.

I used almost a day to figure out what’s (probably) happened and I hope that this article will be helpful to someone in the future who (still) encounter this problem.

Expected vs Actual Behavior

There is a <form> containing a <select> list (generated by <asp:DropDownList>). When the selected option is changed, an AJAX call will be fired and new items will be fetched. Besides, there is a text area for user to input remarks. A submit button will submit the form.

Expected

The page will not be reloaded when the selected option is changed. The content in the text area retains.

Actual

Once the selected option is changed, a form POST is fired (instead of an AJAX call). The content in the text area is therefore being cleaned.

This is related to AJAX calls so the first thing I checked was how the AJAX call was initiated.

😀 Solution (Part 1): Updating `AjaxControlToolkit`

In the .aspx file I saw a <asp:UpdatePanel> and a <asp:DropDownList>. This is the simplified structure of that part:

<asp:UpdatePanel runat="server" ID="UpdatePanel2" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:DropDownList runat="server" ID="ddItemTypes" AutoPostBack="true" OnSelectedIndexChanged="ddItemTypes_OnSelectedIndexChanged" />
</ContentTemplate>
</asp:UpdatePanel>

AutoPostBack is there so the app should use AjaxControlToolkit to make AJAX calls (I guess that’s the standard right?).

Nuget Package Update

I checked the package.config:

<package id="AjaxControlToolkit" version="4.1.50508" targetFramework="net35" />

Looks like the targetFramework is not right. Maybe it’s time to update the package too.

<package id="AjaxControlToolkit" version="20.1.0" targetFramework="net472" />

Some Breaking Changes

AjaxControlToolkit has some breaking changes since version 15+. In short, you need to:

Uninstall the old version and install the new version of AjaxControlToolkit.
Change <asp:ToolkitScriptManager> to <asp:ScriptManager>
Remove some unused configs in web.config (see this)
[Optional] Install AjaxControlToolkit.HtmlEditor.Sanitizer

Change the namespace AjaxControlToolkit.HTMLEditor to AjaxControlToolkit.HtmlEditor
Change the namespace AjaxControlToolkit.HTMLEditor.ToolbarButton to AjaxControlToolkit.HtmlEditor.ToolbarButtons

You may also readthe official complete migration guide.

After I upgrade the Nuget package, the AJAX calls was working partially: It only works on Chromium-base browsers like Chrome and Edge. However, it does not work on Firefox (85.0) and Safari (14.0.1).

😐 😐 😐

Different `__doPostBack()` in Firefox?

This is what I got from Firefox’s dev tool:

The initiator is from __doPostBack() in the .aspx page. In Chrome, it’s from ScriptResource.axd. Below is the expected call stack: the call is an XHR request fired from ScriptResource.axd.

Looks like the stack items from bottom to _doPostBack() are the same. I therefore dug into _doPostBack() and eventually found this piece of code in ScriptResource.axd:

if (!this._postBackSettings.async) {
  form.onsubmit = this._onsubmit;
  this._originalDoPostBack(eventTarget, eventArgument);
  form.onsubmit = null;
  return;
}

if this._postBackSettings.async is false, _originaldoPostBack() will be called and that is the __doPostBack() function defined in the .aspx page. This will trigger a page reload instead of an AJAX call.

Furthermore, I found that the asyncTarget in _postBackSettings is null but in Chrome that target is the <select> list.

In Firefox (v85.0) the javascript event initiated is somehow keep propagating to a higher level than the <select> list (probably to the form’s level) and therefore being treated as a form POST instead of an AJAX call.

😀 Solution (Part 2): Adding `<asp:AsyncPostBackTrigger>`

I did some research related to the Firefox-specific page reload and seems none of them were talking about the issue I met. I tried to study the fundamentals of this PostBack behaviour.

Finally I got this article Avoid (Prevent) Page refresh (PostBack) after SelectedIndexChanged is fired in ASP.Net DropDownList. It suggested what I might missing is an asp:AsyncPostBackTrigger.

Also, this StackOverflow answer menitoned the asp:AsyncPostBackTrigger thing.

So my understanding is:

When using the ScriptManager (i.e. the one we introduced when updating the AjaxControlToolkit), we need to define an asp:AsyncPostBackTrigger Trigger in order to make the call AJAX.

Therefore, I added a Trigger section to the .aspx file:

<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddItemTypes" EventName="SelectedIndexChanged" />
</Triggers>

This Trigger section should be placed under the same <asp:UpdatePanel> with the <asp:DropDownList>. Here is the complete snippet:

The Working Code Snippet

<asp:UpdatePanel runat="server" ID="UpdatePanel2" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:DropDownList runat="server" ID="ddItemTypes" AutoPostBack="true" OnSelectedIndexChanged="ddItemTypes_OnSelectedIndexChanged" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddItemTypes" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>

Note:

EventName is optional here but since I just want this trigger to listen the SelectedIndexChanged event, I add them all.
The ControlID has to be an exact match with the ID of <asp:DropDownList>.

After I added the <asp:AsyncPostBackTrigger>, all the browsers including Chrome, Edge, Firefox (85.0) and Safari (14.0.1) are working.

Summary

When your .NET 4.5+ ASP.NET Web Form Application using AjaxControlToolkit does not work as expected and cause the controls like <asp:DropDownList> cannot fire an AJAX call (but triggers a form POST), make sure that:

The AjaxControlToolkit Nuget package is up to date (and did the proper migration steps here).
The <asp:UpdatePanel> section should contain a <Triggers> section. In that section there is an <asp:AsyncPostBackTrigger> with ControlID same as the ID of your control (which is also placed under the same UpdatePanel section).

Set Up Cloudflare for AWS Route 53 Domains

Bemn — Thu, 31 Dec 2020 09:46:38 +0000

Overview

This article shows how to configure Cloudflare for an existing website using AWS Route53.

Table of Contents

Overview
Domain Registrar
- What about AWS Route53?
Cloudflare Account
- Add a domain
- Change your nameservers
- Verify nameservers
Updating DNS Records
- (Application) Load Balancers
- Amazon SES
Summary

Domain Registrar

In my opinion, domain registrar is the most confusing part when you configure Cloudflare. To check the details of your domain, use the Domain Name Registration Data Lookup. Here is the lookup result of gitlab.com:

The Registrar Information section contains the information where you should change the nameservers in the next step.

What about AWS Route53?

Route53 can be a domain registrar OR just managing the hosted zone. If you see AWS is the Registrar in this lookup, then you should update the config in AWS Route53.

Example 1: Domain purchased from GoDaddy

For example, if you purchased your domain in GoDaddy and having a hosted zone in AWS Route 53 (That’s my case), GoDaddy is therefore your domain registrar and you should login GoDaddy’s account to change the nameserver, NOT AWS Route 53

Example 2: Domain purchased from AWS Route 53

Unfortunately, You can purchased a domain in AWS Route 53 too. In this case, AWS Route 53 is your domain registrar.

You should change the nameservers in the Route 53 console > Registered Domains.

What about NS Record?

Changing a NS Record is not the same as changing a nameserver. From the article DNS NS record:

The NS record indicates which DNS server is authoritative.

So, a NS Record is similar to MX Record, CNAME Record, A Record, etc. They are all the items under the domain.

Nameserver of the domain is at a higher level and it’s controled by the domain registrar.

Cloudflare Account

Add a domain

It’s free to create a Cloudflare account: https://dash.cloudflare.com/sign-up. Cloudflare also offer paid plans and I won’t discuss them in this article.

Choose the free plan and then click Continue

After that, Cloudflare will do a DNS scan for the domain you’ve entered. Click Continue.

Note: Not all the recoreds captured are correct. You will need to add/delete/update some of them later.

Change your nameservers

The last step of setup is changing the nameservers. You will see the following instruction:

1. Log in to your registrar account

In the previous section, you should know which service provider is your domain registrar. Login to your domain registrar and find out the nameserver config. Then, remove the existing nameservers (the entries shown in step 1). For example:

ns1.mydomain.com
ns2.mydomain.com
ns3.mydomain.com
ns4.mydomain.com

2. Replace with Cloudflare’s nameservers:

When all the existing nameservers are removed, you have to add the Cloudflare nameservers in the domain registrar. For example:

autumn.ns.cloudflare.com
hans.ns.cloudflare.com

Note: you have to enter the 2 nameservers shown in step 2. Other (Cloudflare) nameservers won’t work.

Verify nameservers

Again, lookup the domain details using Domain Name Registration Data Lookup. This time you should check the details in the Domain Information section.

You should see the nameservers are replaced with the Cloudflare’s nameservers.

Note: Changing nameservers is quick and you should be able to see the updated records within 5 minutes.

On the other hand, changing the records under this domain may take a longer time (e.g. 24-48 hours).

Do not mix them up.

You may click the Done, check nameservers button once you finished changing the nameservers in your domain registrar.

Updating DNS Records

As mentioned in the above, we have to change some of the records in Cloudflare.

(Application) Load Balancers

You need to replace those A Records into CNAME Records.

In AWS Route 53 the load balancer records are in the forms of alias. Cloudflare will fetch the A Records of the load balancers.

Get the CNAME of your load balancer under AWS EC2 Console > Load balancers > Select your load balancer and see the details. After that, delete the A Record in Cloudflare and add a new CNAME record for your load balancer.

I used to keep the A Record in Cloudflare and it does work for few days. After that, the IP of that load balancer changed and the website cannot be connected.

Amazon SES

I also found that the SPF and DKIM records for Amazon SES does not created in Cloudflare too. In this case you need to create those records manually in Cloudflare. Just follow the instruction provided by Amazon then you will know how to do:

Summary

To use Cloudflare , you need to understand what a domain registrar is. By changing nameservers in a domain registrar and updating some records related to AWS’s infrastructure, we can set up the Cloudflare domain for an existing website using AWS Route 53.

This is the end of this article (as well as the year 2020).

Documentation Makes Easy With MkDocs and GitLab Pages

Bemn — Sat, 03 Oct 2020 14:41:00 +0000

Overview

I created a static website using MkDocs and deployed to GitLab Pages. This is what I did: https://bemn-proof-of-concept.gitlab.io/mkdoc/.

Table of Content

MkDocs
- Preparation
- Up and Run
- Add a new page
- Theming
- Custom Resources
GitLab Pages
- .gitlab-ci.yml
- Build and Deploy
Conclustion

MkDocs

From MkDocs’ official website:

MkDocs is a fast , simple and downright gorgeous static site generator that’s geared towards building project documentation. Documentation source files are written in Markdown, and configured with a single YAML configuration file.

In my opinion, setting up a static site using MkDocs is really straightforward. It’s easy to change the theme and insert custom styles/scripts. Keep it simple, stupid. That’s what I need.

Preparation

Make sure that you have the following tools:

python 3.x and pip. Install it via executable from the official website, or using tools like Homebrew.

$ python --version
Python 3.8.2
$ pip --version
pip 20.0.2 from /usr/local/lib/python3.8/site-packages/pip (python 3.8)

a GitLab account. You can use other service like Github Pages, Amazon S3, etc.
(optional) a markdown cheatsheet.

(For me, the most difficult part is how to get the python and pip versions right. In Mac the built-in python version is 2.7 but we need python 3 to install pip.)

Up and Run

$ pip install mkdocs
$ mkdocs --version
mkdocs, version 1.1.2

Assuming that your project folder is doc-project:

$ mkdocs new doc-project
$ cd doc-project

A MkDocs project is then created with the following folder structure:

doc-project
├── docs
│   └── index.md
├── img
│   └── favicon.ico
└── mkdocs.yml

Let’s run the site:

$ mkdocs serve
INFO - Building documentation...
INFO - Cleaning site directory
INFO - Documentation built in 1.65 seconds
[I 200612 23:30:19 server:334] Serving on http://127.0.0.1:8000

And check it out at http://127.0.0.1:8000!

Add a new page

The content

Remember, all the documents should place under docs. Let’s create an Overview page:

$ cd docs
$ touch overview.md

After that, add some content to overview.md.

The menu

If you want the visitors to reach the overview page, you need to add an url in the menu. Let’s edit mkdocs.yml, the site config file:

# In mkdocs.yml...
site_name: Doc Project ## change your site name here.
nav:
  - Home: index.md
  - Overview: overview.md ## add this line.

You will see a new link called Overview in the menu. If you want to set your site name now, change the value of site_name.

So that’s it. That’s how to add a new page.

Theming

You can apply a custom theme to MkDocs. This page contains many themes contributed by the community.

In this section, I will apply the Material Design theme to my MkDocs site.

Stop running your site and install the theme by:

$ pip install mkdocs-material

Update the mkdocs.yml again:

# In mkdocs.yml...
site_name: Doc Project

nav:
  - Home: index.md
  - Overview: overview.md

## Add this section
theme:
  name: material
  palette: ## Add this sub-section if you want to change the theme color
    scheme: amber
    primary: amber
    accent: orange

Start the site:

$ mkdocs serve

You will see MkDocs is dressing the amber Material Design theme.

Custom Resources

Sometimes you may want to add custom CSS or JS. In MkDocs, you can do it by adding extra_css and extra_javascript sections in mkdocs.yml.

I created a catalog page which contains a table written in markdown. Also, I want to apply jQuery DataTables to make the table more interactive. Therefore, I added the related js libraries and related css file to MkDocs. You can see the result here.

Exercice: create a catalog.md file and add a markdown table in it.

Next, add the custom resource sections to the config file:

# In mkdocs.yml...
site_name: Doc Project
nav:
  - Home: index.md
  - Catalog: catalog.md ## The catalog page you created in the exercise.

theme:
  name: material
  palette:
    scheme: amber
    primary: amber
    accent: orange

## Custom js files.
extra_javascript:
  - https://code.jquery.com/jquery-3.5.1.min.js
  - https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js
  - scripts/site.js

## Custom css files.
extra_css:
  - https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css

Create a custom js file:

$ cd docs
$ mkdir scripts
$ cd scripts
$ touch site.js

Now in your site.js file:

$(document).ready( function () {
    $('table').DataTable();
});

Afer that, you should be able to see an interactive table in the catalog page.

GitLab Pages

Create a GitLab repository under your personal space or a project group. The url will be something like https://gitlab.com/{username or project group name}/{repo name}.

Clone the repo you created and create the following items:

$ mkdir src
$ touch .gitlab-ci.yml

Place your MkDoc items (i.e. the doc-project folder) under src. See the following folder structure:

(root of the repo)
├── .gitlab-ci.yml
└── src
    └── doc-project

.gitlab-ci.yml

The .gitlab-ci.yml is a GitLab-specific file. GitLab will read and run the steps in the file. We need to tell GitLab how to generate and deploy our static MkDocs website. In this file:

# In .gitlab-ci.yml...
image: python:3.8-buster ## MkDocs requies python.

pages:
  stage: deploy ## tell GitLab to deploy the website in this step.
  before_script:
    - pip install mkdocs ## install MkDocs.
    - pip install mkdocs-material ## install the theme.
  script:
    - cd ./src/doc-project
    - mkdocs build ## built the site.
    - mv site ../../public
  artifacts:
    paths:
    - public
  ## Uncomment the following section if you want to run this step under master branch only.
  # only:
  # - master

So basically it tells GitLab to install the tools required under python 3.8 environment and deploy the website after the site is generated.

Try to run the following command if you want to generate the site locally:

$ mkdocs build

The generated site is located under doc-project/site/ .

In order to display the website properly, you need to place the generated site under the public folder and let GitLab knows the artifact inside is the website you want to deploy.

Build and Deploy

Push the code to GitLab and the site should build automatically. Check out the status of the build under CI/CD –> Pipelines.

A green tag showing passed for each successfully build.

Check out your website now. The url is https://{username or project group name}.gitlab.io/{repo name}/.

Conclusion

In this tutorial, we created a static site with custom theme, styles and js library by using MkDocs. After that, we set up a CI/CD pipeline on GitLab for building and deploying this static site to GitLab Pages.

Set Up an AWS EC2 with a GUI, RDP and more

Bemn — Sat, 03 Oct 2020 05:40:48 +0000

Overview

This is a guide on how to set up a AWS EC2 free tier with GUI. The EC2 instance will be able to connect via Remote Desktop Protocol (RDP) or SSH.

You need to create a AWS account: https://portal.aws.amazon.com/billing/signup. You may need to provide your credit card information during the signup process.

Table of Contents

Overview
Create an AWS EC2
- Set up the security groups
- Choose the OS, instance type and storage
- Create and download a .pem key file
Connect to EC2 via SSH
Install a GUI and RDP
- GUI: LXDE
- RDP: XRDP
- Connect to EC2 via remote desktop
Bonus Materials
- 1. Install additional IBus input method
- 2. Install Midori browser from .deb package
- 3. Set up a swapfile for better performance
- 4. Use EC2 as a VPN server

Create an AWS EC2

Set up the security groups

Defining the security groups before setting up the instance. Setting up the security groups first can give you a better understanding on what inbound/outbound traffic is allowed in the instances you are going to create.

Choose Security Groups at the left menu of your EC2 Dashboard. Create 2 security groups:

rdp: Allow inbound traffic via port 3389
ssh: Allow inbound traffic via port 22
Allow all outbound traffic

Choose the OS, instance type and storage

Choose Services > EC2 from the menu. At the EC2 Dashboard , choose Instances.

Click the Launch Instance and choose the suitable AMI (Amazon Machine Image). Here I choose a t2.micro instance with Ubuntu Server 18.04 LTS image. Choose the suitable Storage as not all kinds of storage are free. In this example I set up a 30GB General Purpose storage.

Allow SSH and RDP connections

Choose the security groups created in the previous step:

Create and download a `.pem` key file

You should create the key file. If you don’t create this and link it to the instance, you will not be able to connect to the instance via SSH or RDP. Here I create a new key file named ssh_private_key.

After that, click Download Key Pair and keep the key file safe.

Do a `chmod` on the key file

We better to make sure that the ssh_private_key.pem downloaded is just read-only. Run chmod to change the permission:

❯ ll ~/Downloads/ | grep "ssh_private_key.pem"
-rw-r--r--@ 1 BEN staff 1.7K Jul 2 18:41 ssh_private_key.pem

❯ chmod 400 ~/Downloads/ssh_private_key.pem

❯ ll ~/Downloads/ | grep "ssh_private_key.pem"
-r--------@ 1 BEN staff 1.7K Jul 2 18:41 ssh_private_key.pem

Connect to EC2 via SSH

Once you click the Launch instance , you should be able to see your instance in running state in the web console. Then, you can connect to the EC2 via ssh using the pem key file. Assuming that your DNS name of your EC2 is ec2-0-1-2-3.ap-northeast-1.compute.amazonaws.com and it is running at ap-northeast-1 region, you can connect to it using user ubuntu:

❯ ssh -i ~/Downloads/ssh_private_key.pem ubuntu@ec2-0-1-2-3.region-name.compute.amazonaws.com
The authenticity of host 'ec2-0-1-2-3.region-name.compute.amazonaws.com (0.1.2.3)' can't be established.
ECDSA key fingerprint is SHA256:8t8ey5IqoiGOKGc9WuDc5SXaYqFHPnKph1mRtzbQNTc.
Are you sure you want to continue connecting (yes/no/[fingerprint])?

You need to confirm your fingerprint at the first connection attempt.

Welcome to Ubuntu 18.04.4 LTS (GNU/Linux 5.3.0-1023-aws x86_64)

 * Documentation: https://help.ubuntu.com
 * Management: https://landscape.canonical.com
 * Support: https://ubuntu.com/advantage

  System information as of Thu Jul 2 10:54:37 UTC 2020

  System load: 0.0 Processes: 90
  Usage of /: 3.7% of 29.02GB Users logged in: 0
  Memory usage: 16% IP address for eth0: 172.31.4.8
  Swap usage: 0%

0 packages can be updated.
0 updates are security updates.

The programs included with the Ubuntu system are free software;
the exact distribution terms for each program are described in the
individual files in /usr/share/doc/*/copyright.

Ubuntu comes with ABSOLUTELY NO WARRANTY, to the extent permitted by
applicable law.

To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.

ubuntu@ip-172-31-4-8:~$

Install a GUI and RDP

GUI: `LXDE`

I choose LXDE as the GUI of the ubuntu server: https://lxde.sourceforge.net/about.html.

LXDE is a new project aimed to provide a new desktop environment which is lightweight and fast

RDP: `XRDP`

xrdp is an open-source Remote Desktop Protocol server: http://xrdp.org

xrdp provides a graphical login to remote machines using RDP (Microsoft Remote Desktop Protocol)

Install the packages:

sudo apt-get update -y
sudo apt-get install lxde -y
sudo apt-get install xrdp -y

Set a password for your account

You need to also set up a password for the user ubuntu. This is for your later use in RDP as RDP only allows you to login an password-protected account.

sudo passwd ubuntu

Connect to EC2 via remote desktop

For mac user, you need to download the Microsoft Remote Desktop. If you are using Windows, you should already have the Remote Desktop application preinstalled.

Launch the app and click Add PC :

Set the PC name (i.e. the DNS name of your machine):

Bonus Materials

1. Install additional IBus input method

If you want to type Japanese, Chinese, etc. you may need to install an input method. For cangjie, you can install Cangjians via the terminal:

sudo apt-get install ibus-cangjie

2. Install Midori browser from `.deb` package

Midori Browser is a browser web light, fast, secure, free software & open source

Download .deb file: https://astian.org/en/midori-browser/download/ or using wget:

cd ~/Downloads
sudo wget -qnc https://packages.astian.org/pool/main/m/midori/midori_9.0.0-1_amd64.deb


ubuntu@ip-172-31-4-8:~/Downloads$ ll
total 1492
drwxr-xr-x 2 ubuntu ubuntu 4096 Jul 2 11:29 ./
drwxr-xr-x 17 ubuntu ubuntu 4096 Jul 2 11:22 ../
-rw-r--r-- 1 root root 1517328 Jan 11 23:26 midori_9.0.0-1_amd64.deb

After that, install the deb package using dpkg

sudo dpkg -i midori_9.0.0-1_amd64.deb

You may see the dependency problems like the following:

ubuntu@ip-172-31-4-8:~/Downloads$ sudo dpkg --configure -a
dpkg: dependency problems prevent configuration of midori:
 midori depends on libpeas-1.0-0 (>= 1.15); however:
  Package libpeas-1.0-0 is not installed.
 midori depends on libxml2-utils; however:
  Package libxml2-utils is not installed.
 midori depends on gstreamer1.0-plugins-bad; however:
  Package gstreamer1.0-plugins-bad is not installed.
 midori depends on gstreamer1.0-libav; however:
  Package gstreamer1.0-libav is not installed.

dpkg: error processing package midori (--configure):
 dependency problems - leaving unconfigured
Errors were encountered while processing:
 midori

In this case, update the packages and reinstall midori:

sudo dpkg --configure -a
sudo apt-get -f install
sudo apt-get update
sudo apt-get install midori

3. Set up a `swapfile` for better performance

ubuntu@ip-172-31-4-8:~$ sudo fallocate -l 1G /swapfile
ubuntu@ip-172-31-4-8:~$ sudo chmod 600 /swapfile
ubuntu@ip-172-31-4-8:~$ sudo mkswap /swapfile
Setting up swapspace version 1, size = 1024 MiB (1073737728 bytes)
no label, UUID=9a121c2c-cd6f-48bf-b928-e550095a3efd
ubuntu@ip-172-31-4-8:~$ sudo swapon /swapfile
ubuntu@ip-172-31-4-8:~$ sudo swapon --show
NAME TYPE SIZE USED PRIO
/swapfile file 1024M 0B -2
ubuntu@ip-172-31-4-8:~$


sudo nano /etc/fstab


/swapfile swap swap defaults 0 0

After that, reboot the machine.

4. Use EC2 as a VPN server

Create a new security group allows all TCP and UDP inbound connections and add this security group to the EC2 instance:

Install openvpn scripts

This repo contains scripts for VPN server set up and profile management. Install it into your EC2:

Download the script:

sudo apt update
sudo apt upgrade -y
mkdir ~/vpn && cd ~/vpn
wget https://git.io/vpn -O openvpn-install.sh


ubuntu@ip-172-31-4-8:~/vpn$ ll
total 32
drwxrwxr-x 2 ubuntu ubuntu 4096 Jul 2 12:11 ./
drwxr-xr-x 19 ubuntu ubuntu 4096 Jul 2 12:11 ../
-rw-rw-r-- 1 ubuntu ubuntu 23085 Jul 2 12:11 openvpn-install.sh

Make the openvpn-install.sh exectable in your EC2:

chmod +x openvpn-install.sh
sudo ./openvpn-install.sh

Add a new profile by running openvpn-install.sh:

Welcome to this OpenVPN road warrior installer!

This server is behind NAT. What is the public IPv4 address or hostname?
Public IPv4 address / hostname [18.183.12.213]:

Which protocol should OpenVPN use?
   1) UDP (recommended)
   2) TCP
Protocol [1]: 1

What port should OpenVPN listen to?
Port [1194]:

Select a DNS server for the clients:
   1) Current system resolvers
   2) Google
   3) 1.1.1.1
   4) OpenDNS
   5) Quad9
   6) AdGuard
DNS server [1]: 1

Enter a name for the first client:
Name [client]: demo-ec2-client

OpenVPN installation is ready to begin.
Press any key to continue...


Finished!

The client configuration is available in: /home/ubuntu/demo-ec2-client.ovpn
New clients can be added by running this script again.

Use another Terminal to download the .ovpn file. Assuming that the machine name is ec2-0-1-2-3.ap-northeast-1.compute.amazonaws.com and the generated .ovpn file is place under ~/:

scp -i ssh_private_key.pem ubuntu@ec2-0-1-2-3.ap-northeast-1.compute.amazonaws.com:~/demo-ec2-client.ovpn ~/Downloads/demo-ec2-client.ovpn

Connect to the VPN

Pritunl Client is a easy-to-use OpenVPN client. Downlaod and install it.

Launch the client and click Import Profile :

After that, click the burger menu of the profile and Connect.

Use Gravatar Everywhere

Bemn — Sat, 18 Jul 2020 04:01:56 +0000

What is Gravatar

Your public profile on the internet, provided by Wordpress. See https://en.gravatar.com/.

1. Upload an image to your gravatar account

If you don’t have the gravatar account, create one. Make sure that the email you used to create the account will be the email account you want to link your profile picture.

After that, upload your profile picture to gravatar.

2. Use the image everywhere

Get your md5 hash of email address

Ask DuckDuckgo
You can get the md5 checksum using duckduckgo. Search md5 {your email address} and then you will see the hash:

Use Command Line
For MacOS user, you should have the md5 utility installed, go to the terminal and check:

❯ which md5
/sbin/md5

After that, generate the md5 hash of your email address:

❯ md5 -s "myemall@address.com"
MD5 ("myemall@address.com") = ca49930cff2f87bd37bfe71ce21467f

The gravatar image url is in this format:

https://gravatar.com/avatar/{your md5 hash}?s={size}

If you want to have a 200px avatar: https://gravatar.com/avatar/ca49930cff2f87bd37bfe71ce21467f?s=200.

Use this image url e.g. in a <img> tag:

<img src="https://gravatar.com/avatar/ca49930cff2f87bd37bfe71ce21467f?s=200" />

And you are good to go!

Displaying the Full Content in Hugo's RSS feed

Bemn — Fri, 03 Jul 2020 01:53:38 +0000

Background

Recently I created a hugo blog and started writing articles. Later, I found that dev.to can publish articles (as draft) from a RSS feed. In that way I don’t have to copy-and-paste my articles manually in order to publish the same item on dev.to!

Table of Contents

😨 Problem
😀 Solution
- Locating rss.xml
- Rendering the full content
- Regenerating the site
Bonus: The difference between {{ and {{- in Hugo
Conclusion

😨 Problem

Although dev.to’s puslishing from RSS feed service is great, my Hugo site is not that great (with the basic settings). When I was trying to sync my RSS feed items to dev.to, all items can be imported but only the beginning part of the content was fetched.

I know that should be something wrong with the RSS feeds generated by Hugo. The default Hugo RSS template only renders Summary of an article and my Hugo theme is using that:

As you can see in line 73 , the <description> in my RSS feeds contain article summary only but not the full content. Is there any ways to change the Summary here into something else? Something else that represents the full content?

😀 Solution

Locating `rss.xml`

Usually, Hugo templates are placed under {your hugo theme}/layouts/_defualt/. If such file does not exist, it’s time to create one. You can copy-and-paste the code from Hugo’s github or run the following curl command under /layouts/_default to download it:

curl "https://raw.githubusercontent.com/gohugoio/hugo/master/tpl/tplimpl/embedded/templates/_default/rss.xml" > rss.xml

Rendering the full content

Rendering the full content of is really simple and straight-forward. What you need to do is just replacing this:

<description>{{ .Summary | html }}</description>

With this:

<description>{{- .Content | html -}}</description>

Caution: use {{- instead of {{. Read the bonus part if you want to know what is the difference.

Regenerating the site

Updating the RSS template will not update your generated content automatically. Therefore, you need to re-generate your Hugo site:

hugo

You should see the changes in all RSS xml files (from git). After that, push all the code changes, remove all the fetched posts in dev.to and re-fetch them. That’s it.

Bonus: The difference between `{{` and `{{-` in Hugo

You may notice that the template code is changed into {{- from {{. As a newbie in Hugo I checked the Hugo’s official documentation about whitespace.

… the ability to trim the whitespace from either side of a Go tag …

This - notation is introduced in Go 1.6.

The following example (from the documentation):

<div>
  {{ .Title }}
</div>
<div>
  {{- .Title -}}
</div>

Which will output:

<div>
  Hello, World!
</div>
<div>Hello, World!</div>

Conclusion

The default RSS feed in Hugo site shows article abstract only. By defining a custom rss.xml template and replacing {{ .Summary | html }} with {{- .Content | html -}} in the <description> tag you will get the article’s full content in the re-generated RSS xml files.

The Perks of Being a Mac (or FreeBSD) user

Bemn — Sun, 28 Jun 2020 04:28:38 +0000

🚨 Note: This is not a technical reading. If you want to have some fun and practice your ls and cat skills, this article may suit you.

Table of Content

Misc. files of the OS
- The meaning of flowers
- The birthday present guide
Mac is a secret fan of…
Bonus: the missing recipe

Misc. Files of the OS

I found some interesting files under /usr/share/misc of my MacBook:

-r--r--r-- 1 root wheel 3.1K Dec 14 2019 ascii
-r--r--r-- 1 root wheel 374B Dec 14 2019 birthtoken
-r--r--r-- 1 root wheel 2.9K Dec 14 2019 eqnchar
-r--r--r-- 1 root wheel 1.4K Dec 14 2019 flowers
-r--r--r-- 1 root wheel 508B Dec 14 2019 getopt
-rw-r--r-- 1 root wheel 941B Dec 14 2019 mail.help
-rw-r--r-- 1 root wheel 1.3K Dec 14 2019 mail.tildehelp
-r--r--r-- 1 root wheel 310B Dec 14 2019 man.template
-r--r--r-- 1 root wheel 948B Dec 14 2019 mdoc.template
-r--r--r-- 1 root wheel 425B Dec 14 2019 operator
-r--r--r-- 1 root wheel 78K May 27 11:38 trace.codes
-rw-r--r-- 1 root wheel 13K Dec 14 2019 units.lib

The Meaning of Flowers

/usr/share/misc/flowers lists out the meaning of flowers¹. Check this out if you are going to buy some flowers but you don’t know what you should buy.

# Flower : Meaning
#   @(#)flowers 8.1 (Berkeley) 6/8/93
#
# Upside down reverses the meaning.
African violet:Such worth is rare.
Apple blossom:Preference.
Bachelor's button:Celibacy.
Bay leaf:I change but in death.
Camelia:Reflected loveliness.
Chrysanthemum, other color:Slighted love.
Chrysanthemum, red:I love.
Chrysanthemum, white:Truth.
Clover:Be mine.
Crocus:Abuse not.
Daffodil:Innocence.
Forget-me-not:True love.
Fuchsia:Fast.
Gardenia:Secret, untold love.
Honeysuckle:Bonds of love.
Ivy:Friendship, fidelity, marriage.
Jasmine:Amiability, transports of joy, sensuality.
Leaves (dead):Melancholy.
Lilac:Youthful innocence.
Lilly of the valley:Return of happiness.
Lilly:Purity, sweetness.
Magnolia:Dignity, perseverance.
Marigold:Jealousy.
Mint:Virtue.
Orange blossom:Your purity equals your loveliness.
Orchid:Beauty, magnificence.
Pansy:Thoughts.
Peach blossom:I am your captive.
Petunia:Your presence soothes me.
Poppy:Sleep.
Rose, any color:Love.
Rose, deep red:Bashful shame.
Rose, single, pink:Simplicity.
Rose, thornless, any color:Early attachment.
Rose, white:I am worthy of you.
Rose, yellow:Decrease of love, rise of jealousy.
Rosebud, white:Girlhood, and a heart ignorant of love.
Rosemary:Remembrance.
Sunflower:Haughtiness.
Tulip, red:Declaration of love.
Tulip, yellow:Hopeless love.
Violet, blue:Faithfulness.
Violet, white:Modesty.
Zinnia:Thoughts of absent friends.

The Birthday Present Guide

Check out the /usr/share/misc/birthtoken² and see which gem and flower (looks like someone in Berkeley knows about the flowers really well) you should buy for your friends!

“Oh why you choose this gem and that flower as the present?"

“Um… that’s my computer’s idea…"

More About Perl and Ruby

The creator of Ruby chose the name Ruby because it was the birthstone of one of his colleagues and that is the gem right after Pearl (Perl).

Lesson learnt: when you try to name a new language you invented, you should check this file out!

# Birthday : Birth Stone : Birth Flower
#   @(#)birthtoken  8.1 (Berkeley) 6/8/93
January:Garnet:Carnation
February:Amethyst:Violet
March:Aquamarine:Jonquil
April:Diamond:Sweetpea
May:Emerald:Lily Of The Valley
June:Pearl:Rose
July:Ruby:Larkspur
August:Peridot:Gladiolus
September:Sapphire:Aster
October:Opal:Calendula
November:Topaz:Chrysanthemum
December:Turquoise:Narcissus

Mac is a Secret Fan of…

The /usr/share/calendar folder contains some useful calendars but this one really catches my eye:

-rw-r--r-- 1 root wheel 1.4K Dec 14 2019 calendar.lotr

This is a timeline of the important events happened in The Lord Of The Rings³:

/*
 * Lord Of The Rings
 *
 * $FreeBSD: src/usr.bin/calendar/calendars/calendar.lotr,v 1.2 2003/10/09 00:31:48 grog Exp $
 */

#ifndef _calendar_lotr_
#define _calendar_lotr_

01/05   Fellowship enters Moria
01/09   Fellowship reaches Lorien
01/17   Passing of Gandalf
02/07   Fellowship leaves Lorien
02/17   Death of Boromir
02/20   Meriadoc & Pippin meet Treebeard
02/22   Passing of King Elessar
02/24   Ents destroy Isengard
02/26   Aragorn takes the Paths of the Dead
03/05   Frodo & Samwise encounter Shelob
03/08   Deaths of Denethor & Theoden
03/18   Destruction of the Ring
03/29   Flowering of the Mallorn
04/04   Gandalf visits Bilbo
04/17   An unexpected party
04/23   Crowning of King Elessar
05/19   Arwen leaves Lorien to wed King Elessar
06/11   Sauron attacks Osgiliath
06/13   Bilbo returns to Bag End
06/23   Wedding of Elessar & Arwen
07/04   Gandalf imprisoned by Saruman
07/24   The ring comes to Bilbo
07/26   Bilbo rescued from Wargs by Eagles
08/03   Funeral of King Theoden
08/29   Saruman enters the Shire
09/10   Gandalf escapes from Orthanc
09/14   Frodo & Bilbo's birthday
09/15   Black riders enter the Shire
09/18   Frodo and company rescued by Bombadil
09/28   Frodo wounded at Weathertop
10/05   Frodo crosses bridge of Mitheithel
10/16   Boromir reaches Rivendell
10/17   Council of Elrond
10/25   End of War of the Ring
11/16   Bilbo reaches the Lonely Mountain
12/05   Death of Smaug
12/16   Fellowship begins Quest

#endif /* !_calendar_lotr_ */

Bonus: the missing recipe

In the eariler versions of the macOS, a hidden cookie recipe can be found by typing this command in the Terminal:

Open /usr/share/emacs/22.1/etc/COOKIES

Unforrunately in the latest macOS this file is gone (together with /usr/share/emacs). We can only check this out on the Apple Open Source website⁴.

Battling With Gulp and Node

Bemn — Sat, 27 Jun 2020 08:03:12 +0000

😨 Problem

When I was building a website using gulp@^3.9.0 to compile sass on the build server with Node.js v12 installed, it failed.

Here are (part of) the errors shown in the console:

error   26-Jun-2020 08:35:02    gyp ERR! node -v v12.18.0
error   26-Jun-2020 08:35:02    gyp ERR! node-gyp -v v3.8.0
error   26-Jun-2020 08:35:02    gyp ERR! not ok 
error   26-Jun-2020 08:35:02    Build failed with error code: 1
error   26-Jun-2020 08:35:05    
error   26-Jun-2020 08:35:05    npm ERR! code ELIFECYCLE
error   26-Jun-2020 08:35:05    npm ERR! errno 1
error   26-Jun-2020 08:35:05    npm ERR! node-sass@4.9.3 postinstall: `node scripts/build.js`
error   26-Jun-2020 08:35:05    npm ERR! Exit status 1
error   26-Jun-2020 08:35:05    npm ERR! 
error   26-Jun-2020 08:35:05    npm ERR! Failed at the node-sass@4.9.3 postinstall script.
error   26-Jun-2020 08:35:05    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

(OK I know that’s not your fault, npm.) Here is my package.json:

{
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-concat": "^2.6.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "*"
  }
}

😐 `node-sass`

I noticed that should be something wrong with node-sass, which being used in gulp-sass. I met this issues before and from my experience, node-sass will try to download the corresponding prebuilt binary base on your OS or build it locally using python, MSBuild, etc… (That’s why you will met lots of questions in Stack Overflow asking python2 not found when installing node-sass , what’s wrong with my node-sass or I got a panic attack when dealing with node-sass should I consult a developer or a doctor first? ).

For this node-sass issue, you can try to run this on Windows:

npm install --global --production windows-build-tools
npm install node-gyp

Or try to delete package-lock.json and node_modules first and do a npm install if you can install all packages successfully on let say Mac OS but failed on Windows.

👆Those tricks saved me most of the time.

I just want to get my css files back and you told me I have to install this and that and download node npm python ms build tools some prebuilt binaries? Are you serious, node-sass?

😑 ReferenceError: primordials is not defined

After the node-sass issue was solved, the build server ran the build jobs again and got these errors:

error   26-Jun-2020 08:53:06    fs.js:35
error   26-Jun-2020 08:53:06    } = primordials;
error   26-Jun-2020 08:53:06 ^
error   26-Jun-2020 08:53:06    
error   26-Jun-2020 08:53:06    ReferenceError: primordials is not defined
error   26-Jun-2020 08:53:06 at fs.js:35:5
## ( blah blah blah ) ##
error   26-Jun-2020 08:53:06 at Module._compile (internal/modules/cjs/loader.js:1138:30)
error   26-Jun-2020 08:53:06 at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
error   26-Jun-2020 08:53:06 at Module.load (internal/modules/cjs/loader.js:986:32)
error   26-Jun-2020 08:53:06 at Function.Module._load (internal/modules/cjs/loader.js:879:14)
error   26-Jun-2020 08:53:06 at Module.require (internal/modules/cjs/loader.js:1026:19)
error   26-Jun-2020 08:53:06 at require (internal/modules/cjs/helpers.js:72:18)

This answer from Stack Overflow states that it is due to Node.js v12 does not compatible with Gulp v3 and you need to upgrade Gulp to v4. I know I should do that but I also know that I will meet the Did you forget to signal async completion? issue which also will cause an epic fail of the build unless I re-write the gulp tasks.

I don’t want to change my gulpfile.js and I don’t want to upgrade gulp. Not now. That’s why I started searching for a solution without changing any configurations of the build server as well as the gulp setup in the project.

😀 Solution: adding a `npm-shrinkwrap.json`

Eventually I found a solution on how to handle this “Gulp VS Node” situation. What we need is create a npm-shrinkwrap.json file under the same directory with package.json.

The content of the json file:

{
  "dependencies": {
    "graceful-fs": {
      "version": "4.2.3"
    }
  }
}

After that I can build the project and finish all the gulp tasks without errors 🎉.

🤔 So, what’s going on?

From the npm’s official documentation on the npm-shrinkwrap command:

This command repurposes package-lock.json into a publishable npm-shrinkwrap.json or simply creates a new one. The file created and updated by this command will then take precedence over any other existing or future package-lock.json files.

And from the documentation on the npm-shrinkwrap.json:

… Additionally, if both package-lock.json and npm-shrinkwrap.json are present in a package root, package-lock.json will be ignored in favor of this file.

In other words, this file has a higher priority then package-lock.json. However, why this file can solve the build error?

The`fs` module

Node’s fs module got some changes since v11.15 which cause the graceful-fs@^3.0.0 package does not work anymore. Unfortunately, gulp@3.9.1 depends on graceful-fs@^3.0.0. As a result, running the gulp tasks on Node.js v12 will cause the primordials is not defined error.

The fix

After we added the npm-shrinkwrap.json, from my understanding it locked down the version of package(s) used by the execution environment to the version stated in that file (and ignore the setup in package-lock.json.In the above case, the npm-shrinkwrap.json tells Node.js 12 use graceful-fs@4.2.3 instead of graceful-fs@^3.0.0. This combination works. Meanwhile, the gulp package will still reference to the package.json and package-lock.json file and use the graceful-fs@^3.0.0 package. This combination also works.

🎯 Conclusion

I got some build errors when using gulp@^3.9.0 and gulp-sass under Node.js 12. After I delete the package-lock.json and re-run npm install, the sass problem solved. Next, I added a npm-shrinkwrap.json to (temporarily) solve the incompatable issue with old gulp running on new Node.js.

Can I call this the Node version of dependency hell ¹?

🔗 references:

🐞 GitVersioning: 'ThisAssembly' Is Inaccessible Due to Its Protection Level

Bemn — Thu, 25 Jun 2020 09:10:24 +0000

😨 Problem

After I installed the Nerdbank.GitVersioning Nuget package in my .NET MVC app, the following error came out when I want to get the version using ThisAssembly.AssemblyInformationalVersion:

error CS0122: 'ThisAssembly' is inaccessible due to its protection level

I tried to install the package across all the projects in the same solution. It didn’t work.

I tried to uninstall and re-ininstall the package. It didn’t work.

😀 Solution

.csproj

Turns out there is something missing in my .csproj file. I missed an <Import> tag at the end of the file, just before the </Target> tag:

<Import Project="..\packages\Nerdbank.GitVersioning.3.1.91\build\Nerdbank.GitVersioning.targets" Condition="Exists('..\packages\Nerdbank.GitVersioning.3.1.91\build\Nerdbank.GitVersioning.targets')" />

And in the EnsureNuGetPackageBuildImports target, add the following line:

<Error Condition="!Exists('..\packages\Nerdbank.GitVersioning.3.1.91\build\Nerdbank.GitVersioning.targets')" Text="$([System.String]::Format('$(ErrorText)', '..\packages\Nerdbank.GitVersioning.3.1.91\build\Nerdbank.GitVersioning.targets'))" />

In addition, the 1st <PropertyGroup> should contain a pair of NuGetPackageImportStamp tag:

<NuGetPackageImportStamp>
</NuGetPackageImportStamp>

AssemblyInfo.cs

I also removed the following lines in Properties/AssemblyInfo.cs:

[assembly: AssemblyVersion("1.0.0.0")]
[assembly: AssemblyFileVersion("1.0.0.0")]

version.json

At the root directory of the project, I added a version.json file with the following content:

{
  "$schema": "https://raw.githubusercontent.com/dotnet/Nerdbank.GitVersioning/master/src/NerdBank.GitVersioning/version.schema.json",
  "version": "1.0.0"
}

After that, ThisAssembly is back and I can read the git version info successfully.

🔗 references:

🖼 cover image:

Grace Hopper’s operational logbook for the Harvard Mark II computer

A Tale of Two Caches: Redis and the cache helper

Bemn — Thu, 11 Jun 2020 13:06:59 +0000

Background

Recently our team started a new project: a showcase page under our main website. The website is read-only and the content won’t change frequently so we can have an aggressive caching policy.

I built this MVC web app using .NET Core 3.1 and deploy it as an IIS sub-site under the main website (which is a .NET Framework web app running on the IIS).

Table of Content

Redis
- NuGet package
- appsettings.json
- Startup.cs
- CacheService
- Controller
Cache Tag Helper
- Example
- Explaination
Bonus: A note on @helper and other HTML helpers

Redis

Why?

We are using Redis because it is simple, fast and we are already using it across all the main websites.

How?

Here are some highlights:

1. NuGet packages

<PackageReference Include="StackExchange.Redis" Version="2.1.30" />
<PackageReference Include="StackExchange.Redis.Extensions.Core" Version="6.1.7" />
<PackageReference Include="StackExchange.Redis.Extensions.Newtonsoft" Version="6.1.7" />
<PackageReference Include="StackExchange.Redis.Extensions.AspNetCore" Version="6.1.7" />

StackExchange.Redis.Extensions.Newtonsoft is optional. Start from .NET Core 3.0 the default Json serializer will be System.Text.Json. If you want to use Newtonsoft.Json then you will need this package in your project.

StackExchange.Redis.Extensions.Core and StackExchange.Redis.Extensions.AspNetCore are the useful package to connect/read/write Redis easier. Read this documentation for more details.

2. appsettings.json

A typical .NET Core project should have an appsettings.json. Add the following section:

{
  "Redis": {
    "AllowAdmin": false,
    "Ssl": false,
    "ConnectTimeout": 6000,
    "ConnectRetry": 2,
    "Database": 0,
    "Hosts": [
      {
        "Host": "my-secret-redis-host.com",
        "Port": "6379"
      }
    ]
  } 
}

Here, my-secret-redis-host.com is the Redis host and We are using the database no. 0. You can set multiple hosts. You can see a detailed configuration here.

3. Startup.cs

Add the following code in ConfigureServices()

var redisConfiguration = Configuration.GetSection("Redis").Get<RedisConfiguration>();
services.AddStackExchangeRedisExtensions<NewtonsoftSerializer>(redisConfiguration);

5. CacheService

I created a CacheService.cs to help me reading/writing data in Redis. In this service:

public CacheService(RedisConfiguration redisConfiguration, ILogger<RedisCacheConnectionPoolManager> poolLogger)
{
    try
    {
        var connectionPoolManager = new RedisCacheConnectionPoolManager(redisConfiguration, poolLogger);
        _redisClient = new RedisCacheClient(connectionPoolManager, serializer, redisConfiguration);
    }
    catch(Exception ex)
    {
        /* something wrong when connection to Redis servers. */
    }
    _cacheDuration = 300; // cache period in seconds
}

We need a method to write data:

public async Task<bool> AddAsync(string key, object value)
{
    try
    {
        bool added = await _redisClient.GetDbFromConfiguration().AddAsync(key, value, DateTimeOffset.Now.AddSeconds(_cacheDuration));
        return added;
    }
    catch (Exception ex)
    {
        /* something wrong when writing data to Redis */
        return false;
    }
}

And we need a method to get cached data:

public async Task<T> TryGetAsync<T>(string key)
{
    try
    {
        if(await _redisClient.GetDbFromConfiguration().ExistsAsync(key))
        {
            return await _redisClient.GetDbFromConfiguration().GetAsync<T>(key);
        }
        else
        {
            return default;
        }
    }
    catch(Exception ex)
    {
        /* something wrong when writing data to Redis */
        return default;
    }
}

I intentionally name this method TryGetAsync() because the cache may not exist or already expired when you try to get it from Redis.

After that, let’s go back to Startup.cs and register this service in ConfigureService():

services.AddTransient<CacheService>();

Remember to register this service after services.AddStackExchangeRedisExtensions().

5. Controller

Inject the CacheService to the controller:

public DemoController(CacheService cacheService)
{
    _cacheService = cacheService;
}

public async Task<IActionResult> Demo(string name)
{
    var cacheKey = $"DemoApp:{name}";

    // Try to get cached value from Redis.
    string cachedResult = await _cacheService.TryGetAsync<string>(cacheKey);
    if(default != cachedResult)
    {
        return View(cachedResult);
    }

    // Add a new entry to Redis before returning the message.
    var message = $"Hello, {name}";
    if(null != sections && sections.Any())
    {
        await _cacheService.AddAsync(cacheKey, message);
    }

    return View(message);
}

Explain Like I’m Five :

You ask the shopkeeper in Demo bookstore do they have a specific book name. First, the shopkeeper looks for the book on the bookshelf named Redis. If he finds that book, he takes it out and gives it to you.

If your book does not exist in the Redis bookstore, he has to go out and buy that book for you(!). However, he buys 2 identical copies. He gives you one and puts the other one on the Redis bookshelf, just in case another customer want that book later.

Cache Tag Helper

The Cache Tag Helper is a tag that you can use in a .NET Core MVC app. Content encolsed by this <cache> tag will be cached in the internal cache provider.

Example

<cache expires-after="@TimeSpan.FromSeconds(60)" 
       vary-by-route="name" 
       vary-by-user="false">
    @System.DateTime.Now
</cache>

Explaination

In the above example, some attributes is set in the <cache> tag:

expires-after: how long (in seconds) will this cache last for.
vary-by-route: different copy will be cached when the route has a different value in the nameparam.
vary-by-user: different user will see different cached copies.

How can I know if it is working?

You will see the value rendered in the above example won’t change for 60 seconds even System.DateTime.Now should show the current time.

Bonus: A note on `@helper` and other HTML helpers

In the old days we can define some @helper functions in the razor view and (re)use it in the view. It’s being removed since .NET Core 3.0 because the design of @helper function does not compatible with async Razor content anymore.

Successor of the HTML helpers?

You can use the Tag Helpers in ASP.NET Core. Yes, the <cache> Tag Helper is one of the built-in Tag Helpers in .NET Core.

In addition, you can use the PartialAsync() method to render the partial HTML markup asynchronously.

@await Html.PartialAsync("_PartialName")

More references on the HTML helpers and Tag Helpers:

What happened to the @helper directive in Razor ?

Remove the @helper directive from Razor

ASP.NET Core 1.0: Goodbye HTML helpers and hello TagHelpers!

Creating a user with limited privileges in Postgres

Bemn — Wed, 15 Apr 2020 15:03:52 +0000

Situation

I created a web app. It reads data from a PostgreSQL database. I want to create a user with read-only privilege and connect to the database.

Code

Let say the user you want to create is webapp_user:

CREATE USER webapp_user WITH ENCRYPTED PASSWORD 'secure_passw0rd';

Grant the right to all public tables:

GRANT SELECT ON ALL TABLES IN SCHEMA public TO webapp_user;

Connect the database using webapp_user in the web app.

I want more power...

Now my web app is not read-only anymore. Users can create/delete some entries in the tables too.

Code

GRANT SELECT, INSERT, UPDATE, DELETE ON ALL TABLES IN SCHEMA public TO webapp_user;

Looks simple and cool! But why I got the permission denied for sequence XXX_id_seq to YYY error while inserting new records to the tables?

If your table has an auto-increment field then you need some extra privileges: the privileges to use the sequence-related functions (e.g. currval and nextval)

GRANT USAGE, SELECT ON ALL SEQUENCES IN SCHEMA public to webapp_user;

Example of an auto-increment field: the id of the table

Extra

What if I just want to apply the privilege(s) to a special table?

GRANT SELECT, INSERT, UPDATE, DELETE ON special_table TO webapp_user;

Reference:

Forem: Bemn

Fixing AjaxControlTookit Unexpected Page Reload in ASP.NET Web Form Application

😨 Problem

Expected vs Actual Behavior

Expected

Actual

😀 Solution (Part 1): Updating AjaxControlToolkit

Nuget Package Update

Some Breaking Changes

Different __doPostBack() in Firefox?

😀 Solution (Part 2): Adding <asp:AsyncPostBackTrigger>

The Working Code Snippet

Summary

Set Up Cloudflare for AWS Route 53 Domains

Overview

Domain Registrar

What about AWS Route53?

Example 1: Domain purchased from GoDaddy

Example 2: Domain purchased from AWS Route 53

What about NS Record?

Cloudflare Account

Add a domain

Change your nameservers

1. Log in to your registrar account

2. Replace with Cloudflare’s nameservers:

Verify nameservers

Updating DNS Records

(Application) Load Balancers

Amazon SES

Summary

Documentation Makes Easy With MkDocs and GitLab Pages

Overview

Table of Content

MkDocs

Preparation

Up and Run

Add a new page

The content

The menu

Theming

Custom Resources

GitLab Pages

.gitlab-ci.yml

Build and Deploy

A green tag showing passed for each successfully build.

Conclusion

Set Up an AWS EC2 with a GUI, RDP and more

Overview

Create an AWS EC2

Set up the security groups

Choose the OS, instance type and storage

Allow SSH and RDP connections

Create and download a .pem key file

Do a chmod on the key file

Connect to EC2 via SSH

Install a GUI and RDP

GUI: LXDE

RDP: XRDP

Set a password for your account

Connect to EC2 via remote desktop

Bonus Materials

1. Install additional IBus input method

2. Install Midori browser from .deb package

3. Set up a swapfile for better performance

4. Use EC2 as a VPN server

Install openvpn scripts

Connect to the VPN

Use Gravatar Everywhere

What is Gravatar

1. Upload an image to your gravatar account

2. Use the image everywhere

Get your md5 hash of email address

Displaying the Full Content in Hugo's RSS feed

Background

😨 Problem

😀 Solution

Locating rss.xml

Rendering the full content

Regenerating the site

Bonus: The difference between {{ and {{- in Hugo

😀 Solution (Part 1): Updating `AjaxControlToolkit`

Different `__doPostBack()` in Firefox?

😀 Solution (Part 2): Adding `<asp:AsyncPostBackTrigger>`

Create and download a `.pem` key file

Do a `chmod` on the key file

GUI: `LXDE`

RDP: `XRDP`

2. Install Midori browser from `.deb` package

3. Set up a `swapfile` for better performance

Locating `rss.xml`

Bonus: The difference between `{{` and `{{-` in Hugo

😐 `node-sass`

😀 Solution: adding a `npm-shrinkwrap.json`

The`fs` module

Can I call this the Node version of dependency hell ¹?

Bonus: A note on `@helper` and other HTML helpers