Centre Web Design | What’s On Your Brain | Guitar Lessons |
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
-
- Prompts to help Learn Python
- 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 filesgit add <file_name.ext>
// To add specific filegit 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 withts
ls -laX | tee >(ts "%d-%m-%y %H_%M_%S" > this_ls_command_teed.txt)
- Command Line – Linux CLI References
-
- Linux Commands Comprehensive – A practical reference at PixelBeat
- Another collected list of commands. Useful for refresher!
- 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
Usepstree
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 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.orgA 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 Consumption – Samba 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
- VS Code – Open PHP in browser: This extension will work for viewing PHP / web app files under WSL, using a “native” linux path.
Cons
- Resetting Windows
- the WSL file system will be deleted, thereby deleting any files (e.g. web sites) under development in the WSL environment.