Pull to refresh
152.09

JavaScript *

High-level, interpreted programming language. It is a language which is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm

Show first
Rating limit
Level of difficulty

The new code as the side effect

Level of difficultyMedium
Reading time4 min
Views568

The new code as the side effect

If we use the reducer function for form data handling It has an infinite list of returned values, which expands when the next development iteration updates the interface defining the form and implements a new field. So the reducer pattern is procedure code, not a functional

Read more
Total votes 1: ↑2 and ↓-1+3
Comments0

Gatsby and its Greatness

Level of difficultyEasy
Reading time6 min
Views331

In the internet’s early days, blogging was straightforward. A server with PHP and MySQL allowed you to share your thoughts globally. Even FTP access with an index.html file sufficed.

However, as the web evolved, so did blogging requirements. Non-programmers needed user-friendly web interfaces, faster loading times, and seamless daily publishing. Platforms like Reddit, WordPress, and Tumblr emerged, but they faced a common issue: website ownership.

Read more
Total votes 2: ↑2 and ↓0+2
Comments0

How Closures Work and Why It Matters

Level of difficultyMedium
Reading time8 min
Views1.1K

They might sound complicated, but they are actually a fundamental part of the language. In this article, we’ll explore closures in a straightforward and practical way. Let’s clear up common misunderstandings. Walk through real-world examples. Nail those tricky interview questions about closures. By the end, you’ll see closures not as a hurdle, but as a valuable part of your JavaScript toolkit.

Continue Closure Journey
Total votes 4: ↑4 and ↓0+4
Comments0

React Global State Management: A Brief History and a Quick Guide

Level of difficultyEasy
Reading time9 min
Views1.1K

If you’re a React developer, you know how important state management is. State is the data that powers your UI, making it interactive and dynamic. But managing state in React can be tricky, especially when you have to share it across multiple components or deal with complex and asynchronous logic.

That’s why over the years, React developers have come up with various solutions for state management, each with its own advantages and disadvantages. In this article, we’ll take a look at some of the most popular ones and how they evolved. We’ll also review some of the current state-management libraries and how to choose the best one for your app.

Read more
Total votes 3: ↑3 and ↓0+3
Comments0

Crafting Enhanced Dropdown Interactions with Svelte: Constructing an Advanced Dropdown Component with Svelte

Level of difficultyMedium
Reading time3 min
Views539

In the realm of frontend development, the quest for enhancing user interaction remains a constant pursuit. Developers, inspired by innovation, often seek solutions to refine components for a seamless user experience. Today, we delve into the construction of an advanced dropdown component using Svelte — a framework known for its simplicity and effectiveness.

Read more
Total votes 3: ↑3 and ↓0+3
Comments0

React — Higher Order Components (HOC)

Level of difficultyMedium
Reading time5 min
Views2.1K

In the ever-evolving realm of web development, mastering advanced concepts is essential for creating robust and flexible applications. In this article, we'll delve into one of these foundational React concepts: Higher-Order Components, commonly known as HOCs. 

Whether you're a seasoned developer seeking advanced techniques or a curious beginner eager to learn, we'll walk through the creation and application of HOCs step by step. Get ready to enrich your development toolkit with this powerful approach while discovering how to enhance the readability, reusability, and maintainability of your code.

Learn it
Rating0
Comments0

React Custom Hook: useTimeout

Level of difficultyMedium
Reading time2 min
Views1.7K

One of the significant advantages of this custom hook is that it ensures the callback function remains up to date even if it changes during component re-renders. By using a useRef to store the callback reference, the hook guarantees that the latest version of the function is always called.

Read more
Total votes 4: ↑2 and ↓20
Comments1

React Custom Hook: useStorage

Level of difficultyMedium
Reading time3 min
Views2.1K

One of the key advantages of this custom hook is its simplicity. You can use it to store any type of data, such as strings, numbers, or even complex objects, with just a few lines of code. Additionally, useStorage handles the serialization and deserialization of data for you, so you don't have to worry about converting values to and from JSON.

Read more
Total votes 3: ↑2 and ↓1+1
Comments0

React Custom Hook: useStateWithValidation

Level of difficultyMedium
Reading time2 min
Views1.4K

One of the key advantages of this custom hook is its flexibility. You can pass any validation function that suits your specific requirements. Whether it's checking the length of a string, ensuring a numeric value falls within a certain range, or performing more complex validations, useStateWithValidation has got you covered.

Read more
Total votes 3: ↑2 and ↓1+1
Comments0

React Custom Hook: useStateWithHistory

Level of difficultyMedium
Reading time3 min
Views1.8K

In this article series, we embark on a journey through the realm of custom React hooks, discovering their immense potential for elevating your development projects. Our focus today is on the "useStateWithHistory" hook, one of the many carefully crafted hooks available in the collection of React custom hooks.

Read more
Total votes 1: ↑0 and ↓1-1
Comments1

React + Three.js. Creating your own 3D shooter. Part 1

Level of difficultyMedium
Reading time30 min
Views5.7K

Hello, dear users of the IT world!

In the era of active development of web technologies and interactive applications, 3D-graphics is becoming more and more relevant and in demand. But how to create a 3D application without losing the advantages of web development? In this article, we will look at how to combine the power of Three.js with the flexibility of React to create your own game right in the browser.

This article will introduce you to the React Three Fiber library and teach you how to create interactive 3D games.

Read more
Total votes 4: ↑3 and ↓1+2
Comments0

React Custom Hook: useScript

Level of difficultyMedium
Reading time2 min
Views2.5K

useScript can be used in various scenarios. For instance, you can load external libraries like jQuery, enabling you to harness its powerful functionalities without adding bulk to your bundle. Additionally, you can load analytics scripts, social media widgets, or any other script necessary for your application's dynamic behavior.

Read more
Total votes 4: ↑3 and ↓1+2
Comments1

React Custom Hook: useRenderCount

Level of difficultyMedium
Reading time2 min
Views1.3K

One of the major advantages of using useRenderCount is its simplicity. By abstracting the logic into a reusable hook, you can easily integrate it into any component without cluttering your codebase. Additionally, it provides a clear and concise way to monitor render behavior, which can be crucial for performance optimization and debugging.

Read more
Total votes 3: ↑2 and ↓1+1
Comments0

React Custom Hook: usePrevious

Level of difficultyMedium
Reading time2 min
Views4.5K

This custom hook can be a game-changer in various scenarios. For instance, you can utilize usePrevious to compare and visualize changes in data, track state transitions, or implement undo/redo functionality. Additionally, it can be valuable in form handling, animations, and any situation where having access to the previous value is crucial for your application's logic.

Read more
Total votes 3: ↑2 and ↓1+1
Comments0

Creating a mini-game with drip effect and moving circles. Part 2. Final

Level of difficultyEasy
Reading time8 min
Views675

Hello, dear users of the IT world!

In modern web development there are many ways to make your website interesting and attractive to users. And even using simple techniques you can achieve great results!

I suggest you to create a mini-game from scratch yourself. And then, you can use it to liven up and add interactivity to any web page.

Read more
Rating0
Comments0

React Custom Hook: useOnScreen

Level of difficultyMedium
Reading time2 min
Views2.9K

One of the key advantages of useOnScreen is its simplicity. With just a few lines of code, you can detect if an element is visible and respond accordingly. This can be immensely useful in scenarios where you want to trigger animations, lazy load images, or load additional content as the user scrolls.

Read more
Total votes 3: ↑2 and ↓1+1
Comments2

Creating a mini-game with a drip effect and moving circles. Part 1

Level of difficultyEasy
Reading time7 min
Views828

Hello, dear users of the IT world!

In modern web development there are many ways to make your website interesting and attractive to users. And even using simple techniques you can achieve great results!

I suggest you to create a mini-game from scratch yourself. And then, you can use it to liven up and add interactivity to any web page.

Read more
Total votes 3: ↑3 and ↓0+3
Comments0
1
23 ...

Authors' contribution