Menu Sidebar
Menu
Hello World! > More About Me <

I currently work at Penguin Random House as a front-end developer working on some great projects with an amazing team.

I spend most of my time in development on the front-end with HTML(5), CSS(3) and JavaScript, including experience with jQuery, EmberJS and Backbone. I also do quite a bit of work with WordPress and Ruby on Rails on the back-end.

Adding Permissions to The REST API and Vue

More and more, I’ve been getting the hang of the WordPress REST API, and I’m starting to experiment with new plugins and themes that make use of it. My preferred framework is Vue, for a number of reasons, but I’ve found that connecting the client to the REST API really just requires some vanilla Javascript. I’ve also been making use of custom endpoints. When you go to set these endpoints up yourself, you’ll find that adding a permissions callback might require a bit of work.

So let’s say you want to create a custom endpoint for a plugin or theme you are developing. The code is actually fairly simple using register_rest_route.

register_rest_route( ‘myplugin/v1’, ‘/endpoint/(?P\d+)’, array(
‘methods’ => ‘GET’,
‘callback’ => ‘read_my_posts’
) );

This will create a new route at yoursite.com/wp-json/myplugin/v1/endpoint/[ID]. Then you can set up the function read_my_posts to handle what is returned when this endpoint is reached. I’m not going to dive into too much here, but the official documentation has a fairly good walkthrough on how to get this set up.

This works great when you are just trying to get a list of posts, but what if you want to accept [...]

Editing the Crop in WordPress Images Before Upload

For a recent project, I had a need for a pretty simple workflow. I had a couple of image sizes, which I added with the add_image_size function which required a hard crop to a certain aspect ratio. The workflow for authors I was looking for was:

  1. Upload Image
  2. Edit the crop for these special sizes if they feel like
  3. Insert into post

All of this on the same screen. After installing and downloading a bunch of different options, I’m going to formally recommend Manual Image Crop.

Screen Shot 2016-04-13 at 3.46.00 PM

It’s not the prettiest option (that’s Post Thumbnail Editor), but it is the simplest and most flexible. It has a few options for each image size, but basically once you upload your image you can select the “Crop Image” option and then automatically create a new image crop for each size. And everything is brought into a pop-up window so you never have to leave the Media Uploader.

Screen Shot 2016-04-13 at 3.46.58 PM...]

Using Gravity Forms with Bootstrap Styles

I use Bootstrap as a starting point for a lot of the themes that I build as a great starting point for reusable components. But one of the problems I’ve run into is trying to integrate Gravity Forms with Bootstrap. By default, Gravity Forms does not include Bootstrap classes, so the two don’t end up working very well together.

Fortunately, with a little bit of elbow grease, there’s a way to tweak Gravity Forms markup and styles to match a default Bootstrap form. The solution I’ve found is a combination of a single hook and some SASS / CSS tweaks to get everything off the ground.

For reference, a typical Bootstrap form should be marked up something like this:

<form> <fieldset class="form-group"> <label for="formGroupExampleInput">Example label</label> <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"> </fieldset> <fieldset class="form-group"> <label for="formGroupExampleInput2">Another label</label> <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"> </fieldset> <button type="submit" class="btn btn-primary">Submit</button> </form>

I’m using version 4 of Bootstrap, but things are pretty much the same in older versions of Bootstrap as well. There are really two things that are important in this markup. The first is that [...]

That Time the Internet Broke

RE: The Plight of NPM, etc.

I won’t pretend to be an expert on NPM, package managers or open source. But last week, something really interesting happened. And it brought into view two issues that have been swirling around in the ether: the dependency tangle that is the Node / Javascript community and the problems that arise from private vs open source projects.

Here’s what happened. Azer Koçulu announced that he was removing all of his publicly available modules from the NPM registry after his module Kik was removed, against his wishes, by the NPM team. See, NPM is a private company, owned in part by Isaac Z. Schlueter. And when lawyers from the app Kik came knocking, Isaac was quick to comply over Azer’s head.

In Azer’s words:

This situation made me realize that NPM is someone’s private land where corporate is more powerful than the people, and I do open source because,Power To The People.

So Azer goes and removes his 273 modules from NPM, including some pretty global sounding ones like “map” and “attr” and, most importantly, “left-pad”. And just like that, a giant section of the Internet just flat out ...]

Chose Your Metric

I went to Wordcamp Lancaster this year. It was a great time. I gave a talk on Javascript and after the conference, I was perseverating about one of my favorite things: what the f%c Javascript framework should I use. Rami Abraham (who organized the crap of out of WC Lancaster by the way) was quick to point out that we had probably drunkenly discussed this very same topic on no less then seven different occasions. Like usual, Rami was right. Sometimes we do it on Twitter.

I think about this crap a lot and I’ve never really figured it out.

Stop me if you’ve heard this one. I’ve been working on this new project, trying to pull JavaScript and the WordPress API to pull together some pretty cool tools for writers and developers.

Awesome. Crack my knuckles and get started. I know things are going to be heavy on the client-side, but this is a learning opportunity and I want to dive into a solid framework to get me started.

Cool. Angular or Backbone or React or Ember or Vue or Mithril?

Ugh. Okay, forget it. Build process. That’s simple, right? Let’s see… Gulp or Grunt or Brunch or Webpack or Browserify?

[...]

How Can WordPress Appeal To Developers?

In the WordPress community there’s this elephant in the room that no one really likes to talk about (understandably). For some reason, there’s a lot of developers that really don’t like using WordPress. Need proof? Stack Overflow just released the results of their 2016 survey. And as Ryan McCue pointed out on Twitter, 74% of developers dreaded the idea of using WordPress. I get it, results are biased, and Stack Overflow tends to skew towards trends. But still. It’s a sentiment we’re all well aware of.

Back to McCue:

Agreed.

On the flip side of the equation, the most loved technologies of this year are things like Rust, Swift, React and Node. Here’s the thing. I know we don’t want WordPress to be as decoupled as Node, or to ditch backwards compatibility like Rust. We don’t need WordPress to be at the top of the list, and it’s unrealistic to think it ever could. What we want is for WordPress to sit right in the middle, alongside other technologies that people enjoy using, but don’t [...]

Changing Field Keys in Advanced Custom Fields

I recently ran into a problem when using the Advanced Custom Fields plugin which is a bit esoteric. In the previous iteration of the site I was working on, fields were registered programmatically, using acf_add_local_field_group and acf_add_local_field. In the new version, we decided to move these back into the GUI on the admin panel.

For most of the fields, all we had to do was replicate the field group and field names / labels and everything worked fine, even on existing posts. However, repeatable and flexible fields would not show up for posts that had already been created.

The problem was with the field keys. When I created the fields in the admin panel, they were assigned a different field key, and thus existing content didn’t work anymore.

I found a post that outlined a fix on the plugin’s forums and it actually worked pretty well. Basically, you can go into the edit screen in the admin, and inspect element or use firebug to open up the HTML source. Find the HTML element that the repeatable parent field or flexible field is wrapped in, and remove the “meta” class from this. Then you can find the hidden field that has a the field key in [...]

Hemingway’s Advice for Coders

I’m an avid reader of Brain Pickings (check it out if you haven’t heard of it), and one thing caught my attention a few weeks ago. In the mid-1930’s a young writer by the name of Arnold Samuelson caught up with his hero, Ernest Hemingway. Rather then cast him away, Hemingway took him on as a sort of protege, and gave him some invaluable writing advice along the way. There was one thing that resonated with me in particular because I find myself in this trap all the time.

The most important thing I’ve learned about writing is never write too much at a time… Never pump yourself dry. Leave a little for the next day. The main thing is to know when to stop. Don’t wait till you’ve written yourself out. When you’re still going good and you come to an interesting place and you know what’s going to happen next, that’s the time to stop. Then leave it alone and don’t think about it; let your subconscious mind do the work.

I mostly write code for a living, not prose. But this rule still applies. I can’t tell you how many times I’ve been coding away when I finally [...]

First Steps with Javascript and WordPress

It starts with a simple maxim.

Learn Javascript Deeply.

That’s what Matt said. And it’s good advice. Javascript underpins everything we do, and it’s becoming more and more advanced every day. It’s not just the future of WordPress, it’s the future (and present) of the web.

Of course, Matt mentioned this right around the time he showed off a new admin dashboard written entirely in client-side Javascript with React, and proxied through a server also written in Javascript. Which is great for WordPress. But it’s not a great place for everyone to start.

The truth is there are a number of ways to start using Javascript that are a little more… approachable. My goal here is to go through a few ways you can start using Javascript, today, without completely changing your workflow.

I will be talking about a lot of things. There will be code. I won’t be diving too deep into any one thing. My hope is that I can spark some interest for you. That you connect with one of these new processes or patterns and you feel encouraged enough to keep digging.

Generally speaking, I think there are three great ways to approach Javascript.

Gulp, LiveReload, SASS and WordPress

For a little while now, I’ve been using Gulp in my WordPress themes to automate my front-end workflow and add some handy helpers along the way. For those unaware, Gulp is a slick JavaScript task runner, which can be used to concatenate JS and CSS files, lint files, and generally automate your front-end workflow.

My goal was to write a short introduction to how this works. It ended up kind of long. But by the end you’ll be compiling SASS, minifying Javascript, working with livereload and implementing a SVG icon system. So not bad.

Setting Things Up

First off, gulp runs on top of NodeJS, and is generally operated from the command line. If you’re not set up with Node yet, I’d recommend following the steps on their website (or better yet, installing Homebrew).

With Node installed, you can install gulp globally on your system by opening up your Terminal and running:

npm install -g gulp

This will ensure that you can use the gulp command from the command line. In the root directory of your theme file, you will also need to install and set up a local version of gulp, and add a package.json file to manage [...]

Older Posts

Jay Hoffmann

A Web Developer