Simon Ho | Software Developer Blog

Introduction Everybody wants their website shown at the first position of Google search. SEO (Search Engine Optimization) is a big topic. I just helped my client's website shows the database records at the top search rankings (at least several Chinese generic keywords). See the three example questions all are listed at top ranking: Website background: My client's website  popa.qa  is a traditional Chinese Q&A site that lets members ask and answer questions. All answers and questions are storing in the database server. Step 1: Create The Project This blog illustrates the problems and the steps to fix that with project source codes. Below is the description of the basic project: NodeJS backend (server.js) Develop an API ( /get-database-records ) to simulate getting database records Web-components frontend (index.html) An example component IndexPage  make use of  LitElement to render database records To start the server type: npm start Then I check the webpag...

MyCMS is an open-source Content Management System to generate static online shop website. You can use my hosting to input your products, or you can download the source codes and host it in your own server (running NodeJS). Please refer to my Github repo for the detailed installation instructions. This blog is a step-by-step tutorial that shows you how to create an online-shop theme. In this tutorial, it’s using my hosting to input the shop details and products. If you’re hosting the MyCMS by yourself, just change the domain name to yours will do. Introducing MyCMS Before making the theme, you’ll need to use MyCMS to configure the demo shop and input two demo products. MyCMS generates a static website via a theme. The generated static website is NO server program required. You can put the website files (HTML/CSS/JS) to any CDN, hosting. Shop Configuration You must prepare below settings Before using MyCMS: Setting Description Example Store name Your store name will be displayed in t...

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 ...

It’s worth pointing out that Semantic UI provides richer UI elements and robust features than Bootstrap 3/4. Semantic UI does contain more elements without the needs of 3rd party libraries. For examples: dropdown has built-in animation & search function. Step , Rating , Statistic are not existed in Bootstrap 3/4. Semantic UI comes with more than 20 themes. The CSS class names are more friendly to human words. (Semantic UI is available for download if you haven’t tried it yet, and want to.) This is a steps by steps guild show you how to create a basic Semantic UI theme, customize it, and setup the NodeJS server-side rendering development environment. Prerequisite This project leverages below technologies: Semantic UI 2.2 frontend framework NodeJS 6 or above server engine ExpressJS 4.15 server framework PUG 2 (Jade) template engine Gulp CLI 1.4 task runner LESS 2.2 CSS pre-processor Install NodeJS You can download & install the NodeJS from the official site or using...

This Blogpost compares the payment experience from three popular payment processors: PayPal , Braintree , and Stripe . This comparison is from the developer’s point of view. This is NOT to compare the prices and services. We will only concern the payment experience and coding effort. We will do: Backend codes in NodeJS-Express. Frontend codes in Pug, jQuery, Bootstrap 4. Whole payment process flow and its appearance. Compare the three SDKs and evaluate security. Please note that all payment processes are in Sandbox (development) platform. The source codes are host in this Github repo Project setup First of all, you’ll need NodeJS . The version is: node -v && npm -v v6.10.3 5.4.2 Enter your payment access keys (PayPal, Braintree & Stripe) into the .env file. The content is: PAYPAL_MODE='[sandbox|production]' PAYPAL_CLIENT_ID='[Your PayPal Client Id]' PAYPAL_CLIENT_SECRET='[Your PayPal Client Secret]' BT_ENVIRONMENT='[Sandbox|Production]' BT_M...

This is a long Blog describes how I build my Chatbot (named I’m Simon Chatbot) to demonstrate below features: The Chatbot talks with human via Facebook Messenger Chatbot server app running NodeJS (with ExpressJS framework) Giving an A.I. brain to the Chatbot with RiveScript The Chatbot server App hosts in AWS Lambda (comply with serverless architecture) User state management persistent via AWS DynamoDB Use Serverless framework for easy App deployment 1. Create a Facebook Page I want my Chatbot could be interfaced with my Facebook friends via Facebook Messenger. First of all, I need to create a Facebook page required by Messenger Platform . I make a funny banner picture and avatar to the Facebook Page as below: 2. Create an Facebook App and configure the Messenger Platform To accomplish chatting in Messenger, Facebook requires a Facebook App to define the configuration of the Chatbot web service. I create the App from the Facebook Developer website . As Facebook developer documentation...