💡 NOTE: First, make sure the global wp.media object is available in your window scope.

If wp.media is not available, ensure the Media Library scripts are enqueued in PHP via:

 wp_enqueue_media();

Full reference is available in the WordPress codex.

In JavaScript, create a frame.

const myFrame = wp.media({
        title: 'Add images',
        library: {
          type: 'image'
        }
      });

Use the open method to open the actual Media Library:

myFrame.open()

The config above will open Media Library with the “Add media” tab by default, where all the media files are listed.

To open the Media Library with the Upload files tab by default, you’ll need to specify an additional property in your frame’s Library object.

That is the contentUserSetting property, which should be set to false; by default, it is set to true.

If you’re using a single frame without any states, you can just add this snippet to your code. Which will set the contentUserSetting property’s value.

wp.media.controller.Library.prototype.defaults.contentUserSetting = false;

Then, on the next Media Library frame open, you should see the Upload files tab active by default.

Similarly, if you use states with your frame, then for the upload state, set the contentUserSetting property.

const myFrame = wp.media({
  state: 'select', // Default state of the frame
  title: 'Select images',
  library: {
    type: 'image'
  },
  states: [
    new wp.media.controller.Library({
      id: 'upload',
      title: 'Upload image',
      contentUserSetting: false // Make an upload file tab open by default
    }),
    new wp.media.controller.Library({
      id: 'select',
      title: 'Select images'
    })
  ]
});

Then, after you change the state, the Upload tab will be active on the next opening of the frame.

myFrame.setState('upload');
myFrame.open();

Unlike other carousels that allow users to manually scroll, this one will autoplay infinitely, pausing on hover.

It won’t have any controls; it will just scroll smoothly from side to side, highlighting specific items.

Markup

I will wrap the carousel element inside a wrapper that spans the full width of the page. This wrapper is essential for properly positioning the carousel and ensuring it takes up the entire page width.

Let’s use a section element with a class name of carousel-section, as it may also contain other content, such as text and images.

<section class="carousel-section">
  <div class="css-carousel">
    ...
  </div>
</section>

For the sake of this example, I’ll use plain images as carousel slides, but any other content can be used as well.

<section class="carousel-section">
  <div class="css-carousel">
    <figure>
      <img src="img-1.png" alt="First slide">
    </figure>
    <figure>
      <img src="img-2.png" alt="Second slide">
    </figure> 
    <figure>
      <img src="img-3.png" alt="Third slide">
    </figure> 
    <!-- Add more images below ... -->
  </div>
</section>

Once you’ve added the necessary markup, make sure to include enough slide elements so that the carousel has sufficient content to scroll through.

Styles

To make this carousel function properly, the first step is to add overflow: hidden to the wrapper element.

.carousel-section {
  overflow: hidden;
}

For the carousel element, the slides need to align horizontally and occupy the full width. We’ll use display: flex along with a few other rules to improve its appearance.

.css-carousel {
  display: flex;
  align-items: stretch;
  gap: 3px;
}

We’ll need to specify both the width and height for the image elements.

.css-carousel img {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 400px;
  height: 100%;
}

The objective of this carousel is to scroll infinitely. We can make it move from one end to the other, looping back continuously.

The trickiest part is specifying the correct value at which the carousel will scroll. This value represents the portion of the carousel that extends outside the viewport.

To calculate this offset value, we’ll use a mathematical formula. The final value must be negative, as the carousel will start moving to the left along the X-axis.

O - offset
SW - slide width
SC - slice count
VW - viewport width (in percent)

O = -(SW × SC) - VW

We’ll use CSS custom properties (variables) and the calc() function to compute the offset value.

💡 NOTE: To make the offset value negative, we’ll subtract it from 0.

:root {
  --slide-count: 6; /* number of slides in the carousel */
  --slide-width: 400px; /* width of a single slide */
  --carousel-edge-pos:
      calc( 0% - ((var(--slide-width) * var(--slide-count)) - 100%) ); /* formula to calulate the offset value */
}

Lastly, we’ll add an animation to the carousel element and enable it to pause on hover.

The animation will manipulate the translateX property, causing the carousel to move horizontally.

.css-carousel {
  /* ... */
  -webkit-overflow-scrolling: touch;
  animation: scroll 40s linear alternate infinite;
  animation-play-state: running;
}

.css-carousel:hover {
  animation-play-state: paused;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--carousel-edge-pos));
  }
}

Complete CSS code:

:root {
  --slide-count: 6; /* number of slides in the carousel */
  --slide-width: 400px; /* width of a single slide */
  --carousel-edge-pos:
      calc( 0% - ((var(--slide-width) * var(--slide-count)) - 100%) ); /* formula to calulate the offset value */
}

.carousel-section {
  overflow: hidden;
}

.css-carousel {
  display: flex;
  align-items: stretch;
  gap: 3px;

  -webkit-overflow-scrolling: touch;
  animation: scroll 40s linear alternate infinite;
  animation-play-state: running;
}

.css-carousel:hover {
  animation-play-state: paused;
}

.css-carousel img {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: var(--slide-width);
  height: 100%;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--carousel-edge-pos));
  }
}

Demo

You can find a full demo with a complete code example on my CodePen. The demo also includes additional styling to enhance the appearance and functionality of the carousel:

See the Pen Untitled by Nikita Hlopov (@nikitahl) on CodePen.

1. Problem with embeds
2. Solution is to lazy load

Problem with embeds

This poses a significant performance issue, particularly when the embed isn’t immediately visible on the page. And I’m not just referring to CodePen and CanIUse; this applies to any third-party embed on the page.

While CodePen offers some optimization options, such as using the Click-to-Load feature on an embed or employing the loading="lazy" attribute on an iframe to defer the load, further optimization is still possible.

The number of resources loaded depends on the content of an embed, and in some cases, it can be substantial, such as numerous and/or large images.

These resources are deemed render-blocking, implying that loading them during the initial page load significantly impacts the page’s speed, a critical aspect of web page performance.

I’ve encountered this issue for some time, as I incorporate many of these embeds on my blog to showcase my work and offer information about browser support for a feature.

Solution is to lazy load

I decided to write a custom script to lazy load these embeds and optimize my blog posts for load speed.

The solution is quite simple: utilize the Intersection Observer API to determine if the embed is sufficiently close to the edge of the screen to initiate resource downloading.

The first step involves pasting the embed HTML code, but excluding the script tag. The script contains code to fetch the necessary resources for the embed.

So in case of CanIUse, the HTML will appear as follows:

<p style="background:pink;padding:50px 0;" class="ciu_embed" data-feature="mdn-css__properties__-webkit-text-stroke-width" data-periods="future_1,current,past_1" data-accessible-colours="false">
  Data on support for the <a href="https://caniuse.com/text-stroke" target="_blank">-webkit-text-stroke-width</a> feature across the major browsers
</p>

Next, we’ll need to write a small JavaScript snippet to properly handle embed lazy loading.

The following JavaScript code will verify if the embed element is within 400px of the edge of the screen and will then append the embed script to the body element, thereby triggering the resource download.

Below is my JavaScript snippet with comments for explanation:

// Get all CodePen and CanIUse embeds
const embeds = document.querySelectorAll(".codepen, .ciu_embed");

// Execute further code only if embeds exist on the page
if (embeds.length) {
  // Set flags if resources for embeds are already loaded
  let isCpLoaded = false;
  let isCiuLoaded = false;

  // Specify options for IntersectionObserver
  // rootMargin is the top and bottom margin that represents
  // the value to the edge of the screen of the embed
  const options = {
    root: null,
    rootMargin: "400px 0px", 
    threshold: 0
  };

  // Create the Intersection Observer from the IntersectionObserver constructor
  const intersectionObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      // Ensure if the element is intersecting the edge of the screen
      if (entry.isIntersecting) {
        // Define the embed element
        const embed = entry.target;
        // Define the script source variable
        let src = "";
        // Based on the condition set the source variable equal to embed script path
        // do it only once, because we don't need to run the code multiple times,
        // once the resourses have already loaded
        if (!isCiuLoaded && embed.classList.contains("ciu_embed")) {
          isCiuLoaded = true;
          src = "https://cdn.jsdelivr.net/gh/ireade/caniuse-embed/public/caniuse-embed.min.js";
        } else if (!isCpLoaded && embed.classList.contains("codepen")) {
          isCpLoaded = true;
          src = "https://cpwebassets.codepen.io/assets/embed/ei.js";
        }
        // Execute further code only if the script source is available
        if (src) {
          // Create a script element and assign src and async attributes
          var script = document.createElement("script");
          script.src = src;
          script.async = true;
          // Append the script before the closing body tag
          document.body.appendChild(script);
          // For the CanIUse embeds run additional code
          if (embed.classList.contains("ciu_embed")) {
            // CanIUse embed script is wrapped inside a "DOMContentLoaded" event
            // so we need to trigger this event oursevles in order for the script to execute
            // NOTE: trigger this event at your own risk,
            // because many JavaScript libraries rely on this event
            // and it might produce an unwanted results.
            script.onload = function(params) {
              var customEvent = new CustomEvent("DOMContentLoaded");
              document.dispatchEvent(customEvent);
            }
          }
        }
      }
    })
  }, options);

  // Call observer for each embed
  embeds.forEach((embed) => {
    intersectionObserver.observe(embed);
  });
}

Usually, the Unterminated string literal error occurs when the string is not enclosed inside the single (') or double (") quotes.

In my case, the string looked as follows:

var str = "<script></script>";

Immediately I was notified by the code editor that there was an issue with this string.

Since I’ve ensured that the string was closed by the double quote, I was confused a bit, to say the least.

I’ve tried both single and double quotes. But the error was still there, and the console was saying the same. However, Firefox was more precise.

But after some investigation, I’ve found out that the script and style tags inside a string should be treated like HTML, hence the error.

There are a few ways to fix that.

1. Escape the closing tag slash:

   var str = "<script><\/script>";
   

2. Split the string:

   var str = "<script>" + "</script>";
   

3. Use template literals:

   var str = `<script></script>`;
   

I’m referring to both input elements (which can hold text values) and textarea elements.

However, the focus() method alone doesn’t achieve this. Since there are no native solutions to set the cursor position, we can employ a small JavaScript trick.

Let’s assume we have the following search input element, which already contains a value:

<input id="search-field" type="search" value="How to">

Next we’ll need to use the setSelectionRange method to set the cursor position.

The setSelectionRange method accepts two parameters:

• selectionStart - a zero-based index of the first selected character
• selectionEnd - a zero-based index of the character after the last selected character

Although this method is intended for text selection, we can use it to set the cursor position by specifying the same start and end position of the selection. Which both will be equal to the last character index.

const searchInput =  document.getElementById('search-field')

// start and end position of the cursor
const pos = searchInput.value.length

searchInput.setSelectionRange(pos, pos)
searchInput.focus()

💡 NOTE: The setSelectionRange method will work the same for the input and textarea elements.

1. Problem
2. How it works in WordPress
3. Solution

Problem

When utilizing the WordPress Classic Editor for implementing an instant update of a specific preview area, the content renders differently based on the editing mode.

This discrepancy arises because the Classic Editor in WordPress has two modes, each with a separate text editor:

1. Visual mode uses the TinyMCE editor
2. Text mode uses the Quicktags editor

TinyMCE is a WYSIWYG editor that produces ready-to-use HTML code, while the Quicktags editor is a simple text editor allowing users to manually insert HTML tags.

💡 NOTE: As of time of writing this article the WordPress was using a version 4.9.11 of TinyMCE editor.

On the other hand the Quicktags editor is a simple Text editor, which allows users to insert HTML tags manually.

The issue occurs when switching between modes, leading to potential stripping of changes, such as tags, from the Quicktags editor. This can result in undesired outcomes when instantly outputting content to a designated area, as the HTML differs.

Notably, this is visible for text content, displayed as paragraphs in Visual mode and as regular text in Text mode.

How it works in WordPress

In the WordPress View page, there is no visible difference; the output text appears exactly as it does in the TinyMCE (Visual mode), even if edited in the Quicktags editor (Text mode).

This consistency is achieved through the application of the wpautop function, which wraps text inside a p element after saving or publishing a post.

Solution

When creating a custom text editor in WordPress, such as in a plugin, and aiming to mimic its logic, synchronization of values in both editor modes is necessary.

Assuming the Classic Editor is initialized with both modes, here’s how to sync the values:

You can store the value of the editor in a variable, since the TinyMCE is the default one, you can get its value and store as a default:

let editorValue = window.tinymce.activeEditor.getContent()

The editorValue variable will hold the editor value, which you can use to insert in a live preview area. E.g.:

const preview = document.getElementById('preview')

preview.innerHTML = editorValue

The TinyMCE will have its own change handler function which you can specify when initializing. Inside the change handler function you should write the TinyMCE editor’s value to the editorValue variable.

const id = 'editor'
let editorValue = window.tinymce.activeEditor.getContent()

window.tinymce.init({
  id: id,
  selector: '#' + id,
  setup: function(editor) {
    editor.on('keyup change undo redo', (e) => {
      editorValue = editor.getContent()
    })
  }
})

For the Quicktags editor, we need to add an eventListener, and run the value of the textarea through the wpautop function.

Since WordPress has only a PHP version of the wpautop function, we can use a JavaScript version of the this funciton.

You can install it as an npm package or copy paste it from GitHub.

import wpautop from 'wpautop'

const id = 'editor'
let editorValue = window.tinymce.activeEditor.getContent()

window.QTags.instances[id].canvas.addEventListener('keyup', (e) => {
  const formattedValue = wpautop(e.target.value)
  editorValue = formattedValue
})

Now, the content value is stored in one place, ensuring consistency between the editor modes. This prevents visual artifacts and glitches when working in both modes.

The task was to set user-provided data like username, name, email, etc. into the database table. But the query provided in the course didn’t work for me.

I’ve struggled a bit but managed to find a solution.

My setup:

1. MAMP version 6.8
2. PHP version 7.4.33
3. mySQL version 5.7.39

What I had:

1. The database was set via the phpMyAdmin tool.
2. There were 8 columns in the database’s users table.
3. The first column is id with a type of INT and has an AUTO_INCREMENT without any initial value.

Suggested query:

So when I used the provided query it didn’t work for me. The first parameter in the parenthesis is supposed to represent an id column.

mysqli_query($this->con, "INSERT INTO users VALUES ('', '$un', '$fn', '$ln', '$em', '$encryptedPw', '$date', '$profilePic')");

This query returned false. And after debugging as suggested in the course, I received the following error for the given query:

#1366 - Incorrect integer value: '' for column 'id' at row 1

So it means that the provided value type was wrong for the id column.

Solution:

After some of research I’ve found out that for the AUTO_INCREMENT columns, you can skip this parameter in the query.

So, you would set all columns except the first one (the id), and the final query would look like this:

mysqli_query($this->con, "INSERT INTO users (username, firstName, lastName, email, password, signUpDate, profilePic) VALUES ('$un', '$fn', '$ln', '$em', '$encryptedPw', '$date', '$profilePic')");

Previously, you needed to use hacks, such as adding several box-shadow properties, to achieve such a result.

But with modern CSS to add an outline effect you’ll need to use only three CSS properties -webkit-text-fill-color, -webkit-text-stroke-width and -webkit-text-stroke-color.

.outline-text {
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #262626;
}

Result:

Outline Text

These properties are pretty self-explanatory:

• -webkit-text-fill-color - adds a fill color for the text
• -webkit-text-stroke-color - specifies the outline color of the text
• -webkit-text-stroke-width - specifies the outline width of the text

Hover effect

They also work well with CSS transitions, so you can apply one on hover effect.

  .outline-text {
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #262626;

    transition: -webkit-text-stroke-color .2s ease-in-out;
  }

  .outline-text:hover {
    -webkit-text-stroke-color: #f00;
  }

Result:

Outline Text with Hover Effect

Browser support

These three properties are fully supported by all modern browsers.

Data on support for the -webkit-text-fill-color feature across the major browsers

Data on support for the -webkit-text-stroke-color feature across the major browsers

Data on support for the -webkit-text-stroke-width feature across the major browsers

Recently I changed the 2FA app on my phone, so I had to also enable it in the GitHub settings.

At first, I thought there would be a separate option to change the authenticator app. And I was looking for such an option under Two-factor authentication in Settings, but couldn’t find such.

Then I used the Edit option on the existing Two-factor method section under the Password and authentication.

Which prompted me to authenticate with my existing app.

After I authenticated, I was able to generate a new QR code, and this time used my new authenticator app.

Now I can use a new app that I’ve installed on my phone to authenticate into GitHub.

Contents:

1. Hide default arrows
2. Add custom buttons
3. Styling the input
4. Demo

Hide default arrows

The default number input arrows are often considered suboptimal because of their unappealing design and limited usability, making them less intuitive and user-friendly for individuals interacting with the input field.

Not to mention the lack of consistency accross different browsers. The arrows will appear on hover.

To hide the default arrows, you’ll need to use the ::-webkit-outer-spin-button and ::-webkit-inner-spin-button pseuso-elements.

These will only work for the WebKit or Blink based browsers. To hide the arrows on Firefox, you’ll need to use the vendor prefixed appearance property with a value of textfield on the number input.

/* WebKit and Blink */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

Add custom buttons

Now that the default arrows are hidden, we can add buttons that will act as increment and decrement controls for the number input.

Usually, what you will see is the decrement button on the left side of the input and the increment button on the right side of the input. This is how I’m going to do it as well; however, you can position the buttons any way you like.

<button
  class="value-control"
  onclick="numberInput.stepDown()"
  title="Decrease value"
  aria-label="Decrease value">-</button>

<input
  class="value-input"
  type="number"
  value="1"
  name="numberInput"
  id="numberInput">

<button
  class="value-control"
  onclick="numberInput.stepUp()"
  title="Increase value"
  aria-label="Increase value">+</button>

Explanation:

For each button, we will include a title attribute to signify the action of the button. Additionally, we will add an aria-label attribute to enhance accessibility for assistive technologies.

The decrease button will feature a “-“ symbol, while the increase button will showcase a “+” symbol.

Finally, the buttons will have an onclick attribute that will modify the number input value. This attribute will reference the id attribute of the number input, which is available in the global scope, along with a corresponding method to either increase (stepUp()) or decrease (stepDown()) the value.

Styling the input

Finally, let’s add some styles to the buttons and input.

I’ll define CSS variables to maintain consistency in properties such as border, border-radius, height and font-size.

In the end, I’ll apply pseudo-classes (focus, hover and active) for an improved UI and enhanced accessibility.

:root {
  --border-radius: 3px;
  --border: 2px solid #3b3b3b;
  --control-size: 38px;
  --font-size: 20px;
}

.value-control {
  width: var(--control-size);
  height: var(--control-size);
  margin: 0 8px;
  background: transparent;
  border: var(--border);
  border-radius: var(--border-radius);
  color: #3b3b3b;
  cursor: pointer;
  font-size: var(--font-size);
}

.value-control:hover {
  background: #eee;
}

.value-control:active {
  background: #ddd;
}

.value-control:focus,
.value-input:focus {
  outline: 2px solid #3e67fd;
  outline-offset: 1px
}

.value-input {
  margin: 0;
  height: var(--control-size);
  width: 80px;
  border: var(--border);
  border-radius: var(--border-radius);
  padding: 2px 8px;
  text-align: center;
  font-size: var(--font-size);
}

.value-input:hover {
  border-color: #777;
}

Demo

The final result will be a more appealing presentation of the numeric value, offering an improved method for users to modify it either through the input itself or the more distinct and larger buttons.

You can find a full demo with a complete code examples on my CodePen:

See the Pen Custom number input by Nikita Hlopov (@nikitahl) on CodePen.