Posts by Francis Agulto

When you’re building a WordPress site — whether it’s a personal blog, documentation hub, or a business page — optimizing your images makes all the difference in a great user experience, site performance, and accessibility. One of the most critical components of image accessibility is the alt attribute (often called…

When you build a developer-focused site — whether it’s documentation, a personal blog, or a knowledge base — using MDX (Markdown with JSX) can streamline content creation and encourage community contributions. MDX is especially powerful in Next.js, thanks to the new App Router structure, which allows for file-based routing combined…

In Part 1, we’ll set up WordPress as a headless CMS with WPGraphQL, grab our public ID data from our specific Cloudinary assets, and create the custom field in WordPress that is necessary to link the Cloudinary asset ID’s to WordPress and Astro.  In Part 2, we’ll put everything…

In web development, combining the flexibility of headless CMS with modern frontend frameworks and asset management tools is essential for building scalable, high-performance websites.  This is a two-part blog post that will walk through building a website using headless WordPress, Astro, WPGraphQL, Advanced Custom Fields, and Cloudinary. We’ll combine the…

In web development and content creation, optimizing media for site performance is a must to enhance the user experience. One commonly used media format for short animations is the GIF. While GIFs have their place, they can be resource-intensive, leading to slower page loads and increased bandwidth usage. An effective…

React’s new compiler introduces a groundbreaking advancement in performance optimization by automatically memoizing components and hooks during the build process. This reduces unnecessary re-computations, enhancing the efficiency of updates. Memoization is crucial for optimizing performance, especially in applications with heavy rendering requirements. In this blog post, we’ll explore React’s new…

Figma is a cloud-based design tool that enables users to create, collaborate on, and share interface and graphic designs. It provides features for UI/UX design, such as vector graphics creation, prototyping, and code generation, and is known for its real-time collaboration capabilities, allowing multiple users to work on the same…

The WooCommerce plugin for WordPress is free, open-source, and makes it easy to build an e-commerce site. With the plugin, you can build an e-commerce site on top of your WordPress site and add functionalities such as a shopping cart or product data types. When you have an online store,…

The Next Cloudinary library, created and maintained by my good friend Colby Fayock, allows you to easily use components out of the box within the library with these features: Automatically optimize images and videos and deliver in modern formats. Remove backgrounds from images. Dynamically add image and text…

In Part 1 of this two-part article, we’ll set up Supabase, Cloudinary, and our backend for data consumption with security. In Part 2, we’ll put everything together by looking at our Next.js 13 repository made for this article and its authentication concepts. Getting Started Note: Ensure…

Security is a critical functionality on websites and applications. The need to gate content to specific users is important, especially when creating an application that requires some form of authenticated user base and that user base’s ability to access certain data, not meant for general public use. This is a…

Image optimization is important in delivering an efficient user experience in web development. The integration of WordPress as a headless CMS with front-end technologies has empowered developers to build responsive and dynamic web applications. However, managing and optimizing images within this headless architecture has its challenges. The Cloudinary WordPress plugin…