Props and PropTypes are an important mechanism for passing information between React components, and we’re going to look into them in great detail here. This tutorial will introduce you to the details about props, passing and accessing props, and passing information to any component using props. However, it’s always a good practice to validate the data we are getting through props by using PropTypes. So, you will also learn how to integrate PropTypes in React.
Read more…
You can get by in NodeJS without properly handling errors but due to the asynchronous nature of NodeJS, improper handling or errors can cause you pain soon enough. This article is for JavaScript and NodeJS developers who want to improve error-handling in their applications. Kelvin Omereshone explains the error class pattern and how to use it for a better, more efficient way of handling errors across your applications.
Read more…
You might be wondering, “Why should I use this instead of the alternatives?” Sapper is based on Svelte, which is known for its speed and relatively small bundle size. In a world where performance plays a huge role in determining an effective user experience, we want to optimize for that. In this article, Daniel Madalitso Phiri will take you through how to build a Svelte-powered static blog with Sapper and Strapi, as well as how to deploy the website to Netlify. You’ll understand how to build a static website, as well as use the power of a headless CMS, with a real-world example. So, let’s get started building our minimal blog, starting with our Sapper front end.
Read more…
Redux is a robust state-management library for single-page JavaScript apps. It is described on the official documentation as a predictable state container for Javascript applications and it’s fairly simple to learn the concepts and implement Redux in a simple app. Going from a simple counter app to a real-world app, however, can be quite the jump.
Read more…
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…
Styled components are “visual primitives for components”, and their goal is to give us a flexible way to style components. The result is a tight coupling between components and their styles. While the component-driven approach has ushered in a new frontier in the way we build web applications, it isn’t without its imperfections — one being its usability and scalability with CSS. This has given birth to a new way to construct and manage our styles in a component-specific manner, otherwise knows as CSS-in-JS.
Read more…
Electron is an open-source software framework developed and maintained by GitHub. It allows for the development of desktop GUI applications using web technologies. In this tutorial, Timi Omoyeni explains what you need to keep in mind when building a desktop application with Vue.js using the Vue CLI Plugin Electron Builder.
Read more…
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…
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…
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…
