WordPress is a great site building platform, with some major missing features.

Missing features that I think prevent it from being properly accessible to those who don't know how to code or manage web hosting.

I think these updates would make @WordPress (self-hosted) better...

1. Backup & Recovery

Making WordPress backups is currently left to plugins, the web host (ie JetBackup), or direct file + db backups.

Many of these solutions are not very consumer-friendly, leaning more towards a task that technical staff would perform

1.1 Backup & Recovery

As a platform that is considered low-code (or no-code), WordPress should really have a built-in backup and recovery system.

Modern no-code platforms like @webflow allow for automatic backups and/or manual backups when you need to.

1.2 Backup & Recovery

These @webflow backups are very easy to restore/recover back to, with just a few clicks.

Having the ability to take a quick backup, try something new on the site, then rollback if something doesn't work out would be infinitely helpful

2. Easy Roll-Back

The biggest problem spot for many websites is updates. WordPress plugins and themes update frequently and randomly, just as mobile apps do.

This issue is compounded when WordPress itself needs to be updated.

2.1 Easy Roll-Back

A built-in system for rolling back recent updates to plugins, themes, and/or WordPress itself would be crucial to allowing users to reliably update their websites (or even allow auto-updating in some cases).

2.2 Easy Roll-Back

As it sits, updating a WordPress site is easy...but recovering from any problems is difficult - leaving consumers stumped in a lot of cases.

Even the popular @elemntor site builder recommends using a staging environment and backups for many of their updates

3. Disaster Recovery

Once you experience the WordPress White Screen of Death (WoSD), that's it...you can't access the admin panel anymore and the website goes down.

This error is more common than you think, a simple plugin update can trigger it.

3.1 Disaster Recovery

The only way to recover from it is to have knowledge of file management on your host, or some development experience.

The frequency of the WoSD makes WordPress a dangerous platform to use for anyone looking for an entirely consumer experience.

3.2 Disaster Recovery

WordPress needs to have some sort of recovery mode (ie safe mode) that is always ready to spring into action in the event of a critical error. It should allow users to disable plugins and/or restore from a backup.

I hope these points drive some conversation on solutions and workarounds that people have successfully implemented.

I'd love to know how to improve my WordPress installs for my customers!

If you'd like to hear a full conversation/debate on this topic, we just released a podcast episode on it via @htmleverything

It is available right here: https://www.htmlallthethings.com/podcasts/if-you-cant-code-dont-use-wordpress

WordPress Needs These Features in 2023

CSS Combinators can be confusing, so let's fix that!

There are 4 combinators in total and we'll be explaining them below 👇

But first...what are combinators?

Combinators select elements based on the relationship between two selectors. The combinator you use defines that relationship.

1. Descendant Combinator

Represented by a single space " " (without the quotes).

It selects elements that are the descendants of a specified element.

1.1 Descendant Combinator Example

In this example, all paragraphs that are a descendant of the featured class will be selected. These descendants are "wrapped" by the featured div.

2. Child Combinator

Represented by a > symbol.

It selects elements that are the children of a specified element.

2.1 Child Combinator Example

In this example, only the first paragraph within the featured div is selected because the second paragraph is nested within another div.

This nesting makes the second paragraph a descendant, and not a child.

3. Adjacent Sibling Combinator

Represented by a + sign.

This combinator selects the first sibling directly after a specified element.

3.1 Adjacent Sibling Combinator

In this example, there are two divs that come after the featured div. Both of these divs are siblings of the featured div.

Only the div that comes directly after the featured div is selected.

4. General Sibling Combinator

Represented by the ~ character.

This combinator selects all siblings that come after a specified element.

4.1 General Sibling Combinator Example

In this example, there are three divs that are the siblings of the featured div. One of these divs comes before the featured div, and two come after.

Only the two divs that come after the featured div are selected.

CSS Combinators

Learn CSS Attribute Selectors Fast! 💨

CSS Attribute Selectors may seem simple at first, but they can be expanded beyond this simplicity with the addition of a few different characters

Basic attribute selectors give you the ability to select elements based on if an attribute is present

OR

If an attribute is present and set to a particular value

Expanding this basic functionality by adding a few select characters right after the attribute name, we can select elements based on if an attribute is present and set to a specified value under certain conditions

Vertical Bar |

Selects elements based on the exact attribute value, or exact attribute value followed by a hyphen

Tilde ~

Selects elements based on an attribute value the contains a specific space-separated word

Asterisk *

Selects elements based on an attribute value containing the specified value (does not have to be separated by a hyphen or space)

Caret ^

Selects elements based on an attribute value that begins with the specified value (does not have to be a whole word)

Dollar Sign $

Selects elements based on an attribute value that ends with the specified value (does not have to be a whole word)

For those that prefer to learn from video, I created a short video tutorial on this topic 📽️

You can watch that tutorial via...

TikTok
https://www.tiktok.com/@htmlallthethings/video/7196044937043922181

YT Shorts
https://www.youtube.com/shorts/ZSldccdmKz8

Instagram Reels
https://www.instagram.com/reel/CoNxcAmgnty/

I also created a similar video tutorial on CSS Attribute Basics 📼

You can watch that tutorial via...

TikTok
https://www.tiktok.com/@htmlallthethings/video/7193469955747171589

YT Shorts
https://www.youtube.com/shorts/4nbRDw9TsTw

Instagram Reels
https://www.instagram.com/reel/Cn77L2dggGS/

CSS Attribute Selectors

CSS Variable Basics

CSS variables let you set and apply a value throughout your stylesheet, without having to type it over and over.

They are commonly used for colors that appear throughout a design, or for theming a site (ie dark/light mode).

To declare a CSS variable, we use two dashes, followed by the variable name.

A CSS variable name can contain:
- alphanumeric characters
- dashes
- underscores

Here are some examples of a "primary color" variable named with a variety of character configurations

CSS variables can be declared globally.

Since we're dealing with CSS + HTML, using the :root pseudo-class applies the variable on the <html> element, which is globally throughout our page.

CSS variables can be declared locally.

In the image below, the "primary-color" variable is declared locally under the scope of the "featured" class

To use a CSS variable, use the var() function.

Call on your variable's value in the same place you'd normally place your property value, use your variable name inside the brackets

Here's an example w/ the color CSS property:
color: var(--variablename);

I recently took the free CSS variables course from @scrimba to brush up on my knowledge of CSS variables and really enjoyed it!

I'd recommend you check it out if you want to learn more. And no this post isn't sponsored 😀

You can read the unrolled version of this thread here: https://typefully.com/MPorterBridges/cX6fnvP