Create A WordPress Site With Lando

For local WordPress and Laravel development, I tend to use a Docker-based solution, most of the time. Depending on the project, I either use Lando or docker-compose. This post is about Lando.

Lando, is no DesktopServer. DesktopServer gives you a simple GUI for creating WordPress sites. Lando has no user interface, you do everything from the command line. That’s good or bad, depending on what you need.

Here is how I create new sites for local development using Lando.

Create The WordPress

Initialize lando in current directory:

lando init --recipe=wordpress

Add a WordPress:

wp core download
wp config create --dbname=wordpress --dbuser=wordpress --dbpass=wordpress --dbhost=database --skip-check

That downloaded WordPress core and setup wp config to match Lando’s default variables:

wp config create --dbname=wordpress --dbuser=wordpress --dbpass=wordpress --dbhost=database --skip-check

Add xdebug and MailHog and phpunit

Optional step, but it’s best before going further to add phpunit, MailHog and xdebug. MailHog intercepts all emails coming from the application and provides a webmail-like UI for reading the caught emails.

I love xdebug, I can’t imagine PHP development without it.

In order to run tests “The WordPress Way” you need phpunit installed globally. I disagree with this approach, but Lando makes it pretty simple to do, so fuck it. Here is a .lando.yml file that adds all of these things:

name: formcalderas
recipe: wordpress
config:
  env: dev
  xdebug: true
proxy:
  mailhog:
    - mail.formcalderas.lndo.site
services:
  appserver:
    composer:
      phpunit/phpunit: '*'
  mailhog:
      type: mailhog
      hogfrom:
        - appserver
      portforward: true

Build Containers And Start the site

lando start

This builds the new site and then shows URLs for the site.

At that point you have a WordPress at the URL listed for “APPSERVER URLS”. Click the https link and then finish installing WordPress through the UI. Alternatively use wp cli.

Chrome will not trust the SSL certificate. I normally just click the “Advanced” option and then tell Chrome to trust it. There is a better way to handle this documented here.

Path Mappings For xdebug In phpStorm

In phpStrom preferences go to Language & Frameworks > PHP > Servers and select the current server. Map the root directory to /app

Also Great For Pantheon

This article is about setting up local sites for general plugin development. We also use Lando for local development of the Caldera Forms site. CalderaForms.com is hosted on Pantheon. We git commit the Lando config file in the repo for the site. That way we have a shared environment and can pull database and file changes using Lando’s CLI, thanks to their Pantheon integration.

Learn more about Lando + WordPress here.

A Listicle Of Laravel Nova Related Blog Posts

This is my list of all of the useful articles I found while experimenting with the Laravel Nova. I will update it with more links as I go.

Laracon 2018 keynote, announcing Laravel Nova.

Nova Packages

Nova Tutorials

Nova Related Links That Do Not Fit In the Above Categories

Customizing the Nova dashboard theme.

Easy Things

I’ve developed a reputation at my company for declaring tasks “easy” that end up being very difficult or impossible. I deserve it.

This happens for two reasons. One reason is I underestimate the understanding that the person has more experience and knowledge then I think. The other is I don’t take the time to think through how to solve the problem before declaring it easy.

Let’s stick with option one, short post.

Multi-Tasking Is Hard AF

I’m writing this on my way to the office. I take the bus, which is great as it ads 4 extra walks to my day. It’s raining, I don’t have a small umbrella for the umbrella pocket in my bag. I don’t have a light-weight jacket with a hood.

I’m doing better when I first started going to an office — after over 5 years if working from home. I now check the bus schedules before I leave and I’m almost always on time for the bus. I even check the weather — hey I brought a hoodie today 🙂

So I’m New At This…

I’m doing something new, and I’m trying to be kind to myself as I stumble through it. I do wonder if I work too much as a way to avoid doing the things I’m uncomfortable with.

I used moving to Pittsburgh as my excuse to start leaving the house more. It gave me tons of anxiety at first. That anxiety lead to silly mistakes, which made the experience and anxiety worse. It’s easy to stay caught in that feedback loop.

The thing that’s great about my job is I spend a large part of my day writing code. Something I’m good at. Something that gives me a great sense of calm to do.

Always Itterate

Sometimes I catch myself listing steps for household tasks… Clean up after meal, reduce mess : put dishes in sink, rinse dishes, put dishes in dishwater, push in chair, wipe down table…

I’ve taken the first rule — in my mind — of programing to heart. Before you write code, understand the problem and map a solution. 

I know that taking a structured approach to self-improvement is not a revolutionary new approach to life. But being mindful of how I have to approach things that others may think are simple as a complete novice, I think that helps

I don’t think you can find that empathy for beginners by doing the thing you’re good at. I think it comes through struggling through the rest.

The good thing about this theory is it works better if when I make mistakes I don’t go to putting myself down right away and instead be forgiving of my own lack of skill or experience.

Is Guten-Pain Good?

Gutenberg, the new WordPress post editor is coming soon and its a big change. Change makes people scared, that’s natural. Not all of that fear, in my opinion, matches up with the reality of what Gutenberg actually does and does not do. But, its a big change with some very real risks.

What WordCamp Montreal Taught Me

I attended WordCamp Montreal recently. Besides how great the vegan food was in Montreal I had two big takeaways:

First, industry veterans are excited about the possibility of Gutenberg and are also very worried about the transition. I think some of that is people still not understanding that Gutenberg WordPress 5.0 doesn’t change existing content. But also, there are some valid concerns there.

My other big set of takeaways was from a talk by Jer Clarke about Buddhism and WordPress. This was a great talk. It was not heavy on WordPress content but did make light of the how everything including WordPress changes.

It reminded me of how many times I’ve told people something like, “I used to be so stressed about technical debt and not having enough time for everything I want to build and not making enough money. Now, I’ve got technical debt, not enough time and not enough money.” Then they look at me as if I have something else to add, and I don’t. I’m just more at peace with the fact that these things are happening and less attached to worrying about them.

I still break down and cry, but way less often. I also meditate and exercise every day. I think it helps.

What About The Gutes?

Yes, Gutenberg is a big deal. My big concern, as someone whose business is based on WordPress’ huge market share, is that Gutenberg will lead to a shrinking size of the available customers for me.

It might.

Also, Squarespace. Also the rise in Laravel-backed CMS and CMS-like tools like Nova. Also, serverless static site platforms like Netlify are getting more CMS-like features.

I’m a big fan of the scenario where distributed web apps backed by an Etherum-like blockchain.

Some Disappointing Things Will Happen

I’ve been very concerned about what happens when folks, who chose WordPress based on its promise of backwards compatibility, have to chose between paying to fix problems created by Gutenberg and paying for a new site.

A lot of people own websites that they do not maintain. 

I wonder why we in the community are so attached to supporting those who do not expect to have to support their own sites. That’s their free choice, and if they leave WordPress when faced with this responsibility is that such a bad thing?

I Don’t Know Anything

Or maybe everything will go better than we fear. Maybe Gutenberg really is what WordPress needs to stay relevant.

I have no fucking clue. But I do know that, right now using WordPress, without Gutenberg, to create content is painful. Fearing what happens when you update is scary. These are all know threats to the WordPress ecosystem. They are are real and scary.

Things are changing and that’s difficult and scary.

Also, the sky is blue and no one is forcing you to update. Classic editor or staying on 4.x might be the best solution for existing sites.

I don’t know, but I so hope it goes well. I really want to keep going back to WordCamp Montreal every year, the began food is great.

Top 10 Time-Saving Tips For Writing With Gutenberg

One of my current goals is to write five short blog posts a week using Gutenberg, I want to learn this important new feature of WordPress and be a better contributor. In addition, I want to improve my writing practice by practicing more.

I didn’t set out to write most of my content about Gutenberg, but I should not be shocked that’s what happened. After a few days, I had a few concerns about the experience of authoring content in Gutenberg.  I’m used to writing mainly in Google Docs and Google Keep or Twitter. Sometimes in Simple Note and occasionally WordPress.

Turns out that a lot of these concerns I had are being addressed. The solutions are there, but not obvious. Here are a few tips I’ve learned to improve the content writing experience. When I’m writing, not editing, Gutenberg can feel like it is in the way, but there are good features that exist or are being worked on to solve this.

Slash Commands

One thing that bothered me a lot about writing with Gutenberg In my first week of my new Gutenberg challenge was adding a heading block. I found that having to go to block inserter to add the heading really upset my writing flow.

On Twitter, Kevin pointed out that you can use a slash command to bring up the block inserter. 

To insert a heading block, just start typing /heading brings up a mini block inserter. It’s way faster.

Inserting a heading block into the WordPress Gutenberg post  editor using a slash command
Add blocks quickly to the WordPress editor using a slash command

Code Formatting

I’m using Gutenberg on two sites right now: this site and the CalderaWP handbook site. On the handbook site this week I was documenting setting up local development for CalderaForms.com and needed to use code formatting on some words in a sentence.

There is no obvious way to add <code> or <pre> to selected words in paragraph or list block. This made writing those docs a pain, I had to add the HTML in the code editor. Yes there is a code block, but switching blocks upsets my flow and sometimes I want to put code in a sentence.

Cool feature, not easily discovered. I wish I knew how to make that obvious, as its really cool.

Hide The Sidebar

In the top right menu is a gear icon. Click that to close the Gutenberg sidebar when you’re writing. It’s better that way.

Use The Document Outline Tool

Using the document outline in Gutenberg to see that your 10 items listicle only has 4 items. Also, accept that fact and go back to writing code.

The document outline tool —  i in a circle icon on top right — shows you your heading structure for the document. It makes it easier to see bad heading structure and to jump around a large document.

Another thing that is great about this tool is if you’re writing a listicle that promises ten time-saving tips or whatever, you can use it to count your time-saving tips as you go.

Creating Gutenberg Blocks With WP-CLI

If you’ve never created a Gutenberg block before, or just need to make a quick block, wp-cli — the official command line tool for WordPress — can help. The wp scaffold command can create a plugin and add a block to it. Here is an example:

# create a plugin called books
wp scaffold plugin books
# create a block with the name "book" and the title "Book" in the plugin books
wp scaffold block book --title="Book" --plugin=books

This gives you a plugin with one block. Brian Richards’ section of the WordCamp Miami workshop we gave this year is about creating similar blocks, with or without wp-cli and then adding capabilities to them. The example code from that talk and the slides are likely good next steps if you’re just learning Gutenberg block development.

wp scaffold

This Is Super Basic

I’m a big fan of using ES6 and webpack and yarn and JSX…

If you do not know how to use all of those things and you also do not know how to build a Gutenberg block, I recommend picking one concept to learn at a time. Gutenberg can be your way to level up your JavaScript. But start simple.

Make Something!

In preparation for our Gutenberg-powered future, now that the API is pretty stable,  now is a great time to build your first block. If this helped, @ me on Twitter with the Github link to what you built 🙂

Redux(-like) State Management In And Around WordPress

This post is a companion to my talk for the JavaScript for WordPress conference. The talk is supposed to be titled “State Management with Redux in WP” but I always end up changing the title last minute.

In this case, Zac and I honestly didn’t know enough about Gutenberg when we came up with the topic to know exactly what it would be about. We had some theories when we discussed it in this video a few months ago:

Watch The Talk

Click here to watch!

Screen cap from the talk!

Slides

Here are the slides for my talk:

Helpful Links

Example Code

Because this talk will be streaming, some people may have issues viewing the code. Also, I used Carbon.sh to generate screenshots of example code to ensure they looked good. That means you can’t cut and paste from the examples, or read them with a screen reader, which is sub-optimal.

So, here is an image gallery of the code samples with links to the actual code it is based on. Now you can see the practical, real world application of these concepts.

This example code is based on the Caldera Forms Processor UI library, which is what I’m currently working on andand Caldera Forms’ Gutenberg block.

A Dumb App Component

Presentational Component

See full source code

Component PropTypes

A Dumb Component Nested In App

See full source code

Tests For A Dumb Component

See full source code

Higher Order Components

Example From Gutenberg: With API Data

The Provider Higher Order Component

See full source code

Container Component – withSelect

See full source code

Container Component – withDispatch

See full source code (same as above)

Container Component Wrapped With State

See full source code (same as above)

Actions

Action Function

See full source code

Testing Action Functions

See full source code

Selectors

Selector Functions

See full source code

Testing Selector Functions

See full source code

Reducers

Reducer Functions

See full source code

Testing Reducer Functions

See full source code

Resolvers

Resolver Functions

See full source code

Testing Resolver Functions

See full source code

Registering A Store

Pattern

See full source code

Complete Example

See full source coe

Using @wordpress/data Store In A Gutenberg Block

See full source code

Using @wordpress/data Store In A React App

See full source code (same as above)

Nonces: The Other Problem With WordPress Caching

Cloudy mountain top

Nonces are one of those things that, hopefully, all WordPress developers know they need, but there is still a lot of confusion about. Maybe it’s beacuse “nonce” means a number used once and a WordPress nonce is not a number and it can be used. So it’s closer to a nonce than a nonce word, but it can be used multiple times, but I digress.

The point here isn’t semantics, it’s to discuss some problems nonces present. I run into problems with Caldera Forms + caching plugins that are set with infinite cache lengths as this causes our nonce validation to fail.

This article isn’t about setting up caching plugins or services or which one is best. It’s about understanding one of the gotachas with many caching plugins: caching nonces.

Nonce Problems

I want to talk a bit about what nonces are, why we use them and what can go wrong. I’ll keep it brief, as I’ve written a more detailed article on nonces for Torque already.

What Is  A Nonce?

As I said earlier, “nonce” means “a number used once.” For example, most payment processors, like Stripe issue a one time use token, which is a mix of numbers and letters, for creating a payment. They call it a token, but same concept, technically a nonce word. You request the token with a public API key and then complete the payment with the token and the secret API key.

Nonces are not a security feature by themselves since they become public once printed to the page. Also, in WordPress, nonces can be used more than once.

Nonces help prevent cross-site request forgery, beacuse they can be used to prevent requests from external sources form mimicking intended HTTP request. Also, nonces make up part of your strategy to prevent XSS attacks since they help verify that the request is coming from the intended user.

Nonce Expiration

Snowy mountainAs I said in the last section, nonces can be used more than once. They remain valid for a set period of time. By default this is 12 hours, but can be changed with the nonce_life filter. This design decision means that WordPress doesn’t have to keep a record of nonces created and if they have been used. That probably would have required a new database table.

This is important to keep in mind. As are the other ingredients of a nonce. For example, one of the components that goes into a nonce is user ID, or 0 if the user is not logged in. This prevents nonces from non-logged in users from validating when a user is logged in. This by the way is why you should always send the REST API nonce on every request. If you don’t other nonces might not validate properly.

Forms, Caching And Nonces

Every form in WordPress should use a nonce to prevent cross-site forgery requests. All forms provided by WordPress core do. This includes comment forms. Also, your contact form should. We use a nonce in Caldera Forms.

In the last section I mentioned that nonces can be reused for a period of time, normally up to twelve hours. This is good beacuse it means that you can cache the content of a page with a from and the form will still work, for up to twelve hours.

The “up to twelve hours” part is the rub.

The idea behind a static HTML cache is that you only generate the page output once, and serve the same thing, which should be identical to all other visitors. This makes sense as it prevents running the same database queries and running the same PHP scripts to do the same thing over and over again.

Great, but if you have a nonce in your content, it could get expire and prevent your forms from working. Obviously this is a problem we face with Caldera Forms, when it is used with caching plugins or proxies like CloudFlare. This is also one of the reasons people have moved away from native commenting in WordPress.

What To Do?

One thing not to do is to re-generate nonces from other plugins, before they can be validated. This bypasses the problem, but defeats the purpose of the nonce. I’ve seen plugins do it though 🙁

It’s common practice to bypass the cache for logged in users. One reason is that the content may be unique to the user. The other is that nonces are unique to the user and can’t be shared.

The other thing you really should do is keep your cache times short. Definitely less than 12 hours, but probably even shorter. Also, relying on a non-PHP solution like Varnish or nGinx as a reverse proxy is preferable, but you still need to make sure your cache time is short enough.

By the way, if you’re wondering which caching plugin I recommend, I don’t use one. None of my sites receive thousands of concurrent views. The Caldera Forms site is I’m dealing with few thousand page views a day, not a time and we have it on a small AWS VPS that can handle that easily, especially with all of the assets coming from a CDN.

If they did, I would probably use Varnish and/or nGinx as a reverse-proxy over a plugin. I do use Redis as a persistent object cache whenever possible. A good WordPress host should provide a static HTML cache, powered by a server appliance, with a short cache length.

Nonces Are Important, But Don’t Get Cute

Mountain valleyNonces are important, if you do WordPress development, make sure you read the WordPress developer handbook section on nonces. If you have questions, ask in the comments. Also, be careful not to get cute with nonces, and always use wp_verify_nonce() to verify nonces to avoid issues like I discussed in this post.

 

 

Some Quick Thoughts On LoopConf

I was super lucky to be able to attend LoopConf last week. Ryan Sullivan and his team put on an amazing conference. I’ve never been to a fancy developer conference before, and I had a blast. Thanks Ryan for having me! I just wanted to share a few observations about what made LoopConf special and share my recommended videos playlist.

Before I go on, I should point out that while I don’t usually stay in hotels when I travel — I prefer AirBnB –Me and Roy Sivan being super classy by hotel fireplace– the Little America hotel in Salt Lake City where they put us up was classy AF. I didn’t know what to do with myself in such a big fancy room, but I super enjoyed sitting by the fire in the lobby and being classy.

One side of the fireplace had statues of dogs. The other side had a painting of wolves howling in the snow. Apex Classy.

Our REST API Workshop And Something New

Caldera Learn BannerRoy Sivan and I gave a 6 hour workshop on using AngularJS and the WordPress REST API. Honestly, we were worried we couldn’t fill 6 hours, but we actually ran out of time at the end. We had almost 40 attendees and people seemed to get a lot out of it.

I have embedded our slides below, and we also put all of the example code to Github. There is a ton of practical examples in there, some not finished to provide a start point for your own work. Some examples are running live on CalderaForms.com right now.

If you’re wishing you could attend an in depth workshop about the REST API from Roy and I too, don’t worry. We recently announced Caldera Learn. This new site will offer live webinars, recorded courses and code communities for anyone looking to level up their WordPress development skillset. It’s going to be awesome.

The Main Event

Photo by:  Anna Anikina

Our workshop was the day before the main event. LoopConf was a single track conference with excellent talks. They also did a great job of accommodating the hallway track. The room that meals were served in was open all day with the live stream playing. This was a great way to network and watch the talks. I wish WordCamps would do this.

The talks were a lot more focused on philosophy of code, then code. Not that there were not code examples. I really liked this trend for non-workshops.

For example, KAdam White talked about why the WordPress REST API was important for JavaScript developers and why he built his node.js client for the REST API, before showing code for a React app using both tools. Similarly, Natalie MacLees and Nathan Tyler shared their experiences learning React. They provided tons of React and general JavaScript resources in context of using the WordPress REST API.

John Jacoby Jones (JJJ) didn’t really show any code at all. Instead, he talked about lessons from Unix Philosophy that could be applied to WordPress. Andrew Norcross talked about improving our community by acknowledging and dealing with unacceptable conduct that happens in our community.

All the nerdy talks on how to code something or why to code something a certain way were book-ended by business-focused keynotes. Josh Koening of Pantheon talked about how the web has trended away from open source recently as companies have packaged what we created for the open web  in better experiences. He made an excellent point that most people can’t afford what free software costs — time and education.

Jason Cohen of WPEngine spoke about building a bootstrapped business. While he talked about pricing and product design, the best part of his talk was about managing yourself. This especially rang true for me when he talked about focusing on 2xing revenue over shiny features.

I’ve been working on both, and beating myself up over not delivering all the shiny new features I want for Caldera Forms. Those would be done if I wasn’t also working on a new tool that we’re testing right now. Then again, February is looking like a 1.5-2x growth for us versus January, so yah.

I really appreciated both of their talks and spending time talking with both Jason and Josh during the event. I was imagining LoopConf would be all out nerdy-codefest with out a ton of networking. But I got both.

Next Generation WordPress

Photo by: Alexey TopolyanskiyIn 2014 I went to WordCamp Milwaukee and saw two talks on the future of WordPress. Ryan McCue and Rachel Backer presented the beta of the WordPress REST API and Andrew Nacin talked about the WordPress REST API and the WordPress fields API being the basis for a modernized WordPress.

I was super-excited for the vision they shared, and got on the REST API bandwagon pretty hard. Of course, things turned out a bit differently then we expected then. At LoopConf Ryan gave a talk called “Next Generation WordPress”.

He talked about going from the blog era of WordPress, to the CMS era of WordPress and now the platform era of WordPress. Echoing what Matt Mullenweg said in the State of the Word about what got us here is not going to get us where we are going, Ryan suggested a new direction.

While State of The Word was all about user experience, Ryan talked about developer experience. I loved this obviously, as there is a reason I prefer to develop most things in Laravel than in WordPress these days — the developer experience — there has to be a balance here.

WordPress is a user-centered platform and that should never change. But, for users to get an improved experience, both from core as well as plugins and bespoke sites, we need to make it easier for developers to fit those needs. Ryan is, per usual a man with a plan. Definitely watch his talk, do what you can to contribute and let’s hope he gets a reasonable fraction of what he’s asking for there.

Vegan Food, Also Videos

I didn’t expect their to be such excellent vegan food in Salt Lake City, but I was impressed. If you’re ever in Salt Lake City, which I recommend strongly, check out The Vertical Dinner.

I’m still working my way through videos of talks I missed, but I created a highlights playlist from both LoopConfs for you. Check it out: