Author Blessing Krofegha

September 14, 2020 — GreenSock Animation Platform (GSAP) is a set JavaScript functions that let you tween a value/attribute/CSS property over time and insert these tweens into a timeline for more complex animations. In this article, Blessing explains how GSAP plays well with the React library by integrating its functions into a React component in building an example landing page with a variety of animations. Read more…

August 6, 2020 — Showcasing new product features to users or familiarizing them with some UI functionality in a web app can get tedious, especially when you want users to see a lot of things. In the following guide, BLessing Krofegha will show you how to proactively use product tours to onboard users into a new and complex UX, and how to familiarize them with UI functionality without boring them, using a typical React app. Read more…

July 29, 2020 — Ever tried interacting with a GraphQL server in a client-side application and felt like giving up even before getting anywhere? Ever declined an invitation to join a code base that requires working with GraphQL API because you had no idea? Ever felt like the only front-end engineer who hasn’t learned how to consume GraphQL APIs? If you answered yes to any of these questions, then this tutorial is for you. We’ll be taking a closer look at a few basics of GraphQL and Apollo Client, as well as how to work with both of them. By the end, we’ll have built a pet shop app that uses Apollo Client. Then, you can go on to build your next project. Read more…

May 11, 2020 — In this article, Blessing Krofegha introduces Typescript, a superscript of JavaScript that presents the static type feature for spotting common errors as developers codes, which enhances performance, hence results in robust enterprise applications. You’ll also learn how to efficiently set up TypeScript in a React Project as we build a Money Heist Episode Picker App, exploring TypeScript, React hooks such as useReducer, useContext and Reach Router. Read more…

April 28, 2020 — Light mode is a convention in most web and mobile apps. However, in modern development, we have seen how dark mode, which displays light text and interface elements on a dark background, is quickly becoming a user preference. In this article, Blessing Krofegha will show you how to efficiently implement dark mode in a React app on a simple web page, using the styled-components library and leveraging some React features like hooks. We will also discuss the pros and cons of dark mode and why it should be adopted. Read more…

April 20, 2020 — Skeleton screens offer a better user experience by reducing loading-time frustration. By focusing on progress instead of wait times, it create the illusion for users that information will be incrementally displayed on the screen. In this tutorial, Blessing Krofegha will show you what a skeleton screen UI is and some types of skeleton screen libraries, along with their pros and cons. We’ll build a YouTube-like skeleton screen UI using React Loading Skeleton. Then, you can experiment on your own with the skeleton screen React package of your choice. Read more…

April 1, 2020 — In this article, Blessing Krofegha introduces the concept of the headless CMS, a backend-only content management system that allows developers to create, store, manage and publish the content over an API. It gives developers the power to quickly build excellent user experiences, free from the worry of its impact on the back-end business logic. Read more…

February 24, 2020 — In this article, Blessing Krofegha introduces Tailwind CSS, a CSS library that gives you all of the building blocks you need to build bespoke designs without opinionated styles. With Tailwind CSS, you get to create the components that suit what you want or what you are working on. These components can be created by harnessing the power of the utility-first prowess of Tailwind CSS. You’ll also learn how to seamlessly set up Tailwind CSS in a React project. Read more…