DEV Community: Plank

The REM to PX relation: how to write more accessible media queries

Riley McMaster — Mon, 26 Aug 2024 15:45:29 +0000

We are developers. We want to develop the most responsive layouts. We want to accommodate different devices, resolutions and user settings. We want to use consistent units across all stylesheets. We want to do as little math as possible.

When do we want this? NOW!
What do we need to know? Lots of stuff!
How do we do this? With a custom SASS function!

By using a SASS function, we can accommodate more users by understanding and accounting for their system and browser-level settings. I will go over how rem values relate to pixel values and what might affect the relation between them. 1rem almost always starts off as 16px but there are ways a user can change that. This SASS function we’ll write later is very helpful because it can apply to a larger project and it can be introduced incrementally into your existing projects.

Background

What got me looking into this topic was the article There’s No Such Thing as a Desktop Screen, Hajime Yamasaki Vukelic, where his take on responsive design is that “responsiveness is not about a simple set of arbitrary screen widths.... responsiveness is about robustness: how much can you stretch or squeeze the page before it starts falling apart”. Hajime talks about how his father is browsing the web at essentially 400% regular scale. While this may seem like an edge case, it’s important to know the different ways a user may scale their display and how the styles we’re writing are affected by these changes in settings.

Scaled display

Let’s start as small as possible with understanding exactly what a pixel is. As far as a developer is concerned, there are two types of pixels: there are device pixels which are the amount of dots of light on a given screen and there are CSS pixels which are a unit of measurement. Device pixels usually do not equal CSS pixels. It’s important to understand the difference between the two so we can figure which settings affect each value.

There are several ways that a user can change the size of the content on their screen like Hajime’s father. The most common ways that a user could scale their display:

changing the display resolution (system setting)
zooming in on the browser tab (on Mac pressing ⌘ and +, windows Ctrl and +)
increasing the font size in the browser’s settings.

The first and second options, changing the display resolution and zooming in the browser, essentially do the same thing. Both methods will scale the CSS pixels so that each CSS pixel takes up more device pixels. In this case, our layout all scales proportionally. 1rem will still equal 16px but each CSS pixel takes up more device pixels. To test this, you can zoom in on the browser tab until you trigger the “mobile” layout. This setting is quick to test and generally shouldn’t cause much issue.

Changing the browser font size will cause the most change. By default, the browser’s setting is “medium” which in Chrome means 1rem is 16px. When the user increases the font size, the value of 1rem will increase but no other values will scale. 1rem will equal more CSS pixels and therefore take up more device pixels. On Chrome, with the font size set to “very large”, 1rem will equal 24px. The size of the CSS pixels remain the same, it is the root font size that has changed. Any value that references the root font size will be affected.

In your code, If you have a mix of pixel and rem values then you might start to have layout issues since the rem values will scale but the pixel values will stay the same. The image above shows how a simple example of how drastically the layout can change when the text is set in rem values while the max-width, column width and paddings are set with pixel values. A responsive layout should scale accordingly with the root font size.

The problem with media queries

This is generally how we write a media query:



@media (min-width: 1000px) {
    ...declarations here
}

Since we’re trying to be responsive and adaptable to all of the users’ settings, we want to use relative units all everywhere that we can. Let’s use a rem value instead of pixels in the media query:



@media (min-width: 62.5rem) {
    ...declarations here
}

With the default browser settings, 1000px will equal 62.5rem
1rem = 16px
1000px / 16px/rem = 62.5rem
That looks like math I have to do every time I want to write a relative unit. We said right at the start that we don’t want to have to do math.

There is a common fix that we’ve all seen where we make 1rem = 10px. This is generally done while setting up the boilerplate of a project. You overwrite the root font size on the root element by targeting the html selector:



html {
    font-size: 62.5% 
    // this is math 
    // but it only needs to be done once for the whole project 
    // so I'll let it slide
}

Now any time we want to convert a pixel value from the design to a rem value in our code we just have to carry the decimal one place.
1rem = 10px
To get a value of 1000px, we use 100rem. This still involves math but is fairly minor.

Now, when using a rem value, we can safely assume that 1rem will be 10px.
Right?
Yes?
Example?
No need. We know it is true. We have used rem for widths, heights, paddings, margins, translates or any other declaration without any issue. But…will there be any issue using it in the condition for a media query?



@media (min-width: 100rem) {
    // does is trigger at 1000px as expected?
    ...declarations here
}

Open the example in a new window and play with the width of the viewport. When the “desktop” media query triggers then the background will turn blue.

What is happening?

The values for a media query are calculated before any other rules are set, so the ruleset we applied to the html element in the start of our project will not be applied in the condition of the media query. According to this media query, 1rem is still equal to 16px. We expected 100rem to be 1000px but it ended up being 1600px.

If you change the browser font size to “very large” and refresh the example, you will notice that 1rem = 15px and the 100rem media query won’t trigger until 2400px. If your monitor isn’t wide enough to see that change happen, zoom out on the browser with ⌘/Ctrl and + .

The condition for the media query is not scaling consistently with the browser’s desired font size.

Font size “Medium”:
- 1rem = 10px
- Media query: 100rem = 1600px
- rem to px ratio: 0.0625
Font size “Very Large”:
- 1rem = 15px
- Media query: 100rem = 2400px
- rem to px ratio: 0.0416666667

For content and layouts to scale consistently, we need the rem to px ratio to always remain the same.

REMPX()

This has taken a long time to get to even suggesting a solution to a problem that we maybe didn’t know we had.

Let’s create a custom SASS function that will allow us to write our code in pixel values and be rendered as rem values. I came across this function on a legacy project at work but I believe it was heavily inspired by this quick article: Convert pixel values to rem, Sass style, by Bhargav Shah. Since this article was written, CSS introduced its own rem() function which calculates the remainder of a fraction so instead we’ll name our function rempx().



$html-font-size: 16px;

@function stripUnit($value) {
    @return $value / ($value * 0 + 1);
}

@function rempx($pxValue) {
    @return #{stripUnit($pxValue) / stripUnit($html-font-size)}rem;
}

//implementation:
.image {
  height: rempx(300px);
}

Open the example in a new window and play with the width of the viewport and change the browser font size (refresh the page after you update the font size).

Notice how after we change the browser font size to “very large” (after a page a refresh), the 1rem square becomes larger and you can see that 1rem is equal to 24px.

When used in the condition of a media query, a rempx value will scale accordingly with the browsers font size. With the font size set to “very large”, the desktop layout rempx(1000px) will trigger at the viewport width of 1500px. The scaling of the content and layout behave the same way as when we zoom in on the browser.

A huge benefit of writing all your units with the rempx() function is you can write pixel values from the designs and then it renders it as a rem value in the browser. This function is very easy to introduce to a project or include in the boilerplate of your future projects.

Wrapping up

This function can be written once and used everywhere.
We can take the pixel values from the design and generate a scalable rem value.
Our media query triggers relative to the root font size.
All our layout and content scales consistently.
No math necessary.
Better user experience across a wider range of user settings.
Better user existence overall.
Better developer existence overall.
This function improves our existence.

Why Did You Render - React & WordPress

Riley McMaster — Thu, 01 Feb 2024 19:46:30 +0000

When using React components in a WordPress project, I want to be able to diagnose what is causing components to re-render unnecessarily.

On a project recently, I ran into a problem where a React component was re-rendering unexpectedly. It was causing a quick layout shift and I was finding it really difficult to troubleshoot what was the cause. I came across the package why-did-you-render and the docs didn't have any tips on how to get it set up on a WordPress project. Below are the steps that my backend dev @davekellam and I took to get the package working with WordPress. We compile assets in our WordPress projects with Webpack and Babel.

We had to add a couple of dependencies and update the .babelrc file.

Dev dependencies to add to project:

@babel/preset-react
@welldone-software/why-did-you-render

.babelrc (add this line underneath @babel/preset-env):

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react", // added this line
    "@wordpress/default" 
  ]
}

Since we don't have access to an .env file, we had to add this next line in order to access the environment via the global mainScript. This will prevent the script from loading in production if we have forgotten to remove the dependency.
scripts.php:

'environment' => esc_attr( wp_get_environment_type() ),

In the top level .js file, in this case mine is called frontend.js, (need global mainscript, the code below will be placed above the individual component imports):

/* global mainScript */
import React from 'react'
import whyDidYouRender from '@welldone-software/why-did-you-render';

if (mainScript.environment === 'local') {
    whyDidYouRender(React, {
        trackAllPureComponents: true,
    });
}

in a component file, with ComponentName replaced with the actual name of the component:

ComponentName.whyDidYouRender = true

WDYR wants to only display a message if a component re-renders with the same props. If your component isn't getting re-rendered unnecessarily then you might not get an error message and it might seem like the package is not doing anything. Using this next code snippet instead will display any prop changes that happen. The result is a bit verbose but a simple test to make sure that the package is working.

ComponentName.whyDidYouRender = { logOnDifferentValues: true }

I am still encountering an issue of loading the package in the production environment. The package's docs have an example for how to conditionally import the package but I was unable to find a workaround in WordPress. The best course of action I can find is to either remove the dependency before the site is deployed or install the package when debugging and remove it before merging your branch.

More information about the use-cases for WDYR and an example on how to use it:
https://blog.logrocket.com/debugging-react-performance-issues-with-why-did-you-render/

VoiceOver quick start

Riley McMaster — Fri, 03 Nov 2023 14:04:40 +0000

VoiceOver is a screen reader that comes installed on all Apple computers. This article will serve as a quick introduction to some of the basic commands to help you get started using a screen reader on any website. VoiceOver will work in any browser but does work best in Safari.

The VoiceOver command keys will be used for almost every command going forward. I will refer to the command as VO which can be either of these:

caps lock
option + command

Start VoiceOver - command + F5
Select use VoiceOver

It might start reading off all the elements on a webpage without taking a break and this can be a little overwhelming.

Stop VoiceOver from auto reading - press the control key.
Start reading again - VO + a
I wouldn't suggest auto reading for a first-time screen reader user. For now, let's take it one element at a time.

In the case that the whole browser is selected (you will see an outline around the whole app):
Interact with the item (the browser in this instance) - VO + shift + down
Stop interacting with an item - VO + shift + up
This can also be thought of like navigating levels of a directory.

If the tabs or address bar are selected, you will use
VO + up or VO + down until the content of the webpage is selected.

Once the web content is selected,
navigate between elements on the page:
VO + left arrow
VO + right arrow

Open Rotor: VO + u
This tool is really interesting because it organizes the content of the website in a completely different way than what sighted users are used to seeing. Rotor breaks down the content into several different categories: links, headings, form controls and landmarks.

You can navigate between the Rotor sections with the arrow keys.

Since starting to test the sites that I'm developing with a screen reader, I've found:

"read more" or other vague text in buttons are not helpful. Give buttons like this descriptive aria-labels
images declared in the content property of pseudo-elements will be read, even though there's no alt or title.
it's important to connect your labels to your inputs using id and for
use html table elements instead of creating a table visually with divs

It is worth exploring how to use screen readers and other assistive technologies in order to become a more empathetic developer. VoiceOver is a great tool that is readily available to all Mac users. While VoiceOver comes with its own tutorial, I found it a bit long and slow but it is definitely worth doing when you have the time.

To see the whole list of commands:
Apple - VoiceOver commands

CSS: complex grid layout

Riley McMaster — Tue, 12 Sep 2023 13:23:41 +0000

At Plank, we build many of our projects with Wordpress. Making menus in the CMS is pretty user friendly but when it comes to more complex menu structures, it can be difficult for us as the frontend developer to style when all we are given is nested lists upon nested lists.

To solve this problem, I came up with this grid layout recently and wanted to share how it is done. I’ll also discuss a big struggle I had to overcome for this to work properly, be flexible and easy to tweak.

The markup:

In this example, we are working with one unordered list with several children. The first child is a call to action and the rest are links. Wordpress allows us to add classes to the individual links (as well as a description to support the call to action), so I added a class and a description to the call to action list__item--cta.

I decided to go with grid over flex in this case because the call to action will take the whole vertical height of the menu while the rest of the links were tiled towards the right side of the screen.

.list {
   display: grid;
   // need to name the start and end of the 
   // first column so it can be referenced by the CTA
   // declare 4 columns, 
   // first spot for CTA then repeat 3 for the links
   grid-template-columns: [cta-start] minmax(200px, auto) [cta-end] repeat(3, minmax(50px, 1fr));
   grid-auto-rows: min-content;
}
.list__item--cta {
    grid-row: 1 / 4;
    grid-column: cta-start / cta-end;
    height: 100%;   
}

Since we did not define the amount of rows on the parent, the --cta child is telling the parent grid how many rows there will be with the property grid-row: 1 / 4;. The value is spanning from the first line (start of the first row) to the fourth line (end of the third row). In this example we have 7 links, so we need 3 rows and 3 columns (in practice I used a bit of JavaScript to adjust the number of rows and columns based on the number of links).

I made the description of the call to action contenteditable to show where I went wrong. Edit the text and see how the grid falls apart

The gap between the rows shouldn't start stretching out like that. So what is there to do?

The Fix

Grid will fill its rows before columns by default. We need three rows for the amount of links we have. But what if we create one extra row that starts at a height of 0 and its only job is to expand to take the extra height of the CTA description? In this case, we update the grid-row property on --cta to create an extra row:

.list__item--cta {
   grid-row: 1 / 5;
}

Remember that when setting the grid-row property, the last line in the grid will always be one more than the number of rows.

The cta is now adding a fourth row that won't be filled up by the other links, the last row only exists as a buffer. If the CTA doesn't need that space, the row will have a height of zero.

Now we can add as much text as we want to the cta description and the other links will be completely unaffected!

The final result:

Done!

Five For the Future at Plank

Dave Kellam — Wed, 23 Aug 2023 14:49:45 +0000

Plank is one of over 150 organizations that have pledged to contribute to Five For the Future.

Launched in 2014, Five for the Future encourages organizations to contribute 5% of their resources to WordPress development. This benchmark was proposed by WordPress co-founder Matt Mullenweg to maintain a "golden ratio" of contributors to users. Participation in the community has more than quadrupled since launch.

At Plank, we believe in open-source software. We use it to power all of our projects. So many others have contributed to making our lives easier and more productive, it's important that we do the same!

We’ve begun our Five For the Future journey by contributing to the documentation and polyglots teams. The polyglots team is a natural fit for us, as our team members speak various languages, including English, French, Spanish and Arabic. We’ll be looking to expand our involvement in the near future by attending contributor day at WordCamp US 2023.

Visit our pledge to see our contributions to the project so far!

Photo from contributor day at WordCamp Europe 2023.

Using CSS size container queries

Eyel Mordido — Fri, 18 Aug 2023 17:30:06 +0000

CSS size container queries are now fully supported in all major browsers and offer a great way to create responsive page elements.

One advantage of using size container queries is it enables us to place components in different spaces of our web page without needing to know the dimensions of that specific space.

Let’s see how we can use it in creating a responsive card component:

A rule for using container queries is we cannot style or change the container if we want to measure its dimensions. We can only style its children. In the image above, we are wrapping the .cards__grid element with a parent .cards__container element so we can style the grid and all its contents.

1. The first step is to define the element we want to get the dimensions of by using the container-type property.

Here we are making the .cards__container element as our containment context so we can query its width.

.cards__container {
    container-type: inline-size;
}

The values for the container-type property can either be:

size - query the height and width of the container.

When we make an element the containment context, the built-in dimensions of its content is ignored so the container loses its height. Its width will not be affected because width is an extrinsic size of a block element. They always occupy the entire width of the space.

.cards__container {
    container-type: size;
}

See how the pink-bordered .cards__container element is no longer stretching the full height of its content after changing the value of container-type to size:

inline-size - only query the width. This is the recommended value for full responsiveness.
normal - doesn't allow us to query the dimensions but allows us to query the styles.

Naming the container is also considered a best practice. We can think of the name as a class or ID and we can give multiple names to a container.

.cards__container {
    container-type: inline-size;
    container-name: cards-container;
}

2. After defining and naming the container, we can add our query.
We start the query with the @container at-rule followed by the name. Similar to media queries, we can use the min-width or max-width properties for the condition.

@container cards-container (min-width: 701px) {

}

We can also use the ranged syntax:

/* if the width is between 700 and 1000 pixels. */
@container cards-container (700px < width < 1000px) {

}

3. Finally, we can add the style rules for the children of the container.

.cards__container {
  container-type: inline-size;
  container-name: cards-container;
}

@container cards-container (min-width: 701px) {
  .cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card figure {
    display: block;
  }

  .card__text {
    margin-top: 1rem;
  }

  .card h3 {
    font-size: 1.8rem;
  }

  .card figcaption {
    font-size: 1.2rem;
  }
}

@container cards-container (min-width: 1000px) {
  .cards__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

Now, our .cards__grid element should switch to a two-column grid layout when the container is more than 700px wide, the image stacked on top of the text and the font-size bigger.

At a width of 1000px and above, it should change to a three-column grid layout.

Why use size container queries over media queries?

At the beginning of this article we mentioned that size container queries allow us to place elements anywhere on the page without worrying about the size of the space.

To demonstrate this more clearly, let's place the card component in a blog page that has a narrower <main> element. With media queries, the cards' layout will stay as a three-column grid because we are checking for the page's width instead of the container's.

We will need to override the styles of the cards that are in the blog page to correct this.

With container queries, the cards component is more reusable and responsive. The cards' grid will respond to the width of its container and will update to the stacked layout.

You can learn more about container queries with these resources:

ChatGPT is Invaluable When You Know What You Want!

Oluwatosin Jeremiah — Thu, 10 Aug 2023 13:09:57 +0000

ChatGPT is an advanced language model that converses and produces human-like responses, powered by Natural Language Processing (NLP).

It can understand and reply to text in a range of settings and subject areas because to its NLP capabilities. When it comes to streamlining processes or doing troubleshooting, this can be really beneficial.

However, a clear knowledge of your objectives is necessary in order to fully utilize ChatGPT and benefit from it.

In this article, we will look at the advantages of ChatGPT when used with a clear purpose, allowing you to maximize its full potential and achieve your goals.

I had the chance to speak with a web developer who is just getting started, and during our conversation, we brought up ChatGPT. He claimed that ChatGPT had been beneficial to him. I replied that Chat GPT is truly helpful, and this the reason why it was created, but as he is just starting out, ChatGPT shouldn't be his primary source of assistance because doing so won't actually help him learn and advance.

I started a chat with ChatGPT to prove a point, that chatGPT has it's own limitations, especially if you’re asking about anything after September 2021 (where GPT-3 training data ends).

I needed to learn more about Data Transfer Object, using Laravel-data package from Spatie Open Source.

Below, I will show you how I did this with ChatGPT and the lessons I learned:

I started by saying what I wanted to know.

However, the documentation states that we should install the package in this manner;

After several attempts, I figured out that I needed to be more specific to ChatGPT;

The problem here is that ChatGPT is using a deprecated version of the package, which will mean that you run into some errors when you follow exactly what you have in this response because the namespace is different from what is in the documentation.

I knew what I was looking for;

After some back and forth, I got the response I was looking for.

My final thoughts

When you know what you want and approach it with a clear objective, ChatGPT can be a really useful tool. You can maximize ChatGPT's possibilities by outlining your objectives, giving precise instructions, using an iterative refining process, and analyzing the results critically.

Most importantly, if you really want to learn as a developer, read documentation, and use forums to be able to pull from a range of opinions, this will inform better decision-making.

Here are a few things you can do:

Define your objectives: Knowing what you want can help you explain your needs to ChatGPT clearly and get helpful responses in return.
Provide clear instructions: By providing clear instructions, you can guide ChatGPT to produce more precise, customized, and responsive results that meet your needs.
Leverage ChatGPT for Code Review: After writing your code, you may have ChatGPT read a section of it and highlight any flaws or potential refactoring.
Grow the Conversation: The quality of the information produced by ChatGPT can be improved through iterative dialogue.

As you use ChatGPT to support and improve your decision-making process, be conscious of its limitations, and use ChatGPT as a tool. When your goals are well defined, ChatGPT can be a helpful ally in your quest for knowledge and information.

By the way 🥳, this is my first article ever, and I hope you found it interesting and useful 🥳.

My Favourite Websites as a WordPress Developer

Christina Garofalo — Mon, 07 Aug 2023 14:14:01 +0000

Photo by Torbjørn Helgesen on Unsplash

There are loads of useful websites out there to help you with your development, this is just a list of the ones that I use on an almost daily basis. As a fan of open-source and free tools, every one of these websites is free to use. Take a gander at this unordered, non-exhaustive list of handy websites.

playground.wordpress.net

Run WordPress in your browser. Try plugins and test things out, without the risk of messing up your environment. You can easily swap WordPress and PHP versions without the hassle of setting up a site locally. This is a brand new project, so if you do WordPress development, it’s pretty exciting. The documentation can be found here.

notpurple.com

This hardly constitutes a website, but when you just need a dummy URL that’s live, I use notpurple.com. All this website does is randomly change the background colour to something other than purple on reload. That’s it.

This site’s predecessor was shown to me by an IT technician when I was having issues with my home internet connection, and kept asking me to ping it, instead of Google. This website has a funny history, it used to be purple.com before it was sold not that long ago to a mattress company of the same name. All that site did was the same as notpurple.com, except that it only showed random shades of purple. It’s so bizarre that there’s a Wiki article about it.

placehold.co

Every web developer just needs some good old-fashioned placeholder images, without needing to host them somewhere. There are numerous placeholder websites out there (including placekitten.com and placebear.com), but I like placehold.co for its simplicity and versatility. You can define size, colour, text and format in one image URL. I will often use these as fallback images when coding. When all else fails - grab an image from placehold.co.

ui-avatars.com

This service is similar to placehold.co, except that it serves up avatars that use initials and a random colour. You can define the name, the colour, the size and the shape of the avatar (square or round) if you need something specific for your project.

unsplash.com

Actually free, royalty-free images. This site was recently acquired by Getty Images, and now offers a paid tier (unsplash+), but there’s still plenty of free goodness to go around. You can also have access to these free images directly in the WordPress Media Library via the Instant Images plugin. It’s nice just having a source for high-quality images where you don’t need to worry about copyright concerns. While you don’t need to credit the photographers, personally I like to give credit where credit is due, I encourage you to do the same.

jsoneditoronline.org

This one is self-explanatory, it allows you to edit JSON in your browser. I mostly use this to sanity-check large blocks of JSON when working on custom importers and general data manipulation, as it points out syntax errors and differences. Useful for when you don’t want to fire up your IDE.

onlinephp.io

I like to experiment with PHP, but I don’t always want to create a whole local dev site just to do it. This site lets you code directly in the browser and choose from the 400+ versions of PHP at your fingertips. Being able to effortlessly switch PHP versions is a handy way to refactor old code snippets and bring them up to date for PHP 8+, right in your browser.

dnschecker.org

Eventually, you are going to need to put your site live, so you buy a domain and host it somewhere. This means you’ll have to point your DNS records at a server. This website lets you check to see if your domain has propagated worldwide, allowing you to debug DNS issues faster. DNS propagation is known to take up to 48 hours, however, I find that most things get propagated in a few hours at most and at times as soon as 5 mins. This tool lets you see the results in almost real-time. (There is a checkbox that lets you auto-refresh to see changes every 20 seconds if you feel the need to watch it like a hawk.)

who.is

When I need to know where a domain is registered, I run it through Who.is. I mostly use this to help clients track down who is holding their domain “hostage”. A lot of the time, they don’t know, either because their predecessor didn’t inform them or some kind of bad breakup with a former developer or agency. This site helps shed light on the situation and could help you or your clients get in touch with the person or organization. (Or maybe you’re just nosey).

These are just a handful of useful sites I’ve “collected” over the years that I keep going back to, and that generally hang out in my bookmark bar for quick access. What are the go-to websites that help you in your everyday development? I’m always on the hunt for useful tools, comment with your faves below!

My Favourite WordPress Plugins as a Developer

Christina Garofalo — Mon, 31 Jul 2023 13:54:54 +0000

There are 59,592 plugins listed on WordPress.org at the moment of writing this blog post. That is a lot to sift through! This is the unordered, non-exhaustive list of my favourite plugins that I use as a developer just about every day, and maybe you’ll find them useful too — at the very least this will save you some time searching through a lot of defunct, irrelevant and poorly maintained plugins. I’m a huge fan of open-source software, so all plugins on this list are free to use or have a free version.

1. FakerPress by Gustavo Bordoni

FakerPress is great for when you just need to populate a staging or local environment with fake posts and content for testing purposes. You can even fake users (which can be used with the User Switching plugin). It will also download and set featured images for you. The best part is when you are all done or need to reset the data, you can bulk delete anything that was generated by FakerPress.

2. Instant Images by Darren Cooney

Instead of using the same boring placeholder images over and over again during development, give Instant Images a go. You can import free & royalty-free images directly from Unsplash into the media library. It even fills out the title, caption and alt text for you (English only). I use this primarily for development, but there's no reason why it couldn't be used in production either. Having relevant images at your fingertips helps the client (and yourself) visualize what the site could look like on a staging site or save you the hassle of having to search for relevant images in another tab in your browser.

3. WP Mail SMTP by WP Mail SMTP

Sometimes you need to get email working in your dev environments without the headache of setting up PHP’s mailer. WP Mail makes setting up email a straightforward process with its wizard. I like to use Mailtrap.io for email testing. A single testing inbox is free and works with WP Mail with the SMTP settings. Using this plugin will ensure that emails sent from your site, such as password resets, will be delivered.

4. FileBird by Ninja Team

This plugin creates folders/tags within the native media library. It has a beautiful UI and is extremely useful for keeping your media library organized, especially when you have a lot of files. It doesn’t alter the uploads directory either, so if you do decide to remove it, it won’t leave a mess. While this is handy during testing, it's also nice to have in production as well.

5. User Switching by John Blackbourn & contributors

If you are working on any kind of membership site or a site that has multiple users and roles, I strongly suggest using this plugin to test what the various users on your site can access and see. You can easily "switch" to appear logged in as different users on your site. I would not recommend this plugin be installed in a production environment, but it's certainly handy during testing.

6. WP Help by Mark Jaquith

Add some documentation right into the admin dashboard. Useful for keeping documentation for yourself, or helpful notes for the admins of the site. The only downside is that the documentation is stored in the database, making it difficult to migrate the documentation only from one site to another or commit it to a repository. (This is a bit of annoyance for me as I tend to use the same documentation over and over again with slight tweaks.) There is a feature to link documentation, and all changes made from the source will be mirrored on any linked sites which is handy for multisites. Barring that, it's a lifesaver for fielding potential questions from clients.

7. Password Protected by WPExperts

Does your host not allow basic auth or make it difficult to set up? Try Password Protected. This sets up basic auth for your WordPress site in minutes. You may even add IPs to an allow list so that you are not constantly pestered by the password prompt. This plugin was recommended to me by Pressable, and it's now part of my developer arsenal.

8. Query Monitor by John Blackbourn

If you need to pull back the curtain and see what WordPress is doing in the background or want to improve the performance of your queries, try Query Monitor. It will give you an overwhelming amount of query data that can be used to fine-tune or debug your queries. This plugin hooks deeply into WordPress, so make sure you disable it in production.

9. Debug Bar by wordpress.org

This plugin adds debugging information right to your admin bar so you can quickly see logs for queries, caches, and other useful debugging info. Query Monitor can be overwhelming at times, however, this plugin is a bit more manageable. I would also recommend that this plugin not be used in production environments.

10. Advanced Custom Fields by WP Engine

ACF is an essential plugin if you want to add custom fields to the CMS quickly and with ease. There is a free version of this plugin, but I would recommend getting a license, as it unlocks considerably more features, including the ability to build blocks without any React knowledge. It has a host of useful functions and filters that can be leveraged to make overall WordPress development less of a headache. I’m particularly fond of the get_field() and acf_slugify() helper functions. It’s a powerhouse of a plugin.

11. Limit Login Attempts Reloaded By Limit Login Attempts Reloaded

You’ve put a lot of work into your new site, you put it live and bask in its glory. Wouldn’t it be a shame if something happened to it? It doesn’t take long at all before some bot or hacker tries to brute force their way into your backend. This is a simple plugin that will block multiple attempts to log into your admin area. By default, any more than 3 attempts, and that IP will be blocked for 20 mins from trying to log into your site. That’s usually enough to stop a hacker in their tracks, as most are looking for easy targets, especially fresh installs. There is a pro version that allows you to do things like block IPs from entire countries, but the base version does a pretty good job with basic features.

12. SMNTCS Disable REST API User Endpoints by Niels Lange

Now with security in mind, did you know how easy for someone to find a list of every single user on your site? Very easy, just hit this endpoint on your WordPress site /wp-json/wp/v2/users, and you’ll get the whole list, and that’s how hackers can probably deduce which user is an admin, and which accounts to target. This lightweight plugin disables that endpoint, so as long as you don’t need it for anything else, you can rest easy knowing that you’ve given potential nere-do-wells one more obstacle to deal with. There are ways to disable this with code, but this plugin is handy for the no-code approach.

Update Oct 11, 2024: ACF download link has been updated, as it is no longer in the wordpress.org plugin directory due to the ongoing dispute.

Using the reduced motion media query in a project

Riley McMaster — Mon, 24 Jul 2023 13:14:31 +0000

The CSS media query prefers-reduced-motion is a rule that checks the user's accessibility setting for "reduced motion" in their system preferences. It is not browser, website or session dependent but a setting on the user's computer itself. This media query allows us as developers to update any styles based on the user's preference for animation.

The intent of this media query is to create a comfortable experience for all users. Animations can cause discomfort and even pain for neurodivergent users which can include people with vestibular disorders and users who are prone to inattention due to ADHD, bipolar disorder, depression or anxiety disorders. Other users may wish to turn on "reduced motion" to minimize distractions or reduce cognitive load.

The problem is that not all sites accommodate the user's wishes and stop animations if they have selected "reduced motion".

When a user chooses "reduced motion" it does not necessarily mean that they wish to have no motion at all. Some animations are extremely helpful for the user experience in providing visual feedback: a loading spinner that doesn't spin can make the user think the site is frozen, a button changing scale as you click it can emphasize that it has been clicked. Reducing motion is most beneficial when dealing with big parallax effects, scroll hijacking and animations that cover lots of screen space as these are most likely to cause issues for motion-sensitive users.

A developer's initial instinct to using the prefers-reduced-motion media query might be to stop animations on an individual selector basis:

  @media screen and (prefers-reduced-motion) {
    animation: none;
    transition: none;
  }

This will likely cause issues because the animations can get stuck at their initial value (ie. opacity: 0 and the position is off screen).

We want a more global solution that will make it easier to develop for users who want less motion. We also need for the animations to play so that the elements end up at their desired end point, while not noticing the in-between states of the animation. We can use the animation and transition duration property to force the animations to run at a speed so fast that it is imperceivable.

In the root level of our CSS, we call the reduced-motion media query and target a specific class that will 'turn off' the animations for those elements.

A more global and adaptable solution:

@media only screen and (prefers-reduced-motion) {
  .reduce-motion,
  .reduce-motion::before,
  .reduce-motion::after {
    animation-delay: 0s !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important; 
    transition-duration: .0001ms !important;
    transition-delay: 0s !important;
  }
}

As we are developing, we can add the class reduce-motion to any elements that we think are not necessary to the user experience or could cause discomfort to the motion-sensitive users.

While we try to use the !important property as little as possible, it is a valuable use of it here since the point is to be a global override of any animation and transition properties further down the style-sheet.

This isn't necessarily a perfect solution but it is important to have these conversations about how different people experience the web. In order to build more inclusive sites, we need to listen to issues people have and address them with any tools that we have available to us.

Sources that helped inform this article:

WCEU23: Block Workshops Recap

Christina Garofalo — Wed, 28 Jun 2023 14:05:25 +0000

I attended 2 workshops this year at WCEU23 in Athens, both were about blocks. At Plank, we create custom WordPress themes for clients that almost always involve custom blocks. It's a subject that's been unavoidable since the introduction of them in WordPress 5.0 - and we like them. It allows us to create modular designs that give our clients the power to layout their content that stays consistent with their branding without constantly involving developers after the site launch. So naturally I was interested in seeing what the rest of the WordPress community was up to when it came to the subject of blocks.

The first workshop I attended was by Luis Herranz ( @luisherranz ), "Building interactive blocks: a step-by-step workshop". According to Luis, the interactive API will hopefully be making its debut in WordPress 6.4 🤞. The goal of the Interactive API is to facilitate implementing interactive features into blocks natively, such as “heart this post” or “add to cart” without page reload. You can read his proposal for the interactive API here. You can download the repo from the workshop here and jump through the steps of his example here. Personally, I can't wait to see this feature in core.

The second workshop I attended was by Robert Richardson, "Code techniques for handling dynamic data in the new(ish) world of blocks". What was interesting about this workshop, for me, wasn't really anything new; but it was really assuring to me that Plank's on the right track concerning the development of blocks. When he asked the room of about 50-60 attendees "who was using custom REST API endpoints to pass data to their blocks", I was the only one who raised their hand! I was honestly shocked that no one else seemed to take this approach to handling data. I recommend leveraging the REST API capabilities of WordPress for use in your blocks. It's very easy to set up, and very powerful. React developers will have a field day.

WordPress Playground

Dave Kellam — Tue, 27 Jun 2023 19:14:08 +0000

One of the most exciting things at WordCamp Europe 2023 for me was discovering how far along the WordPress Playground project is. If you haven’t heard of the playground before, it’s a full version of WordPress, running directly in your browser!

History

The project began late last summer, with version 0.1 being released in April. The readme indicates that it was inspired by the initial PHP WASM implementation, a Drupal in the browser example, and a WASM Labs WordPress demo. The WordPress Playground was introduced to the larger WordPress community during the 2022 State of the Word presentation.

The Playground was actively promoted during WCEU this year — used to quickly spin up sites for the documentation team, and others, on contributor day, featured in a connect track session, and a demo during the keynote.

How it works

The technology behind the Playground is called WASM, short for Web Assembly.

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications.

There are versions of PHP compiled into WASM binaries that allow you to run PHP code directly in the browser. The Playground then uses those binaries to run the WordPress PHP application, as well as a plugin that allows MySQL calls to be intercepted and interpreted to SQLite

Demos

WordPress Playground with Frost theme installed

Unfortunately, you can’t embed playground iframes in dev.to, but we can link directly to a few examples of it in action. The Playground default uses the latest version of WordPress with the default theme and PHP 8.0.

You can use query parameters, like theme and plugins to install a particular theme or plugin in the Playground. In this example, we install the Frost theme and CoBlocks plugin. You can also pass wp and php to install different versions of WordPress and PHP.

If you’re embedding an iframe, the experience is also totally scriptable. One example of the iframes in action is the tutorial for using the new tag processor function.

The future

The Playground opens up a lot of possibilities since it makes WordPress embeddable in so many areas:

We can easily test different versions of WordPress and PHP
We can embed live examples in tutorials and lessons
A VS Code extension allows you to open a theme or plugin up in a usable test environment
It can be embedded directly in mobile apps
We can include live demos in pull requests
It can be integrated into a CI/CD pipeline

The vision and philosophy and roadmap are both available on GitHub, so you can see where things are headed. It’s still early on, version 0.2 was just released a few days ago on June 24th. We’re likely to see breaking changes at times until an official 1.0 release happens.

Now it’s time to go play.