Hello,
Today I was introduced to the wonders of headless content management systems (CMS). To outline the two: a headless CMS gives developers the flexibility to display and manage content however they choose. It decouples the content from the front end, allowing teams to build with modern stacks like React, Next.js, and Tailwind - with the trade-off of requiring more in-house development and maintenance.
In the case of Sanity.io, you can create, update, and delete content through the admin interface (Sanity Studio), while using its API to connect to any front-end.
On the other hand, a traditional CMS is much more plug-and-play. Platforms like WordPress allow users to quickly spin up websites and manage content directly within their templated system. It's quick, user-friendly, but ultimately limited as the needs of a company grow.
When it comes to scalability and flexibility, headless CMSs are often the natural next step — and today, I tried out Sanity.io.
Sanity.io
Sanity was relatively simple for me to wrap my head around. I followed an extremely helpful and well-made tutorial given by FreeCodeCamp and given by Kapehe Sevilleja. She goes over creating a simple web app with some projects and pages. How to install Sanity, set up the config, define schemas, and map components onto your website. Very informative and relevant for a two year old tutorial, I only had to make a few changes with some type definitions.
The current project involves making the Eversports website look like Momence. I'm trying my best to maintain the Eversports color scheme, and components while converting to a more bubbly, slick, and animated style like on Momence. All the while incorporating Sanity content.
Figma
Another part of the project involves Figma which I have no previous experience with. Here's what I've learned today: Figma is a vector based design editor, similar to Illustrator and XD. It makes it easy for teams to design websites, export classes, SVG images, and design references. It also boasts many built-in libraries with device-specific components.
With a background in digital filmmaking — namely video editing — as well as a personal history with the adobe suite - Illustrator, Photoshop, Lightroom, I found Figma quite easy to pick up. In my current situation it's more a matter of having time to draft a design, but I do see Figma as a useful tool for teams to align their visions and collaborate.
Final thoughts
I enjoy remaking websites and reverse engineering features of websites that I like. The design, the code, it's all fun. Once I've made this Eversports site, I'm sure I'll make a few more after. It's also nice to see the improvement and speed that come with practice. For example last time I deployed a web app with Vercel I dealt with errors and deployment fails for over 3 hours. Today, dealt with it in 10 minutes. It's a climb but it's worth the journey.
Thank you for your time, until tomorrow, goodbye.