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!


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.

Animated Hamburger Icon

I was getting sick of trying to find an animated menu icon that was easily scalable. So I made this single element, em based, animated, hamburger menu icon to be easily used across my web projects. Change the font size to see it grow and shrink uniformly. I hope you can find some use for it as well!

Pure CSS Vertical Divider

So several months ago I had a few designs come by my desk requiring vertical dividers between the columns of a grid system. If you have done any front end development for some time you will know how much of a pain this can be. The requirements that I required for a vertical divider were the following, dividers need to expand to the column with the most amount of content, need to have some responsive aspect to it, needs to be able to be added to other columns fast. So after racking my brain for several hours, I came up with the solution below.

Please feel free to pick this apart and adapt it to your frameworks and grid systems!

Fullscreen Masthead

A very popular feature among sites right now is to have a call to action or as I like to call them a “Masthead” that occupy the entire browser window and scales to fit any browser size. It is a great way to get a single message across to your audience without other site elements distracting or using a terrible slider. But I found it terribly hard to Google this feature and an array of methods to achieve this effect.

I choose to stick with a simple CSS solution for the Masthead and borrowed some javascript from MightyScroll to achieve the desired feature. Feel free to play with it below.

[CodePen height=400 show=result href=niqKL user=philhoyt ]

Justified (Full Width) CSS Navigation Menu

Justified menus have been an issue for me. Designers have always given me mocks up which show menu items fluidly filling the width of the layout. If you have ever attempted to do this in practice you will know it is more difficult than it sounds, especially if the number of menu items changes during dev. The above code attempts to solve this issue using flexbox which works really great with modern browsers and an IE 9 fallback using display:table which doesn’t work in Firefox because WHY on earth would you want to apply position:relative to an element with display:table-cell #sarcasm.