Blog

On optimization

In the realm of computing we are often plagued by the many aspects of optimization; both positive and negative. Often we can find ourselves spending lots of time not really getting anywhere as we “optimize”. We can also find ourselves in the situation of being wildly successful, only to find that what we have optimized for is not what we really wanted in the first place. I can’t help but feel these outcomes are suboptimal ūüėČ. I came across a tweet that really hits the mark:

I would change the wording a little bit. The three options are: Do less, do it less often, do it more efficiently. I find myself optimizing around “efficiency” in my work, or at least perceived efficiency. Much of the work in the systems we build is targeted around our ideas of efficiency. Achieving a goal more effectively, yet the blinders come on quick and we lose site of whether the goal is really what we need. Keeping tabs on the greater picture is no easy task. One can fall easily to analysis paralysis, but I also feel that sentiment can be a cop out to really thinking things through, or shifting our perspectives. I believe there is equally an activity immobility trap we all fall into; the hustle and grind mentality. The illusion of moving the goal post; and seeing things only as they are not as they could be.

One of the great masters of optimization is Masanobu Fukuoka, author of The One Straw Revolution. He created his own method of farming based on the principle of doing less. While his neighbors toiled, and performed hard labor, Fukuoka focused on setting the conditions for success of a fertile landscape; with the goal of doing no to little work.

Image result for masanobu fukuoka cherry blossoms
Masanobu Fukuoka

In the computing world, there is a lot to learn from Fukuoka. What conditions can we set for our programs for them to do the work for us? Is the labor intensive process of coding, that we cherish so, really that important to what we are trying to do?

JavaScript – Beginning to build a program in the browser: Part 1

JavaScript was created to help improve the interactive parts of the web. It has evolved a lot over time, and is used in all sorts of places. We however, will start where JavaScript started; in the browser. This is where the fun and magic really begins. If any of the parts we cover do not make sense try and find other lessons that maybe expand and elaborate on some of the details. If you aren’t quite ready to just dive in try here. Remember this should be fun!

Set up

We are going to be moving away from just using the console for now. Instead we are going to load in the JavaScript into the browser on our own page. We will need to create two files index.html and myscript.js.

Creating Files

We are going to need a text editor to work with the files. If you are on Windows, you can use Notepad. If you are on MacOS you can use TextEdit, the fundamentals are the same. Alternatively you can download and use Notepad++, which will have some nicer features than the basic notepads. Notepad and Notepad++ are what I started my programming adventure with. If you want to get real fancy or are bold, try out Atom; a more professional grade text editor. For now, Notepad or TextEdit will work just fine!

Open up your editor and go to File > Save As. Once you have opened up the save dialog, you can create a folder myjs. Then inside of that folder we will save the file we are editing as index.html. Before saving, make sure to select the All Files for the Save as Type field, your screen might look something like this:

Creating an index.html file

If you accidentally created a .txt file, don’t worry you can always override and eventually get the .html¬†extension. When working with files there is usually a name then a .something, the .something¬†is the file extension; a way of specifying the file type. Now that we have created our HTML file copy paste the following code section into the text editor and save.

index.html

<!DOCTYPE HTML>
<html>
  <head>
    <title>Learning JavaScript!</title>
  </head>
  <body>
    <h1>Learning JavaScript</h1>
    <script src="myscript.js"></script>
  <body>
</html>

HTML is the structural language for web pages. When the browser opens a website, it reads the HTML and then displays it on the screen in a form we are used to. The <script>¬†tag loads in the myscript.js¬†that we are about to create. Before creating the JavaScript file. Let’s open up the file in our browser. Find the index.html¬†file in your myjs¬†folder, and open it, it should load with your default browser. and should look something like this if you are using Google Chrome.

Our HTML and how it renders in the browser.

If we open up our console we will see an error:

GET file:///C:/myjs/myscript.js net::ERR_FILE_NOT_FOUND

This is basically telling us that the browser could not find the JavaScript file. Well, we haven’t created it yet! Let’s do that now. Use the text editor and go to File > New, then save the file, File > Save As, and this time save the file as myscript.js

myscript.js

Copy, the code below and paste it into the text editor and save myscript.js.

document.write( 'I have created my first JavaScript file!' );

Now that we have saved the myscript.js file we can reload our index.html and it should look something like this:

Loading JavaScript in the browser
Loading our JavaScript file in the browser.

The document.write code adds the extra text to the browser this time, showing that our file has indeed loaded!

Next steps

Getting the basic set up is honestly one of the hardest parts, so great job! In part two we will start getting into some fun stuff!

JavaScript – Beginning to work with functions

Functions are another extremely important part of JavaScript. Most of the work you do will involve working with functions and objects. What is a function? A function is effectively a way to create a mini program within your program. Let’s open up our browser console and dive right in.

// Function declaration below
function getTen() { return 10; }

// Function call below
getTen()
// Outputs 10

The two most important parts of working with functions, are declaring them, and then calling them. Above in our declaration we are making a function getTen that returns the value 10. We can then call getTen by using the parentheses, (), syntax.

When we call a function JavaScript finds that function and then runs the code found in between the curly braces {}. To call any function we use it’s name and tack on ()¬†at the end. This can also be achieve like so:

getTen.call()
// Outputs 10

The getTen()¬†syntax is used for brevity, so .call¬†is not used everywhere. Let’s look at some built in functions in JavaScript. In our browser console we can run:

document.write('I am learning functions!')

When this runs there is an undefined output in our console, but “I am learning functions!” is printed onto our browser screen! So what is happening here is we are grabbing the document¬†object in our browser, and getting the write¬†function attached to it. Inside our calling parentheses we have a string 'I am learning functions!'. This string would be known as a function argument, we pass this argument to our function, and it does stuff with that. Let’s look more in depth at working with arguments, it can get tricky.

Function arguments

Enter the following into the console:

// Declare our function getThing
function getThing( thing ) { return thing; }

// Call our function with 20
getThing( 20 );
// Outputs 20

getThing( 'Hello!' )
// Outputs "Hello!"

Experiment calling getThing with other values you can think of. Lets breakdown the declaration. We name our function; getThing. Then we add an argument thing; ( thing ) and finally we have the code that runs when we execute our function; { return thing; }. These three parts can be respectively referred to as the name, arguments, and body. The argument thing is whatever gets passed into the function when we call it. In the body of the function we return whatever thing is.

Multiple arguments

We can create functions that have multiple arguments as well, let’s create a simple addition function.

function add( number1, number2 ) { return number1 + number2; }

add( 10, 1 )
// Outputs 11

add( 33, 55 )
// Outputs 88

To create multiple arguments we name them differently and separate each by a comma within the parentheses. You can effectively have as many arguments as you want. Inside the function body you can then access each argument by matching the names. Functions at this point, probably seem somewhat useless, however I assure you as we progress further you will see how powerful they are in JavaScript.

Why use functions?

Functions bring a number of benefits. One benefit is that they allow us to name an idea that we execute in code. In the last example we created a function add, which takes two numbers and returns their sum. We could create a function doComplicatedThing() { // Do complicated stuff }. Then every time we needed to do that complicated thing we would simply call doComplicatedThing(). This helps make our code easier to follow and read, and brings other benefits.

Another major benefit of functions is that we can choose when we need to call the function. Try this in your console:

function alertMe() { console.log('Function is alerting you!' ); }

alertMe()
// Logs to the console "Function is alerting you!"

setTimeout( alertMe, 1000 )
// One second delay occurs then we are alerted.

Above we see the timeout delays when alertMe gets called by 1000 milliseconds. setTimeout itself is a function and we pass the function alertMe to it, and set the delay as the second argument. Functions can get pretty confusing, so spending extra time to get a good handle on them is very crucial in learning JavaScript.

Input and output

Another way to think of functions is in terms of input and output. Let’s look at a couple of examples.

// Only has input, but does not return anything as output.
function doNothing( input ) { 'Hi!'; }

// Has both input and output.
function getGreeting( input ) { return 'Hello ' + input + '!'; }

// No input, but has an output.
function getTen() { return 10; }

The return statement we have been using is how we get a function to output a value. If there is not a return statement, by default a function will return undefined. The concept of input and output is key moving forward, and I encourage you to think about how things come into and go out of the various parts of your programs.

Wrapping up functions

Functions are a very important aspect of JavaScript. They have three parts: name, arguments, and body. We must declare a function before we can call it. Once declared we can call it to execute the code we put in the function body. Functions are a way to chop our programs up into smaller mini programs. Input and output play a critical role in functions. This is just the tip of the iceberg with functions, there are a lot more really interesting things that can be done with them.

JavaScript – Beginning to work with objects

Objects are an extremely important piece of JavaScript. In fact, everything in JavaScript is an object. Arrays, strings, numbers, are all special types of objects. Objects at their core are just a collection of names and value pairs. Like all of the other data types, there is a lot more to objects, but for now we will focus on the fundamentals. Here is an object representing my name:

{ firstName: 'Edwin', lastName: 'Cromley' }

// The syntax for objects is more commonly written like this.
{
  firstName: 'Edwin',
  lastName: 'Cromley'
}

We have two entries in our object. The first pair has a key firstName¬†and a value 'Edwin', which basically means that the first name for this object is Edwin. Likewise, the key lastName¬†pairs with the value 'Cromley'. Let’s open up the console, and start working with them.

Working with objects

This is a basic object and we can work with them like this:

let myName = { firstName: 'Edwin', lastName: 'Cromley' }

myName.firstName
// Outputs "Edwin"

myName.lastName
// Outputs "Cromley"

We can also create a more detailed object:

let bankAccount = {
  bank: 'Super Awesome Bank',
  routingNumber: 5555555555,
  transactions: [
    {
      type: 'deposit',
      amount: {
        value: 100,
        denomination: 'USD'
      }
    },
    {
      type: 'withdrawal',
      amount: {
        value: 50,
        denomination: 'USD'
      }
    }
  ]
}

bankAccount.bank
// Outputs "Super Awesome Bank"

bankAccount.routingNumber
// Outputs 5555555555

bankAccount.transactions[0].type
// Outputs "deposit"

bankAccount.transactions[1].amount['value']
// Outputs 50

Any of the keys in the object can have any value, here we see a string value for bank, a number for the routingNumber, and an array of objects for transactions. Keys themselves have some restrictions, they can only be a string. Values can be anything though. Because the keys are strings we can also look up the values of objects like this.

let food = { taco: 'delicious' }

food['taco']
// Outputs "delicious"

food.taco
// Outputs "delicious"

So there are two different ways to get a value out of an object, we can use the “array syntax” or use the dot notation. The dot notation is probably the most common, but the array notation in most cases can be much more flexible. We’ll see further on how useful the []¬†syntax can be used for a lot of different things.

Wrapping up objects

Objects at their core are just a collection of pairs of keys and values. The key is a name where we can lookup the stored value. This allows us to associate names with values. When we get into actual programming situations, we will see how useful this ability to name becomes, as it will allow us to create more understandable code. Objects are very powerful, and are one of the foundational aspects of JavaScript. Remember, almost everything 
in JavaScript is an object.

JavaScript – Beginning to work with arrays

Arrays are a data type that contain values. We can imagine an array of numbers like this:

[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

Or we could have a list of fruits:

[ 'banana', 'strawberry', 'blueberry', 'grape' ]

An array contains other data types within itself. Each item can be referred to as an element. Let’s get the console open and start messing around with arrays.

Working with arrays

Arrays can contain any type of data within, for instance you could do something like this:

[ undefined, 'string', true, 3, [ 'array', 'inside', 'array' ], 10 ]

So as we see in the above example we have an array containing a bunch of different elements. One of the elements is even an array itself. The array syntax starts with an opening square bracket, [, followed by each item with a comma to separate. To close out the array we end with a closing square bracket, ]. To lookup the value at a certain position in an array we can use the lookup syntax.

[ undefined, 'string', true, 3, [ 'array', 'inside', 'array' ], 10 ][0]
// Outputs undefined

[ undefined, 'string', true, 3, [ 'array', 'inside', 'array' ], 10 ][1]
// Outputs 'string'

[ undefined, 'string', true, 3, [ 'array', 'inside', 'array' ], 10 ][2]
// Outputs true

[ undefined, 'string', true, 3, [ 'array', 'inside', 'array' ], 10 ][3]
// Outputs 3

[ undefined, 'string', true, 3, [ 'array', 'inside', 'array' ], 10 ][4]
// Outputs [ 'array', 'inside', 'array' ]

[undefined,'string', true, 3, [ 'array', 'inside', 'array' ], 10][4][0]
// Outputs 'array'

[undefined,'string', true, 3, [ 'array', 'inside', 'array' ], 10][4][1]
// Outputs 'inside'

[undefined,'string', true, 3, [ 'array', 'inside', 'array' ], 10][4][2]
// Outputs 'array'

[ undefined, 'string', true, 3, [ 'array', 'inside', 'array' ], 10 ][5]
// Outputs 10

There are a couple of important things to note. The array starts at position 0, more commonly this is referred to as the index; index 0. The first element is at index 0, the second element at index 1. When we get to the array inside of an array, we use a double access array[4] grabs the inner array, then on that value we can grab any element in that so as seen above array[4][0] gives us the first inner element: 'array'.

Finding elements

Another important thing to do with arrays is to find if there is an element in one. If we had an array of numbers, we can find if a particular number exists or not like this:

[ 10, 30, 15, 1 ].indexOf( 1 )
// Outputs 3

[ 10, 30, 15, 1 ].indexOf( 10 )
// Outputs 0

[ 10, 30, 15, 1 ].indexOf( 13 )
// Outputs -1

When we try and search for 13, we get back a value of -1. This

Working with multiple arrays

Sometimes you will have two lists and need to merge them into one list. Here we have two lists of Bruce Willis movies:

[ 'Die Hard', 'Tears of the Sun', 'Sin City' ].concat( ['RED'] )
// Outputs [ 'Die Hard', 'Tears of the Sun', 'Sin City', 'RED' ]

There are definitely a lot more to arrays, but this covers the basics.

Wrapping up arrays

Arrays are a data type that contains a sequence/list of other elements. Each element has an index, and they start at 0 and count up. When you venture further into your JavaScript journey you will see how powerful arrays can be.

JavaScript – Beginning to work with strings

Strings are used all over the place, at first they can be pretty weird, and working with the quotation marks can be finicky, and cumbersome. Strings are mainly used to store, manipulate, and interact with text. Strings, like numbers, are actually very complicated the more you learn about them, but for now we will keep it as simple as possible. If you do not have your console set up, make sure read Getting Started with JavaScript.

I am string!

'I am a string!'
"I am a string as well, with double quotes!"

To create a string, or, more accurately, a string literal in JavaScript, we write some text and put it inside a pair of either ' single quotes, or " double quotes. In JavaScript, strings, arrays, and objects all have these characters that start and end a data type. Arrays use [ and ], objects use { and }. When you see quotes in JavaScript there is most likely a string starting or ending. If you see the square brackets you are dealing with an array, and the curly braces are usually an object.

Working with strings

Strings like numbers also have operators that we can use. For example, if we had 'Hi, my name is ' and 'Edwin', how would we combine these into a single string? Go to the console and type in the following and hit enter:

'Hi, my name is ' + 'Edwin'

The output value from the console is now just one string; 'Hi, my name is Edwin'. This becomes a handy way of combining messages together, and is often referred to as string concatenation. Strings are also a series of characters so we can find out which letter is at each point like this. Take note of the pattern we write String.charAt(position)

'Cat'.charAt(0)
// Outputs "C"

'Cat'.charAt(1)
// Outputs "a"

'Cat'.charAt(2)
// Outputs "t"

'Cat'.charAt(3)
// Outputs ""

0 is the starting point in our series of letters. It may be weird to access the first character at 0, but this is a fairly common convention across all programming languages, and it has its benefits. We can also access characters using a different syntax:

'Cat'[0]
// Outputs "C"

'Cat'[1]
// Outputs "a"

'Cat'[2]
// Outputs "t"

'Cat'[3]
// Outputs undefined

This is another way to find what character is at a certain position in the string. This time when we go to an empty position we get undefined, instead of an empty string. This is the main difference between these two access methods.

Empty strings

As seen above we see "" as one of the values returned. This is an empty string, same for ''. Empty strings hold can hold special meanings in JavaScript, which we will explore at another time. An empty string is still a string, it just lacks any characters. When we look at the length, ''.length we get 0.

( '' + 'Hi!' ).length
// Outputs 3, first we add together the empty string and Hi! to get a new string 'Hi!' which has three characters in it.

Strings are a special kind of array

In JavaScript, strings in some ways can be treated as a special kind of array. An array is a list of values like: [ 1, 2, 3 ]. Arrays have a similar lookup syntax to the string we used earlier. In fact the string character lookup is the array lookup syntax. Try the following in your console.

[ 'C', 'a', 't' ][0]
// Outputs "C" same as 'Cat'[0]

[ 'C', 'a', 't' ][1]
// Outputs "a" same as 'Cat'[1]

[ 'C', 'a', 't' ][2]
// Outputs "t" same as 'Cat'[2]

[ 'C', 'a', 't' ][3]
// Outputs undefined same as 'Cat'[3]

So strings are a much more human friendly way to interact with text in a programming language. We don’t have the brackets, commas etc. Although arrays and strings share similarities, they are definitely their own thing, and are used for different purposes. We can go back and forth between string and array form using the split¬†and join¬†methods.

'Cat'.split('')
// Outputs [ 'C', 'a', 't' ]

[ 'C', 'a', 't' ].join('')
// Outputs 'Cat'

We use split, a string method, to separate the string into an array. We use an empty string '' as the split piece, causing each letter to become its own part of the array.

We then work backwards going from the array and calling join, an array method, to crunch the array back into a string. We can join the array using a different string as well like this:

[ 'I', 'am', 'happy!' ].join( ' ' )
// Outputs "I am happy!"

'AATCCGCTAG'.split('').join('G')
// Outputs "AGAGTGCGCGGGCGTGAGG"

We see in the first example that each string part gets joined together with a space. making a sentence. In the next example we see something much more interesting. A series of nucleotide notations are being split into an array, and we are joining back together with in a G between each letter; in effect editing the genome sequence!¬†ūüė≤ Fiddling around with basic strings can lead to astounding real world applications.

Things to watch out for

Strings are usually pretty easy to work with until you get to one major problem, what if we have a string like this:

'JavaScript, it's amazing!'
// Outputs a syntax error? What's going on!

We get our first syntax error: Uncaught SyntaxError: Unexpected identifier. Error messages can be daunting, but if you ever see a syntax error, it means that we have typed in invalid JavaScript. The problem we have above, is that the ' is inside our quote as well as what we are using to start the string. JavaScript see the string 'JavaScript, it', and from there goes kaput because s amazing!' is not valid JavaScript. To properly have a string with a quote inside of it there are two options, escaping and using different outer quotes:

// Escaping
'JavaScript, it\'s amazing!'

// Different outer quotes.
"JavaScript, it's amazing!"

The \ escapes the ' allowing it to not be processed by JavaScript as part of the string bounds, and instead as the character '. Escaping gets real confusing really quickly, what if we wanted to have the string:

'To escape a ' in JavaScript you need to use \''
// Syntax error.

// With escaping.
'To escape a \' in JavaScript you need to use \''
// Outputs "To escape a ' in JavaScript you need to use '"
// Not what we want yet.

// Escaping the escape
'To escape a \' in JavaScript you need to use \\\''
// Outputs "To escape a ' in JavaScript you need to use \'"
// Yay!

So escaping can get very tricky and is often a big headache. It also has a weird name. To better think of escaping, we are escaping how JavaScript would normally process a string, and using the \¬†to signify that the next character should be interpreted by JavaScript as an actual character. Don’t worry about escaping too much, but it is good to be aware of it. For the most part not too many issues will be encountered.

Basics of strings in JavaScript

Strings are a basic data type in JavaScript used to interact with text. They are essentially a list of characters in sequence. Strings have a lot of hidden secrets lurking within, but for the most part you will only use them as a means of interacting with text. Even as a basic data type, there is a lot of power for our imaginations to run wild with.

Getting Started with JavaScript

JavaScript is a widespread programming language. Oddly enough, using a Web Browser like Chrome, Firefox or Brave is a great way to start learning JavaScript. Download one of these browsers and we can get started almost immediately after opening it up. For our examples we will be using Chrome, as it is currently the most widely used web browser.

Why JavaScript?

There is so much that you can do with JavaScript. You can make pasta fall from the sky,¬†create a todo list, or go wherever your heart takes you. JavaScript is a key part of how you interact with websites. If you aren’t sold yet, try reading this post: Why should I learn JavaScript.

Setting Up

The first step is to download and set up a browser, if you are reading this post you have likely already done this. Hopefully you are using a browser mentioned at the start; Chrome. Create a new window and we will open up a hidden part of the browser; the console. The console can be accessed by going to Menu > More Tools > Developer Tools and clicking, or by using the keyboard shortcuts: Ctrl + Shift + J (Windows), Cmd + Option + J (Mac). Once you have the console open it should look something like this.

Google Chrome with dev tools open.

Using the console

Now we have the developer tools open and with the Console tab active. We can now start to use JavaScript to directly interact with our browser window! Type the following into the console and hit enter when you are done:

document.write('Hi!');

This will make windows content contain the text “Hi!”. Try changing the message. Type in the following code and hit enter at the console:

document.write(' I am learning and using JavaScript!');

Now the “Hi!” is followed by the new message. Pretty neat. We have used the console to interact with our browser window. Realistically you are not going to use document.write¬†very often, if at all. Now we are going to use the console to further explore the basics of JavaScript.

Working in the console

You might have noticed that after we typed our document.write commands we get an undefined message in the console below each command. When we type and execute commands in the console we get an output back out. When we run document.write, it does not return anything, so the console shows undefined. If we type 1 into the console and hit enter let’s see what the output value ends up as.

Outputting 1 on the console.

As expected we get 1. Now we can do simple addition try:

11 + 11

We get an output of 22. There are some basic math operators we can use in JavaScript

  • Addition: 2 + 2
    • Outputs 4
  • Subtraction: 3 – 2
    • Outputs 1
  • Multiplication: 3 * 2
    • Outputs 6
  • Division: 6 / 2
    • Outputs 3

Working with decimals and other numbers can get a bit weird in JavaScript, so we will not go into too much depth for now. These numbers are a primitive data type in JavaScript, the other main types you will work with are strings, arrays, objects, and functions. Here is what each looks like in code.

  • String
    • 'Hi, I am a string!'
  • Array
    • [ 1, 2, 3, ]
  • Object
    • { is: 'Object' }
  • Function
    • function get10 () { return 10; }

Together these five primitives will be almost all you ever use in JavaScript. The challenge in JavaScript is figuring out how to arrange each of these pieces to create and explore your vision.

My WordPress block chain journey: 1

I have been studying up on block chain, and will be meddling more with it to develop a network where content can be distributed, traded, and protected. There are a lot of pieces that I still need to learn, a big one is understanding the theory behind currency, value, and micro/macro economic interactions. Will there be a crypto currency involved in this? In some ways yes, there needs to be some token/currency system tied to interactions. By having a value system in place there are a number of natural benefits that occur.

Why value matters in social interaction

We may not be fully cognizant of it, but collectively we are the most valuable employees to Google, Facebook etc. We are quite literally their money maker. In return for our labor, we get the privilige to use their awesome services. Yay! Wait… that doesn't seem quite right. By purely using their service (not paying for it), we become their revenue source. It seems a bit odd. The data we generate by using Facebook, Google, etc. is very useful and valuable. If the data wasn't these tech behemoths wouldn't be where they are today. Targeted advertising is a good thing, but needs to be revamped a bit. I like Facebook, and Google, they are great, but I question how fair this system seems. We provide them their value, and all we really get in return is a slightly higher level of convenience, I am not sure how well balanced this exchange of value is.

We need to start realizing our own value in our everyday interactions online. Value is exchanged all the time in our searches, page clicks, reading of content, interactions, and messages. We are usually unaware of it though. Without a value system/currency backing these interactions though it is hard to discourage things like harassment, spamming, and other negative behaviors, because ultimately there is no price to be paid. We have high cost infrastructure to help combat these things, but the economics of interaction are a force we are not leveraging. Am I saying you will need to pay to engage? Yes, but not with income we use to buy goods and services. A token system can exist completely aside from a currency, even though they are the same thing pretty much. Remember that our engagement is the real value to companies like Google & Facebook, so why not have some of the value come back our way?

Do I have the perfect plan for all of this? No. A colossal NO. I really have no idea how to approach any of this, but I think the problem is clear enough to start trying to chip away at it.

Choosing a block chain

After reviewing the many many systems in place, Ethereum seems like a pretty safe starting place for the backing blockchain. After reviewing a seemingly endless set of blockchains, tokens, and more, I came to the decision that Ethereum has the best tools, community, and openness to get poking around. I have already begun working on things, (more like stumbling) and am excited to share the progress with everyone and get more people involved. If you have any extra knowledge about developing apps on a blockchain help is appreciated, drop a comment! If you are excited or terrified, also drop a comment, as I would love to hear more thoughts.

Rethinking Meta Boxes with the new WordPress block editor: Part 1

The post has been updated to reflect some code improvements pointed out by Daniel Bachhuber.

I have spoken to a number of agencies, and WordPress developers, and I have come to one conclusion; ACF and Meta Boxes are critical for their deliveries. ACF, particularly the pro version, seems to be used quite a bit. Most of the work I do does not use ACF, but I certainly have used meta boxes a fair bit. We have probably done all sorts of crazy stuff with meta boxes and they have served us well. The new block editor can be somewhat scary as it appears to be replacing meta boxes. In fact, one of the goals of blocks is to replace things like meta boxes. Metadata management is definitely a crucial selling point for WordPress to online businesses. There seems to be the thought that the new block editor will ruin WordPress as a CMS because we are no longer dealing with structured data. I don't think this is the case at all, blocks will bring even more structure than currently exists, hopefully after reading this you will be excited to make the leap to Gutenberg. The tricky part is going to be the transition.

Making the leap to Gutenberg

The new block editor brings a couple major changes to the world of WordPress development. The block API that powers it, seeks to consolidate many elements of WordPress. The editor portion, is a relatively large React/Redux application powered by JavaScript. WordPress development has largely been fragmented across many APIs and I think the new block API, once it is fully fleshed out, will help bring about a better set of standards, and allow developers to create more engaging experiences in less time. You can already ship fast with WordPress, but once the new block editor is running in full gear, I feel it will greatly accelerate the rate at which people create things with WordPress.

The leap will hopefully not have to be painful thanks to the work being done by the Gutenberg team. Part of the goal is to make sure the transition is as smooth as possible. Support for meta boxes, shortcodes, and other features are already included. The meta box support is also continually being improved upon. It is important to not just force every developer to rewrite all of the work they have done in JavaScript. Instead there will be an indefinite period where the block editor will have near complete backwards compatibility, which is really a tremendous feat that should be praised. So big shout out to Riad Benguella and Andrew Duthie who have really been hauling ass on this project! Give them some love. Speaking of Riad, I highly recommend checking out his post about Gutenberg and meta boxes.

If there is backwards compatibility in place though, what is the big deal with blocks and the block editor, why should I rewrite things as a block? Well, it is honestly not fully apparent why blocks matter. Let's quickly compare the two and hopefully I can pique your interest.

A basic meta box implemented in the classic WordPress way

plugin.php

<?php
/*
 * Plugin Name: A classic meta block.
 * Version: 0.1.0
 * Author: Edwin Cromley
 * Author URI: https://edwincromley.com
 * License: GPL3+
 *
 * Description: Random meta box.
 */


add_action( 'add_meta_boxes', 'sample_add_metabox' );
add_action( 'save_post', 'sample_save_metabox', 10, 2 );

/**
 * Adds the meta box.
 */
function sample_add_metabox() {
	add_meta_box(
		'post-notes',
		__( 'Post Notes', 'textdomain' ),
		'sample_render_metabox',
		'post',
		'normal',
		'default'
	);
}

/**
 * Renders the meta box.
 */
function sample_render_metabox( $post ) {
	// Add nonce for security and authentication.
	wp_nonce_field( 'custom_nonce_action', 'custom_nonce' );

	$notes = get_post_meta( $post->ID, 'notes', true );

	?>
	<textarea style="width: 100%; height: 200px;" name="notes">
		<?php echo esc_html( $notes ); ?>
	</textarea>
	<?php
}

/**
 * The code below will not run because my host blocks writing
 * super globals in anyways shape or form. So pretend $POST is
 * the actual superglobal.
 */

/**
 * Handles saving the meta box.
 *
 * @param int     $post_id Post ID.
 * @param WP_Post $post    Post object.
 * @return null
 */
function sample_save_metabox( $post_id, $post ) {
	// Add nonce for security and authentication.
	$nonce_name   = isset( $POST['custom_nonce'] ) ? $POST['custom_nonce'] : '';
	$nonce_action = 'custom_nonce_action';

	// Check if nonce is set.
	if ( ! isset( $nonce_name ) ) {
		return;
	}

	// Check if nonce is valid.
	if ( ! wp_verify_nonce( $nonce_name, $nonce_action ) ) {
		return;
	}

	// Check if user has permissions to save data.
	if ( ! current_user_can( 'edit_post', $post_id ) ) {
		return;
	}

	// Check if not an autosave.
	if ( wp_is_post_autosave( $post_id ) ) {
		return;
	}

	// Check if not a revision.
	if ( wp_is_post_revision( $post_id ) ) {
		return;
	}

	if ( ! isset( $POST['notes'] ) ) {
		return;
	}

	update_post_meta( $post_id, 'notes', wp_unslash( sanitize_text_field( $POST['notes'] ) ) );
}

To see the actual code that runs checkout this repo. Pretty straight forward classic WordPress meta box registration. Everything is PHP, we create the view in our render function and when the post is saved we do some validation and update the meta value. This meta box will work just fine inside of the Gutenberg editor as well. Let's look at how we could recreate a meta box as a block in Gutenberg.

Meta block:

plugin.php

<?php
/*
 * Plugin Name: Sample Meta Block!
 * Version: 0.2.0
 * Author: Edwin Cromley
 * Author URI: https://edwincromley.com
 * License: GPL3+
 *
 * Description: A sample meta block to illustrate how easy using Gutenberg is.
 */

/**
 * Enqueue block assets.
 */
function meta_block_enqueue_block_editor_assets() {
    // Enqueue JS that registers a block.
    wp_enqueue_script(
        'meta-block',
        plugins_url( 'meta-block.js', __FILE__ ),
        // Here we declare our dependencies for creating the block.
        array( 'wp-blocks', 'wp-element', 'wp-components' )
    );
}

add_action( 'enqueue_block_editor_assets', 'meta_block_enqueue_block_editor_assets' );

/**
 * The authentication callback for our secrent notes meta key.
 *
 * @param boolean $allowed Whether the user can add the post meta. Default false.
 * @param string $meta_key The meta key.
 * @param int $post_id Post ID.
 * @param int $user_id User ID.
 * @param string $cap Capability name.
 * @param array $caps User capabilities.
 * @return boolean Whether the user has permission or not to
 */
function meta_block_secret_notes_auth_callback( $allowed, $meta_key, $post_id, $user_id, $cap, $caps ) {
    if ( current_user_can( 'edit_post', $post_id ) ) {
        return true;
    }

    return false;
}

/**
 * Register meta field for the rest API.
 */
function meta_block_init() {
    // Register a post meta
    register_meta( 'post', 'notes', array(
        'show_in_rest'  => true,
        'single'        => true,
        'auth_callback' => 'meta_block_secret_notes_auth_callback',
    ) );
}

add_action( 'init', 'meta_block_init' );

/**
 * Filters out the notes meta field from rest response for unauthenticated users.
 *
 * @param WP_REST_Response $response The response object.
 * @param WP_Post          $post     Post object.
 * @param WP_REST_Request  $request  Request object.
 * @return WP_REST_Response The modified rest response.
 */
function meta_block_make_secret_notes_secret( $response, $post, $request ) {
    $data = $response->get_data();

    if ( isset( $data['meta']['notes'] ) && ! current_user_can( 'edit_post', $post->ID ) ) {
        unset( $data['meta']['notes'] );
        $response->set_data( $data );
    }

    return $response;
}

add_filter( 'rest_prepare_post', 'meta_block_make_secret_notes_secret', 10, 3 );

/**
 * Register the block template for the post post type.
 *
 * @param array  $args      Associative array of data used during registration.
 * @param string $post_type The current post type being registered.
 * @return array Associative array of data used during registration.
 */
function meta_block_change_post_block_template( $args, $post_type ) {
    if ( $post_type === 'post' ) {
        // Create a template of our is great block.
        $secret_notes_block = array(
            'sample/secret-notes',
            array(
                'template_lock' => 'all',
            ),
        );

        // Check if template exists and if not add template.
        if ( ! isset( $args['template'] ) || ! is_array( $args['template'] ) ) {
            $args['template'] = array();
        }

        array_unshift( $args['template'], $secret_notes_block );
    }

    return $args;
}

add_filter( 'register_post_type_args', 'meta_block_change_post_block_template', 10, 2 );

meta-block.js

( function( blocks, element, components ) {
    var el       = element.createElement,
        Editable = blocks.Editable;

    blocks.registerBlockType( 'sample/secret-notes', {
        title: 'Secret Notes',
        category: 'common',
        isPrivate: true,

        /**
         * Declare the attributes involved.
         *
         * We declare the notes attribute and one of its properties is a
         * meta key, which will be the corresponding meta key we save on the
         * post meta db.
         */
        attributes: {
            notes: {
                type: 'string',
                source: 'meta',
                meta: 'notes'
            }
        },

        edit: function( props ) {
            var notes = props.attributes.notes;

            function setSecretNotes( notes ) {
                console.log( notes[0] );
                /**
                 * This is a tad bit hacky as the value passed in by the
                 * Editable component will be an array of values. In this case,
                 * it will always be an array of one string, which is the value
                 * we want.
                 */
                props.setAttributes( { notes: notes[0] } );
                event.preventDefault();
            }

            return el(
                'div',
                {
                    key: 'secret-notes',
                },
                [
                    el( 'h3', {}, 'Secret Notes:' ),
                    /**
                     * Set the value to the current value being auto loaded in.
                     * Set the onChange handler to set our new attributes, this
                     * will auto save our meta values.
                     */
                    el( Editable, { onChange: setSecretNotes, value: notes } )
                ]
            );
        },

        save: function() {
            /**
             * The save function will represent what is saved into the post's
             * post content, since we are not adding anything to the post
             * content
             */
            return null;
        }
    } );
} )(
    window.wp.blocks,
    window.wp.element,
    window.wp.components,
);

If you want to check out the code go to this repository. These are about the same lines of code, and they honestly are not much different. We define how the data should be saved and how it should be rendered in both cases. Different API, same result. So why go through all of the trouble to reimagine meta boxes as blocks?

Benefits of blocks replacing meta boxes

There are a number of benefits of blocks over anything else, however templating, uniformity, and composability are the main benefits.

Templates

If you noticed the block template being registered for the post type, this is one of the powers of using blocks instead of the classic method. You can position the meta boxes where they actually need to go. We can provide default values ahead of time as well. When you start to think about the implications for page building and themes it gets very interesting. Being able to structure your content however you want leads to much improved user experiences. The content itself can now be outlined ahead of time, which helps when many content authors are involved and need to adhere to some standard. The template system is not fully fleshed out yet, but when it is, it will be incredibly powerful. Meta boxes fall short in this aspect.

Uniformity

Sometimes meta boxes are not the correct tool for the job and we need to use another one of WordPress's APIs to get the things done. Sometimes the meta boxes I have created will power a shortcode, widget, or custom TinyMCE thing. It always gets awkward though because the experience is so disjointed.

For instance, I do a lot of eLearning projects and often a link to assignments, modules, or the current week's todo items need to be embedded in the content. These are being powered by data somewhere else often controlled by a meta box. I can't just hard code these pieces into the theme templates though, as the instructors want to have control over where these elements are placed. Meta boxes only get you part of the way to where you need to go. Then depending on the case, a TinyMCE button is created and there is a unfulfilling user experience getting this to work. If the author needs to update the list of todos, they need to find the meta box for it somewhere on another page. If they want to change the list of todos for that specific page, they most likely will need to create an entirely new list of todos. It gets tedious quickly.

Now that I am running these systems on Gutenberg, it is effortless for instructors to be onboarded and get up to speed. The block API brings us uniformity, which allows the meta box that is powering something to also be embeddable in the content, or not. It's up to us and there is incredibly flexibility. The uniformity of the experience also makes it easier for the people actually using the editor, because once they have learned how to insert, place, and update the block, they have learned it for everything else. There is no need to go to different pages, and do all sorts of weird workflows. Since blocks will unify meta boxes, content, custom TinyMCE, widgets, shortcodes, and whatever else into one thing, a new property will also arise; composability.

Composability

The new block editor does not quite fully deliver on composability yet, but it's getting there. Composability allows us to create something new out of other elements. A web page is basically a composition of various HTML tags. The HTML is parsed into DOM nodes and eventually renders onto our screen after a bunch of other stuff happens. We might create an employee profile by combining, a figure element, with an image element, a figcaption, and maybe some p elements for various information bits. If these pieces did not share a uniform interface, we could not create the employee profile in HTML, we would have to do something else. HTML would not be very useful.

WordPress's current content system for better or worse is a fragmented mess. It kind of makes sense, but as a new comer myself, it was weird learning a lot of the concepts and the WordPress way, as it seemed different for almost every piece. Widgets needed to be created one way, and could only be easily embedded in certain places, which needed to be registered beforehand, unless you wanted to hard code the widget somewhere. Confusing.

If I spent all of my effort creating a widget, well I was out of luck when I wanted to put it inside my content. Instead, I needed to then create a shortcode. If I wanted to do the same exact thing, but slightly different, I would need a new shortcode. I also wanted a widget that did the new thing as well, so I had to create another widget. If I wanted to use the new widget functionality inside the old shortcode it leads to a gigantic mess. The level of reusability is limited, and as a developer we really only have an illusion of reusability when working in WordPress.

Imagine if every time you wrote HTML, you had to keep each element as its own. For instance:

<p>Here is some HTML. Now I </p><a href="awesome.com">have a link</a><p>inside of the same text.</p>

No tag could ever be a part of another. div and its many incarnations would be unusable. We would be limited to linear ordering of basic elements, slabbing one piece after the other. If we wanted to do something complex, it would need to meticulously be strung together. Nothing could ever be grouped together or composed in a natural way. If we wanted to move a piece we would have to move everything with it. We don't work this way with HTML, so why do we accept it for how we work in WordPress. Again, imagine never using div or even conceiving what div is, that is the world we are working in. Widgets can not be used with shortcodes, or TinyMCE, and vice versa, without a lot of extra work. It is hard to fully see how limited we are by WordPress, because it is great, but when all of the pieces of content can become more easily interchangeable with each other, we will see new experiences emerge.

With the concept of composability, an image slider could potentially also be used to create any kind of slider. It could even be fashioned into a PowerPoint of sorts. The text and images, would be their own unique piece, that fit inside of a slide, and each slide inside of the slide show. Each slide could be powered by a different set of data providing a unique experience for each person. The web browser is already a PowerPoint of sorts that we don't even take into account because the fluidity between each frame is abrupt and we don't fully even know how to even effectively use the medium of the web or computers yet, at least I don't.

The block editor will make WordPress an unparalleled CMS. This is just part one of reimagining meta boxes as blocks, and I hope to show you some of the cool things I have been working on, and get you excited about the future of WordPress! The upcoming articles will be more code oriented and go over how to actually think in blocks and how to actually write the JavaScript and PHP that powers them. If you are interested by the Gutenberg editor, make sure to try it out or check in on the GitHub repository.