Pull to refresh
256K+

JavaScript *

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

260,57
Rating
Show first
Rating limit
Level of difficulty

React Custom Hook: useDebugInformation

Level of difficultyMedium
Reading time3 min
Reach and readers2.9K

The useDebugInformation hook can be applied in various scenarios. For instance, imagine you're working on a complex form component where certain props trigger updates or affect rendering. By utilizing useDebugInformation, you can easily monitor how these props impact your component's performance and whether unnecessary re-renders are occurring. Additionally, the hook can be invaluable when investigating why a specific component is not updating as expected or when fine-tuning optimizations in a performance-critical application.

Read more

React Custom Hook: useDebounce

Level of difficultyMedium
Reading time2 min
Reach and readers4.4K

This custom hook is particularly beneficial in scenarios where you need to handle user input, such as search bars or form fields, where you want to delay the execution of an action until the user has finished typing or interacting. It's also useful for optimizing network requests, ensuring that requests are sent only after the user has stopped typing or selecting options.

Read more

React Custom Hook: useDarkMode

Level of difficultyMedium
Reading time4 min
Reach and readers3.2K

One of the main advantages of "useDarkMode" is its simplicity. With just a few lines of code, you can enable dark mode in your React application. By invoking this hook, you'll receive the current dark mode state and a function to toggle it.

The "useDarkMode" hook dynamically updates the HTML body class to apply the "dark-mode" styling whenever dark mode is enabled. This approach ensures consistency across all components without the need for manual class manipulation.

Read more

React Custom Hook: useCopyToClipboard

Level of difficultyMedium
Reading time2 min
Reach and readers2.3K

Copying text to the clipboard in a React application can be a tedious task. To simplify this process, I've created a powerful custom hook called useCopyToClipboard. With just a few lines of code, this hook streamlines the copy-to-clipboard functionality, providing developers with a hassle-free solution.

Read more

React Custom Hook: useCookie

Level of difficultyMedium
Reading time4 min
Reach and readers5.4K

One of the key advantages of this custom hook is the ability to update the cookie value. The updateCookie function, returned by useCookie, enables you to modify the value of the cookie. By invoking this function with a new value and optional options, such as expiration or path, you can instantly update the cookie.

Read more

React Custom Hook: useClickOutside

Level of difficultyMedium
Reading time2 min
Reach and readers6.2K

The potential applications for useClickOutside are endless. It is particularly useful when implementing modal windows, dropdown menus, or any element that should be closed when a user interacts with anything outside of it. By incorporating useClickOutside, you can enhance the user experience by providing intuitive and efficient interactions.

Read more

React Custom Hook: useArray

Level of difficultyMedium
Reading time2 min
Reach and readers6.9K

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 "useArray" hook, one of the many carefully crafted hooks available in the collection of React custom hooks.

Read more

How to make a robot? What is first

Level of difficultyEasy
Reading time3 min
Reach and readers19K

I develop robots, and I'm often asked, "How to make a robot?" and "Where do you find information and what resources do you use?"

If you don't know where to start and want to create your own robot, this article is for you. In it, I will try to explain the process and also share the first steps you should take.

Read more

Supercharge Your React Projects with Custom Hooks

Level of difficultyMedium
Reading time42 min
Reach and readers13K

In this article, we dive into the world of custom React hooks and explore the incredible potential they hold for supercharging your work projects. With over 20 carefully crafted hooks at your disposal, I personally utilize these hooks in my own work projects, and now I'm excited to share them with you. From enhancing functionality to streamlining workflows, these custom hooks are designed to empower developers and deliver user-friendly experiences. Join us on this journey as we unleash the power of these 20+ hooks and unlock new levels of productivity and innovation in your React projects.

Read more

How did I increase the website performance score from 35 to 100 for both mobile and desktop?

Level of difficultyEasy
Reading time5 min
Reach and readers2.6K

Not long ago, I started my personal blog. Instead of opting for the traditional route of using the popular WordPress CMS for blogs, I decided to embrace new technologies. My choice landed on Next.js and a NoSQL-type database.

Read more

HDR Displays and CSS: Enhancing Color and Brightness on the Web

Level of difficultyEasy
Reading time3 min
Reach and readers7.5K

High Dynamic Range (HDR) allows for a wider range of colours and brightness levels. This technology works on displays that support HDR format. Nowadays web advantage of display gamuts such as Display P3 and Rec. 2020, which can display a much larger color space than traditional sRGB displays. It is 50% more colours.

CSS is ready to fix it (at least for Apple users). Find colour gamuts comparison, code examples and device support overview below.

Unlock HDR with CSS - read more

Mocking RESP API in 20 minutes via Yakbak

Reading time6 min
Reach and readers2K


Imagine this: you are an ordinary frontend developer. When you open your mailbox you found a message — tomorrow DevOps team will make an optimization with Kubernetes. You are experienced developer and you know that environment operation test might go sideways. Test environment is crucial for your job as frontend developer and you don’t want to miss a whole day on a job, so there are two possible solutions present:


  1. Setup all microservices on your laptop
  2. Prepare mocks for API

I will describe how to mock REST API request via Yakbak.

Read more →

Tutorial: Frontity — Setting Up Authorization for WordPress Private Endpoints

Reading time2 min
Reach and readers1.3K

Foreword

This tutorial is intended primarily for those new to Frontity (React framework for WordPress) development.

Primary goal

Collect in one place all the necessary information for setting up authorization for WordPress private endpoints using the example of getting a menu collection (wp-json/wp/v2/menus).

Read more

URL Search Params

Reading time3 min
Reach and readers6.5K

Somehow I saw code in the project of a neighboring team that generated a string with URL parameters for subsequent insertion into the iframesrc attribute.

This article may seem superfluous, obvious or too simple, but since this occurs in wildlife, you should not be silent about it, but rather share best-practices.

Read more