Simon Ho | Software Developer Blog

Posts

Edge computing with Cloudflare Workers and CouchDB

The “Speed” problem I’ve developed a Hong Kong based website (domestic parenting website) https://popa.help for my client in 2019. The site loads within 5 secs in Hong Kong. However, after I moved to Canada, the site loads more than 12 secs. It’s slower more than 100%. I suddenly realize that network latency is important for international users. To solve this obstacle, I proposed Edge Computing to the client. And I’ve developed several POCs (proof-of-concept). Finally, I chose Cloudflare Workers and CouchDB. The result of the new site is 444% faster. The new implementation is mentioned in the below sections. Introducing Cloudflare Workers The existing site is running on AWS Lambda . Obviously, it is not an edge computing platform. Though it has Lambda@Edge , Cloudflare Workers are still easy to develop, running faster and lower cost than others. As mentioned in Cloudflare Wiki , Cloudflare is a web-known CDN provider that had installed over 200 data centers around the world . In Mar ...

Develop an intelligent Slack bot using Block UI for website administration

In conventional web site administration, web developers build an admin site to perform daily tasks such as query how many members register daily and block a user. The admin site development includes frontend and backend codes. The slack developer can do the same thing without any frontend code. Starting from Feb 2019, Slack provides a very powerful and beautiful UI component (Block UI): In this blog, we will develop a Slack bot to tell you how many users register today, or block a user. Take a look to below video: What is Slack? Slack is a collaboration hub where you and your team can work together. Like Whatsapp group, our team 50% of workers are working remotely and all communicate in Slack workspace. Why Slack? Slack provides SDK for developers to develop applications. Below sections will show you how to develop a Slack Bot (Chatbot application). It works like a colleague to perform backend tasks. The bot can recognize below messages: How many users registered today? Block user NNN ...

EOSIO Blockchain dApp Step by Step: Part 4 - Google App Maker Frontend

This is the complement of the blog: EOSIO dApp on Blockchain Step-by-Step: Part 3 . In the blog, I’ll show how to build the Election Demo webapp using Google App Maker instead of HTML/CSS/Javascript manually coding. The backend has no change still using EOSIO Blockchain. Google announced on 14 Jun 2018 that App Maker had been made generally available to G-suite business and enterprise users. App Maker is a low-code development environment for developing software based on its G Suite productivity and communications suite. App Maker uses templates for building UIs, which can be assembled via drag-and-drop. Create an App using Google App Maker I’ve recorded the webapp creation as below video (silent mode). The whole creation process was about 30 minutes and has been reduced to 5 minutes. Below listed two scripts (client script and server script) which are copy&paste to App Maker: The Produced Webapp Below is the video recorded (at normal speed) the webapp which prod...

EOSIO Blockchain dApp Step by Step: Part 3 - Webapp

This is the 3rd part (final) of the blog: EOSIO dApp on Blockchain Step-by-Step: Part 1 . In the last part , I’ve developed a Smart Contract for EOSIO platform to simulate an election. This part I will develop a webapp that allows visitors to vote for a candidate. Below is a quick preview of the webapp: Source Code Explanation Firstly, please see below for the overview diagram: The Frontend The frontend consists of HTML, CSS, and Javascript. I used SemanticUI as CSS framework for a nice appearance. JQuery is heavily used in Javascript for easy development. There has only one page (homepage HTML) for this webapp. The homepage has divided into four portions. Below is the screenshot of the portions: Below is the code fragment of the homepage index.html : ... <body> <div class="ui container"> <div class="ui grid"> ... <div id="hints_portion" class="sixteen wide column"> ...

EOSIO Blockchain dApp Step by Step: Part 2 - Smart Contract

This is the 2nd part of the blog: EOSIO dApp on Blockchain Step-by-Step: Part 1 . The last blog described the EOSIO setup processes steps-by-steps. This part will develop a Smart Contract for EOSIO platform. Development The purpose of the smart contract is to simulate an election. I created an EOSIO user to host the smart contract. Created two citizen users to vote for a candidate. The voting records keep saving in the EOSIO blockchain. In this example, all operations are operating in command mode. Let’s get started. Develop the Smart Contract EOSIO executes the smart contract which is developed in WebAssembly standard . So I developed the election smart contract in C++. Below is the full source code of election.cpp : Note the last line EOSIO_ABI() is a macro statement to generate ABI file automatically rather than write it manually. ABI file is to define the apply action handler . Which tells the EOSIO the definition of the handlers inside the smart contract. EOSIO provides multi...

EOSIO Blockchain dApp Step by Step: Part 1 - Setup

After I listen Bettina Warburg’s speech , I am fascinated by the concept of decentralized economy (dApps). The traditional web application is: Front End → Backend → Database In contrast, dApp website is: Front End → Smart Contract → Blockchain For instance, when you go onto e-banking, the web page will call the backend code to grab your personal data and display them on the page. The backend code is running on centralized servers. As opposed to traditional, where dApps have their backend code (smart contract) running on a decentralized P2P network (Blockchain). Why Is Blockchain So Hot? "Blockchain is the technology that underpins the digital currency Bitcoin – but it has far wider applications and is being commercialised in a growing number of areas. It has generated much interest in technology circles and beyond, because of the new possibilities it opens up in financial services, the public sector and other areas." THOUGHT LEADERSHIP Nov 2017 What Is EOSIO blockchain? EO...

WebAssembly experiment: C++ vs JS

Introduction WebAssembly brings the webapp executes as fast as running machine code. It is now supported in all major browsers (Chrome, Firefox, Edge, Safari). I’m very excited about the potential so I started to evaluate it. This is an experimental webapp to demonstrate how to call the external C++ module from Javascript. In addition, here also compares the performance for manipulating a list of products in C++ (with STL) versus Javascript (with Lodash ). Contents of this Blog: Development environment setup Develop C++ module Develop the web interface Develop Javascript module Performance comparison result 1. Development Environment Setup In my development environment, I’m using MacOSX 10.11 EI Capitan. The programming language versions I installed as below: $ node -v # v8.9.1 $ python -V # Python 2.7.13 $ java -version # java version "1.8.0_171" $ clang++ -v # clang version 6.0.1 (emscripten 1.38.6 : 1.38.6) $ cmake -version # cmake version 3.11.4 Install Visual Studio Co...

Google Calendar Wordpress theme Steps by Steps

Introduction This blog describes how to build a Wordpress theme which the frontend displays a calendar (using jQuery FullCalendar). The Wordpress as backend which the PHP codes communicate with Google Calendar (via Google API service account) to perform loading/saving event(s). 15-seconds short demo outcome video (no sounds): System diagram of this tutorial: Note: Unlike other common tutorials, this tutorial chooses Server-to-Server communication approach . This does NOT require users to authenticate and consent. The Source Codes You can download the source codes from this Github repo Prerequisite WordPress 4.9+ PHP 7.0+ Composer 1.6+ A Google Account Initialize the backend project First of all, you’ll need to create a project directory. Link the directory to your WordPress theme directory (assume the WordPress is installed in /var/www/html ). The Linux command: $ mkdir google-calendar-wordpress $ cd google-calendar-wordpress $ ln -s $(pwd) /var/www/html/wp-content/themes/google-calen...