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.
Current Focus
- Cloud Storage (e.g. Dropbox, MEGA, OneDrive, etc.)
-
Dropbox Dropbox.com
- New Look at Origins
-
Check out this new high-tech layout for discovering information about elements of the internet, such as HTML, CSS, JavaScript, etc.
Featured Highlight
- Highlighted / Featured Notation
-
API for Image Conversion (any File convert) at FreeConvert .com
https://www.freeconvert.com/api/file-conversion-api
Link to their API tutorial n etc
FreeConvert.com
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
About Productivity and Project Management:
- Productivity and Project Management
-
Posts and pages here about Productivity, including Project Management software recommendations.
- the Zettelkasten method – Stop searching for better Software. Use you as the Software.
- Atlassian
Artificial Intelligence/ AI:
AI Artificial Intelligence Generative AI Machine Learning
- Google Gemeni
-
Google Bard is not an OpenAI / ChatGPT language model.
More about Google Bard
- OpenAI ChatGPT
-
- Prompts to help Learn Python
- Large Language Model (LLM) Prompts
-
Examples of prompts which may yield favorable responses from an LLM
- Example
- Example 2
Android:
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
Convert
- Unit – Measures of Time
-
Check out Calculateme.com for an array of conversion tools. I like the seconds converter in particular because it does the hours, minutes, and seconds breakdown for you. It’s super convenient if you have that sort of task at hand.
A second is the base unit of time. Originally, it was based on the length of the day, but it has since been standardized based on the radiation wavelength of caesium-133
Creating Websites:
Creating Websites: CMS CSS Etc
- 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
Database Related
- Online Tools
-
Database Diagram / Relationships – dbDiagram.io
Encryption & Security:
Online Security HTTPS OpenSSL SSH GPG Etc
- 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 "your-username@example.com" # 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 Concurrent Version Control System (VCS / CVS)
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
GIT Cache and .gitignore
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 and GITLAB
- 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
Image Stuff
FREE Online Tools – E.g. Convert folder of .jpg images to .webm slideshow
- Online Free Tools
- Creative Imaging
-
- Media.io – Slideshow Maker – Make Video with Images & Music Online
- Upload a folder full of images and let it create your slideshow with transitions!
- Use case:
- Time-lapse images created using Auto Screen Capture time lapse desktop screen capture tool (e.g. capture full screen at intervals of 20 seconds)
- Convert to a movie with transitions between, like time-lapse photography.
- Ensure only authorized apps are in use on your PC (by other users, or contracted agents)
- Use case:
- Upload a folder full of images and let it create your slideshow with transitions!
- Microsoft Create – Social Media, Office, & Design: FREE Templates
- MS Designer – Design with Gen AI Assist
- Option to upload your own media.
- Who knows what you can do here? It’s AI. Probably tell you something true today, and that’ll change tomorrow.
- Investigate periodically for new features
- Media.io – Slideshow Maker – Make Video with Images & Music Online
- Image (multi-media) Utility – New Utility – Neutility! – NeUtility.Store ?
-
- Convertio — File Format (Universal) Converter
- MConverter: Easy to Use Online File Converter
- ShortPixel – Image Compress / WebP / AVIF Convert
- CloudConvert – WEBP Converter
OptiPNG – ADVPNG.exe – Etc
The elusive advpng.exe is part of advancecomp
For use with Radical Image Optimization Tool (RIOT) image optimizer.
Linux (plus some WSL):
Desktop Environment
- Select Desktop / Window Manager from Terminal
-
[sudo] update-alternatives --config x-session-manager
Display [ +tweak ]
XRANDR and Linux Display Settings
“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
CLI – Various Common Command Line Tasks and Solutions
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 SSL NGINX Development Server (port:443)
-
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.
Unofficial NGINX References
- 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!
- Composer PHP Package Manager
-
Sometimes the OCD and I do things without much explanation. Check it out: for the composer installation process, I do like the package manager does maybe, and put stuff in the /etc directory, like so.
Confirmed to work on a new system 20240826. Simply copy the lines below and paste into your bash command line, on your Development server. Review, and understand the individual operations before executing this recommended script.
cd /etc/php sudo mkdir --mode 775 composer sudo chown -R $USER:www-data ./composer cd ./composer php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" php -r "if (hash_file('sha384', 'composer-setup.php') === 'dac665fdc30fdd8ec78b38b9800061b4150413ff2e3b6f88543c636f7cd84f6db9189d43a81e5503cda447da73c7e5b6') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;" php composer-setup.php php -r "unlink('composer-setup.php');" sudo cp composer.phar /usr/local/bin/composer [Ctrl+Shift+T] composer global update composer composer global update cd /var/www/html composer update
- phpMyAdmin – Composer
-
composer create-project phpmyadmin/phpmyadmin
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: (RegEx)
Mess with PHP.INI
- Remove Comments from php.ini
-
The following expressions were composed using Sublime Text
- Remove almost all php.ini comments
-
/^(;[; \(\.\)\,\:\=\'\/\-\*\w\\]+)$/
- Remove all php.ini comments except lines about default values
-
/^(;[; \(\.\)\,\:\=\'\/\-\w\\\[\]]+)$/
- Remove all php.ini comments
-
/^(;[; \(\.\)\,\:\=\'\/\-\w\\\[\]\*\'\"\<\?\>\#\!\~\$\_\+\&\|\{\}\`\%\@]+)$/
Remove extra spaces
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 )
Remove SVG tags (e.g. from copied html source)
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.
Button Path SVG – HTML
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>)
WordPress CSS Classes
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
Regular Expression Testing Tools – Desktop and Online
- 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)
FREE Online SVG Tools and Stock Graphics
- 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
WordPress Content Management System (CMS)
- Database Admin
-
Articles for advanced database admin. Various plugins for WordPress to help with database optimization.
Various articles about database admin.
- wp_actionscheduler_
-
Good ol’ Fabian has some tips for us! Check out the recommended way to approach cleaning of the action scheduler mechanism. Fabian.blog
WSL: Windows Subsystem for Linux
Windows Subsystem for Linux – WSL
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.