Notes

Centre Web DesignWhat’s On Your BrainGuitar Lessons
Other Sites by this Publisher

Avoiding browser bookmarks for some reason. Presented here are a collection off-site links and other notes not categorized.

About Desktop Software:

Linux Desktop Enviornment

Linux Desktop Environment Window Managers (XFCE, KDE, Fluxbox; IceWM)
IceWM

IceWM is a Linux Desktop Environment Window Manager with a very small footprint.

Linux Desktop File Managers
Sunflower – File Manager

Sunflower is a dual-pane file manager for a Linux graphical desktop environment. Highlights: Sunflower is easily customized to your preferences. Open terminal as pane on either side. Add custom actions (such as open web browser and load selected file).

Linux Desktop Imaging
PhotoFlare

PhotoFlare – lightweight image editor for Linux Desktop

Productivity:

Productivity Management
Stop searching for better Software. Use you as the Software.
Posts and pages here about Productivity, including software recommendations.

Artificial Intelligence/ AI:

AI Artificial Intelligence Generative AI Machine Learning
Google Bard

Google Bard is not an OpenAI / ChatGPT language model.

More about Google Bard

OpenAI ChatGPT
prompts
VS Code Extensions

Android:

XDA Forum

That Knox thing – Y tu? persona non grata bullshit: ich bin es!
sudo apt install adb fastboot

Doing away with that Knox thing

A web site about it

Another Website about it

Creating Websites:

Color Utilities

Hex Color Picker with Complimentary Colors

CSS to SCSS (CSS to SASS)

Might seem strange to go the opposite direction, but this is actually a really nice little tool. Don’t pass this up!

While the idea might be distracting, t’s actually also a nice way to clean-up your CSS. Of the few I’ve tried, this is the one you want to use! That site is a one-stop shop! CSS to LESS, plus the other way (SASS to CSS).

Content Management Systems (CMS) which are NOT WordPress
  • MicroWeber – a PHP CMS using Laravel. PHP 8 required!
  • Eleventy, a simpler static site generator
  • Winter – in my experience this is probably where you want to start, especially if you’re new to Laravel.
CSS Grid
CSS Grid How-to tutorial
CSS Tricks – The website
CSS-Tricks on: WordPress Full-Site Editing (FSE), aka. WordPress Block Themes; aka. the WordPress [5.9 [Block]] Editor; aka. Gutenberg; aka. clearly no one knows what’s going on anymore.

Database

Online Tools

Database Diagram / Relationships – dbDiagram.io

Encryption & Security:

Secure Connection Keys
SSH Keys and PEM Files
GitHub and GitLab – SSH Settings
# Generate an SSH Key
# Include your email for ID. Tip: the -C means "comment"!

ssh-keygen -t ed25519 -C "[email protected]"

# FROM TERMINAL YOU WILL BE PROMPTED. 
# USE THE FOLLOWING AS PROMPTED
#
# SAVE your-username IN HOME SSH DIR: GENEREATED KEY FILE NAME

/home/your-username/.ssh/your-username_gitlab_id_ed25519

# SSH-AGENT: EVAL to ADD the new KEY. "Start your engines!"

eval "$(ssh-agent -s)"

# SSH-ADD: AUTHORIZE GENERATED KEY on YOUR LOCAL SSH DAEMON from FILE

ssh-add /home/your-username/.ssh/your-username_gitlab_id_ed25519

# COPY PUBLIC KEY TO CLIPBOARD for add to GitHub/Lab Profile Settings

cat /home/your-username/.ssh/your-username_gitlab_id_ed25519.pub

GIT Version Control

One of my old school projects, available for contribution on GitLab.

GIT: Branch

View details about local and remote branches:
git branch -vva

GIT: Configure SSL

Configure SSL – as presented by GitLab

GIT: Add New Local Code to GIT Repo

Initialize a local directory as a Git repository. Change to the desired directory, then proceed with the following:

# cd /var/www/html/my_new/project/folder

#Initialize that project/folder as a new Git repository
git init 

# Add files 
git add . 

# Commit your changes 
git commit -m "First commit" 

# Add remote origin 
git remote add origin <Remote repository URL> 
# <Remote repository URL> looks like: https://github.com/user/repo.git 

# Verify the new remote URL 
git remote -v 

# Push your changes 
git push origin master

Roundabout way of achieving same effect:

  • Clone git repo
  • Copy and paste into it
  • Push your change at origin

If in any case git reject your push you can use git push origin master --force

As pointed out by Scott Biggs in comment that “This works for both adding a file that was once ignored as well as ignoring a file that was once tracked”

Clear Cache to Activate .gitignore Changes

Some notes taken from this StackOverflow article

You will have to clear the existing git cache first.

Remove the cache of all the files

  • git rm -r --cached .

Remove the cache of specific file

  • git rm -r --cached <file_name.ext>

Once you clear the existing cache, add/stage file/files in the current directory and commit

  • git add . // To add all the files
  • git add <file_name.ext> // To add specific file
  • git commit -m "Suitable Message"
GitHub @ajaxStardust (repos from the author of this site)

wp_deploy – Just a simple WordPress installation to deploy from a GitHub repo.

WordPress WP_List_Table – My custom WordPress Plugin demonstrating use of WP_List_Table class / class extends WP_List_Table. Includes an SQL file for seeding the db with 10 users, so you can get an idea of how it might be used. I called it Zapper. That was my late brother’s nickname.

GIT SSH Tips

Linux (plus some WSL):

Display [ +tweak ]

“Enlarge” the desktop visible area with a simple command:

Inspired by what I learned from a linux community site (you only need to read the very first part where there’s pasted code, if you care).

# XRANDR - QUICK AND DIRTY
# see man xrandr
# xrandr \
# --output [option] 
#    get value for --option:
xrandr | grep -v disconnected | grep connected | cut -d' ' -f1
# ~ eDP
#
# value for --output returns, as above
# 
# Scale display of --output by +120%
xrandr --output eDP1 --scale 1.2x1.2

There’s another nice xrandr / xorg display reference at the website LinuxConfig.org

ExplainShell.com

ExplainShell.com is an absolutely amazing web application made available to you, for FREE, courtesy of Idan Kamara! Even if you don’t need help with the command line, take a moment to visit the site just to see how it works. A quote from the author:

[ ExplainShell ] is written in Python and uses bashlex , … d3.js for the connecting lines graphic and Flask. It is served with uwsgi and nginx. Source code is available on github. You can contact me at idan at explainshell dot com for any questions or suggestions.

Idan Kamara

Mount VHDX Image

libguestfs-tools – Linux Lib Guest FilesSystem Tools
# Install the required software
sudo apt-get install libguestfs-tools
# create a mount point with a funny name using make dir
mkdir /mnt/vhdx_mounted_like_she
# issue command to use the new "lib", guest filesystem tools installed in step one. get busy!
guestmount --add image_file.vhdx --inspector --ro /mnt/vhdx_mounted_like_she

Multiple File Operations

Find files and Sort the found files by date
# FIND SPECIFIED FILES AND SORT BY MOST RECENTLY MODIFIED
    find . -name 'wp-*' -type d -prune -o -type f -iname notes.css -printf "%T@ %Tc %p\n" | sort -n
Find files and execute grep on the results
#PRUNE (exclude) -type d (directory) then GREP files containing .html 
find . -name 'node_modules' -type d -prune -o -type f -exec grep ".html" {} +

# FIND ONLY \.html in folder at path .
    # prune node_modules and adminer.php
find . -name 'node_modules' -type d -prune -o -type f -name 'adminer.php' -prune -o -type f -exec grep -nH --color "\.html" {} +

#LOOK IN FOLDERS at PATH .
 #           PRUNE:
 #               node_modules
 #               public_
 #               assets
 #           GREP files containing \.html|\.js
                 
find . \( -path "./node_modules" -prune -o -path "./public" -prune -o -path "./assets" -prune \) -o -type f -exec egrep -nH --color "\.html|\.js" {} +
Rename All Files and Folders of Path
 for i in /some/path/*; do 
   mv "$i" "$(dirname "$i")/.$(basename "$i")"
 done

In the command above, /some/path/* can be changed to ./* to affect the contents of the current path (cwd).

Copy Files Where Path has Spaces
cp -r "./.var/app/com.sublimetext.three/config/sublime-text-3/Installed Packages" "./.config/sublime-text/" --verbose

In the command above, /some/path/* can be changed to ./* to affect the contents of the current path (cwd).

Replace Multiple Specified Files #1 with Specified File #2
find /var/www/html/subfolder/css -iname ugly_americans.png |\
while read filename
do
     cp /var/www/html/css/vulcan_death_grip.png $filename
done
Delete all files by pattern match

In the folder /var/www
on path of /assets/
all matches where name contains ” (copy”
delete those files.

find /var/www -path '*/assets/*' -name '* (copy*' -delete

Tweak the following command to suit your needs. This example targets a particular file extension by name. Note the -name uses a wildcard in the beginning but none at the end, so the “r” in Zone.Identifier is the last valid match. Note: Zone.Identifier files are meta data about the original location of a corresponding file. You might see these after copying something from an NTFS drive to WSL)? Test it first without the ” -delete” of course before using it on any real data.

find . -name "*Zone.Identifier" -type f -delete
BASH – Environment Variables

Use the following command to show Variables only. Note, the parenthesis are there for a reason. If you don’t include them, your terminal will remain in POSIX mode after the command executes.

(set -o posix ; set)
Capture ls | tee with Timestamp

to use ts (Timestamp), you must first install the unofficial extension to GNU Coreutils:

sudo apt install moreutils

Example use where the ls command is tee’d with ts

ls -laX | tee >(ts "%d-%m-%y %H_%M_%S" > this_ls_command_teed.txt)
Command Line – Linux CLI References
Prevent Sleep for SSH connections
This article at AskUbuntu.com is at least a useful starting point for a Debian based distro.
The following command should inhibit sleep:
DISPLAY=:0 caffeinate bash
See Caffeinate ManPage.
Running Services
pstree
Use pstree to list running services from the command line. E.g.:
pstree | head -n 5
Software Options

Check out Flatpak! You can use it to “safely” expand your software installation options.

Disable Caps Lock Linux

Simple command line script to disable caps lock in Linux

I am become Root
sudo -s -H

Remote Admin / Web Hosting / Web Development / Sync


SCP – Secure Copy Protocol

Maybe think SSH meets RSYNC? This is NOT File Transfer Protocol (ie. SCP is not to be confused with FTP/ SFTP)

scp [option] [user_name@source_host:path/to/source/file] [user_name@target_host:target/path]

RSYNC
rsync -a –exclude '*/I-hate-so-many-files.txt' –exclude '*/hating_all_the_dirs/*' –exclude 'hate_this_dir_also' origin/ destination/

rsync -a –exclude={'I-hate-text-files.txt', '*/hating_all_the_dirs', 'hate_this_dir_also'} origin/ destination/

rsync -a –exclude-from=’exclude-file.txt’ origin/ destination/

some_file_you_hate.txt

hate_this_dir_also

contents of “exclude-file.txt”

NGINX:

NGINX Community Forum

NGINX Official Reference Documentation

the NGINX Bible
The Official NGINX manual at devdocs.io includes a convenient search!
Server Names
NGINX.org server_name doc for configuring server
Enable SSH NGINX Development Server

I use an example from techrepublic.com. It works for me. Until I can’t access that little guide, I’m not going to bother rewriting it to publish here! I wouldn’t use that setup for a production server.

Apache VHOST ⇨ Migrate to NGINX
.htaccess (mod_rewrite) conversion tool – convert to nginx
Nginx tutorial for understanding the differences between between Apache VHOST and NGINX. Published at a new Linux site for your investigation!
General NGINX Stuff to know
User, and File/ Folder Permission settings
Enable NGINX Directory Listing (for directories without and index file)
PHP FastCGI Process Manager (PHP-FPM)
Understanding how to use the PHP-FPM is key to understanding your NGINX server configuration. Learn it!
WiNGINX
Here’s your basic WAMP/ XAMPP sort of thing but with NGINX flavor. Check it out for the Win spin!

PHP (Hypertext Pre-Processor):

Online Sandbox

3v4l.org

Aka. “Eval dot org

Run your php code online; get statistics, vld output and compare output from all versions

Sjon – 3v4l.org

A great utility!

phpSandbox.io

Imagine a PHP Sandbox with everything you could possibly ever want, including Laravel. Did you picture it yet? Here. Just go to phpSandbox.io It’s already been done!

Random:

Hey Mr Donut-head man, who’s tryin’ to kill you? I dunno, but he better not!

Maximum ConsumptionSamba TV (Learn to use the maximum juice)

Regular Expressions:

E.g. as used in JavaScript bookmarklets, or for processing in URL-encoded, or “percent-encoded” strings

Search pattern: /([^ ])( +)(%20)( +)([^ ])/
Replacement pattern:  $1$3$5  (or \1\3\5 )

Study: Why is the Replacement expression intentionally empty?

Search expression: (<svg)([^>]+)(.*)(</svg>)
Replace expression:

Note: This works, but probably not in all cases where svg is present. I’d like to come up with an advanced Regex which will remove all garbage WP code from html source i might borrow from other sites for private notes. For my notes, I don’t need the pictures, link to Twitter, or any other extra, extra (extra like the Real housewives) code that’s inevitably added by WordPress or someone’s SEO scripts.

Remove <button><svg><path></path></svg></button> from HTML source
Search Expression:

(<button)(([\x0D\x0A]+\s+)([\x0D\x0A\w\-'"=\.\(\)\{\}\:\s,]+)([\x0D\x0A]+\s+)([\x0D\x0A\w\-'"=\.\(\)\{\}\:\s,]+)([\x0D\x0A]+\s+)([\x0D\x0A\w\-'"=\.\(\)\{\}\:\s,]+)>)?([\x0a\x0d\s\w]+)(<svg )[\x20\x0D\x0A\w\-'"=\.\(\)\{\}\:\s,>]+(<path><\/path><\/svg>)([\x0D\x0A\w\-'"=\.\(\)\{\}\:\s,]+)(<\/button>)

Change .css .class .selectors
to .wp-block-css .wp-block-class .wp-block-selectors

Search Expression: (.)([^ 0-9][a-z0-9-]+)([, ])
Replace Expression: $1wp-block-$2$3

Expresso
Advanced Regex processing, testing, and trainer with option to save projects and library. “suitable as a teaching tool for the beginning user of regular expressions or as a full-featured development environment for the experienced programmer or web designer with an extensive knowledge of regular expressions.”
RegEx Coach
Like the name says, this nifty little tool helps you to learn how to write Regular Expressions. Unless I’ve been using it incorrectly (which is quite possible), it basically only allows you to process one thing at a time. It’s still nice because it provides a graphical represenation of the regex engine process (kind of reminds me of diagraming a sentence in elementary school, if you know what that is!).
Regexr
Regular expression tester with syntax highlighting, PHP / PCRE & JS Support, contextual help, cheat sheet, reference, and searchable community patterns.

Scalable Vector Graphics (SVG)

SVG Vector Logos / Popular Vector Brands

Vector Logo Zone (branding)

SVG Repo icons etc

Convert to SVG – Free Online Tool

VectorMagic – Create an Account to save your work!

At Convertio upload jpg png etc to easily convert to SVG for free.

Alternative FreeConvert is similar to Convertio but offers some customization options

Software / Programming:

Event-Driven Architecture
Understand programming theory behind WordPress

Windows Operating System

Deployment Image Servicing and Management tool
DISM.exe /Online /Cleanup-Image /Restorehealth

WSL: Windows Subsystem for Linux

Check out Flatpak! You can use it to open up your software installation options for WSL as well.

Pros and Cons of Web Development on WSL

Pros

  • Run Linux apps
    • VS Code – Open PHP in browser: This extension will work for viewing PHP / web app files under WSL, using a “native” linux path.
      Install Midori web browser in WSL:
      sudo apt install midori
      use Custom path to browser:
      /usr/bin/midori
    • Graphic DIFF app – Meld
      sudo apt install meld

Cons

  • Resetting Windows
    • the WSL file system will be deleted, thereby deleting any files (e.g. web sites) under development in the WSL environment.

live XML: Arstechnica.com

Future Reading

“Boosting Content and SEO with ChatGPT: A Revolutionary Tool”

Code faster with these AI tools
“Optimizing Title Tags for SEO: A Discussion with ChatGPT-3.5”