Skip to main content

Posts

How I make a web-components based dynamic Javascript page at the top of Google Search

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 webpage speed using th
Recent posts

Build A Simple Sales System using Google Drive

Google Drive is a free-to-use cloud service with a 15 GB limit storage. 15 GB is large enough to store documents, and "program" too. Yes, it's correct. We can program Google Drive. This blog is a step-by-step tutorial to show you how to build a simple P.O.S. system on Google Drive. Create a Google Sheets to define the products 1. Login to Google Drive using your Gmail account and create a Google Sheets: 2. Input the products in the Google Sheets Create a Google Forms for sale input 1. Create a new Google Form 2. Edit the form and the first field Note that leave the option field unchanged. We'll assign it programmatically in below 3. Add a quantity field 4.  Add a last field for the price input How to copy data from Google Sheets to Google Forms? We need to add a script to do that. Google developed Google App Script (GAS) for us to achieve that. Now go back to the Google Sheet we just created above. Then enter to the script editor You'll see the below screen. Then

Create An Online Store Theme Used By MyCMS

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

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