Using Airtable to learn React

Posted on Published

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.

Fullscreen Masthead

Posted on Published

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 ]