Frequently Referenced

List of frequently referenced resources to help in Web Application / WordPress Development, HTML, CSS, JavaScript, PHP, Unicode, and more.

Posts and pages about software.

Color

G Color Utilities R Cool or Can B: Hex Color Picker with Complimentary Colors

Convert

Convert Strings: Comprehensive! Just about any possible string conversion you could probably need for web dev, HTML stuff, and more. The site is Online String Tools.

General Conversion Tools: The site is EndMemo.com

CSS/SCSS/SASS

CSS Pre-processor Compiler: Prepros is a convenient way to develop with SASS. It will link with the browser to create a “Live Preview” environment, refreshing the page each time the .scss file is saved, compiles the CSS file, and updates the browser view with the newly compiled CSS.

HTML / SGML

Entities / Hex Quick Ref: If you know what it means. This is the quick one. Check it out here. NCR / Hex codes / Entities
Usage: type “x3e” into the search box there. You can actually append the 2-char code to the end of the url, and get results. (e.g. you could script it into something. for what purpose? probably none, but: https://www.codetable.net/hex/ (where you’d put, e.g. 3e after the slash)
HTML5: Elements of HTML5 – published by the Web Hypertext Application Working Group

Images (traditional / raster / pixel)

Stock

Pexels Royalty Free Stock Images

Edit Images Online

LunaPic – Nice! old-school in appearance, but this one has some cool features,
Remove Background tool. Cool!
Another site for adjusting images
Simple crop or adjust saturation

Merge Images

Adobe Express – Free to merge
PineTools – Merge multiple Images Vertically or Horizontally

Linux

Linux Posts and Pages: All posts and pages on this website with a reference to Linux.

MySQL / MariaDB

MySQL: Create a User and assign global privileges. (e.g. for use in development, or if you know what you’re doing.)

Node.js

NVM – Node Version Manager: If you work with a lot of Node.js apps, you should have NVM installed to ensure packages install correctly.
Node Dependency Time Machine: When you’re so far down you just need something to take the edge off, just install your very own little co-dependent enabler! For all of your addictions and dependencies. Get your sh!t together, man!.

PHP

Install PHP: Follow this complete step-by-step guide to install Apache, PHP, and MySQL or MariaDB on Linux or Windows WSL.
Test PHP Code/ Logic/ Functions/ etc: OnlinePHP.io – Live test PHP code: work with individual functions (e.g. str_replace , preg_replace, etc. ). Makes it easy to figure out what you might be doing wrong in your code without sifting through several unrelated of lines. (different from CodePen and the like)

PHP Debug

Comply with Standards: PHPStan – Check out this article about the PHP Standards tookit PHPStan, and some suggestions for debugging PHP manually.

Xdebug (required)

Do the phpinfo() thing. If you don’t already have a file providing you the phpinfo(), you can get the information instantly via command line:

BASH$ php -i
CMD$ cd /D X:\path\to\php
CMD$ .\php.exe -i

copy and paste the resulting output into the text field at Xdebug.org/wizard. from there, you’ll be guided properly on your next steps.

The diagnostic info produced by xdebug_info() (an HTML page display, like phpinfo(); ) is quite useful if you’re having difficulty with step debugging. If you encounter problems with Xdebug not detecting the activity on your configured port, check the Browser page on this site for a link to the Xdebug helper extension as you might need it for Xdebug to function as desired.

SSH Port Forwarding (Xdebug Remote Debugging)

Obtain a copy of KiTTY or PuTTY. KiTTY has more features, but PuTTY is the original. Personally, I use KiTTY because it is a bit more friendly about saving stuff. It’s basically the same software.

Details about what Port Forwarding does, from the PuTTY site.

Note: The text of some resource links here advise port 9000 for Xdebug. If you’re using Xdebug 3 (which of course, you should be) then you should use port 9003.

The developers of the CodeLobster IDE made a nice little visual for you. Look for the text that reads, “Open Connection | SSH | Tunnels and Add new forwarded port.” If you can see the pictures, you can probably figure it out!

Visual Studio Code users should read the recommendations on the VS Code app page.

Once you have established port forwarding for remote debugging (if necessary), be sure to reference the xdebug_info() output, as described above. Go here to get the Xdebug browser extension (necessary in some environments).

Why does no one (myself included) ever post a proper tutorial about this topic? Hmm. That’s probably something to ask Dr Crane.

Pay real $ for PHPStorm

Now hide your head in shame and cry because you couldn’t figure out how to do the above on your own. Now laugh at yourself because you believed exchanging your hard-earned money for PHPStorm would be like legally paying for sex, and you still aren’t remote debugging like the advertisement made you believe. Check onlyfriends. Cheer up.
No? Don’t worry. I cried, and laughed enough for both of us, and the other thing.

PHP Deprecated

MySQL → MySQLi: Transform deprecated mysql code to mysqli

Regular Expressions

Free Online Regular Expression Testing Tools: Test PHP RegEx

Scalable Vector Graphics (SVG)

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
SVG Logos / Popular Brands: Vector Logo Zone

Unicode

Emoji: Emoticons / Complete Emoji list at Unicode.org
Encode / Decode Unicode / HTML NCR: Nice, simple, no-nonsense conversion – backward and forward, and upside down? EndMemo.com

Hexadecimal NCR Quick Ref: Quick and easy Hex reference. Just put the code in the URL to see what it is. Or, vice versa. You’ll see what I mean. Check it out here. Hex codes are better than Decimal or HTML Entities. Trust me.

E.g. Try changing the last two chars in the URL at the link from 5c to 3c. Then try 3e. Try any number in the “20’s”, then try 2A, 2B, 2C, 2D etc (like you would with the Hex codes for CSS colors, if you know how to do that and understand it). I bookmarked it because it’s the kind of thing I find useful.

Online String Tools: Just about any possible character conversion you could probably need for web dev, HTML stuff, and more at Online String Tools.
Unicode Resources: Check out this nice resource for a summary of different Unicode stuffs…

Visual Studio Code

(Microsoft VS Code) Official Documentation

VS Code Extensions

AI Assisted Coding

Codeium

Status Bar File Details

FileStatus – Simple Plugin to display File Size and modification time in the statusbar.

Preview PHP Files on Server

Open PHP with

If you’re interested in trying a handful of extensions, just place the following in a file called extensions.json and place it in a folder named /.vscode in your workspace directory. Note the .dot prefix as this is a special, hidden folder that VS Code understands.

{
    "recommendations": [
        "ahmadalli.vscode-nginx-conf",
        "bradgashler.htmltagwrap",
        "Braver.vscode-solarized",
        "Codeium.codeium",
        "dbaeumer.vscode-eslint",
        "fabiospampinato.vscode-open-in-application",
        "fabiospampinato.vscode-terminals",
        "formulahendry.auto-complete-tag",
        "GitHub.vscode-pull-request-github",
        "hwencc.html-tag-wrapper",
        "lkrms.pretty-php",
        "MehediDracula.php-namespace-resolver",
        "Natizyskunk.sftp",
        "PeterSchmalfeldt.explorer-exclude",
        "primafuture.open-php-html-js-in-browser",
        "PrimaFuture.vscode-pf-light-theme",
        "ProtalMatter.pmfilestatus",
        "qcz.text-power-tools",
        "raynigon.nginx-formatter",
        "rexshi.phpdoc-comment-vscode-plugin",
        "rifi2k.format-html-in-php",
        "SanderRonde.phpstan-vscode",
        "sirmspencer.vscode-autohide",
        "uloco.theme-bluloco-dark",
        "uloco.theme-bluloco-light",
        "vincaslt.highlight-matching-tag",
        "VisualStudioExptTeam.vscodeintellicode",
        "wesbos.theme-cobalt2",
        "Wscats.eno",
        "xdebug.php-debug",
        "xdebug.php-pack",
        "yutengjing.open-in-external-app",
        "BeardedBear.beardedtheme"
    ]
}

Please feel free to add your own recommendations in the comments.

WordPress

Direct link to the WordPress Site Editor / WordPress Block Editor: “wp-admin/site-editor.php“

WordPress.org (dev resources)

Developer: Landing page for General WordPress Development resources.
Make (everybody poops): Landing page for General WordPress Make resources, because that’s not the same as Development.
Plugin Development: The WordPress Plugins Handbook
Theme Creation: The WordPress Themes Handbook. Includes “Full Site Editing” / Block themes, and “Classic” themes resources. This would be your WordPress themes starting point for understanding.

WordPress Unofficial Documentation and Alternative Resources

Adam Brown’s Hooks Database (@poliARB)

All hooks, actions, and filters with some charts and stuff. I don’t know how I found it, but I really like this resource! Check it out – it shows versions and deprecation info too!

Alternative Doc – Plugins

~~hookmax.com – functions, action hooks, filter hooks, “shortcodes” and classes list.~~ Site no longer exists (on last attempted access).

Manual Debugging

Place the following inside of a function that you believe is causing your code to malfunction, or just to gain perspective on your code’s order of operations. I used this particular bit to debug a custom plugin’s .JS file path. It can be easily modified for other situations of course. Add your own custom CSS classes for emphasis as desired:

echo '<div class="css_be_stylish">File: '. __FILE__ . ':' .__LINE__.'<br>';
echo '<div>At function: <strong>' . __FUNCTION__ .'</strong>:' .__LINE__ .'</div>';
     wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ , 2) . 'admin/js/admin.js', array( 'jquery' ), $this->version, false );
echo '<div>this->plugin_name: '. $this->plugin_name .', '. plugins_url('admin', __FILE__ ) . ' plugins_url( admin, FILE__ )  in file: '. pathinfo(__FILE__, PATHINFO_BASENAME) .':'.__LINE__.'</div>';

Namespaces and WordPress

Check out Tom McFarlin on using Namespaces (in WordPress).

WordPress Plugin Namespace Boilerplate

This person created a WordPress Plugin Boilerplate for Namespace structure. I’ve found that Namespaces greatly improve the ease of editing and organization. Try this next time you are starting out with a new plugin. I discovered it while following the author’s WP_List_Table tutorial.

WP_List_Table

Official WordPress.org Related to WP_List_Table

WP_List_Table – Officially Available for Dever’s
get_current_screen()
WP_List_Table {}

WP_List_Table Tutorials and Code

SmashingMagazing
WpEngineer
London
Mac-Blog ★
WP_Llist_Table/ CRM Tutorial
WebTricks
Pressidium ★
Webkul – Create Admin tables
Screen Options stuff
SupportHost – Using Custom DB Table

WordPress Full Site Editing / FSE / Block Themes

Block Theme Tutorial on YouTube: Note: unlike many (dare I say, most) YouTube “tutorials” about WordPress– which aren’t just a walkthrough of how to use a plugin, or another waste of your time– you can understand this well spoken, non-native English speaking presenter!
I haven’t viewed all episodes in the complete playlist, but this WordPress FSE Block Theme tutorial presents itself as a a comprehensive overview, top to bottom.
Block Theme Generator: Create a bare-bones block theme with the Block Theme Generator from FullSiteEditing.com Customize a few options.
Block Theme – Navigation: Jump to Edit Navigation Menu from Dashboard (as displays in a block theme’s ./parts/header.html) .

Open the WP admin Dashboard then paste the following after the wp-admin/ part of the URL in the address bar:
./wp-admin/edit.php?post_type=wp_navigation

WordPress Plugins for Production (+ menus)

Appearance / Theme: Toolkit for Block Theme (Starter Templates, Portfolio, Gutenberg Blocks, Patterns) – Twentig

Do you want to use the Gutenberg / new Full-Site WordPress Editor, but you just can’t get used to how to find the features, and what you need to achieve your vision? Try Twentig. It’s not super advanced like Elementor or other so-called “site builders”, but the enhancements it provides are still cool. I personally like the ease of use of Google Fonts it provides.
Content: Post Type Switcher
Performance: Autoptimize

NOTE: For best results, a cache management plugin is required for Autoptimize to function to its potential. We recommend WP Super Cache:; WP Super Cache
Related Content / Call to Action / Special Effects: upPrev; YARPP – Yet Another Related Posts Plugin

WordPress Plugins for Use in Development

Black Bar: Black Bar is an unobtrusive Debug Bar for WordPress developers that attaches itself to the bottom of the browser window.; Black Bar
Child Theme Configurator: Child Theme Configurator is a fast and easy to use utility that allows you to analyze any theme for common problems, create a child theme and customize it. Creates a functions.php and style.css file so you can create a custom theme with the original as a Parent theme, so the parent theme will continue to update without affecting your custom styles.; Child Theme Configurator
Debug Bar: Another means of checking and monitoring for errors etc during development. Use with the Actions and Filters addon to see an amazing amount of detail about what’s going on.; Debug Bar

Debug Bar Actions and Filters Addon
Query Monitor: Like Black Bar but more features, Query Monitor is the developer tools panel for WordPress. It enables debugging of database queries, PHP errors, hooks and actions, block editor blocks, enqueued scripts and stylesheets, HTTP API calls, and more. I prefer Black Bar, but you might need Query Monitor if you’re really stuck.; Query Monitor
SMTP Mail: Easy WP SMTP (the actual title) allows you to configure and send all outgoing emails via SMTP. This will prevent your emails from going into the junk/spam folder of the recipients. I use it for local development so I don’t have to have a mail server configured, or rely on the PHP configuration to send mail. It just makes things easier if you’re trying to test something like Contact Form 7 on localhost.; Easy WP SMTP by SendLayer – WordPress SMTP and Email Log Plugin

WordPress Plugins for Migration

Export / Import (content, users, settings, etc.): Customizer Export/Import

E.g. Export your “additional CSS” rules. Makes a .dat file which can then be imported using the same plugin at the second (or other) location.; Duplicator – WordPress Migration & Backup Plugin

Duplicator is for the heavy lifting. If you’re familiar with cPanel, think of this as the full site backup feature. Duplicator will package everything, including your database (as an SQL file) into a convenient package, complete with an installation script to put everything back in order for you! Difficult to believe this one is available at no cost. Thank you, Snap Creek!; WPS Menu Exporter

WPS Menu Exporter. Export navigation menus (and Import) as XML format, as would be expected to be part of the core options … but is not for some reason.

WordPress Center Vivaldi .Net