Skip to content

Instantly share code, notes, and snippets.

Avatar

Kellen Mace kellenmace

View GitHub Profile
@kellenmace
kellenmace / debugging-methods.md
Created Jan 12, 2021
Traditional vs. Headless WordPress Debugging Methods
View debugging-methods.md
TRADITIONAL HEADLESS
WP_DEBUG_DISPLAY 👉 Enable WPGraphQL Debug Mode & inspect response errors
die() / wp_die() / var_dump() 👉 wp_send_json() or Enable GraphQL Debug Mode and use graphql_debug()
Postman/REST client 👉 Enable GraphiQL IDE
WP_DEBUG_LOG 👉 Still works!
Xdebug on page load 👉 Xdebug triggered by GraphiQL request in the wp-admin
Query Monitor 👉 Enable GraphQL Query Logs
NewRelic/Profiling tools 👉 Enable GraphQL Tracing
@kellenmace
kellenmace / lazilyLoadedComponent.js
Last active Nov 30, 2020
Use React.lazy() to lazily load NPM packages on the client
View lazilyLoadedComponent.js
import React, { Suspense } from "react"
import hasMounted from "../hooks/useHasMounted"
const SomeNpmPackage = React.lazy(() => import("some-npm-package"))
function LazyLoadedComponent() {
if (!hasMounted) return null
return (
<Suspense fallback={<p>Loading...</p>}>
@kellenmace
kellenmace / pwaInstallPrompt.js
Created Nov 30, 2020
Use React.lazy() to lazily load NPM packages on the client
View pwaInstallPrompt.js
import React, { Suspense } from "react"
import hasMounted from "../hooks/useHasMounted"
const PWAPrompt = React.lazy(() => import("react-ios-pwa-prompt"))
function PWAInstallPrompt() {
if (!hasMounted) return null
const isMobileChrome = navigator.userAgent.includes("CriOS")
@kellenmace
kellenmace / useSounds.js
Created Nov 11, 2020
Example of using useSound() hook in a React context provider
View useSounds.js
import React, { createContext, useContext } from "react"
import useSound from "use-sound"
import popDownSound from "../sounds/pop-down.mp3"
import marioCoinSound from "../sounds/mario-coin.mp3"
import applauseSound from "../sounds/applause.mp3"
import fanfareSound from "../sounds/fanfare.mp3"
const SoundsContext = createContext()
@kellenmace
kellenmace / greeting.js
Last active Nov 9, 2020
Example of using useHasMounted() hook
View greeting.js
function Greeting() {
const hasMounted = useHasMounted();
const username = hasMounted ? localStorage.getItem("username") : null;
return <p>Welcome back {username}!</p>;
}
@kellenmace
kellenmace / useHasMounted.js
Last active Nov 9, 2020
React component that returns true once the component/hook using it has mounted
View useHasMounted.js
import React, { useState, useEffect } from "react"
/**
* @return {boolean} Whether the component has mounted.
*/
function useHasMounted() {
const [hasMounted, setHasMounted] = useState(false)
useEffect(() => {
setHasMounted(true)
@kellenmace
kellenmace / remove-cpt-slug-from-permalinks.php
Created May 25, 2020
Remove CPT Slug from Permalinks - WordPress Plugin
View remove-cpt-slug-from-permalinks.php
View check-if-user-exists-wordpress.php
<?php
/**
* @param int $user_id User ID.
*
* @return bool Whether the user exists.
*/
function does_user_exist( int $user_id ) : bool {
return (bool) get_users( [ 'include' => $user_id, 'fields' => 'ID' ] );
}
@kellenmace
kellenmace / PasswordChangeEmailHandler.php
Last active Mar 26, 2020
Disable "Password Changed" Email on WPGraphQL User Registration
View PasswordChangeEmailHandler.php
<?php
class PasswordChangeEmailHandler {
/**
* User ID of the registered user.
*
* @var int
*/
private $registered_user_id = 0;
@kellenmace
kellenmace / exclude-super-admins-from-wpgraphql-users-query.php
Created Mar 4, 2020
Exclude Super Admins from WPGraphQL Users Queries
View exclude-super-admins-from-wpgraphql-users-query.php
<?php
function filter_super_admin($result, $source, $args, $context, $info, $type_name, $field_key, $field, $field_resolver) {
if ( $type_name === 'RootQuery' && $field_key === 'users') {
$result['edges'] = array_filter($result['edges'], function($edge) {
return !is_super_admin((int)$edge["node"]);
});
}
return $result;