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)

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

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

Content

Post Type Switcher

Performance

Autoptimize

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 – The developer tools panel for WordPress

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 – WordPress SMTP and Email Logs: Gmail, Office 365, Outlook, Custom SMTP, and more

WordPress Plugins for Migration

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

Customizer Export/Import

Duplicator – Migration & Backup Plugin

WPS Menu Exporter