DEV Community: Al - Naucode

How I was able to improve my clients satisfaction by 10x 🪄

Al - Naucode — Mon, 27 Feb 2023 14:05:48 +0000

Today is the time to talk about something that probably is happening to some of you. I work as a freelancer and do full-stack development gigs; although I like doing front-end stuff more, but there is something that always gives me issues: Receiving feedback from not tech-savvy clients.

For them, it is complicated to explain what is wrong, but for me (like for any developer), it is complicated to fix something when I don't know what they want to change.

Trying to solve my biggest issue as a front-end freelancer

To help them on that task, I have tried many things: Trello cards, a Notion board, leaving comments in a Figma file, and even getting them to record a video with Loom pointing in the UI with their mouse what they want to change.

But no solution was perfect; they all had their struggles, and I did not like to make their lives more complicated, so they hired me to help them!

But this week, everything changed. I decided to try Livecycle.io, a platform that allows me to collaborate with my clients on live PR previews in real time. If you are in a rush and don't want to read the entire article, Livecycle.io has helped me improve my client communication, streamline my workflow and increase client satisfaction by 300% (well, not sure if that is the real number since I can not measure it, but they were really happy!).

But if you want to enjoy a good read, in this article, I will share with you how I use Livecycle.io now with all my clients and why you should try it, too (it is free to try!).

A solution could be here

As I said, I fell in love with this tool. I could go over all its features, but... that is not the article's point; the main topic is to show you how I use it.

Basically, with this tool integrated into your project, you can have a UI in the project that your clients (or maybe teammates) can use to give feedback on the web app in an easy way.

But the good thing for me (and for you, as a developer) is that the feedback is automatically synced to the project's GitHub repo in the PR you are testing. So you get all the feedback and comments in a single place that you should check every day (😉), and your clients don't need to learn new "complicated things." It is a win-win, isn't it?

Time to integrate it into my project

Obviously, I have already integrated it into one of my projects (or I wouldn't be writing about it). Still, I think the best way to learn about something is by trying it by yourself, so this will be something like a short guide so you can register for the trial and install it in some of your projects. Enjoy!

The very first thing you have to do is to register on their website. You just need to go to https://livecycle.io/ and click on the big blue button that says "Try it now":

Once you click that button, you will be prompted to register, I picked my Google account, but you can choose any of them:

Once you are in, follow the wizard to finish the account setup (it will be mostly things like creating a new organization in your account and connecting the project repo, nothing complicated).

Now, it is time to connect to your project. In my case, I want to connect it to an admin dashboard I am building for one of my clients. I want them to be able to give me UI feedback easily, so it seems like the perfect solution!

Click in the left sidebar, under the Repositories section, to connect your repo. You will need to follow the steps given by the wizard, and in less than 5 minutes, you will have the repo connected.

In my case, the dashboard is coded in React, so to integrate LiveCycle SDK in my project, I need to install its NPM package (as suggested by the handy wizard). Let's do it.

The very first step is to create a branch for Livecycle in your project. To do that, I went to my main development branch and executed this command:

git checkout -b livecycle-sdk

Now we have our "testing" branch, so it is time to install the SDK there. Use any package manager to do that; in my case, I will use yarn:

yarn add @livecycle/sdk

There is only one step left! We have to initialize the SDK. To do that, paste the code given by the wizard into the root app file of your project (if you are using any other framework, you will have the instructions in the installation assistant, don't worry):

In my case, the code looks like this:

If you need more info about how to add it to your project, I recommend you to check their official docs here.

All the code is ready! Now just push the branch changes and open a new pull request. That is important because inside that pull request is where you will find all the feedback your clients send you!

The PR must be the livecycle-sdk branch to your development branch. Once you have created it, jump to the next step.

Linking your Pull Request to LiveCycle SDK

The final step is here; it is now time to let Livecycle know which is the pull request where you want to receive the feedback.

In the installation wizard, if you click next, you will see this step explained, but basically, you have to let Livecycle know where is your preview environment. If you are deploying your project in one of their supported platforms, the process is automatic; in any other case, you can do it manually with just one command!

In my case, the project is hosted in Vercel, one of their supported platforms, so the installation was just one click. That is cool.

After that, we see the message that every developer loves to see:

A well-done screen!

Playing in the Playground

If we open the playground, we can start receiving feedback, so I did it:

Once you open it, you have a short wizard explaining different functions, and after that, you can start playing.

One of the most frequent feedbacks I get from my clients is about changing some styling properties. Sometimes they tell me: "I would like that header bigger." But... how much? They don't know because they don't know about font sizes.

With this tool, that is no problem anymore since they can edit the page with just sliders and buttons; no code is required. That's so cool.

Imagine my client wants to give the following feedback: "The profile card should have a bigger title and more space between the text lines. I would also like the background darker."

Well, now they can just edit and post the feedback!

After that, they just have to post it, and I automatically get all the new feedback in the GitHub pull request, with the CSS code that changed and before and after images:

What do my clients think about it?

It is usual that when a dev finds a cool new feature, the rest of the world thinks that the new feature is complicated and prefers to use the old method. So when I started using this solution, I was worried because even if I thought this was useful, maybe my clients would prefer using the old methods, even if they were way worse.

But I was really happy to hear from them that thanks to the assistant you see when you open for the first time the playground, they were able to understand the entire process, and in a few minutes, they were already posting some feedback.

My final thoughts

Well, as you can read, I am pretty happy with this finding. Obviously, it might not be useful for you. But you should at least try it. I mean, it has a free trial, takes no more than 5 minutes to install, has good documentation, and does its work as intended.

If I were going to improve something from their tool, it would be just adding a more prominent overlay to the wizard that opens in the playground screen because it is just a small pink bubble that you have to click to read the message, and the first time my client went to the playground, he didn't notice it. But... it is just a minor UI thing, which I have already reported (as feedback) to the team.

Oh, and that is another cool thing. I just sent that e-mail, and in less than 10 minutes, I got a reply. Only for that stupid little thing. So, that is a good thing for any product I intend to use since I can expect them to help me with more important problems.

But, whatever, it is time to end the post; I am not trying to bore you or write a book about this. Take this just as my personal experience. A good one but a personal one. Make sure to try it by yourself; it will be worth it! 🪄

🌎 Let's Connect!

My Twitter: @thenaubit
My Substack (here I publish more in-depth articles)

Unleash the Power of Your Data: 6 ES6 Array Functions You Need to Know 🚀

Al - Naucode — Mon, 06 Feb 2023 02:43:41 +0000

New day, new daily article! Yesterday we talked about some custom React hooks, but today it is time to talk about arrays.

Yeah, I know, it might sound boring but trust me, it is not. Today I will show you 6 ES6 methods we can find in arrays that you might not know and that are really useful.

Obviously, you can do the same without these methods, but... hey, this simplifies your life (and it is cool), so why not give them a try?

Well, time to start!

🔍 Map

This is a classic. You have probably used this one, but... I had to talk about it just in case.

The .map() function creates a new array by manipulating every element in the original array and returning a new array with the results.

This is useful for transforming arrays in an easier way to work with or visualize.

As always, here is an example:

By the way, since map builds a new array, calling it without using the returned array is an anti-pattern; use forEach or for...of instead.

🔗 More knowledge

💡 Filter

This is really cool. Instead of "transforming" the items like in the map function, here, we filter the array (as its name says). Basically, it creates a new array with all elements that pass the test implemented by the provider function. So yeah, it filters out any elements in the original array that don't meet a specific condition.

Now, one example:

In that example, we are filtering out the numbers that are not even in the array.

🔗 More knowledge

🔢 Reduce

Now one I really like. The .reduce() function. I*t reduces the array to a single value* by iterating through the array and applying a provided function to each element. This function is often used to sum up, all the elements in an array or to find the max or min value.

In this one, I am just getting the sum of all the numbers in the array. That easy.

🔗 More knowledge

💬 Find

This one is also used a lot. The .find() function returns the first element in the array that satisfies the provided testing function.

It is awesome for searching for a specific element in an array.

In this one, we find the first even number in an array.

🔗 More knowledge

🔃 Every & Some

.every() and .some() are similar to .filter() since they test elements in an array against a provided function.

So, what is the difference? Well, .every() returns true if all the elements in the array pass that test. And as you would expect, .some() returns true if at least one element passes the test.

Let's see an example using .every() to check if all elements in an array are even numbers:

And now, let's check an example of using .some() to check if there is at least one odd number in an array:

🔗 More knowledge about every and some

So, that is it! Well, not really. There are more helpful functions there, but I didn't want to create a long post. With this article, I wanted to show you that there are excellent functions that you can always find in the docs. But there are more! For example, you could check the flat function.

But no worries, I have more exciting articles coming soon. I publish one every day, so... make sure to follow if you want these little JS pills every day!

🌎 Let's Connect!

My Twitter: @thenaubit
My Substack (here I publish more in-depth articles)

5 Custom React Hooks That Will Transform Your Code 🤖

Al - Naucode — Sun, 05 Feb 2023 02:10:42 +0000

Yesterday after finishing my daily article (yeah, I publish a new article about front-end development every day, so make sure to follow if you want a daily pill of code 😉), I went to code for a little and... I started coding some custom hooks for a side project I am building (I am talking about it on my Twitter: @thenaubit).

I realized there are lots of really useful custom React hooks. So I am starting a new series where I will post some of those (coded by me or found on the Internet and converted to TypeScript).

And if you have done one that you are proud of, feel free to share a gist link in the comments, and I will add it to the following article!

1️⃣ useWindowSize Hook

I am pretty sure you have needed to get the width and height of the user's window in some projects you have worked on.

Well, now you have a hook for that, so you can do it even easier than before!

This hook can be particularly useful when implementing responsive design, and for some reason, you need to run some specific code in some resolutions!

2️⃣ useKeyPress Hook

The next hook lets you detect when a specific key is pressed. This can trigger events or actions based on the key pressed. For example, for closing a modal, submitting a form... you know, there are lot of options.

Of course, I will give you an example of how to use it:

const closeModalKeyPress = useKeyPress("Escape");

Yeah, it is that easy.

3️⃣ useInterval Hook

This hook allows you to use the famous setInterval function as a hook! Like the setInterval function, this hook has many uses, like animations, updating data at regular intervals, or even setting a timer.

You can use this hook like this:

const [count, setCount] = useState(0);

useInterval(() => {
  setCount(count + 1);
}, 1000);

4️⃣ useDebounce Hook

Now we will talk about one for debouncing functions. If you don't know what it is, basically the function will only be executed after a certain amount of time has passed without it being called.

This is useful, for example, for rate-limiting API calls or state updates on input changes, like when you are typing some text in a search input.

A usage example would be:

const [inputValue, setInputValue] = useState("");

useDebounce(() => {
// make API call
}, 500);

5️⃣ useThrottle Hook

The previous one was a debounce hook, and now it is the turn of a throttle hook.

As its name says, it is a hook to throttle a function. It means it will be executed once per every specified interval of time. This can be useful for preventing too many API calls or events from being triggered in rapid succession.

An example would be:

const [inputValue, setInputValue] = useState("");

useThrottle(() => {
// make API call
}, 500);

Well, we reached the end of the article, but before you go, I want to say a few extra key things.

The first one is these hooks are examples, just like any other code you find on the Internet. You should not just copy and paste them into your project. You should read them, understand them and improve them!

With that being said, I really enjoy writing this kind of article, so if you also like them, make sure to follow and like them. That way, I will know people want more, and we will have more. Oh, and as I said at the beginning of the article, if you have some little hooks you like, share them here; I want to add them in the next post!

🌎 Let's Connect!

My Twitter: @thenaubit
My Substack (here I publish more in-depth articles)

7 Small & Underrated React Libraries 🔥

Al - Naucode — Fri, 03 Feb 2023 21:59:38 +0000

Hey! Welcome back to my daily article! Today we will talk about React. But not about React.js concepts, best practices, or so. Today I will talk about 7 small and underrated React libraries that I like to use and that you might like.

Of course, you may already know some of them since I didn't pick the smallest ones. I tried to balance being less known and popular enough to be maintained.

Also, you probably have others you know, so feel free to answer to share yours; I will try to add them to the following article of this series!

1️⃣ React Testing Library

It is a lightweight testing library that makes it really easy to test React components. Oh, it also provides a simple and intuitive API for testing them, making the process even easier!

It is designed to be used with Jest, a popular testing framework for React.

As always, here is a code example using it (don't worry, after the example, you have a link to the project, so you can check it in depth):

🔗 Official Website

2️⃣ React Hook Form

This is a cool one. This is a library that makes really easy to handle form state in React.

Basically, it provides a simple API for handling form state and validation, and it is built using React hooks.

Another pro is it has a small size and is very efficient! (It also works in React Native)

🔗 Official Website

3️⃣ React Scroll

As you will expect, this library is for scrolling. Basically, it helps to implement smooth scrolling in React apps. It provides an easy API (but with lots of optional settings) and is lightweight.

🔗 Official Website

4️⃣ React Transition Group

This one is for implementing animations. Well, not every kind (for that, I recommend checking Framer Motion) but transitions.

If you need quick and easy animations, I recommend checking this one.

🔗 Official Website

5️⃣ React Lazy Load Image Component

Well, this one already says what it does in the title, but yeah, it helps implement lazy loading for images in your React app.

As you may know, it can help improve your website's performance by only loading images when needed. Quick and easy.

🔗 Official Website

6️⃣ React Easy Edit

Now we have a library that you will use in very few particular cases, but hey, it is always good to know!

It is a library for implementing inline editing in React. It is really easy to use.

🔗 Official Website

7️⃣ React Beautiful Dnd

This library is not that small, and it is very popular but... I really wanted to add it. I know there are lots of "drag-and-drop" libraries out there, but this one is really easy to use; it is beautiful and customizable. Oh, and done by Atlassian (the creators of Trello and Jira, both apps use this library).

No code example since it is better to check all their examples here.

🔗 Official Website

So, yeah, that is all the article. A short one, but I hope it was helpful and that you discovered at least one exciting library. I really enjoy doing this series; I will continue publishing more soon so... make sure to follow if you liked it!

And if you know others small libraries like these, share them here so I can test and add them to the next article!

🌎 Let's Connect!

My Twitter: @thenaubit
My Substack (here I publish more in-depth articles)

💻 7 Tips for Writing Clean and Efficient React Code

Al - Naucode — Thu, 02 Feb 2023 22:54:09 +0000

Hey! Welcome back to my daily article! Today I will talk about some tips for writing clean React code.

Obviously, as always, people will have their own opinions, and you might not like these. Heck, I might even change my opinion in a few months! Who knows. These tips are helpful today, and I wanted to share them with you.

💡 Tip 1: Use functional components instead of class components

As I said in another article, functional components are the current standard in React, so almost everyone uses them. But in case you are following some old tutorial, or you were wondering which one to use... use functional components.

They are a more straightforward and concise way to define components!

Also, they are faster and easier to understand, especially for a junior developer.

Here you have a basic React component coded as a class component:

And here, you have the same component but as a functional component:

💡 Tip 2: Use the `useState` hook for state management

Well, this one is stupid if you are already using functional components, but just in case, yeah, use the useState hook for your state.

Here is an example:

In this example, I am using the useState hook to store the current count (the count var), and I also got a function (setCount) to update the count.

So this allows me to manage the state in my components without needing class components or complex state management libraries.

In case you want to read more about it, check this doc!

💡 Tip 3: Use the `useEffect` hook for side effects

Another pretty obvious if you are already using functional components, but... always good to remember.

This hook is a powerful tool for handling side effects in React components. Basically, it allows you to perform actions after a component has been updated, such as making API calls or updating the DOM.

As always, here you have an example using the hook:

In the previous code, I used the useEffect hook to fetch data from an API when the component is mounted. The hook's second argument is an array of dependencies that determines when the effect should be rerun.

In this case, an empty array means the effect will run only once when the component is mounted.

💡 Tip 4: Use destructuring to simplify code

One of the most powerful features in the latest Javascript versions, this is not only a React feature; you can use it everywhere in Javascript. And you should!

It allows you to extract values from objects and arrays. For example, you can use it in React to simplify your code and make it easier to read.

Of course, I will share an example of restructuring in a functional component:

In this example, the message prop is destructured from the props object, making it available as a separate variable.

As you can see, this allows you to simplify the code (you don't need to write everywhere something like props.message) and thus, making it easier to read.

💡 Tip 5: Use memoization to improve performance

I know that I am always talking about this in the latest articles, but... I really love it, and when done right, it improves a lot the performance of a web app.

So I had to include it again here.

Memoization is a technique for optimizing the performance of your React components by avoiding unnecessary re-renders. You could use the React.memo higher-order component or the useMemo hook to memorize components.

And yeah, here is an example:

In this example, the React.memo higher-order component is wrapping the component and memoizing it, so it will return a cached component if the value of the message prop is not changed.

Of course, this is not a heavy component, so this optimization won't give real improvements, but... it was a simple way to showcase it.

If you want to read more about the right ways to do it, I really recommend checking this.

💡 Tip 6: Use the `key` prop to improve performance

Maybe you have seen a warning in the dev console related to this one, so... it is a good one to know.

The key prop is a special prop in React that allows you to optimize the rendering of an array of components.

By specifying a unique key for each component in an array, React can keep track of which components have changed and only update the ones that need to be updated, improving the performance.

Less talk and more examples!

In this example, we render each item inside the array as a li element. And we are setting a key prop for each one based on the id we got on their objects.

Usually, if you do this without the key prop, you will see a warning in the dev console advising you to add a key prop. So probably you have already seen this.

These are the basics of this prop, but if you have some spare time, I recommend checking its docs here.

💡 Tip 7: Use inline styles sparingly

Some people will agree with this tip; others will hate me. But it is ok; I think this one is important for a clean codebase.

Inline styles can be helpful in certain situations but can also lead to maintenance headaches and poor performance. It is generally better to use CSS stylesheets (or even UI kits, Tailwind, you know...) to style your components and keep your code organized and maintainable.

Of course, you can prototype quickly doing inline styles but moving your code to something better (like CSS modules) before going to production!

As I said, a controversial tip.

As with every article, this one should have a conclusion. And the conclusion is that writing clean and efficient React code is crucial for your application's success (and for your fellow developers' mental health). But not only that, it will make your life easier once you get used to these practices.

And as always, these tips are not the absolute truth, and you could disagree. Knowing them and having your own opinion about them is important. I hope this gave you some thought material, and always, thanks for reading!

🌎 Let's Connect!

My Twitter: @thenaubit
My Substack (here I publish more in-depth articles)

🚀 5 Advanced ES6 Features Every JavaScript Developer Should Master

Al - Naucode — Wed, 01 Feb 2023 22:34:39 +0000

New day, new article! Today's article is about five advanced Javascript ES6 features that I like and that I think everyone (at least every developer) should understand.

Are you ready?

💡 Destructuring

Destructuring is a quick way to get values out of objects and arrays. For example, you can extract values and assign them to variables with a single line of code.

Here's an example of how destructuring can be used with an object:

And here's an example with an array:

As you can see, destructuring makes it simple to extract values from objects and arrays and assign them to variables.

🔒 Block Scoping

You can use block scoping to declare variables that are only available within a specific block of code. There are two ways to declare variables in JavaScript: var and let.

The var keyword declares a global or function-scoped variable, which means it can be accessed from anywhere within the same function. On the other hand, the let keyword declares a variable that is block scoped, which means that it can only be accessed within the same block of code.

Here's an example of let-based block scoping:

As you can see, the message variable is only available within the if statement-defined block of code.

🚗 Spread Operator

Spreading the values of an array or object into a new array or object is possible with the spread operator. It's a quick way to combine arrays or objects or to turn an array-like object into a proper array.

Here's an example of how to combine two arrays using the spread operator:

Here's an example of how to use the spread operator to transform an array-like object into a real array:

A spread operator is a powerful tool for simplifying and improving the readability of your code.

🔮 Template Literals

String literals that allow you to embed expressions within your strings are known as template literals. Instead of quotes (' or "), they are defined with the backtick (`) character.

Here's an example of template literals in action:

As you can see, template literals make it simple to embed expressions within strings and allow you to write multi-line strings without using string concatenation.

💾 Arrow Functions

In JavaScript, arrow functions are a shorthand syntax for writing anonymous functions. They enable you to write code that is shorter, more concise, and more readable.

Here's an example of how to use the arrow function:

As you can see, arrow functions make it simple to write anonymous functions and have a shorter syntax than regular functions.

It was a short article, but I hope it was helpful for you. I use these features daily and feel like they are crucial for every Javascript developer. So hopefully, you have discovered something new today.

🌎 Let's Connect!

My Twitter: @thenaubit
My Substack (here I will publish more in-depth articles)

🎯 9 Essential React Hooks Every Developer Should Know

Al - Naucode — Mon, 30 Jan 2023 14:33:41 +0000

Today's post could be controversial since some people could say: "hey, this hook is not that important," but, you know, that is the beauty of the Internet; everyone can say their opinion.

So, these are some hooks every React developer should know and understand. (And if you are a beginner and reading this, don't worry; I added code examples to each one).

React Hooks were introduced in React 16.8 and quickly became essential for any React developer since they made creating maintainable and reusable components much more straightforward.

Today, I will talk about 10 essential ones to know!

💡 useState

The useState hook is the most basic hook in React, being used every time. As you probably already know, it adds a state to your functional components.

The way it works is it returns an array with two elements. The first element will be the current state, and the second is a function that updates the state.

Here you have a basic code example using it:

🔥 useEffect

The useEffect hook is used to perform side effects in your functional components. In other words, it is a function called when some variables change their value.

It has two arguments: the first is a function containing your side effects (what you want to do when those variables change), and the second is an array of the dependencies that we want to watch for changes (so React re-runs this effect).

Time for a code example:

🚀 useContext

The useContext hook is a more advanced hook (compared to the previous two). But it is essential to know it!

It makes it easy to consume context in your functional components. In other words, you can think of context as a way to share data between components without having to pass props down the component tree. So it would be like a state hook shared between components (but only for reading, not updating).

🕹 useReducer

The useReducer hook is used to manage your functional components' complex state and action logic. It takes a reducer function and an initial state as arguments and returns the current state and a dispatch function.

The reducer function is just a function that returns the next state based on the current state and an action.

This is the most similar to the useState hook since it allows reading and writing the "state," but instead of a single state value, you can have an entire state object, which can be accessed anywhere in your application.

Don't worry if it sounds complex; with the following example, you will quickly understand it!

📄 useCallback

The useCallback hook is used to return a memorized callback function that only changes when one of its dependencies changes.

Usually, you use this when you have in your component a heavy function, so you don't want to re-run it in every re-render the component has, only when it is necessary (when the variables used by that function are changed).

As you know, it is useful for optimizing performance!

The way to use it is like this:

🛠️ useMemo

The useMemo hook is used to return a memoized value that only changes when one of its dependencies changes. It is similar to the useCallback hook but is for memoizing values instead of function returns.

Like the other hook, it is useful for optimizing performance since it avoids unnecessary calculations on every render.

A good basic example would be:

In the previous example, we are using the useMemo hook to avoid sorting the data array every time the component is rendered, improving the performance of the component.

📝 useRef

The useRef hook is used to access the value of a DOM element or a component instance in your functional components. It will return an object with a current property that you can use to access that DOM element.

In the previous example, we used the useRef hook to access the input element and set it as focused when clicking the button.

This hook is useful when we need a direct reference to an element (for example, here, getting the focus to the input element).

🔓 useImperativeHandle

The useImperativeHandle hook is less known, but it is useful. It is used to customize the instance value of a forwardRef component.

If you don't know what a forwardRef is, that would be another thing to learn, but I can not explain it in this article since it is out of the scope. But I would recommend you check this doc.

This hook helps expose some internal state or methods of a component to the parent component.

In the previous example, the useImperativeHandle hook is used to expose a custom interface, TextInputRef, to the parent component.

This interface has a single method, focuswhich can be used to set focus on the text input from the parent component.

The parent component could access this method through the ref prop passed to the TextInput component.

🔍 useDebugValue

The last one is another unknown one. The useDebugValue hook displays a custom label for your hook in the React Developer Tools. It takes as its first argument a value, and optionally it takes a formatted function as its second argument.

In this example, the useDebugValue hook provides a custom label for the count state variable in the React developer tools. That label will change depending on the value ofcount , to indicate if the count var is high or low.

As you can see, this can be really helpful in debugging since it provides more context about the state of your component.

We are at the end of the article, and as I promised, we have seen 9 hooks that I feel are important to know. These hooks make it easier to build and manage your React components, and since you can find them in any codebase, it is good to know!

🌎 Let's Connect!

My Twitter: @thenaubit
My Substack (here I will publish more in-depth articles)

5 Basic Tips Everyone Should Know for Optimizing React Performance 🚀

Al - Naucode — Sun, 29 Jan 2023 17:08:15 +0000

React is one of the most used Javascript libraries (or frameworks, or however you want to describe it) out there. But let's be honest; the more complex the project becomes, the more critical it is to optimize its performance.

In today's article, I will talk about 10 little tips I have been using these years to improve the performance of my React applications. Hopefully, you will find some new tricks here!

1️⃣ Use the Production Build

This is pretty obvious, but you will be amazed at the number of projects where I had worked as a freelancer that when I joined, I found t*hey were using the dev build in production*.

When developing your application, you should always use the production build to ensure its best performance. Production builds perform many optimizations like modification and removing dead code (plus some dependencies behave differently depending on which kind of build is calling them).

To use a production build, if you are using CRA or Vite, you can run the npm run build or yarn build command or you can set the NODE_ENV environment variable to production when starting the development server.

2️⃣ Use a Dynamic Import

Dynamic imports are impressive (at least for me) since they allow you to load modules only when needed instead of loading them when the application starts.

As you will think, that significantly improves the initial load time of the application.

Lost of people would use the typical React method with the await import('') method, but I recommend you use a module called loadable-components.

I prefer this module because it dynamically loads modules, but it also code-splits them, and... it loads the modules only when used to render something! So even better.

You would use it like this:

3️⃣ Use Functional Components

Well, this is more of an opinion, but functional components are the current standard for React. Yes, you could still use class components, but you won't be able to use hooks as intended. And let's be honest, that is a core function for the latest React versions!

Plus, functional components don't have the overhead class components, and you can easily implement features like memorization, which can further improve performance.

An example of a functional component would be:

4️⃣ Use Memoization

Memoizing a component is a fantastic way to improve the performance since you will prevent re-renders if the props haven't changed (plus, you can also avoid network requests if it happens you are performing some inside).

As you may know, in React, you use the useMemo and useCallback hooks for this behavior.

For example, if you want to cache a variable only to be updated when some state changes, you could use the following code:

5️⃣ Use a Performance Profiler

No optimization guide could be completed without this advice. All these little tips are helpful (and there are many more you could use), but the key is to determine where the performance loss is happening in your application.

And that is the objective of a performance profiler: to identify bottlenecks in your code.

Luckily, you could use one like the one included in the React Developer Tools extension.

This article has been short, but that was the objective. I want to give you some essential insights into improvements I like to make, but I will start writing a series of articles around React optimization, where we will go in-depth on each technique. So if you are interested in learning more about that, don't forget to follow me!

With that being said, if you wish to connect with me...

🌎 Let's Connect!

My Twitter: @thenaubit
My Substack (here I will publish more in-depth articles)

Ace your next JavaScript Interview with these 7 Common Questions and Answers 💻

Al - Naucode — Wed, 25 Jan 2023 17:53:25 +0000

In this article, I will cover the most common questions you may encounter during a JavaScript interview, providing detailed answers and examples to help you stand out from the competition. Whether you are a beginner or an experienced developer, this guide will give you the confidence you need to impress your interviewer and land the job.

1️⃣ What is JavaScript, and how is it different from Java? 🤔

JavaScript and Java are both programming languages, but they are used for different purposes and have some key differences.

JavaScript is a scripting language primarily used to create interactive and dynamic websites. At the same time, Java is a general-purpose programming language that can be used to create a wide range of applications, including mobile and desktop apps, web applications, and backend systems.

The browser executes JavaScript code, while Java code is typically compiled and executed on a virtual machine or a specific device.

2️⃣ What is the difference between let and var?

var and let are used to declare variables in JavaScript, but they have some key differences in terms of hoisting and scoping. var variables are hoisted to the top of their scope and are accessible throughout the entire scope. let variables, on the other hand, are only accessible within the block they were declared in and do not get hoisted

3️⃣ What is the difference between == and ===?

== and === are used for equality comparison in JavaScript, but they behave differently regarding type coercion. == compares values after type coercion, while `=== compares values without type coercion.

{% embed https://gist.github.com/NauCode/4fcedffd7548ec4195a76f6925f85ec7 %}

It's generally recommended to use === in most cases to avoid unexpected behavior due to type coercion.

4️⃣ What is closure in JavaScript?

A closure in JavaScript is a function that has access to the variables in its parent scope, even after the parent function has returned.

{% embed https://gist.github.com/NauCode/e50c1c4c607c52da76ac620471c53664 %}

In this example, the innerFunction has access to the variable x from its parent scope, the outerFunction.

5️⃣ What is the difference between call and apply?

Both call and apply are used to call a function and set the value of this inside the function, but they have different syntaxes. call takes in the value of this as the first argument, followed by any additional arguments for the function.

{% embed https://gist.github.com/NauCode/1db71ff3db36d33c3bcb10d381d9671f %}

apply also takes in the value of this as the first argument, but it expects the additional arguments for the function to be passed in as an array.

6️⃣ What is an event loop in JavaScript?

JavaScript uses an event loop to handle concurrency and handle events as they occur. The event loop constantly checks the message queue and the call stack. When a function is called, i*t is added to the call stack and executed*.

If any events in the message queue need to be handled, they are added to the call stack and executed. This allows JavaScript to handle multiple events and function calls simultaneously without freezing the main thread.

7️⃣ What is the difference between synchronous and asynchronous code?

Synchronous code is executed line by line, and the following line of code can't be executed until the current line is finished.

Asynchronous code, on the other hand, allows for multiple operations to occur at the same time. In JavaScript, this can be achieved through callbacks or promises.

In the asynchronous example, the for loop is executed after the "Moving on..." message is logged, allowing other code to continue executing.

You have made it to the end of this guide and are now well-equipped with the knowledge and tools necessary to ace your next JavaScript interview. Remember to practice, stay up to date with the latest features and best practices, and, most importantly, be confident. I believe in you and know you will knock your interview out of the park. Good luck! 🍀

🌎 Let's Connect!

Why using just console.log in 2023 is a big no-no 🚀

Al - Naucode — Wed, 07 Dec 2022 06:30:52 +0000

Here are 5 must-know console object methods and tricks!

Are you still using console.log for all your JavaScript debugging needs in 2023?

It's time to upgrade your skills and discover the full power of the JavaScript console object.

From console.table to console.time, these advanced methods and tricks will help you improve the quality and readability of your debug output and make it easier to troubleshoot and fix problems in your code.

So why not join the ranks of the JavaScript ninja debuggers in 2023, and learn these essential techniques? Your code will thank you.

😞 The problem

One of the biggest problems with using just console.log is that it can clutter up your code and make it difficult to read. Additionally, it's not very informative on its own. It just outputs the value of whatever you pass to it without any context or additional information.

With that in mind, here are ten JavaScript console object methods and tricks you should know about (and give them a try; I know it is faster to just console.log, but it can make your debugging experience way better, do it for your future yourself!).

1️⃣ console.table

This method allows you to output tabular data in a readable and easy-to-understand format. Instead of just logging out an array or object, console.table will display the data in a tabular format, which makes it easier to scan and understand.

// Output an array of objects as a table
const users = [
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'Jane Doe' }
];
console.table(users);

This will output the users array in a tabular format, with the properties of each object as columns and the objects as rows.

2️⃣console.group

console.group and console.groupEnd. These methods allow you to create a nested, collapsible group in the console. This can be useful for organizing and structuring your debug output, so you can easily see what's happening at different levels of your code.

console.group('User Details');
console.log('Name: John Doe');
console.log('Age: 32');
console.groupEnd();

This will create a nested, collapsible group in the console with the heading “User Details.” The log messages inside the group will be indented and grouped together.

3️⃣console.time

console.time and console.timeEnd. These methods allow you to measure the amount of time it takes for a block of code to execute. This can be useful for identifying performance bottlenecks in your code and optimizing them.

console.time('Fetching data');
fetch('https://reqres.in/api/users')
  .then(response => response.json())
  .then(data => {
    console.timeEnd('Fetching data');
    // Process the data
  });

This will measure the amount of time it takes to fetch data from the specified URL and parse the JSON response. The elapsed time will be output in the console.

4️⃣console.assert

This method allows you to write assertions in your code, which are statements that should always be true. If an assertion fails, console.assert will output an error message in the console. This can be useful for catching bugs and ensuring your code is working as expected.

function add(a, b) {
  return a + b;
}

// Test the add function
const result = add(2, 3);
console.assert(result === 5, 'Expected 2 + 3 = 5');

This will output an error message in the console if the add function does not return the expected result of 5 when given the input 2 and 3.

5️⃣Style your logs

Use the console object to output styles and colors. The console object allows you to output text in different colors and styles, making your debug output more readable and easier to understand.

You can use the %c placeholder in your console.log statements to specify a CSS style for the output text.

console.log('%cHello world!', 'color: red; font-weight: bold;');

This will output the text “Hello world!” in red and bold, using the specified CSS style.

By the way, if you want even better logs, you might want to use a specialized logging library, which offers more settings. I added a really good one in this article I wrote: https://dev.to/naubit/5-small-and-hidden-react-libraries-you-should-already-be-using-nb5

6️⃣console.trace

Use the console.trace method to output a stack trace. This can be useful for understanding the flow of execution in your code and for identifying where a particular log message is coming from.

function foo() {
  console.trace();
}

function bar() {
  foo();
}

bar();

This will output a stack trace in the console, showing the sequence of function calls leading up to the console.trace call. The output will look something like this:

7️⃣console.dir

Use the console.dir method to output the properties of an object in a hierarchical format. This can be useful for exploring the structure of an object and for seeing all of its properties and methods.

const obj = {
  id: 1,
  name: 'John Doe',
  address: {
    street: '123 Main St',
    city: 'New York',
    zip: 10001
  }
};
console.dir(obj);

This will output the properties of the obj object in a hierarchical format, allowing you to see the structure of the object and all of its properties and values.

8️⃣console.count

Use the console.count method to count the number of times a specific log message is an output. This can be useful for keeping track of how many times a particular code path is executed and for identifying hot spots in your code.

function foo(x) {
  console.count(x);
}

foo('hello');
foo('world');
foo('hello');

This will output the string “hello” in the console, followed by the number 1. It will then output the string “world” in the console, followed by the number 1. Finally, it will output the string “hello” again, followed by the number 2 (since it has been called twice).

9️⃣console.clear

Use the console.clear method to clear the console output. This can be useful for keeping your debug output organized and uncluttered and for making it easier to focus on the information you're interested in.

console.log('Hello world!');
console.clear();
console.log('This log message will appear after the console is cleared.');

This will output the string “Hello world!” in the console, followed by a blank line (since the console is cleared). It will then output the string “This log message will appear after the console is cleared.”

1️⃣0️⃣console.profile

Use the console.profile and console.profileEnd methods to measure the performance of a block of code. This can be useful for identifying performance bottlenecks and for optimizing your code for speed and efficiency.

console.profile('MyProfile');

// Run some code that you want to measure the performance of
for (let i = 0; i < 100000; i++) {
  // Do something
}

console.profileEnd('MyProfile');

This will start profiling the block of code between the console.profile and console.profileEnd calls and will output the results in the console when the console.profileEnd call is executed. The output will include details about the amount of time it took to execute the code and any other performance-related information.

💭 Some final thoughts

In 2023, don’t just settle for console.log - there are many more powerful and valuable tools and techniques available in the JavaScript console object.

From console.table to console.time, these methods and tricks will help you improve the quality and readability of your debug output, and make it easier to troubleshoot and fix problems in your code.

So why not level up your debugging skills in 2023 and give these techniques a try? Your code (and your sanity) will thank you.

Oh, and…

🌎 Let’s Connect!

Twitter: @thenaubit

The Secret to Clean and Efficient Code: How to Denest Your Code

Al - Naucode — Wed, 07 Dec 2022 05:35:10 +0000

As a programmer, you may be tempted to nest your code to create a more organized and efficient structure.

But did you know that nesting your code can actually lead to several problems, including increased complexity and decreased readability?

In this article, we will discuss why you shouldn't nest your code and some methods for denesting it, including the extraction and inversion methods.

Why should you avoid nesting?

By avoiding nested code, you can create a clean and efficient structure that is easy to understand and maintain.

This will improve the readability and maintainability of your program and can even improve its performance. So, read on to learn more about the dangers of nested code and how to avoid them.

First and foremost, nesting your code makes it more difficult to read and understand. When you nest multiple layers of code within each other, it becomes harder for other programmers (or even yourself) to follow the logic and flow of the program. This can lead to confusion and mistakes, especially when working on a large or complex project.

Furthermore, nesting your code can increase the complexity of your program.

Each level of nesting adds an additional abstraction layer, making it more challenging to identify and resolve errors. This can lead to more time spent debugging and testing and can even cause your program to crash.

Additionally, nesting your code can make it more challenging to maintain and update in the future.

As your program grows and evolves, it can be challenging to keep track of all the nested code blocks and ensure that they are working correctly. This can lead to a tangled mess of code that is hard to work with and modify.

How to avoid nesting your code?

So, how can you avoid nesting your code and still maintain a clean and organized structure? Here are a few methods for denesting your code:

The extraction method: Use functions and subroutines to break up your code into smaller, modular chunks. This allows you to separate different logic and functionality, making it easier to understand and maintain.
The inversion method: Use conditional statements (like if/else or switch/case) to handle different scenarios without nesting code blocks. This allows you to easily control the flow of your program without adding unnecessary complexity.

1. The Extraction Method

One method for denesting your code is the extraction method. This involves taking a nested code block and extracting it into its own function or subroutine. This allows you to separate the logic and functionality of the code block, making it easier to understand and maintain.

Here is an example of the extraction method:

Original nested code:

if (condition1) {
  if (condition2) {
    if (condition3) {
      // Do something
    }
  }
}

Extracted code:

function doSomething() {
  // Do something
}

if (condition1) {
  if (condition2) {
    if (condition3) {
      doSomething();
    }
  }
}

In this example, the nested code block is extracted into a function called "doSomething". This allows us to quickly reference the code block from multiple places in our program without duplicating the nested code structure.

The extraction method is a simple and effective way to denest your code and can be applied to any nested code block.

2. The Inversion Method

Another method for denesting your code is the inversion method. This involves taking a nested code block and inverting the conditional statement that controls it.

This allows you to avoid nesting code blocks and create a more streamlined and efficient structure.

Here is an example of the inversion method:

Original nested code:

if (condition1) {
  if (condition2) {
    if (condition3) {
      // Do something
    }
  }
}

Inverted code:

if (!condition1 || !condition2 || !condition3) {
  return;
}

// Do something

In this example, the nested code block is inverted by using the logical OR operator (||) to combine the three conditional statements. This allows us to avoid nesting code blocks and create a more concise and efficient structure.

Some final thoughts

In conclusion, nesting your code may seem like a good idea initially, but it can lead to several problems.

To avoid those issues, consider using the extraction and inversion methods to denest your code and create a clean and efficient structure.

This will improve the readability and maintainability of your program, making it easier to work with and modify in the future.

So, next time you are tempted to nest your code, remember the dangers of nested code and consider using the extraction and inversion methods to avoid them; as you saw, it is really easy!

🌎 Let's Connect!

Twitter: @thenaubit

5 Small and Hidden React libraries You Should Already Be Using

Al - Naucode — Sun, 04 Dec 2022 00:40:37 +0000

If you, like me, love finding small gems in the NPM directory to improve your development process, today is your lucky day.

I am starting a new series of articles where I will showcase some small and less-known libraries that I found and use every day that will save you more than one headache.

So, let's start!

1. Urlcat

Urlcat is a tiny Javascript library that makes building URLs very convenient and prevents common mistakes.

Yeah, you could use the URL API to build your URLs. But still, you will have to take care of some details for yourself instead of just building the URL.

That is why I love this library. It is just "plug-and-play." You don't need to learn complicated patterns or spend hours on documentation.

So, feel free to give it a try: https://github.com/balazsbotond/urlcat.

2. UseHooks-ts

If you are a React developer, you are using hooks (I hope). If that is the case, there are probably lots of times you have to create a custom hook for very little things. For example, for handling the dark mode. Or for the window resize event. Or lots of other cases.

UseHooks is a small library with well-coded, well-documented, and fully typed (for Typescript users) hooks for all those small cases, so you focus on the project itself.

You can check it here: https://github.com/juliencrn/usehooks-ts.

3. Logt

I like to have logs everywhere, so when there is some need to know what is going on, I can check them.

And when I code the front end, I also want those logs. But with some requisites:

It must be fully typed (so I can use it in Typescript without any headache)
It must be small
It must have colorful labels (so I know the log type quickly)
It must have log levels
It must have some way to hide some logs according to conditions (like if it is a production build or not)
It must be possible to send those logs somewhere else (like to Sentry)

After a lot of time spent researching (and almost starting to code my own one), I found Logt, which meets all my requirements, plus a few more.
100% recommended! https://github.com/sidhantpanda/logt

4. Loadable Components

If you are trying to optimize your React app, you are probably using React.lazy and Suspense to lazy-load the components.

That is fine.

But there are even better ways! For example, this library. Obviously, in this article, I can not give a full explanation about why you should switch from React.lazy to this library but feel free to check this post from the author.

Basically, a few key things are it supports SSR (Server Side Rendering), Library Splitting, and even full dynamic import. Not bad, huh?

And the best thing. It is really easy to use. Almost plug-and-play. So, give it a try! https://github.com/gregberge/loadable-components

5. Emoji Mart

When working on different projects, I always have to deal with emojis. It is something used everywhere right now. And I usually have to add some emoji picker component in the project.

That is not complicated. But then you start to receive more requirements: it must lazy-load the emojis, it must support internationalization, it must allow searching, it must allow using the same query text as Slack…

And that takes time. I can do it. But the clients usually prefer me to focus on the project itself. So… I found this little library. A beautiful and useful one.

Let me show you, Emoji Mart! https://github.com/missive/emoji-mart

If you are like me, you love finding these kinds of little and useful libraries, easy to use and perfect to integrate with your projects. So, don't worry. I have a big list already ready to share. This is the first 5 of this series. Be sure to follow me to be notified soon when I publish the next ones!

In the meanwhile…

🌎 Let's Connect!

Twitter: @thenaubit

DEV Community: Al - Naucode

How I was able to improve my clients satisfaction by 10x 🪄

Trying to solve my biggest issue as a front-end freelancer

A solution could be here

Time to integrate it into my project

Linking your Pull Request to LiveCycle SDK

Playing in the Playground

What do my clients think about it?

My final thoughts

🌎 Let's Connect!

Unleash the Power of Your Data: 6 ES6 Array Functions You Need to Know 🚀

🔍 Map

💡 Filter

🔢 Reduce

💬 Find

🔃 Every & Some

🌎 Let's Connect!

5 Custom React Hooks That Will Transform Your Code 🤖

1️⃣ useWindowSize Hook

2️⃣ useKeyPress Hook

3️⃣ useInterval Hook

4️⃣ useDebounce Hook

5️⃣ useThrottle Hook

🌎 Let's Connect!

7 Small & Underrated React Libraries 🔥

1️⃣ React Testing Library

2️⃣ React Hook Form

3️⃣ React Scroll

4️⃣ React Transition Group

5️⃣ React Lazy Load Image Component

6️⃣ React Easy Edit

7️⃣ React Beautiful Dnd

🌎 Let's Connect!

💻 7 Tips for Writing Clean and Efficient React Code

💡 Tip 1: Use functional components instead of class components

💡 Tip 2: Use the useState hook for state management

💡 Tip 3: Use the useEffect hook for side effects

💡 Tip 4: Use destructuring to simplify code

💡 Tip 5: Use memoization to improve performance

💡 Tip 6: Use the key prop to improve performance

💡 Tip 7: Use inline styles sparingly

🌎 Let's Connect!

🚀 5 Advanced ES6 Features Every JavaScript Developer Should Master

💡 Destructuring

🔒 Block Scoping

🚗 Spread Operator

🔮 Template Literals

💾 Arrow Functions

🌎 Let's Connect!

🎯 9 Essential React Hooks Every Developer Should Know

💡 useState

🔥 useEffect

🚀 useContext

🕹 useReducer

📄 useCallback

🛠️ useMemo

📝 useRef

🔓 useImperativeHandle

🔍 useDebugValue

🌎 Let's Connect!

5 Basic Tips Everyone Should Know for Optimizing React Performance 🚀

1️⃣ Use the Production Build

2️⃣ Use a Dynamic Import

3️⃣ Use Functional Components

4️⃣ Use Memoization

5️⃣ Use a Performance Profiler

🌎 Let's Connect!

Ace your next JavaScript Interview with these 7 Common Questions and Answers 💻

1️⃣ What is JavaScript, and how is it different from Java? 🤔

2️⃣ What is the difference between let and var?

3️⃣ What is the difference between == and ===?

4️⃣ What is closure in JavaScript?

5️⃣ What is the difference between call and apply?

6️⃣ What is an event loop in JavaScript?

7️⃣ What is the difference between synchronous and asynchronous code?

🌎 Let's Connect!

Why using just console.log in 2023 is a big no-no 🚀

😞 The problem

1️⃣ console.table

2️⃣console.group

💡 Tip 2: Use the `useState` hook for state management

💡 Tip 3: Use the `useEffect` hook for side effects

💡 Tip 6: Use the `key` prop to improve performance