Gatsby Coding Challenge 2021: Styling & Forms # Gatsby Coding Challenge 2021: Styling & Forms #

100 Days of Gatsby Coding Challenge #

Following on from the recent post on the Gatsby Coding Challenge 2021, here's an update. The challenge involves building a website for a fictional startup, AudioCore. This post brings us up-to-date with the latest step. The first step involved creating a very basic shell with few features. So it was exciting to get my sleeves rolled up and do some styling and also add a form. In this post, we quickly look at what this latest step involved, then take a closer look at a couple of the services. The challenge involved me using Chakra UI and Formium. I had not used either of these before. Hopefully you will find my opinion on these useful for your own projects.

Gatsby Coding Challenge 2021: Challenge 2 #

The 100 Days of Gatsby Coding Challenge 2 involved fleshing out the site a little. The tasks included adding styling to the site and setting up a contact page with Formium. On top, I added Progressive Working App functionality. PWA adds a number of features, including making the site available offline and an ‘Add to Home Screen’ feature. On top, I added Preact to speed the page up as well as some SEO optimizations. Preact is a ‘set-and-forget’ plugin, with no need to refactor any of your React code.

Gatsby is fantastic for SEO optimization as well as speed. The plugin ecosystem also makes it easy to add PWA functionality. The new image API is marvellous too. Adding WebP or AVIF Next-Gen image formats is a breeze, as is art direction and responsive image sizing. These are all quite easy to set up with minimal effort and on top there is great documentation on the Gatsby site. So I will focus on styling with Chakra UI and Formium form setup for the rest of the post.

Formium #

Formium comes from the makers of Formik, which is an incredible React library for adding accessible forms  to your website. I highly recommend Formik. However, I am not sure of a use case for Formium in this project. It is well-designed and integrates nicely with the Gatsby through the GraphQL API. Basically, you set up a Formium account and define your forms on the platform. It acts like a Content Management System for your forms. In your app, you use a GraphQL query to pull your form from Formium servers.

The service generates a form which you can import into your React component with only a couple of lines of code. You do not have to use the form as provided by the Formium server and can customize. An issue I had was that I seemed to have connectivity issues to the Formium server from my dev machine. This stopped the dev process from running, and I wasn't able to do anything on the site without removing the query whenever this happened. I have to say, it was a little irritating. Contentful comes with downloadLocal option lets you keep a local cache of remote files. I think this is an important missing feature from gatsby-source-formium  .

Netlify Forms #

Apart from the connection issue, I am not sure of the use case for Formium. For a project which already had a CMS, I would probably define the forms there (in the purpose built CMS) to simplify things. That would be instead of setting up content on Formium. You're probably thinking I would still need a service to submit the form data from my static site. Again, this is something I would not use Formium for because it is so easy to set up with Netlify forms  . Perhaps I am missing something, but based on my current understanding, I do not think Formium will be top of my list of services to add to a new project. Let me know if you have a good use case, so I can update.

Gatsby Coding Challenge 2021: Chakra UI #

I liked Chakra. In fact, I loved it! At first there was a bit to take in, but it is still quite easy to pick up. Essentially, you set styling on your React components. The library has a huge collection of components which you can easily integrate into your code.

The documentation is quite good too. Although you don't need to write CSS directly, you can add styling customizations defining your own theme. This saves you having to set text colour or background colour, for example, on elements. It integrates well with react and has a lot of nice features. For instance, setting properties responsively is easy. You define your breakpoints as an array in the theme (or use defaults). Then whenever you want to set a margin for an element, for example, you pass an array which sets the margin for each responsive screen size.

Do you Want to Learn more about Chakra UI? #

There are a lot of other great features besides the ones already mentioned. However, there isn't enough time to go into details here. Let me know if you think I should write a post on creating accessible Gatsby sites using Chakra. Anyway, if you haven't yet tried Chakra, I highly recommend it. To see the current code visit the Rodney Lab GitHub page  . The site is live at rodneylab100daysofgatsbymain.gtsb.io  .

Gatsby Coding Challenge 2021 Part 3 & 🙏🏽 Feedback #

I can't wait to get started on the third part of the challenge. Hopefully I get to try more new services and further improve on the site. I hope you have found this post interesting and useful. Feel free to share it on your social media accounts for all your followers who might find it useful. Are you doing the 100 Days of Gatsby Coding Challenge too? Let me know your thoughts on the second step. Also let me know your thoughts on Chakra UI and Formium. Let me know via @askRodney on Twitter or askRodney on Telegram  . Alternatively, see other ways to get in touch with Rodney Lab. If you have found this post useful and can afford even a small contribution, please consider supporting me through Buy me a Coffee.

We post regularly on online privacy and security hacks, as well as Gatsby JS and website development. Subscribe to the newsletter to keep up-to-date with our latest projects.