Utah
Dolly Sods Wilderness
North Manitou Island
Spent three nights backpacking on North Manitou Island.
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:
- Inspiration: How To Use Airtable as a Front End Developer
- Database: Airtable
- Airtable As A Minimum Viable Database For Your ReactJs Project
- Bar Chart: Recharts
- Editor: CodeSandbox
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
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,
Before
After
Using Advanced Custom Fields to create Post Titles
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.
Initial thoughts of the MacBook Pro 13-inch with Touch Bar
On Sunday I found myself working on my 2012 MacBook Pro. The model that still had a CD Drive, no retina display, and rocked a firewire 800 port. It was chugging along and at some point between trying to compile some SASS, run Photoshop, and use developer tools inside of Chrome I’d reached my breaking point. I pondered at the Apple website for a few moments, looked into my budget for the coming year, and headed out to the Apple Store. After over a month of Apple bashing on the internet, I thought I was dead set on purchasing the lesser MacBook model, but within a few minutes of using the Pro model I was hooked.
The good.
The Monitor: Coming from a non-retina display at 1280 by 800 resolution to what is effectively a 3360 by 2100 resolution screen has been game changing. I have more screen real estate, colors are richer, and text is easier to read. Even compared to my works 2012 retina model there is a great improvement.
The Speakers: I don’t remember hearing much about the speaker improvements before purchasing, but I would argue that the MacBook Pro is the best sounding Apple product to date. I did a very unscientific experiment of playing the “The Fate of The Furious” trailer simultaneously between my machines and muting one at a time. The results, a much louder experience, a more distinguishable left/right pan, and a significantly improved sound quality.
The Keyboard: I often hear that coders would not like the new keyboard as it has shallow key travel. It feels more engineered than previous models and I’ve found it to be the most comfortable laptop keyboard I’ve used to date.
The Profile: The new model is impressively light and comes in SpaceGrey, which is so freaking cool. Although the glowing logo will be missed.
The bad.
Charging via Thunderbolt 3: The death of the MagSafe adapter was a crime against humanity and I know there are Kickstarters for a MagSafe like adapter, but I am not going to give them money, wait 6 months, only for them to receive a cease and desist and halt production. Step up your wireless charging game Apple and then I’ll be impressed.
Adapters: Adapters sold by Apple are still laughably expensive and third-party are often unreliable or out of stock. I currently have a two-week wait for an HDMI adapter.
and the meh.
The Touch Bar: I never thought I’d miss the “esc” key until it was slightly relocated into the Touch Bar. When you go into System Preferences and search “Touch Bar” nothing shows up. It’s not until you go into “System Preferences > Keyboard > Customize Control Strip…” you get any editing options. I wish Apple had worked with a few more developers to bring Touch Bar features to the forefront, but I expect those in an update.
At least I get emojis 😎💻
Final thoughts.
I am very happy with the purchase, I feel a slight increase in productivity with the improved features, and I look forward to this being my main computer for the next 5+ years to come.
How WordPress default themes add Google Fonts
I spent some time diving into Twenty Seventeen in preparation to develop for the theme directory. I was curious as to how the developers of very popular theme would enqueue a Google Font. I am no stranger to using a @import tag in the stylesheet, but I assumed there had to be a more sustainable solution. What I found was a thoughtful way of adding a font which I have digested into a gist below.
Handling your Google Fonts in this manner allows translators of your theme to disregard a font that may hinder the translation.
If you are in a similar position as I am, trying to sharpen your WordPress skillset, I highly recommend tearing into some of the default themes. They are a plethora of knowledge.
A Weekend in Ann Arbor
