Web Design Deliverables
Web Design Deliverables
Web Development
A collection of 12 issues
HTML to PDF, dynamic document generation
dynamically generate PDF documents for the web using PHP with the library dompdf/dompdf
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.
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
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": "
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.
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(
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