Onsighting and the Art of Falling Up

Tips for Successful Onsight Climbing! Step 1: Pick a route. Try picking a route in a style you enjoy, for which you have some relevant technical skills, and is about the length of the other routes you are used to climbing. Step 2: Mental game. Set yourself up for success.

from Pocket http://bit.ly/2IvA6Cm

Using Airtable to learn React

The past few weeks I’ve started to learn the React library more seriously with a few practice projects. I learned of Airtable from a CSS-Tricks article a while back which goes into more detail of what Airtable is but the TL;DR might sum it up as a Google Sheets on steroids with API endpoints. In the article author, Chris Coyier used Airtable and Javascript to create a favorite Emoji Poll and I’ve recreated it using React. This is entirely a front-end project, so the API key is exposed. If you are interested in using Airtable in production this article (Airtable As A Minimum Viable Database For Your ReactJs Project) got me started.

If you are interested in learning React please feel free to pick it apart. Happy Hacking!

Resources:

I’d like to thank TyrantWarship from Twitch. I’ve been streaming some of my learning experiences to my Twitch channel and TyrantWarship would often pop by an help me through many of my roadblocks.

How I am styling Select elements

I’ve complained about styling forms before on this blog. But things have gotten better over the last several years and we are starting to see some browser consistency. I did run into a problem with select elements to find that adding pseudo classes won’t work, which is my usual go to for adding font icons to… things. So I tried something else, using an SVG as a background image and I think it came out pretty great.

Creating an Animated Submit Button for Ninja Forms

Ninja Forms is easily one of my favourite WordPress plugins. It’s one of the most design agnostic form building plugins I’ve come across and saves me time on every project. Every now and then a designer asks for some UI that isn’t easily accommodated by most form markup. If you have ever tried to style a <input type=”submit” value=”Submit” /> you know what I’m talking about. A couple of projects back I needed to animate a submit button with a fancy hover effect and an icon font. I had already styled some anchor markup with the same effect (Codepen below) and was hoping to apply it to the sites forms with relative ease.

I reached out to the WP Ninjas team and they were extraordinarily helpful in pointing me in the direction of Custom Field Templates, which I was previously unaware of. Below demonstrates how to set up your own Custom Field Template, I am creating a Submit button, but this works with other field types as well! If you are creating your own themes, you can simply create a “ninja-forms” directory, “templates” directory, and a “fields-submit.html” file inside of your theme as shown below and you’ll be all set to continue.

If you are using a Child Theme, create the same folder structure, but will also need to add the following code in your functions.php file for Ninja Forms to recognize the template directory. More information here.

https://gist.github.com/philhoyt/efa932256a052d65f769fb10dda0508d

Inside of the “fields-submit.html” file, I am going to take the markup from the animated anchor link in Codepen and modify it to accept information from Ninja Forms. You can, of course, use your own markup. 

https://gist.github.com/philhoyt/d6d36aca6c14f235df8287f94fd379c4

Then I took the CSS from the Codepen and place it in style.css, as well as called Font Awesome in functions.php, wpbeginner has a great tutorial on adding Font Awesome here. Now when you visit a form on the site you can see the new submit button in action, before and after picture below!

Before

After

Using Advanced Custom Fields to create Post Titles

Advanced Custom Fields - Post Title

I often need to create post titles in WordPress based on fields I’ve generated using Advanced Custom Fields. Below is an example that assumes we have a Custom Post Type registered to “staff” and two Custom Fields with the name of “first_name” and “last_name”. Using the “update_value” hook provided by Advanced Custom Fields and “wp_update_post” I am able to update the Slug and Post Title using the values given in the respective fields.

Disabling the title at a custom post type level will, unfortunately, remove the clickable permalink below the title that I often use. To combat that I create a very simple metabox with the permalink. Demonstrated below.