Pull to refresh
148.44

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
Period
Level of difficulty

Angular: The Best Building Companion for Interactive apps

Reading time5 min
Views4.2K
Do you know there were 5 million apps in 2019? Out of these millions of apps, only a few are able to perform. There are many reasons for this but a major factor is the interactivity of an app.

No matter which product you are trying to sell, customers choose the one which allows them to get involved. Interactive apps are in demand for a long time. Are you wondering how can you make an interactive app?

The first thing which comes to our mind when we talk about interactive apps is the concept of single page application. This is because SPAs are known for their capacity to interact with the user by reloading some page elements dynamically depending upon the interaction by the user.
Read more →

Top 10 JavaScript Hack for Optimized Performance

Reading time5 min
Views4.5K

JavaScript has been ruling the tech arena for more than two decades and helping developers simplifying complex tasks. It allows developers to implement complex task web pages in a most simplified manner. For most of the developers minified JavaScript file is the common phenomena while very few developers may be aware of Optimized JavaScript code. While meeting through many Javascript developers, I have come to know that Optimized JavaScript code is something that confuses developers, some of them might be doing it, but they are not aware of this.


What is an Optimized JavaScript Code


When combinations of uniquely programmed logics along with small hacks utilized to enhance performance and speed is known as Optimized JavaScript code. Optimization not only optimizes performance and speed but also saves maximum development time. When you save time, you save some bucks as well.


So, I am here with some useful and fruitful hacks to help developers optimize performance, enhance speed and save time. Hope, you like the article and after going through it, you may utilize the best of Optimized JavaScript code.

Read more →

Sidecar for a Code splitting

Reading time12 min
Views1K


Code splitting. Code splitting is everywhere. However, why? Just because there is too much of javascript nowadays, and not all are in use at the same point in time.


JS is a very heavy thing. Not for your iPhone Xs or brand new i9 laptop, but for millions(probably billions) of slower devices owners. Or, at least, for your watches.


So — JS is bad, but what would happen if we just disable it — the problem would be gone… for some sites, and be gone "with sites" for the React-based ones. But anyway — there are sites, which could work without JS… and there is something we should learn from them...

Get in the sidecar!

Gatsby and its Greatness

Level of difficultyEasy
Reading time6 min
Views673

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

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

Level of difficultyMedium
Reading time30 min
Views8.4K

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

React Custom Hook: useScript

Level of difficultyMedium
Reading time2 min
Views2.8K

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

React Custom Hook: useDebugInformation

Level of difficultyMedium
Reading time3 min
Views2.6K

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: useDarkMode

Level of difficultyMedium
Reading time4 min
Views2.7K

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

How to make a robot? What is first

Level of difficultyEasy
Reading time3 min
Views11K

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

About Testing

Reading time2 min
Views1.5K
Let's talk about Testing, about unit and integration tests which everyone here, i hope, likes to write.

Despite of lots of benefits, tests have two fundamental problems: there is no architecture at all (quality), nobody knows what is the meaning of the quantity.

Tests have a cost. Lets imagine dialog between manager and developer:
— John, how many hours does it take to implement?
— Approximately one week: 1,5 day for task and 3,5 days to write tests

So why people write tests? Let's try to build a mental model: we delivered a component, our beta testers found a bug, we wrote tests scenario. So, next time we try to deliver the same component, we already know about bad scenario and have automation to check it. So far so good. Next, we are trying to predict future bugs by writing lot's of tests and cover bad scenarios. Next, we deliver better components, users are happy. Profit. (Despite of all pros, the solution is not scalable — with every new component we will face a reality).
Read more →

Node.JS Frameworks Which Will Rule In 2020

Reading time6 min
Views18K
  • Looking for the best node.js framework for web or mobile application development?
  • Searching for top node.js frameworks for the year 2020?
  • Hunting for topmost node.js frameworks to stay ahead in the competition? 

Here, in this blog, you will get the answers to all such questions. Let's quickly dive into it!



What is a Node.js Framework?



Node.js framework is a combination of libraries, helpers, and tools that offer a way to create and operate web applications in an uncomplicated manner. A node.js framework builds the base layer for creating a web app. 

The most important aspects of node.js framework, like any web framework, are its architecture and features such as support for customization, flexibility, security, compatibility with other libraries. 
Read more →

React Token Auth

Reading time10 min
Views45K


Problem


Authorization is one of the first problems developers face upon starting a new project. And one of the most common types of authorization (from my experience) is the token-based authorization (usually using JWT).


From my perspective, this article looks like "what I wanted to read two weeks ago". My goal was to write minimalistic and reusable code with a clean and straightforward interface. I had the next requirements for my implementation of the auth management:


  • Tokens should be stored in local storage
  • Tokens should be restored on page reload
  • Access token should be passed in the network requests
  • After expiration access token should be updated by refresh token if the last one is presented
  • React components should have access to the auth information to render appropriate UI
  • The solution should be made with pure React (without Redux, thunk, etc..)
Read more →

React Custom Hook: useStorage

Level of difficultyMedium
Reading time3 min
Views2.5K

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

React Custom Hook: useStateWithValidation

Level of difficultyMedium
Reading time2 min
Views1.6K

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

React Custom Hook: useRenderCount

Level of difficultyMedium
Reading time2 min
Views1.6K

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

React Custom Hook: usePrevious

Level of difficultyMedium
Reading time2 min
Views8.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

React Custom Hook: useOnScreen

Level of difficultyMedium
Reading time2 min
Views3.4K

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

Authors' contribution