WSL2
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
Read moreWeb Development
A collection of 9 posts
TailwindCSS
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": "^4.1.0", "gulp-sourcemaps": "^3.0.0", "node-sass": "^5.0.0", "postcss": "^8.2.8", "postcss-import": "^14.0.0", "tailwindcss": "^2.0.4" } "scripts": { "dev"
Read more
Ghost
Ghost Theme Development on WSL2
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.
Read more
Docker
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.
Read more
Web Development
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
Read more
Web Development
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('node-sass'); // The `clean` function is not exported so it can be
Read more
Web Development
Google Certified Mobile Web Specialist Study Notes
Reference Basic Website Layout and Styling Mobile Emulation Viewport * Mobile assume all sites with a width of 980px unless viewport defined * Device Independent Pixels(DIP): relate pixels to real distance * Device Pixel Ratio(DPR) = Hardware Pixels / Device Independent Pixels * Font boosting: scale up auto-detected primary content Rela
Read more
Framework
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
Read more
Web Development
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
Read more