CategoryJavaScript

July 20, 2020 — In this article, Kelvin Omereshone is going to be looking at how to use Chakra UI and NuxtJS in building accessible front-end applications. In order to follow along, you should be familiar with using the progressive front-end framework Vue.js with Nuxt. If not, see the Vue.js and NuxtJS docs to get started. In order to make the web more accessible, there are a couple of best practices and standards that you will have to implement in your applications. Learning to implement these standards can seem like a daunting task when you factor in project deadlines and other constraints that you have to work with as a developer. Read more…

July 15, 2020 — In this article, Mike Rogers will introduce you to Stimulus, a modest JavaScript framework that complements your existing HTML. It allowed him to build applications in a way that feels reusable and approachable. While he doesn’t think Stimulus will take over the web like React and Vue have, he thinks it is a worthwhile tool to learn. By the end, you’ll have an understanding of the premise of Stimulus and why it’s a useful tool to have in your backpack. Read more…

July 10, 2020 — Transitions are a nice way to remove, change, or update data in an application because their occurrence adds a nice effect and is good for the user experience. In this tutorial, Timi Omoyeni will look at the different ways to apply transitions in both Vue.js and Nuxt.js applications. Using these transitions in your applications and websites create a better visual experience and sometimes draws and holds the user’s attention while a piece of information is being introduced to or leaving the screen. Read more…

July 8, 2020 — Tauri is a toolchain for creating small, fast, and secure desktop apps from your existing HTML, CSS, and JavaScript. In this article, Kelvin explains how Tauri plays well with the progressive framework Vue.js by integrating both technologies in bundling an example web app called nota as a native application. Read more…

July 3, 2020 — Testing gives confidence in written code. In the context of this article, ‘testing’ means ‘automated testing’. Without automated testing, it is significantly harder to ensure the quality of a web application of significant complexity. Fails caused by automated testing may lead to more bugs in production. In this article, Chidi Orji is going to show you how React developers can quickly start testing their app with the React Testing Library (RTL). Read more…

July 2, 2020 — Statically generated sites or pre-rendering and server-side rendered applications are two modern ways to build front-end applications using JavaScript frameworks. These two modes, yet different, are often mixed up as the same thing and in this tutorial, Timi Omoyeni is going to show you the differences between them. You’ll learn what a server-side-rendered application is, as well as learn about frameworks for creating one, such as Next.js and Nuxt.js. Read more…

June 29, 2020 — In this tutorial, Chidi Orji will show you how to work with Firebase push notifications in the backend and frontend. We’ll set up the notifications system with an Express back-end server. Afterwards, you’ll listen for the notifications in a React front-end app. You will implement the backend first, then move on to the frontend. In that way, you can use whichever section appeals more to you. So let’s get started. Read more…

June 22, 2020 — In this article, we’ll be looking at a new way of retrieving data in React Apps named SWR. This is a set of hooks for remote data fetching that makes things easier, such as caching, pagination, and so on. Read more…

June 17, 2020 — UI or User Interface test is a form of acceptance testing done to verify the user flows of your front-end application. The emphasis of these kinds of software tests is on the end-user that is the actual person who will be interacting with your web application on a variety of devices ranging from desktops, laptops to mobile devices. In this final part of Mirage JS Deep Dive series, Kelvin Omereshone will be putting everything you’ve learned in the past series into learning how to perform UI tests with Mirage JS. Read more…

June 16, 2020 — In this article, we’re going to learn how to use Immer to write reducers. When working with React, we maintain a lot of state. To make updates to our state, we need to write a lot of reducers. Manually writing reducers results in bloated code where we have to touch almost every part of our state. This is tedious and error-prone. In this article, Chidi Orjil going to see how Immer brings more simplicity to the process of writing state reducers. Read more…