With examples to help you implement it

Striped pattern
Striped pattern
Photo by Daryan Shamkhali on Unsplash.

Have you ever come across code where some function was suffixed with Adapter? Chances are that you were reading code incorporating compatibility in behavior between two interfaces using the Adapter pattern. This article will go over the Adapter pattern in JavaScript and explain why the pattern is important and why it can be beneficial in modern programming.

The way the Adapter works is that you create a function (which can be a class, but it doesn’t have to be implemented as a class) that adapts its interface’s properties and methods into a new class seamlessly — as if the adapter can still be identified and behave like the original while at the same time being able to work with the new interface. …


Extending the Error class

Image for post
Image for post
Photo by Romson Preechawit on Unsplash.

It is important to keep in consideration the different scenarios in which errors could occur while writing your code. They play an integral part in your web application because you can avoid deadly scenarios (like your application crashing completely) that would otherwise not have been avoided if left unhandled.

This article will go over some best practices for controlling errors and handling them in JavaScript.

Extending the Error

It’s often useful to provide a more descriptive error inside your error handlers. And by this, I don’t just mean writing your error message clearer. What I’m referring to is to extend the Error class.

By doing this, you can customize the name and message property that will be useful for debugging as well as attach custom getters, setters, and methods that need…


Functions and composability

Image for post
Image for post
Photo by Shahadat Rahman on Unsplash

JavaScript is widely known for being extremely flexible by its nature. This article will show some examples of taking advantage of this by working with functions.

Since functions can be passed around anywhere, we can pass them into the arguments of functions.

My first hands-on experience with anything having to do with programming in general was getting started with writing code in JavaScript, and one concept in practice that was confusing to me was passing functions into other functions. …


Better composition

Image for post
Image for post
Photo by Luca Bravo on Unsplash

JavaScript is praised for its unique ability to compose and create functions. That’s because in JavaScript, functions are first-class citizens, meaning they can be treated as values and have all of the operational properties that others have (like being able to be assigned to a variable, being passed around as a function argument, or being returned from a function, etc.).

We’ll be going over five critical tips to compose event handlers in React. This article won’t cover everything that’s possible, but it’ll cover important ways to compose event handlers that every React developer should know at a minimum.

We’re going to start with an input element and attach a value and onChange prop to start…


Thinking of render phases as little, isolated worlds

Image for post
Image for post
Photo by Émile Perron on Unsplash

If you’ve been a React developer for a while you might agree with me that working with state can easily be the biggest pain in your day.

So here’s a tip that might help keep you from introducing silent but catastrophic errors: Avoid closures referencing state values from their callback handlers.

If done right, you should have no problems dealing with state in callback handlers. But if at just one point you slip and introduce silent bugs that are hard to debug, that’s when the consequences begin to engulf time in your day that you wish you could take back.

With that said, we’re going to look at an issue in code that will show us a common problematic scenario when we work with state. The code example ahead will show a component App. …


Useful yet generic components

Image for post
Image for post
Photo by Ramón Salinero on Unsplash

React is a popular library that developers can use to build highly complex and interactive user interfaces for web applications. Many developers that utilize this library to build their apps also simply find it fun to use for many great reasons. For example, its declarative nature makes it less painful and more entertaining to build web apps because code can become predictable and more controllable in our power.

So what makes it less painful then, and what are some examples that can help demonstrate how React can be used to build highly complex and interactive user interfaces?

This article will go over maximizing the capabilities of reusability in React and provide some tips and tricks you can use on your React app today. It will be demonstrated by building an actual React component and explaining step by step why some steps are taken and what can be done to improve their reusability. I would like to stress that there are plenty of ways to make a component reusable. While this article will explain important ways to do this, it does not cover all of them. …


Here, injection is a reverse of control

Image for post
Image for post
Photo by Ayooluwa Isaiah on Unsplash

JavaScript is capable of many techniques due to its nature in flexibility. In this post, we will be going over the dependency injection container.

This pattern actually provides the same goal as dependency injection, but in a more flexible and powerful way by acting as the container that houses dependencies of functions (or classes) that require them in times they need it, such as during their initialization phase.

Dependency Injection Without the Container

Let’s quickly refresh our minds on what dependency injection is, what it looks like in code, what problems it solves, and what problems it suffers from.

Dependency injection is a pattern that helps to avoid hard coding dependencies in modules, giving the caller the power to change them and provide their own if they wanted to, in one place. …


There are many different ways to work with your components

Image for post
Image for post
Image by Piotr Siedlecki on PublicDomainPictures.net

It’s a great time to be a web developer — as innovations continue to erupt rapidly, especially in the JavaScript community.

React is an incredible library to build complex user interfaces, and if you’re new to React, then this article might help you understand how powerful it is for web developers. And if you’re not new to React, then you’ll probably not find anything new in this post, but, hopefully, you might find something new since I’ll be trying to expose both old and new strategies to work with React components.

In this article, we’ll be going over nine ways to manipulate and work with React components in 2020. …


Recursion is an enhancement

Image for post
Image for post
Photo by Joshua Sortino on Unsplash

Recursion is a powerful concept in computer programming where a function simply calls itself. I cannot stress enough how important it is to learn how recursion works as soon as possible after learning the basics.

Understanding the concept of recursion and how to create it will help you think more like a programmer, which can help you write more robust code.

Benefits of Recursion

Generally, when applying recursion in situations, you almost always get these benefits from it:

  1. You save lines of code.
  2. Your code can look cleaner (thus applying clean code practices even if it wasn’t your intention).
  3. It helps save time writing and debugging code. …


The power of composing things also applies to JavaScript

Image for post
Image for post
Photo by Oscar Nilsson on Unsplash

What makes JavaScript my favorite language to write apps with is its ability to compose so many different kinds of functions together that can eventually lead to a working program.

We see JavaScript code everywhere which demonstrates this in different ways.

Composing functions together can become extremely fun, especially when they work. Unfortunately, it’s not always an easy thing to pull off because writing composed code has to be done without any errors or otherwise, it simply won’t run.

In JavaScript, there are rules to composing things, like functions, together.

In this article, we will go over some examples of composing in JavaScript and talk about important concepts that always need to be kept in mind when composing. …

About

jsmanifest

Team Lead Front End Developer for TeleMedicine. Follow and Join Me on my Adventures. https://jsmanifest.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store