Pinpoint on Maps
Displaying pins on Map
Waicung
Lock Screen on Power Button Failure
The power button is gone on my outdated Google Pixel. In need of function to lock screen via a single touch, there it is
Photoshop(.psd) preview support on NextCloud
Even though psd preview is enabled on Windows with Program like SageThumbs. Local Previews kept disappearing after file synced with NextCloud server.
S3 Folder Usage Recording
Prerequisite Install or update to the latest version of the AWS CLI Solution get_daily_usage.sh #!/bin/bash # Set your AWS credentials export AWS_ACCESS_KEY_ID="YOUR_ID" export AWS_SECRET_ACCESS_KEY="YOUR_KEY" export AWS_DEFAULT_REGION="REGION" # Name of
Fully Customized AWeber Form
Reference Basic <form method="post" action="https://www.aweber.com/scripts/addlead.pl"> <input type="hidden" name="listname" value="[your unique list ID here]" /> <input type="hidden" name="redirect" value="
Certbot on Amazon Linux 2023 for HTTPS
Installing Certbot in a Amazon Linux 2023 machine using pip
Resolve Docker Error - Error response from daemon: Ports are not available
Solution for resolving a docker error that arises after WSL reboot.
Docker Proxy
Setup docker proxy that affects all builds, even when it is not specify in the Dockerfile, which may be confusing on the next build when proxy is not required.
Upgrading NextCloud on AWS
Procedures to upgrade NextCloud runs on AWS
Auto Deploy Using Github Action
Simple script to deploy branch to a server
ICP in China with AWS
Registering ICP for Server's Internet Access on ports 80/8080/443 in Mainland China
App Removed: Families Policy Requirements: Families Data Practices
The app has been removed from Google Play Store due to an update of the Family Policy forbidding the collection of Android Advertising ID (AAID), SIM Serial, Build Serial, BSSID, MAC, SSID, IMEI, IMSI
Firebase Integration with Flutter targeting IOS
follow these steps to resolve uncommon issues when integrating Firebase with Flutter targeting IOS.
Firebase Analytics Integration to Android
Firebase Integration in Android Application
NextCloud on Ubuntu - Server setup and Installation
A guideline for setting up a Ubuntu server and install all the dependency of NextCloud manually
Latency Test to AWS Region
Test Latency before dedicating to a specific region to set up your server.
AWS Identity and Access Management(IAM) Simplified
Managing sub-user in AWS simplified
Nextcloud on AWS Linux 2023
using Nextcloud All-in-One Docker image to facilitate the installation of Nextcloud on AWS server
NextCloud on Docker 2024
Use the following config to rapidly deploy a NextCloud container for testing purposes.
Remote Proxy Server
remote proxy setup simplified
WordPress Query Loop Block
As an essential Block in the WordPress block era. Building a customised Query Loop can sometimes be tricky. Here comes Query Loop Simplified.
Web Design Deliverables
Web Design Deliverables
Let's Encrypt on Docker
Trigger let's encrypt certification generation using one command with Docker
Update Ghost on Docker
Guideline for updating Ghost 5.x hosted as docker container
Nginx Reverse Proxy | Auto HTTPS with Let's Encrypt | Multiple Docker Containers
Combine the power of Nginx Reverse Proxy, Let's Encrypt and Docker for a better web development and production experience
Connecting a Docker Container on Lightsail Instance to AWS Lightsail Database
It is much more convenient to use an isolated Database considering the level of control and ease of data access, compared to an all-in-one docker-compose.
Development Proxy (Flutter and IOS)
common proxy setting in developing IOS using Flutter
Configuring Gradle for Android Development
Solutions for common Gradle issues faced in Android development for beginners
Flutter to signed APK
Two Key factor to build a signed APK
Flutter Gibberish
Reference Solution add Environment Variable， then restart Android Studio Variable Key：GRADLE_OPTS Variable Value: -Dfile.encoding=UTF-8
WordPress Custom Block Developer Essential
A complete guide for Custom Block development for WordPress in all aspects
AI Model in China
Generic AI model in China.
Using Custom CSS to Hide Template Header and Footer on a page in Elementor
Template Header and Footer are set to show on all pages with Elementor. While there is not setting to toggle it on/off. It is possible to hide using a single line of CSS
A2P 10DLC registration required for US messaging - SMS Solution for a non-US party with Twilio
A new regulation for SMS in the US caused a high level of SMS delivery failure. If initially using a Local number as origin, Twilio will advise users to complete A2P 10DLC registration, which is troublesome for most small businesses. Switching to a Toll-free number might be a better solution.
HTML to PDF, dynamic document generation
dynamically generate PDF documents for the web using PHP with the library dompdf/dompdf
SMS API in China with Tencent Cloud
sending SMS to numbers from Mainland China could be troublesome due to the restricted SMS policy, SMS service providers from outside the area mostly offer unstable SMS delivery. Why not try a local provider?
blocked by CORS policy
Client Side Origin is automatically attached to every request to identify the origin of the call Server Side Header "Access-Control-Allow-Origin" and "Access-Control-Allow-Methods" is attached to every response so the browser can crosscheck if the response is valid. For Example, for an Apache server <IfModule mod_
AWS S3 as WordPress media storage
Offloading media attachment to AWS S3 to free up space and optimise resource loading performance is easy
Apache config for hosting single-page Vue APP with vue-router
When navigating to any route in a single-page application, a Page not found will occur. It is because the server is trying to retrieve an actual file from the web folder. add the following config to the web server can direct all traffic to the entry page.
Xdebug with Docker on localhost with proxy to the Internet
Simple config to allow Xdebug to connect to the VS Code and container to the Internet via proxy.
fix empty $_FILES via form submission
attribute "enctype" is required if a <form> is to submit a file.
Dynamic List Render Animation on Vuejs and TailwindCSS
List animation with VueJS and TailwindCSS
Rest API authentication with Headless WordPress
WordPress provides built-in support for authenticating the incoming request to its restful API, which is handy.
SQL Query to Retrieve Woocommerce Order with Product Detail
Woocommerce order detail is saved in several tables which could be tricky to retrieve, this snippet may be handy to help you out
Dynamic Redirect in WordPress
programmatically register an endpoint to enable customised dynamic redirection
phpcs Fatal Error with wp-coding-standards/wpcs
The phpcs autoformat-er failed to perform on save in VS Code. "A Fatal Error" pops up. It is caused by the sniffs applied, wpcs, which is not yet compatible with PHP8. But it can be resolved with a line of PHP configuration.
Collecting One-Step Payment with Woocommerce
create a checkout link to quickly collect one-time payment
Port Forwarding for WSL2+Vscode, Docker Desktop with Wordpress+Xdebug3(+Certbot)
Quickly setup port fowarding for WSL2 to receive Xdebug signal within a Docker Container
Block Theme Design Guideline
Template and Template Parts * Site-wide Elements * Search, 404, Singular, Index(Archive) * Header, Footer * Special Page: Blog with Specific Cat Block Patterns * Collection of Blocks whose content is to be updated during Post Creation * Post Content: Highlight + Sample Header + Sample Content Reusable Blocks * Identical Blocks to appear in multiple part of
Change of Multisite Domain - enable Cloudflare on Siteground
After Cloudflare was enabled on Siteground, The Network Admin was end up with a redirection loop, while the primary site was functioning in anyway.
Update Images with Docker Compose
Docker Compose provides an efficient manner to update base images all at once
Config PostCSS to compile tailwindcss on WP Rig
Tweak WP Rig to include v2 TailwindCSS support
NAT Virtual Network on Hyper-V
Quickly set up NAT virtual network on Hyper-V and forwarding physical port traffic into Ubuntu VM
Multipass to fire up a Wordpress Dev Server
Another way to quickly fire up a local dev server for Wordpress development
Xdebug with VS Code (Remote - SSH)
quickly setup php debugging on remote server with Xdebug and VS Code with Remote-SSH enable
Billing State / County is a required field. Error on Woocommerce/WordPress
Why `Billing State / County is a required field` warning still pops out when a filed is hidden in Woocommerce/WordPress. Here, we will explore how this occur and how to resolve it.
Audio Cutting using Audacity and Batch Rename with PowerToys
Audio Cutting using Audacity and Batch Rename with PowerToys
TailwindCSS + postCSS + BrowserSync + Gulp for WordPress Theme Development & Production
Dependencies package.json "devDependencies": { "autoprefixer": "^10.2.5", "browser-sync": "^2.26.14", "gulp": "^4.0.2", "gulp-autoprefixer": "^7.0.1", "gulp-postcss": "^9.0.0", "gulp-sass": "
Error Note - Android Studio
records configuration issues and solution when developing on Android Studio
WordPress links and permalink
A customised URL style can not only increase customer satisfaction but also make it easier to identify the location when issues occured.
Ghost Theme Development Environment Setup
To take advantage of the linux system. developing custom ghost theme with WSL2 on Windows is an ideal option. Yet some incompatible issues is worth recording. Such as detecting file changes.
Nodejs on WSL2
setting up nodejs on WSL2 with nvm.
Laravel Development with Docker and VS Code
A flexible starting template for full stack development with Laravel as API endpoint and admin dashboard and vuejs SPA as frontend application. It enables unit testing with each components, regular dependency updates, local hosting and development servers. VS Code is the default coding tool.
代码简洁之道 - 读书笔记
1. 简洁代码 * 优雅，高效；减少依赖；完善错误处理代码；处理专一事务 - Bjarne Stroustrup * 简单直接，干净利落的抽象（crisp abstraction），直截了当的控制语句 - Grady Booch * 可由其他开发者阅读和增补；应有单元测试和验收测试；有意义的命名；单一的做一件事的途径；经量少的依赖关系；清晰但尽量少的API - Dave Thomas * 几乎没有改进的余地 - Michael Feathers * 通过所有测试；不重复；体现系统中的全部设计理念；尽量少的实体 - Ron Jefferies * 代码让编程语言看起来像是专门为解决那个问题而存在 - Ward Cunningham 2. 命名 * 清晰，有意义的命名能有效降低代码的模糊度 * 避免留下掩盖代码本意的错误线索 * 有意义的区分 * Product，ProductInfo，
WeChat Mini Program - Built-in Cloud Support
WeChat Mini Program now supports built-in Cloud Database, Storage, Function support for repid development.
Kubernetes
Reference Hardware Nodes The smallest unit of computing hardware in Kubernetes. The cluster An abstraction layer, the whole of nodes. Presistent Volumes A file system to mount to the cluster, instead of associated with any particular node. Software Containers A Self-contained Linux execution environment. Pods A wrapper for one or
Wordpress Theme Development with Docker and UnderStrap
Docker Set-up for Wordpress Development Define Services in a Compose File Reference # Version of the Compose file format # Version 3 is the most current and recommended one version: "3" # Top building block that defines # All containers used for this service services: # Container 1 # https://hub.docker.com/_/mysql
VueJS - Render Functions & h
decoding the mysterious h function in the begining code of a vue project
Regex
Cheat sheet for using regular expression
Javascript Event Loop
A visual introduction of the Javascript event loop that can slove the doubt from many Javascipt beginning.
Reduce size of .git Folder
.git folder for git sometimes ends up tens of megabyte. Such unusual size is usually caused by misconfigure of .gitignore, causing git recording changes of large files such as images and videos.
Mouse Without Borders
Windows official software for sharing keyboard and mouse between Windows PCs
Responsive Menu - Burger Icon Transformation
Responsive menu with using pure CSS
Tailwind CSS for the Underscore Theme Development Workflow
Tailwind CSS have the potential to terminate the painful process of coding customised CSS on top of existing framework and offering developer with simple and clear configuration for theme development.
MySQL basic command
Commonly use MySQL statements
Dev Environment Setup - Virtualbox+Ubuntu18.04+Docker
The very basic docker setup for WordPress theme development or local staging in a Virtual Machine using VirtualBox with Window 10 as host.
Adding Background Color to PNG using Python
While converting from PNG to JPG, a black/white background will be added to fill in the transparent layer of PNG. This python code enable user to customise this background color while converting PNG images to JPG
Gulp4.0+SASS4.0+BrowserSync2.26
References * Gulp * SASS * BrowserSync Code * compile SASS when css changes * reload when scss files or php files changes 'use strict'; const gulp = require('gulp'); const sass = require('gulp-sass'); const browserSync = require('browser-sync'); var sourcemaps = require('gulp-sourcemaps'); sass.compiler = require('
Google Certified Mobile Web Specialist Study Notes
Reference Basic Website Layout and Styling Mobile Emulation Viewport <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- device-width = DIP initial-scale: DIP:CSS Pixel = 1:1 --> * Mobile assume all sites with a width of 980px unless viewport defined * Device Independent Pixels(
WSL Access .ssh in Windows
SSH Using the same .ssh folder in Windows Issue: File Permission requirement in SSH for Config file and private key Form symlink ln -s /mnt/c/Users/UserName/.ssh ~/.ssh Change Default Permission sudo umount /mnt/c sudo mount -t drvfs C: /mnt/c -o metadata,uid=1000,gid=1000,
Assessing Grey Level of an Image with PHP
<?php /** * Get gray level of some position of an image */ function get_gray_rgb($image, $x, $y) { $rgb = imagecolorat($image, $x, $y); //level of red, green and blue $red = ($rgb >> 16) & 0xFF; $green = ($rgb >> 8 ) & 0xFF; $blue = $rgb & 0xFF; //formula to calculate
English Spelling
Reference i before e 1. i before e (believe) 2. except c (receive) 3. except when sounded like a 4. except neighbor 5. except weight slient e 1. drop e if ending begins with vowels (use->us-able) y 1. consonant before y, change y to i (e.g. flies)
Contact Form 7 - recaptcha
Stopping Spam with Google reCAPTCHA in Contact Form 7 included Integration
NextCloud Hosting in AlibabaCloud(ECS+OSS+RDS+Redis)
Official Guideline * Ubuntu 16.04 * NextCloud 13 Server Application sudo apt update sudo apt upgrade sudo apt install apache2 php libapache2-mod-php7.0 apt install php7.0-gd php7.0-json php7.0-mysql php7.0-curl php7.0-mbstring apt install php7.0-intl php7.0-mcrypt php-imagick php7.0-xml php7.0-zip Site conf SSL Let'
IELTS Writing - Band 9
Education Sample 1 Using a computer every day can have more negative than positive effects on children. Do you agree or disagree? I tend to agree that young children can be negatively affected by too much time spent on the computer every day. This is partly because sitting in front
Latest Ubuntu(/LAMP) in VirtualBox
How to install Ubuntu 18.04 in Virtualbox together with LAMP stack and shared folder for exchanging file with the host
PTE Listening
Official Guideline The audio begins to play automatically Summarize Spoken Text 50-70words * main point and supporting points * grammar, spelling and punctuation Multiple Choice, Multiple Answer * read the question * note main points * note supporting details (e.g., times, places, things that happened) * match the meaning, not the words Fill in the
PTE Reading
Official Guideline Multiple Choice, Single Answer * focus on key words in the prompt Multiple Choice, Multiple Answer * more than one option is correct * note any words that are repeated (particularly adjectives) * scan the text for the repeated words Re-order Paragraphs * understand main idea of each one (noting key words) * use
Only-Home-Page Problem during WordPress Hosting or Migration
There are times when a WordPress site needs to be migrated to a new server or hosting. When 'everything' is set up, only the home page can be accessed as expected while all other pages return 404. Following the below method should solve the problem in most case.
Merge Two Unrelated Git Repository
Considering others have downloaded a repo and developed in local git environment with brand new git history such that it cannot be merge back to the repo where it was initially cloned from. How to merge the two repo without losting git history?
Make a Widget in WordPress
How to make you own widget in a theme for WordPress
PTE Writing
Official Guideline Summarize Written Text 10m 75words * only one sentence (One Capital; One full stop) * complex or compound(/and) sentence * summarize main point * briefly mention the supporting detail Essay 20m 200-300words * note key words * topic/key points * points of view to present/discuss * agree/disagree * consider different groups of people
ComponentAccessToken fail
Summary of potential cause when A Customised WeChat Third-Party Platform fail to receive authentication token from WeChat. Either due to not receiving the token sent from WeChat or not storing it properly.
PTE Speaking
Official Guideline Personal Introduction Read Aloud * Rising and Falling Intonation Patterns The development of easy-to-use statistical software has changed the way statistics is being taught and learned . Students can make transformations of variables, create graphs of distributions of variables, and select among statistical analyses all at the click of a
Paginating Search Result in WordPress
Inject parameter that control pagination of query result so that search.php can display paginated result
with
How to correctly translate with clause from English to Chinese
Framework with Plugins and Tools for WordPress Theme Development for Marketing
Base * Starter Theme: Underscore * General CSS and Layout: Bootstrap * Plugin Activation(requires plugins within theme): TGM Plugin Activation Plugins (Development Purpose) * Theme Customizer: Kirki * Template(/Page) Custom Field: ACF Plugins (Utilities) * SEO: Yoast (Breadcrumb) * Form: Contact Form 7 * Social Media Sharing: Addthis * Analystics: Baidu Tongji + Google Analystics * Functions Editor: My
Speedy Environment Setup for Web Development - Docker(Laradock)
Prerequisite -System: Ubuntu 16.04 -install docker -[install docker-compose](https://docs.docker.com/compose/install/) -clone laradock Config Laradock to Support Multiple Projects Direct Laradock to look at the correct directory // edit .env Provided folder structure + laradock + projecta + projectb # Point to the path of your applications code on your
Baidu Tongji - Trackevent
How to setup trackevent through JS in Baidu Event Tracking, a working guideline. Setup JS-API <script> var _hmt = _hmt || []; </script> When Multiple Baidu Tongji Script is Used <script> var _hmt = _hmt || []; _hmt.push(['_setAccount', '0123456789ABCDEF0123456789ABCDEF']); </script> SideID It
Post Pagination with Page Number- WordPress Theme Development
Replace the default Old-New Pagination with Numbered Pagination Code <?php // Do not include the opening php code function numeric_pagination ($pageCount = 9, $query = null) { if ($query == null) { global $wp_query; $query = $wp_query; } if ($query->max_num_pages <= 1) { return; } $pageStart = 1; $paged = $query->query_vars[
Inject Tracking Code with a Plugin in WordPress
Plugin My Custom Functions Simply put, the code injected with the plugin will be appended to functions.php Code // Below code will add <script> with wp_head hook to relative location function analytics_code() { ?> <script> // JS tracing code block </script> <?php } add_
Contact Form 7 - Email Validation
Sagar Nangare Reference Block none-business(/Free/Certain) address from using the contact form Code (function.php) function varified_email($email){ if( preg_match('/@gmail.com/i', $email) || preg_match('/@hotmail.com/i', $email) || preg_match('/@live.com/i', $email) || preg_match('/@msn.com/
WeChat QR Code Toggler
QR Code (img) pop out when hover an (WeChat) icon HTML <div class="container"> <a class="toggler"> <img src="http://via.placeholder.com/50X50"/> </a> </div> CSS .container { position: relative; } a.toggler:hover::after{
SSH Failure
Timeout * Try another SSH client * Remove key in the Known_Hosts file Reference
Async Load WordPress Post
Reference Load Infinite AJAX Scroll <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="<?php echo get_template_directory_uri(); ?>/js/jquery-ias.min.js" type="text/javascript"><
Local WordPress Development Environment with Docker
MySQL Run MySQL container docker run --name wordpressdb -d mysql:5.7 docker run --name wordpressdb -e MYSQL_ROOT_PASSWORD=password -d mysql:5.7 The one to use docker run --name wordpressdb -e MYSQL_ROOT_PASSWORD=password -e MYSQL_DATABASE=wordpress -d mysql:5.7 WordPress Run WordPress Container
WordPress Theme Customiser
Reference Customiser Object Four main types Panels Containers for sections Sections UI containers Settings Accociate UI elements(controls) with settings $wp_customize->add_setting( 'setting_id', array( 'type' => 'theme_mod', // or 'option' 'capability' => 'edit_theme_options&
Subsetting Chinese Font File(Google Noto Sans CJK) for the web
The Font: NotosansCJK Download Free Google Noto sans font Font Format Convertor An online Tool to convert the original OpenType Font(.otf) file to TrueType Font(.ttf) Subsetting Tool: font-spider font-spider [options] <htmlFile1 htmlFile2 ...> The tool will subset and generate font files based on the content in the
PhpStorm SASS (/SCSS) File Watcher for (WordPress)Underscore Starter Theme
Reference Key Setting Arguments: --cache --update $FileName$:$FileParentDir$/$FileNameWithoutExtension$.css
Migrating OwnCloud 9.1.1 to NextCloud 12.0.4
Guideline for a successful migration from OwnCloud 9.1.1 to NextCloud 12.0.4
SSH Key Generation and How to use Multiple Keys
Key Generation ssh-keygen -t rsa -C "your.email@example.com" -b 4096 File with .pub is the public key, another on is the private key Multiple Keys When having multiple SSH keys(for different accounts) under the same domain (gitlab.com or github.com), system will not be
HTML(Single Dom Element) to PDF in Front End（using JS）
Dependencies * MrRio/jsPDF: To generate a PDF * niklasvh/html2canvas: To generate image from HTML(Dom element) * eKoopmans/html2canvas: Customed built with ability to custom resolution, for more details: reference Core Code html2canvas(document.getElementById('some-element-id'), { scale: 2, // customised built option by eKoopmans dpi: 192, // customised built option by
Basis of Docker
Installation Normal Windows Installer Command version check * docker --version * docker-compose --version * docker-machine --version * docker version detailed description of docker * docker info Images Fixed point of a (fixed, saved)container docker images list all the local images Image to Container docker run -ti ubuntu:latest bash run bash on ubuntu (image)
Adding the Weibo "Follow Me" Button on a Website
how to add the "Follow Me on Weibo" Button on a Website
Weather API For Chinese Cities
Through the research of available weather API in China. Several data sources were found as well as some famous weather API providers.
Resize the data disk on Alibaba Cloud ECS
Reference System * Ubuntu 18.04 Data Backup This is important in case anything unpredicted occurs, so everything can be simply rollbacked. But to save the data for the new partition, manually duplicate the data might be necessary. In the control panel of Alibaba Cloud, disk snapshot can be created in
Update a Ghost Blog
Update a Ghost Blog
Basis of Composer for PHP
Composer for PHP
Remotely connect to MySQL hosting on AWS EC2
Remotely connect to MySQL hosting on AWS EC2
Vagrant Notes
Vagrant Notes
Laravel - How to use queues
Use queue in Laravel
WeChat - Token Request And Data Retrieve
WeChat provides a convenient data API for accessing the data generated from verified official(VO) accounts. Such data is crucially important for the study of user behaviours for WeChat.This post briefly illustrates the simplest procedure to access data API.
WeChat Data API
A reference for the Data available from the WeChat Data API
Setup SSL (HTTPS) with Apache
How to setup HTTPS with Let's Encrypt.