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.
TypeScript *
A strict syntactical superset of JavaScript
React Custom Hook: useCookie
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.
React Custom Hook: useClickOutside
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.
React Custom Hook: useAsync
By utilizing useAsync, you can streamline your React codebase, enhance reusability, and maintain a consistent and reliable user experience. Give it a try in your next React project and witness the power of simplified asynchronous operations.
React Custom Hook: useArray
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.
Web Content Elements
React Content Elements is a JavaScript library that enhances the development experience by providing an additional layer for creating HTML structures and CSS styles.
Supercharge Your React Projects with Custom Hooks
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.
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.
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...
Creating Node.JS web server application with Express, Typescript, Jest, Swagger, log4js and routing-controllers
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.
Plugins in Figma. From idea to 1000 installs
Inside the plugin, you can do whatever is available to the developer on the web. There are practically no restrictions on the possibilities, except for those related to the system. Fortunately, they are all detailed in the documentation. Many detailed articles have already been written on the topic of technical implementation of plugins, for example, here or here. As product designers, Lev Bruk and I wanted to go through all the stages of plugin release, from the idea and coding to promoting and working with feedback from real users. That’s exactly what we’re going to cover in the article.
Prettier is a Must-Have for Large-Scale Projects: Spent 20 Minutes Setting It Up and Forgot About Formatting for a Year
It was an everyday reality for one of Skyeng dev teams a year ago. Then someone had enough and said, “Guys, from now on we use Prettier. Is everyone ok with that?” And then there were no more debates about formatting. We’ve installed Prettier in the frontend repo and all the teams use it.
Modern Environment for React Native Applications
Typescript will help us avoid development mistakes and write a more efficient mobile application.
Modern tools allow integrating Typescript into the development environment. We can also use VS Code that supports Typescript.
Integration with React Native will give us the opportunity to use the auto-completion service, code navigation, and refactoring.
Expo is a toolkit that simplifies the creation of native React applications. This tutorial will give you an idea of how you can quickly create native React applications using Expo.
Web Worker easier than you thought
In this article, a DIRTY, unsafe, unstable and scary <em>eval</em>
method will be described. So, if you are uncomfortable with that, stop reading right now.
First off, some issues with convenience remained unresolved: in code sent to web web workers, closure can't be used.
All of us like new technologies, and all of us like new technologies to be convenient to use. However, it's not exactly the case with web workers. web workers accept files or links to files, which isn't convenient. It would be good to be able to put any task into web workers, not just specifically planned code.
What do we need to make web workers more convenient to operate? I believe, it's the following:
- A possibility to launch in web workers any code at any moment
- A possibility to send to web workers complicated data (class instances, functions)
- A possibility to receive a promise with a reply from a web worker.
Really typing Vue
inb4: This is not another "setting up" a new project with Vue and TypeScript tutorial. Let's do some deep dive into more complex topics!
typescript
is awesome. Vue
is awesome. No doubt, that a lot of people try to bundle them together. But, due to different reasons, it is hard to really type your Vue
app. Let's find out what are the problems and what can be done to solve them (or at least minimize the impact).
Protocol for communication between iframe and the main window
From time to time, developers need to establish communication between several browser tabs to be able to send messages from one tab to another and receive responses. We have also faced this need at some point.
Some solutions already exist (like, for instance, BroadcastChannel API). However, its browser support leaves a lot to be desired, so we decided to use our own library. When the library was ready, that functionality was no longer required. Nevertheless, another task emerged: communication between an iframe and the main window.
On closer examination, it turned out that two-thirds of the library would not have to be changed — only some code refactoring was necessary. The library is a communication PROTOCOL that can work with text data. It can be applied in all cases in which text is transferred, such as iframes, window.open, worker, browser tabs or WebSocket.
How it works
Currently, the protocol has two functions: sending messages and subscription to events. Any message in the protocol is a data object. For us, the main field in that object is type, which tells us what kind of message it is. The type field is an enum with the following values:
Announcing TypeScript 3.4 RC
Some days ago we announced the availability of our release candidate (RC) of TypeScript 3.4. Our hope is to collect feedback and early issues to ensure our final release is simple to pick up and use right away.
To get started using the RC, you can get it through NuGet, or use npm with the following command:
npm install -g typescript@rc
You can also get editor support by
- Downloading for Visual Studio 2017 (for version 15.2 or later)
- Following directions for Visual Studio Code and Sublime Text.
Let’s explore what’s new in 3.4!
Announcing TypeScript 3.3
If you’re unfamiliar with TypeScript, it’s a language that brings static type-checking to JavaScript so that you can catch issues before you even run your code – or before you even save your file. It also includes the latest JavaScript features from the ECMAScript standard on older browsers and runtimes by compiling those features into a form that they understand. But beyond type-checking and compiling your code, TypeScript also provides tooling in your favorite editor so that you can jump to the definition of any variable, find who’s using a given function, and automate refactorings and fixes to common problems.
Announcing TypeScript 3.3 RC
Authors' contribution
Waterplea 536.0fillpackart 452.8jarvis394 375.0aio350 312.2MarsiBarsi 295.0ru_vds 278.8nin-jin 231.4nsbarsukov 224.0iliazeus 209.0it_monk 154.0