Category: Web Development

WP REST API – sort by menu_order

TheSmithy

Sage 10:

In filters.php add:

// /**
// * The filter is named rest_{post_type}_collection_params. So you need to hook a new filter for each
// * of the custom post types you need to sort.
// * @link https://www.timrosswebdevelopment.com/wordpress-rest-api-post-order/
// */

// This enables the orderby=menu_order for Posts
add_filter( 'rest_post_collection_params', __NAMESPACE__ . '\\filter_add_rest_orderby_params', 10, 1 );
// And this for a custom post type called 'faq'
add_filter( 'rest_faq_collection_params', __NAMESPACE__ . '\\filter_add_rest_orderby_params', 10, 1 );

// /**
// * Add menu_order to the list of permitted orderby values
// */
function filter_add_rest_orderby_params( $params ) {
  $params['orderby']['enum'][] = 'menu_order';
   return $params;
}

Now you can use SITEURL/wp-json/wp/v2/faq?orderby=menu_order

hamburgers by Jonathan Suh

TheSmithy

https://jonsuh.com/hamburgers/

https://discourse.roots.io/t/how-to-using-hamburgers-package-in-sage/11543

mmirus (2018):

Install:

yarn add hamburgers

Import in main.scss:

@import "~hamburgers/_sass/hamburgers/hamburgers";

Add the markup:
Probably in your header.blade.php partial.

<button class="hamburger hamburger--vortex" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

In this case, I’m using the ‘vortex’ type.

Customize as desired in _variables.scss:
Here’s what I used for my current project, but see the different types and the list of SASS variables in the page linked to above.

/** Hamburger icon */
$hamburger-padding-x: 0;
$hamburger-padding-y: 0;
$hamburger-layer-width: 20px;
$hamburger-layer-height: 2px;
$hamburger-layer-spacing: 4px;
$hamburger-layer-color: $brand-primary;
$hamburger-types: (vortex);

Again, I’m using the ‘vortex’ type here.

Add JS to make it functional to common.js:

export default {
  init() {
    // JavaScript to be fired on all pages
    $(".hamburger").click(function() {
      $(this).toggleClass("is-active");
    });
  },
  finalize() {
    // JavaScript to be fired on all pages, after page specific JS is fired
  },
};

You would likely also be toggling the state of your menu in the same click handler.

That should be it.

toddsantoro (2022)

Might want to change the snippet in the guide to initiate the hamburger to:

  $('.hamburger').on( 'click', function() {
    $(this).toggleClass('is-active');
  });

so the deprecation warnings go away.

Or in AlpineJS you can do something like this:

<div class="flex justify-center items-center w-10 h-10 rounded-full border border-solid xl:hidden border-[#888]">
        
<button 
  :class="isOpen ? 'is-active' : ''" 
  class="hamburger hamburger--3dy" 
  type="button" 
  @@click="isOpen = !isOpen">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>
</div>

Corset – Cascading binding sheets

TheSmithy

Reactive UI without the complexity of SPA frameworks. Use any backend you like; bind to the HTML you already produced.

Get started

Documentation

Bring your HTML to life.

Corset binds JavaScript to HTML. It doesn’t matter how the HTML is produced and Corset doesn’t need to own your templating choice. Instead it uses a CSS-like syntax to enhance whatever you give it.

HTML

<div class="counter">
  <button
    type="button"
    class="increment">Increment</button>
  <button
    type="button"
    class="decrement"
    disabled>Decrement</button>

  <div
    class="result">
    Count: <strong class="count">0</strong>
  </div>
</div>

JavaScript with Corset

import sheet, { mount } from 'https://cdn.corset.dev/v1';

mount(document, class {
  count = 0;

  bind() {
    const { count } = this;

    return sheet`
      .counter {
        --count: ${count};
        --inc: ${() => this.count = count + 1};
        --dec: ${() => this.count = count - 1};
      }
      
      .count {
        text: var(--count);
      }
      
      .increment {
        event[click]: var(--inc);
      }
      
      .decrement {
        attr-toggle[disabled]: ${count === 0};
        event[click]: var(--dec);
      }
    `;
  }
});

CodePen 👉

Performance Lab

TheSmithy

By WordPress Performance Group

https://wordpress.org/plugins/performance-lab/

Description

The Performance Lab plugin is a collection of modules focused on enhancing performance of your site, most of which should eventually be merged into WordPress core. The plugin allows to individually enable and test the modules to get their benefits before they become available in WordPress core, and to provide feedback to further improve the solutions.

Currently the plugin includes the following performance modules:

  • WebP Uploads: Creates WebP versions for new JPEG image uploads if supported by the server.
  • Persistent Object Cache Health Check: Adds a persistent object cache check for sites with non-trivial amounts of data in Site Health status.
  • Audit Autoloaded Options: Adds a check for autoloaded options in Site Health status.
  • Audit Enqueued Assets: Adds a CSS and JS resource check in Site Health status.
  • WebP Support: Adds a WebP support check in Site Health status.

WP-CLI secure all – Single-command WordPress security!

TheSmithy
HomePage

https://hackthewp.com/

NEW feature in >wp-cli to secure any WordPress instance in just 60 seconds.

One command to rule them all 🤘

80% of the attacks to WordPress instances could be mitigated by simply applying common security best practices [1].

wp secure all exactly does that for you. Via wp secure all common best practices are applied proactively, and you are ready to go.

What’s covered by secure all?

The security vulnerabilities identified in 2012 [2] are still the security vulnerabilities of today [1].

wp secure all made it its mission to fix this grievance and make security the defacto standard.

By executing wp secure all security best practices such as:

Fix permissions

Set the correct permissions of all files & directories in your WordPress installation.

Set security headers

We add HSTS (Strict-Transport-Security), X-XSS, X-Frame-Options, X-Content-Type-Options, Referrer-Policy.

Disable file editor

Prevents hackers from using file editor on your WordPress Dashboard.

Prevent PHP execution on sensitive locations

To extend security, you can block direct access to PHP files in plugins, themes, wp-includes and uploads.

Block access to sensitive stuff

Prevent hackers from accessing sensitive files and directories.

And many more …

See the README for an overview of all features.

Read More

Swiper – The Most Modern Mobile Touch Slider

TheSmithy

https://swiperjs.com/

https://swiperjs.com/demos

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.

Swiper, along with other great components, is a part of Framework7 – a fully-featured framework for building iOS & Android apps. Swiper is also a default slider component in the Ionic Framework.

Read More

Too many watched files (vscode, linux)

TheSmithy

“Visual Studio Code is unable to watch for file changes in this large workspace” (error ENOSPC)#

When you see this notification, it indicates that the VS Code file watcher is running out of handles because the workspace is large and contains many files. Before adjusting platform limits, make sure that potentially large folders, such as Python .venv, are added to the files.watcherExclude setting (more details below). The current limit can be viewed by running:

cat /proc/sys/fs/inotify/max_user_watches

The limit can be increased to its maximum by editing /etc/sysctl.conf (except on Arch Linux, read below) and adding this line to the end of the file:

fs.inotify.max_user_watches=524288

The new value can then be loaded in by running 

sudo sysctl -p
Read More