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.
JavaScript *
High-level, interpreted programming language. It is a language which is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm
How did I increase the website performance score from 35 to 100 for both mobile and desktop?
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.
Microfrontend. Server fragments — frontend as it supposed to be
Microfrontend as it supposed to be: Single Page Application, Server-side rendering and Independent deployments.
Example that proves it's possible using React 18 + Suspense on server and Webpack Module Federation
How to write simple intelligent code search with Open AI
In this article, we will briefly review a technology that underlies ChatGPT — embeddings. Also we’ll write a simple intelligent search in a codebase of a project.
HDR Displays and CSS: Enhancing Color and Brightness on the Web
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.
Mocking RESP API in 20 minutes via Yakbak
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:
- Setup all microservices on your laptop
- Prepare mocks for API
I will describe how to mock REST API request via Yakbak.
Tutorial: Frontity — Setting Up Authorization for WordPress Private Endpoints
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).
Main problems of the multithreaded servers with blocking I/O
Problems of multithreaded servers with blocking I/O
Author: Denis Zherdetskiy
URL Search Params
Somehow I saw code in the project of a neighboring team that generated a string with URL parameters for subsequent insertion into the iframe
src 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.
Mina Monitor — convenient monitoring your Mina nodes
My name is Serhii Pimenov. I’m a web developer from Kyiv, Ukraine (maybe you know me by the nickname olton).
Today I'm going to speak about one of my tools for the Mina blockchain - “Mina Monitor”. It’s the first article in the series about Mina and Mina Tools. In this article, I will introduce you to my tool for monitoring the Mina nodes.
Improving the quality and formatting of the code in the TypeScript
With the help of the ESLint and Prettier features, you can automate the formatting of your code, make it more expressive and accurate, correspond to specific rules, and avoid errors and bottlenecks even before uploading the code to the shared source storage...
You don't know Redis (Part 2)
In the first part of You don't know Redis, I built an app using Redis as a primary database. For most people, it might sound unusual simply because the key-value data structure seems suboptimal for handling complex data models.
In practice, the choice of a database often depends on the application’s data-access patterns as well as the current and possible future requirements.
Redis was a perfect database for a Q&A board. I described how I took advantage of sorted sets and hashes data types to build features efficiently with less code.
Now I need to extend the Q&A board with registration/login functionality.
I will use Redis again. There are two reasons for that.
Firstly, I want to avoid the extra complexity that comes with adding yet another database.
Secondly, based on the requirements that I have, Redis is suitable for the task.
Important to note, that user registration and login is not always about only email and password handling. Users may have a lot of relations with other data which can grow complex over time.
Despite Redis being suitable for my task, it may not be a good choice for other projects.
Always define what data structure you need now and may need in the future to pick the right database.
How to create LinkedIn-like reactions with Serverless Redis
As a side hustle, I teach tech recruiters web and software development technologies using plain English. It helps them with understanding job specs and resumes and it makes all of us, tech people, happier.
I run a weekly newsletter and often get feedback from recruiters via email or LinkedIn DMs.
I thought that I could try to collect feedback using the “Reactions” feature just like LinkedIn or Facebook does. It’s not as informative as personalised messages but is a simple feature that may incentivize more people to provide some general feedback.
Either way, it’s worth trying and as a software developer, I can’t wait to implement it.
This tutorial is about implementing a feature that will be used in real life on my project.
REST hooks for WebRTC Click to Call. Implementation experience
The "Click to Call" button on the website is an "innovation" that has been around for about 10 years. The technologies under the hood have changed, but the principle remains the same: someone clicks on the button on the site page, then JavaScript launches and requests access to the microphone and establishes a connection to the server — WebRTC SIP gateway. Further, the first client-server leg is a browser gateway, the second leg can be arbitrarily long and through the SIP proxy chain can eventually connect to a mobile or landline phone. Thus, the browser turns, in a sense, into a softphone and becomes a full participant in VoIP telephony.
Streaming multiple RTSP IP cameras on YouTube and/or Facebook
As you know, YouTube doesn't have a feature for capturing an RTSP stream, but we would like to change this and help YouTube to make their viewers happy.
$mol_func_sandbox: hack me if you might!.
Hello, I'm Jin, and I… want to play a game with you. Its rules are very simple, but breaking them… will lead you to victory. Feel like a hacker getting out of the JavaScript sandbox in order to read cookies, mine bitcoins, make a deface, or something else interesting.
And then I'll tell you how the sandbox works and give you some ideas for hacking.
Only 39% of the functions in node_modules are unique in the default Angular project
Only 39% of the functions in node_modules
are unique in the default Angular project created by ng new my-app
.
I think the developers of open source solve problems in the same ways, because they study the same algorithms. Well, why be honest, they copy the popular solutions from StackOverflow also.
How I create browser applications inside browsers
In 2013 Canonical tried to crowdfund Ubuntu Edge smartphone. Its main feature could be the ability to use the smartphone as a full-fledged PС. Unfortunatly, the crowdfunding campaign did not accumulate enough money, so a dream of having a universal device remained to be the dream.
I've been searching for universality, too, on the software side, not the hardware one. Today I can confidently say I found the necessary combination: Git and JavaScript.
As you know, I have already described the benefits of browser applications (nCKOB static site generator) and the benefits of using Git instead of yet another back-end with API (GitBudget to track personal spendings). Once GitBudget was out, I spent the remaining 2020 to build a system allowing one to create browser applications right inside browsers. GitJS is the name of that system.
Ant Design Component Customization and Bundle Optimization
I'm Ivan Kopenkov, a senior front-end developer at Mail.ru Cloud Solutions. In this article, I will tell you about the approaches we have used for the UI library components customization. You will also learn how to significantly decrease bundle size, cutting off all the unnecessary modules Ant Design takes there.
In our case, we are making wrappers for original Ant Design components inside the project, changing their appearance, and developing their logic. At the same time, we import both customized and original components right from the ant-design module. That saves tree shaking functionality and makes complex library components use our wrappers instead of original nested elements.
If you are already or about to use Ant Design, this article will provide you with a better and more effective way to do so. Even if you have chosen another UI library, you might be able to implement these ideas.
Authors' contribution
alexzfort 9303.0ru_vds 6290.4ilusha_sergeevich 2778.0azproduction 2516.8aio350 2238.1alizar 2063.6phillennium 1687.2TheShock 1133.0spmbt 944.6Sirion 766.0