MAIS AMOR POR FAVOR

Gatsby Coding Challenge 2021: Styling & Forms

100 Days of Gatsby Code 2021

Gatsby Coding Challenge 2021: Styling & Forms

SHARE:

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 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 no used either of these before. Hopefully you will find my opinion on these useful for your own projects.

Gatsby Coding Challenge 2021: Audio Core Site
Screenshot of my Gatsby Coding Challenge 2021: Audi Core Site

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 optimistations. Preact is a set-and-forget plugin, with no need to refactor any of your React code.

Gatsby is fantastic for SEO optimisation 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 NextGEN 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 a fantastic React library for adding accessible forms to your website. I highly recommend Formik. However, I am no sure I understand the 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 customise. 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

Gatsby Coding Challenge 2021: Audio Core Site
Screenshot of my Gatsby Coding Challenge 2021: Audi Core Site

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 customisations 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.