
Wahey it's the future now and centering stuff with CSS is easy peasy.

Three methods below. Depending on your situation one of these should do the trick.

## Method 1 - Grid

Centering stuff using CSS Grid is super simple. As long as you can set the parent element to be `display: grid` you can add the `place-content` property and set it to `center` and you should be good to go.

```html
<div class="parent">
  <p>sup</p>
</div>
```

```css
.parent {
  display: grid;
  place-content: center;
}
```

## Method 2 - Flex

Centering using flexbox requires an extra parent element, this is obviously not ideal. But if you need to, you can do this:

```html
<div class="boo">
  <div class="parent">
    <p>sup</p>
  </div>
</div>
```

```css
.boo {
  display: flex;
  justify-content: center;
}
.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
```

Basically what we're doing here is creating one flex context (.boo), and that'll have the default flex-direction of row, meaning it's a horizontal flex context, then `justify-content: center` to center the content within. Then inside that we have another flex context (.parent), this time vertical. Again `justify-content: center` to center the content. So we're centering both horizontally and vertically with separate flex contexts, hence the requirement of an extra parent element. (_booooo_).

You might find yourself stuck with this method if the circumstances are right, for example if you're already working with flex containers or if you're writing CSS for a React Native app.

## Method 3 - Transforms

The classic.

```html
<div class="parent">
  <p class="child">sup</p>
</div>
```

```css
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

Set the parent element to relative, this will give the child element the correct positioning context for it's absolute position. Then set the child element to be top and left 50%, this will position the element roughly in the center, except it'll be the top left corner of the element which is actually centered, to fix this move the element left and up by 50% of it's own proportions with `transform: translate(-50%, -50%)`.


How to center elements in CSS in 2022


Sometimes you might need to make a react app built in isolation available to a CMS user of a WordPress site. This might seem like a giant faff. WordPress has it's own React dependancy and tooling now right? Well we're going to ignore all of that and go for the simplest option. Taking a built react app, and making it available as a shortcode by rendering the root element the app expects and enqueueing the built JS and CSS files.

One thing to keep in mind about this approach is that the app will not be running inside of a node environment, so you will need to find your own way to make environment variables available to the app if needed.

Here's the shortcode bit:

```php
add_shortcode( 'my_shortcode', 'my_shortcode_definition' );

function my_shortcode_definition() {
    return '<div id="my-app-root-id"></div>';
}
```

This will render `<div id="my-app-root-id"></div>` whenever the shortcode is used: `[my_shortcode]`. Swap the id value on the div for the root id of your own app.

OK, now we have that, let's get the actual app JS setup for use in WordPress and ensure it is only enqueued when the shortcode is used.

```php
add_action( 'wp_enqueue_scripts', 'enqueue_my_app' );

function enqueue_my_app() {
    global $post;

    if ( has_shortcode( $post->post_content, 'my_shortcode' ) ) {
        $build_directory     = '/path/to/apps/build';
        $build_directory_uri = 'https://example.com/url/to/apps/build';
        $asset_manifest      = json_decode( file_get_contents( $build_directory . '/asset-manifest.json' ) );

        foreach ( $asset_manifest->entrypoints as $entrypoint ) {
            $resource_uri = $build_directory_uri . '/' . $entrypoint;
            if ( str_ends_with( $entrypoint, '.css' ) ) {
                wp_enqueue_style( 'app_styles', $resource_uri, [], '1.0.0' );
            }
            if ( str_ends_with( $entrypoint, '.js' ) ) {
                wp_enqueue_script( 'app_script', $resource_uri, [], '1.0.0', true );
            }
        }
    }
}
```

This part is a bit more interesting and there are few things happening:

- Checking whether the current post content contains the app shortcode we created earlier.
- Creating some necessary file paths and urls so we can get the resources we need.
- Using the asset-manifest.json file from the react app to get the list of resources we need.
- Looping over those values and enqueueing them as either JS or CSS based on the file extension.

You'll need to change the obvious bits here to be more relevant for your app, but also you'll especially want to change the $build_directory_uri assignment to be more dynamic. The WordPress/PHP functions you'll want to use here will vary depending on where you're creating this functionality. Here are some links that should give you what you need to make those build directory variables dynamic:

- [plugin_dir_url](https://developer.wordpress.org/reference/functions/plugin_dir_url/)
- [plugin_dir_path](https://developer.wordpress.org/reference/functions/plugin_dir_path/)
- [\_\_FILE\_\_](https://www.php.net/manual/en/language.constants.magic.php)
- [get_template_directory_uri](https://developer.wordpress.org/reference/functions/get_template_directory_uri/)
- [get_stylesheet_directory_uri](https://developer.wordpress.org/reference/functions/get_stylesheet_directory_uri/)
- [get_template_directory](https://developer.wordpress.org/reference/functions/get_template_directory/)
- [get_stylesheet_directory](https://developer.wordpress.org/reference/functions/get_stylesheet_directory/)

`Side note: using the asset-manifest.json to get the react JS and other resources is handy because every time you build the app, the random string of characters at the end of the resource file path will be different, so we get automatic cache busting whether you update the enqueue version number or not!`


How to enqueue a react app in WordPress and initialize it with a shortcode


This will get a NodeList containing the direct children of the body tag, and convert that NodeList to an array

```javascript
let mySelection = document.querySelectorAll('body > *');
mySelection = [].slice.call(mySelection);
```

Convert NodeList to array


To target an element in JavaScript that has certain inline styles, you can use the following code:

```js
var elem = document.querySelector('h1[style*="color: red;"]');
```

The value of elem will now be the first H1 on the page that has a style attribute with a value that includes color: red;

The use of style*= allows for other inline styles to be present, otherwise the query would have to match the exact value of the style attribute.

Target elements with inline styles


Higher order functions are functions that take other functions as parameters, and can be a highly useful type of abstraction.

Here's a good definition of higher order functions from [Eloquent JavaScript](https://eloquentjavascript.net/05_higher_order.html):
> "Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions. Since we have already seen that functions are regular values, there is nothing particularly remarkable about the fact that such functions exist. The term comes from mathematics, where the distinction between functions and other values is taken more seriously."

A simple example of a higher order function would be Array.map.

## array.map()

Map takes a function as its argument, which runs on each element in the provided array and creates a new array containing the values returned by the function. Consider the following example:

```js
let numbers = ['10', '20', '30'];
let numbersDoubled = numbers.map(num => num * 2);
// numbersDoubled = [20, 40, 60]
```

In the above example we're iterating over the numbers array and creating a new array made up of the results of doubling each element in the first array.

Of course, you can achieve the same result in a less abstracted way with a loop like this:

```js
let numbers = ['10', '20', '30'];
let numbersDoubled = [];
for (let i = 0; i < numbers.length; i++) {
  numbersDoubled.push(numbers[i] * 2);
}
// numbersDoubled = [20, 40, 60]
```

This code is fine, and would work for the situation described. In fact, since it is less of an abstraction than Array.map, it can be more flexible. For example we could use a for loop like this to construct a single, complex object or perform mutations on the original array. One of the benefits of map is that it doesn't let us do this, which makes it useful in a functional programming context, (where we would aim to avoid mutating existing values).

---

So Array.map will only ever return a new array, and in a case where we want to perform operations on every item in an array in order to produce a new array of results, map saves us a lot of the extra work (and a couple of lines of code) by abstracting away some repetitive elements, and makes for a good entry point into the basics of higher order functions.

Map - an introduction to higher order functions in JavaScript


A JavaScript Promise is an object that can be used to handle asynchronous operations, which will either successfully resolve, or be rejected when an error occurs. Examples of this could be waiting on the response from an AJAX request before using that response data for further operations, or making requests to a database.

Instead of relying on traditional callback functions, Promises allow us to chain functionality off the results of these kinds of asynchronous function calls and handle any errors that occur.

**Here's a basic example of a Promise:**
```js
let myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {resolve('Promise resolved message')}, 1000);
});
// 0ms - 1000ms, myPromise = Promise {<pending>}
// 1000ms +, myPromise = Promise {<resolved>: "Promise resolved message
```

So, starting off with a pretty unrealistic use case for the sake of explanation, here we can see that myPromise is created as a Promise object, which is pending. But once the setTimeout has triggered the resolve method, myPromise becomes a 'resolved' Promise, (otherwise known as 'fullfilled'). To access the value that the Promise now contains, we'll need to call the .then() method.

**For example:**

```js
let myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {resolve('Promise resolved message')}, 1000);
}).then(res => {
  console.log(res);
});
```

The call to .then() occurs when the Promise has successfully resolved and the value exists for further operations. If you run the above example in a JS console you will see that a second passes, then the message is logged, since the Promise has now resolved with that value.

## Chaining .then()

One of the benefits of the .then() method is that we can chain them together and pass returned values from one to the next like so:

```js
let myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {resolve('Promise resolved message')}, 1000);
}).then(res => {
  console.log(res);
  return `${res} 1`;
}).then(str => {
  console.log(str);
  return `${str} 2`;
}).then(str => {
  console.log(str);
  return `${str} 3`;
}).then(str => {
  console.log(str);
  return str;
});
// 1000ms +, myPromise = Promise {<resolved>: "Promise resolved message 1 2 3"}
```

Once this Promise resolves, we'll see the following messages logged to the console:

```
Promise resolved message
Promise resolved message 1
Promise resolved message 1 2
Promise resolved message 1 2 3
```

And the resolved value in the Promise will be the final returned value in the chain of .then() functions:

## Error handling

In addition to .then(), Promises also have a .catch() method which we can use for catching errors and any values that the Promise is rejected with.

**For example:**

```js
let myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {resolve('Promise resolved message')}, 1000);
  setTimeout(() => {reject(new Error('Promise rejected'))}, 900);
}).then(res => {
  console.log(res);
  return res;
}).catch(err => {
  console.error(err);
  return err;
});
// 900ms +, myPromise = Promise {<resolved>: Error: Promise rejected at setTimeout (<anonymous>:3:28)}
```

Since the above Promise will be rejected after 900ms have passed, it will not resolve and the .then() method will never be called, instead the Promise rejection will trigger the .catch() method, where we're logging the contents of the Error. In a more real-world scenario this would be where we access the results of errors thrown, perhaps as a result of a malformed API call or database failure.

---

Some further resources:

- [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
- [Google - JavaScript Promises: an Introduction](https://developers.google.com/web/fundamentals/primers/promises)


The basics of JavaScript Promises


Now that we know a little about what higher order functions are and we've had a look at the Array.map example, lets take a look at a couple of other frequently used examples of higher order functions in JS.

## Array.filter()

You can pretty much guess what [Array.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) does from the name. It filters an existing array and returns a new array of filtered results. More specifically, it tests each element in the given array against a function that returns a boolean, if the result of the function is true, the element passes the test and is added to the resulting array.

**Here is a basic example:**

```js
let mixedArray = [1, "one", 2, "two", 3, "three", 4, "four", 5, "five"];
let numbersArray = mixedArray.filter(el => Number.isInteger(el));
// numbersArray = [1, 2, 3, 4, 5]
```

We start with an array of mixed types, integers and strings, and we want to get an array which only contains the integers. Filter loops over the mixedArray and passes each value to Number.isInteger, which returns true when the current element is an integer. All the elements that pass this 'test' are added to the resulting array and we end up with an array containing only the integers.

## Array.reduce()

The basic concept of [Array.reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) in JavaScript is that it iterates over an array and allows us to perform operations on each item, kind of similar to Array.map, but unlike the map function, reduce also passes the result of the previous operation to the function used in the next iteration.

**Here's an example:**

```js
let count = [1, 2, 3, 4, 5].reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);
// count = 15
```

Here we're using reduce to simply count up the total of the numbers in the starting array. Reduce loops through the array, adding the previous number to the 'accumulator', which is the value returned by the previous loop.

Reduce also takes a second argument as it's starting value, which in our case is 0 since that's what where we want to start the count.

Reduce can be quite a bit more flexible than map and filter, which have fairly specific use cases. For example, we could use reduce on our mixedArray from the filter example to count both the sum of the numbers, and the number of words in the array at the same time.

```js
let mixedArray = [1, "one", 2, "two", 3, "three", 4, "four", 5, "five"];
let countObj = mixedArray.reduce((accumulator, currentValue) => {
	if (typeof(currentValue) === 'number') {
		accumulator.total += currentValue;
	} else if (typeof(currentValue) === 'string') {
		accumulator.wordCount++;
	}
	return accumulator;
}, {
	total: 0,
	wordCount: 0,
});
// countObj = { total: 15, wordCount: 5 }
```

We pass an object with a couple of properties as our initial value, and use the function to either add the number to the existing sum, or tally up a word count, based on type.

---

So to summarise, Array.filter can be used to filter out items in an array and return a new array with just the elements that pass a provided 'test'. And reduce can be used in any cases where we want to perform operations on array items where we also need access to the previous result.

More higher order functions - filter and reduce


To build a React component with multiple adjacent elements without wrapping them in a tag or container div, use React.Fragment:

```js
render() {
    return <React.Fragment>
        <SubComponentOne />
        <SubComponentTwo />
    </React.Fragment>;
}
```

There is also a shorthand syntax: 

```js
render() {
    return <>
        <SubComponentOne />
        <SubComponentTwo />
    </>;
}
```

**Documentation:**

[Fragments – React Documentation](https://reactjs.org/docs/fragments.html)

Adjacent elements in a React component without wrapping


I recently wrote some code to try and understand JavaScript Object creation and Prototypal Inheritance a bit better, here it is, heavily commented to explain what's going on:

```javascript
// Let's declare a person object using an object literal
const person = {
	init: function(name) {
		this.name = name;
	},
	introduce: function() {
		console.log(`My name is ${this.name}`);
	}
}

// We can create a new object using Object.create and set its prototype to 'person'
const adam = Object.create(person);
adam.init('Adam');
adam.introduce(); // ​​​​​My name is Adam​​​​​

// Let's create another person
const nick = Object.create(person);
nick.init('Nick');
// We can set a property on an object that has the property already set in its prototype
// ... and when called, it will refer to the property highest on the 'prototype chain'.
// If the property doesn't exist on the object we called, it'll look for it in the prototype instead
nick.introduce = function() {
	console.log(`My name is ${this.name}, and I'm totally obsessed with Emacs`);
}
nick.introduce(); // ​​​​​My name is Nick, and I'm totally obsessed with Emacs​​​​​

// How to check the prototypes of an object - use isPrototypeOf
console.log(`person is the prototype of ${adam.name}: ${person.isPrototypeOf(adam)}`); // ​​​​​person is the prototype of Adam: true​​​​​
console.log(`person is the prototype of ${nick.name}: ${person.isPrototypeOf(nick)}`); // ​​​​​person is the prototype of Nick: true​​​​​

// You can also do typechecking using isPrototypeOf
// Is person the prototype of a string?
console.log(`person is the prototype of 'myStr': ${person.isPrototypeOf('myStr')}`); // ​​​​​person is the prototype of 'myStr': false​​​​​
// Is Array.prototype the prototype of a new array?
const myTestArr = [];
console.log(`Array.prototype is the prototype of myTestArr: ${Array.prototype.isPrototypeOf(myTestArr)}`); // ​​​​​Array.prototype is the prototype of myTestArr: true​​​​​


// Here's another way using a constructor
const Person = function(name) {
	this.name = name;
	this.introduce = function() {
		console.log(`My name is ${this.name}`);
	}
}
// Create tommy as a new instance of Person
const tommy = new Person('Tommy');
tommy.introduce(); // ​​​​​My name is Tommy​​​​​

// This time, the prototype of tommy is not Person as you might expect, but Person's prototype
// This is because 'Person' is simply the constructor used to create the object and is of type function
console.log(`Person's prototype is the prototype of ${tommy.name}: ${Person.prototype.isPrototypeOf(tommy)}`); // ​​​​​Person's prototype is the prototype of Tommy: true​​​​​
// And tommy is an instanceof Person
console.log(`${tommy.name} is an instanceof Person: ${tommy instanceof Person}`); // ​​​​​Tommy is an instanceof Person: true​​​​​

// Whereas for our objects created with Object.create, we need to check if they're instances of the prototype's constructor!
console.log(`${nick.name} is an instanceof person.constructor: ${nick instanceof person.constructor}`); // ​​​​​Nick is an instanceof person.constructor: true​​​​​
```
---
Try running the above code in a browser to test the results.

Adam Hollister