Skip to content

Instantly share code, notes, and snippets.

View thatdevgirl's full-sized avatar

Joni Halabi thatdevgirl

39 followers · 0 following
View GitHub Profile
@thatdevgirl
thatdevgirl / gutenberg-versions.md
Last active January 13, 2022 20:43
What the Gutenberg?

What the Gutenberg?

Gutenberg is the code name for the new WordPress post editor. It was included in version 5.0 of core, but is still its own project that gets periodically merged into major and minor (but not patch) updates. However, there is no correlation between Gutenberg and WordPress core versioning, nor is there any indication in core's code about which Gutenberg version has been included. This makes it very difficult to figure out what version of Gutenberg is in which version of core.

The obfuscation is likely purposeful, but sometimes it is useful to have this information. Well, I find it helpful. If you do too, here you go. This is a manually curated list of Gutenberg versions to Core versions, starting from 5.3 because I do not really care to go backwards from there.

Version mapping

WP Core Gutenberg Exceptions Source
@thatdevgirl
thatdevgirl / javascript-standards.md
Last active June 29, 2020 17:33
Javascript code standards for GU

Javascript code standards for GU

This document outlines best practices and standards for Javascript code written for GU projects. They are largely taken from the W3 Schools JavaScript Style Guide and the Wordpress Javascript Coding Standards.

Variables

  • Variable names should begin with a letter and be written in camelCase.
  • Variable names should be descriptive of the information they contain, even if it makes the variable a little long (but don't go overboard).
  • Use const for all variables that will definitely not change.
  • Use let for local variables inside a function or callback.
@thatdevgirl
thatdevgirl / cabin-fever.md
Last active March 21, 2020 21:15
Cabin Fever
@thatdevgirl
thatdevgirl / word-count.html
Created December 19, 2019 20:26
This component provides a simple word counter using jQuery. It counts the number of characters, words, and paragraphs in a given textarea input field.
<!DOCTYPE html>
<html>
<head>
<title>Word Counter</title>
<link rel="stylesheet" type="text/css" href="word-count.css">
</head>
<body>
<h1>Word Counter</h1>
@thatdevgirl
thatdevgirl / csv-to-json.js
Last active December 19, 2019 20:19
This script will convert a CSV file to JSON. That's it! Usage: csvToJson.go( 'PATH_TO_CSV' );
var csvToJson = {
json: [],
headers: [],
go: function(url) {
var _this = this;
// AJAX call to get CSV data.
$.ajax({
type: "GET",
@thatdevgirl
thatdevgirl / css-only-menu.css
Created December 19, 2019 20:15
This simple navigation menu demonstrates how to create a main navigation menu with drop down sub-menus using just CSS.
/**
* CSS-only Menu
*/
/* Link set up */
nav a,
nav a:visited {
text-decoration: none;
}
@thatdevgirl
thatdevgirl / css-mega-menu-example.html
Created December 19, 2019 20:10
This simple mega navigation menu is inspired by the many mega menus on retail and other websites.
<!DOCTYPE html>
<html>
<head>
<title>CSS Mega-Menu</title>
<link type="text/css" rel="stylesheet" href="css-mega-menu.css" />
</head>
<body>
<nav>
@thatdevgirl
thatdevgirl / character-counter.html
Last active December 19, 2019 20:08
This component is a simple jQuery function that adds a character counter to a form field. The function takes a single parameter - the character limit of the specified form element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Character Count using jQuery</title>
</head>
<body>
<header>
<h1>Character Count using jQuery</h1>
@thatdevgirl
thatdevgirl / handle-tab-focus.js
Created June 20, 2019 19:30
Function that handles focus when user navigates through a site using their keyboard. Prevents the focus from getting stuck, which can sometimes happen with carousels.
function handleTabFocus(e) {
let focus = document.activeElement,
newFocus;
$(document).keyup(function(e) {
const code = e.keyCode || e.which;
// If the tab key is pressed:
if (code === 9) {
// Determine which element has focus now.
@thatdevgirl
thatdevgirl / simple-autocomplete.js
Created November 29, 2018 15:29
Simple Autocomplete component for WP Gutenberg
/**
* A very simple autocomplete component
*
* This is to replace the OOTB Gutenberg Autocomplete component because it is
* currently broken as of v4.5.1.
*
* See Github issue: https://github.com/WordPress/gutenberg/issues/10542
*
* Note: The options array should be an array of objects containing labels and values; i.e.:
* [