Simon Ho | Software Developer Blog

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

This is the 2nd part of the blog: Progressive Web App Wordpress Theme Part 1 . Last time the Progressive Web App performs in the local server properly. This part will integrate it with WordPress Theme. Test it in real WordPress server, and Android phone as well. Let’s get started. Produce a Wordpress Basic Theme As WordPress Theme Development document mentioned , it does require at least three basic files. I store those files in directory /wp-files were under the project root. 1. Theme Stylesheet /wp-files/style.css : /* Theme Name: PWAWP-Theme Theme URI: https://wordpress.simonho.net/ Author: Simon Ho Author URI: http://www.simonho.net Description: Progressive Web App Wordpress Theme Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: pwawordpress Tags: pwa, one-column This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. ...

After I read two articles: Progressive Web Apps Are The Next Big Thing and More Surprising Statistics About WordPress Usage . I decided to build a Wordpress theme which integrated Progressive Web Apps (PWA) to see how cool it is when two “Big Thing” mix together. TL;DR To avoid Too Long; Didn’t Read. I break the whole procedure into two blogs. In part 1, I will build a Progressive Web App in the local server. What PWA features to be built here? According to PWA wiki , the PWA will be progressive enhancements. The final webapp will be: Responsive design: I choose Bootstrap 4 because it’s mobile-first design. Contents retrieve from Wordpress CMS via REST API . It’s a natural way the App is developed in Javascript. Offline support: The PWA still can run and display the contents when no Internet connection. Installable on Android home screen: I w...