benmiles-wp

A custom WordPress theme plus data and plugins, for my portfolio website: benmiles.com

Development

Instructions in this README are based on the following setup:

• IDE: Visual Studio Code
• Local Server: Laragon
• Database: HeidiSQL
• FTP: Filezilla

Installation

1. In the destination environment, complete the steps to install WordPress
2. In the WordPress backend, check that the custom theme and all plugins are activated and configured properly
3. Copy the contents of /wp-content/ into the destination environment
4. Export a .SQL file from the develpment environment, containing structure + data for all tables
5. Open the .SQL file in a text editor, and find-and-replace the develpment URL with the destination URL
6. Save the .SQL file and import it into the destination database

Updating

• Code & Files: Keep code changes in Git, and migrate file changes via FTP.
• Data: From local, export the whole database to a SQL file. Make sure to enable "Drop Tables," "Create Tables," and "Replace existing data." Open the file and do the following two search-and-replace operations, in this order: benmiles-wp.test -> benmiles.com, then http://benmiles.com -> https://benmiles.com. Save these changes, then import the file to the remote site's PHPMyAdmin.

Notes Regarding Media

Featured Images

• Dimensions: 1200x750 pixels (or similar, but at a 16:10 aspect ratio)
• File Names: ben-miles_[project-name]_16x10.png
• File Types: PNG is preferable in most cases for visual quality, but JPG is also sufficient.

  Additional Images

• Dimensions: Any aspect ratio, no wider than 720 pixels
• File Names: ben-miles_[project-name]_[unique-description-of-image].png
• File Types: PNG is preferable in most cases for visual quality, but JPG is also sufficient. For web site screenshots, I prefer to use FastStone Image Resizer with the following settings:
  • Format: JPG, Quality: 70, Photometric: RGB, Color Subsampling: Disabled, Smoothing: 0, Optimize Huffman Table: Enabled, Progressive: Disabled, Keep EXIF: Enabled
  • Advanced Options: Resize ( Based on one side, Width, Exactly 720px, Filter: Lancos3 )

    Videos

• Audio: Muted or removed
• Dimensions: 960x600 for original capture, and 384x240 for optimized assets
• Duration: Optimized assets should be no longer than 15 seconds
• File Names: ben-miles_[project-name].webm for the original capture, and ben-miles_[project-name]_min.webm for optimized assets
• File Types: WEBM for optimized assets
• Process:
  • Load the site to be recorded in a new browser tab or window, maximized on the primary monitor.
  • Prepare the browser by opening Chrome's DevTools, snapped to one half of the second monitor, with the device toolbar enabled, and set the following options:
  • Dimensions: Responsive
  • Width: 1920
  • Height: 1200
  • Zoom: 50%
  • Device pixel ratio: 1.0
  • Device type: Mobile (no touch)
  • Throttling: No throttling
  • Copy this JavaScript snippet, after updating the value of timeToScroll to the desired duration in milliseconds:
  • var timeToScroll = 10000; scrollTo(document.documentElement.scrollHeight-document.documentElement.clientHeight, timeToScroll); function scrollTo(element, duration) { var e = document.documentElement; if(e.scrollTop===0){ var t = e.scrollTop; ++e.scrollTop; e = t+1===e.scrollTop--?e:document.body; } scrollToC(e, e.scrollTop, element, duration); } function scrollToC(element, from, to, duration) { if (duration <= 0) return; if(typeof from === "object")from=from.offsetTop; if(typeof to === "object")to=to.offsetTop; scrollToX(element, from, to, 0, 1/duration, 20, easeInOutSine); } function scrollToX(element, xFrom, xTo, t01, speed, step, motion) { if (t01 < 0 || t01 > 1 || speed<= 0) { element.scrollTop = xTo; return; } element.scrollTop = xFrom - (xFrom - xTo) * motion(t01); t01 += speed * step; setTimeout(function() { scrollToX(element, xFrom, xTo, t01, speed, step, motion); }, step); } function easeInOutSine(t){ return -(Math.cos(Math.PI*t)-1)/2; }
  • Prepare the recording by opening the Screen Recorder extension for Chrome, snapped to the other half of the second monitor, and complete the following steps:
  • What do you want to capture: Only Screen
  • Record audio: None
  • Click "Start Recording"
  • Click "Chrome Tab"
  • Highlight the appropriate tab in the list
  • Record by following these steps, starting each step immediately after the preceding step:
  • Hit Enter in Screen Recorder to begin the recording
  • Select the Console panel in DevTools
  • Hit F5 to refresh (this will reset any entrance animations that were already triggered)
  • Hit CTRL+V to paste the script
  • Hit Enter to trigger the scroll animation
  • Click "Stop" in Screen Recorder as soon as the scroll animation completes
  • Save the recording by doing the following:
  • Click "Optimize"
  • Click "Save"
  • Rename file as per File Names above
  • Optimize the video by doing the following:
  • Upload file to EZGIF's Online Video Resizer
  • Set "New width" to 384 and "New height" to 240
  • Leave "Output format and encoding" set to the default value, "Copy original"
  • Click "Resize video!"
  • Click "Save"
  • Rename file as per File Names above