At DataGrail, we believe in a world where people can be in control of their privacy and identity. We're developing the privacy platform modern brands rely on to build customer trust and transparency. We untangle the complexity of data privacy and help brands build privacy programs that work, giving them an easy-to-use platform to automate and scale privacy, and stay compliant with regulations like GDPR, CCPA, and CPRA. With 2000+ pre-built connections with popular apps and infrastructure, the DataGrail Integrations Network is the first of its kind to detect shadow IT that may contain personal data, ensuring the most accurate data discovery. DataGrail services millions of consumers, through companies like Salesforce, Overstock, Restoration Hardware, NETGEAR, and Outreach, and has 4.8/5 stars on G2. DataGrail is backed by leading VCs and strategic investors, including Operator Collective and Okta Ventures. Visit www.datagrail.io to learn more.

DataGrail

datagrail

Datagrids have been one of the most common visual software elements since the advent of UIs themselves. They appeal to the instinct that drives all of us to take in and understand as much data as possible, as quickly as possible. Datagrids are more useful than ever, not only for displaying data but also for editing it. With automatic conveniences like sorting and autocomplete and advanced features like custom formulas, Microsoft Excel would be the natural choice for most users. Users choose excel because it is familiar. Although Excel has become the most common example of software using a datagrid, the paradigm has increased throughout the software field. As web apps continue to replace the traditional native applications we're used to, it only makes sense that datagrids would make their way to web app UIs. Plenty of JavaScript datagrids exist in the market: open-source, third-party, and homegrown. Which to choose? In another one of our blogs, we discussed what makes datagrids so useful as UI elements and why FlexGrid is the best Angular datagrid. You can see Wijmo's in action and learn more about it through our sample. Angular DataGrid Angular datagrid overview You can get your copy of Wijmo from , from our , or by . NPM CDN downloading it from our site All this sounds amazing, right? Let's put FlexGrid to work by building a customizable Angular datagrid in minutes. We'll use the following to demonstrate how to use FlexGrid with Angular, Google's web framework: application Angular Sample App. We use to create the sample, so it is easy to maintain and share. Stackblitz Let's get started! Download Now! How to Create the Angular App To create your copy of the app, follow these steps: Open Stackblitz Click the "Angular/TypeScript" button at the top of the screen Add Wijmo to the project by typing "@grapecity/wijmo.all" into the dependencies list How to Import the Required Modules In the Angular version of the app, the logic is contained within the app.component.ts file, and the markup is contained within the app.component.html file. We'll start by importing the required classes and styles from Angular and Wijmo: app.module.ts import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { WjGridModule } from '@grapecity/wijmo.angular2.grid';
import { WjGridFilterModule } from '@grapecity/wijmo.angular2.grid.filter';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    WjGridModule,
    WjGridFilterModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { } app.component.ts import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as WjCore from '@grapecity/wijmo'; styles.css @import "wijmo/styles/themes/wijmo.theme.material.css"; Notice how, in addition to the modules, the code imports some CSS. In this case, we chose Wijmo's material theme, one of several included with Wijmo. Styling the App To style the app, edit the styles.css file as follows: body {
  font-family: Lato, Arial, Helvetica;
}
.wj-flexgrid { /* limit the grid's width and height */
  max-height: 300px;
  max-width: 32em;
} Our data source will be stored within our file, whichis defined as follows: app.component.ts import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as WjCore from '@grapecity/wijmo';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  // create our CollectionView
  data = new WjCore.CollectionView([], {
    groupDescriptions: ['make'] // group my make
  });

  // and populate it from the JSON data source
  // the data is stored in a https://jsonbin.io/ public repo
  constructor(private http: HttpClient) {
    this.http.get('https://api.jsonbin.io/b/5f0765bc5d4af74b01295f26')
      .subscribe(data => {
        this.data.sourceCollection = data;
      });
  }
} The file exposes the data through its "data" property, a CollectionView grouped by make. The data is loaded asynchronously after the component is constructed. app.component.ts When the data is received, it is assigned to the CollectionView's sourceCollection property and becomes available to the application. How to Visualize the Data in Angular The final step is implementing the markup inside of the file to render the Angular DataGrid: app.component.html <h1>
  2021 Sedans (Angular)
</h1>
<p>
  Sort by model and price by clicking the column headers.
  Filter by value or condition by clicking the filter icons
  in the column headers.
  Collapse and expand makes to see all the models.
  Select one or more models with the mouse or keyboard and
  copy your selection to the clipboard.</p>
<p>
  Showing
  <b>{{data.items.length}}</b> models from
  <b>{{data.groups.length}}</b> makes.
</p>
<wj-flex-grid [allowResizing]="'None'" [showAlternatingRows]="false" [isReadOnly]="true" [selectionMode]="'ListBox'"
  [headersVisibility]="'Column'" [itemsSource]="data">
  <wj-flex-grid-column [binding]="'make'" [header]="'Make'" [width]="'*'" [visible]="false"></wj-flex-grid-column>
  <wj-flex-grid-column [binding]="'model'" [header]="'Model'" [width]="'*'"></wj-flex-grid-column>
  <wj-flex-grid-column [binding]="'price'" [header]="'Price'" [format]="'c0'" [aggregate]="'Avg'" [width]="'.5*'"></wj-flex-grid-column>
  <wj-flex-grid-filter></wj-flex-grid-filter>
</wj-flex-grid> The app header contains a short app description and a summary of how many models and makes are displayed. The summary counts are updated automatically when the user filters the data. The header is followed by the "FlexGrid" element, which initializes the grid's properties, including the , the columns to display, and their properties. itemsSource The column properties include the binding, header, format, and width for each column. Note that the property on the price column causes the grid to show the average price for each make in the group headers. aggregate The "FlexGrid" element contains a "FlexGridFilter" element, which adds the column filter so that users may filter the grid data by model and price. We've also included some data bindings connected to the CollectionView, which we use to show how many makes and models are being displayed in the FlexGrid, based on the filters the user has applied. How to Run the Application That's it! . The Angular version of the "2021 Sedans" app is ready Happy coding! If you have questions or comments, be sure to enter them below. Download Now!

Quickly Create an Angular Datagrid in Your Web Application

( ) is a protocol used to secure datagram-based communications. It's based on the stream-focused Transport Layer Security ( ), providing a similar level of security. As a datagram protocol, DTLS doesn't guarantee the order of message delivery, or even that messages will be delivered at all. However, DTLS gains the benefits of datagram protocols, too; in particular, the lower overhead and reduced latency. Datagram Transport Layer Security DTLS TLS These features are especially useful for one of the most common areas in which DTLS comes into play: . All of the WebRTC related protocols are required to encrypt their communications using DTLS; this includes , , and . WebRTC SCTP SRTP STUN Learn more General knowledge on Wikipedia Datagram Transport Layer Security Specifications RFC 6347: Datagram Transport Layer Security Version 1.2 Datagram Transport Layer Security Protocol Version 1.3 draft specification Related specifications RFC 5763: Framework for Establishing a Secure Real-time Transport Protocol (SRTP) Security Context Using DTLS RFC 5764: DTLS Extension to Establish Keys for the Secure Real-time Transport Protocol (SRTP) RFC 6083: DTLS for Stream Control Transmission Protocol (SCTP) RFC 8261: Datagram Transport Layer Security (DTLS) Encapsulation of SCTP Packets RFC 7350: Datagram Transport Layer Security (DTLS) as Transport for Session Traversal Utilities for NAT (STUN) RFC 7925: TLS / DTLS Profiles for the Internet of Things View Previous Terms: Block cipher mode of operation Certificate authority Challenge-response authentication Cipher Cipher suite Ciphertext CORS CORS-safelisted request header CORS-safelisted response header Cross-site scripting Cryptanalysis Cryptographic hash function Cryptography CSP CSRF Decryption Digital certificate Encryption Forbidden header name Forbidden response header name Hash HMAC HPKP HSTS HTTPS Key MitM OWASP Preflight request Public-key cryptography Reporting directive Robots.txt Same-origin policy Session Hijacking SQL Injection Symmetric-key cryptography TOFU Transport Layer Security (TLS) Credits Source: https://developer.mozilla.org/en-US/docs/Glossary/DTLS Published under license Open CC Attribution ShareAlike 3.0

Glossary of Security Terms: Datagram Transport Layer Security

The OSI Model, which stands for Open Systems Interconnection Model, is a conceptual framework used to understand and standardize the functions of a telecommunication or computing system without regard to its underlying internal structure and technology. Developed by the International Organization for Standardization (ISO) in 1978, the model is divided into seven layers, each specifying particular network functions. The purpose of the OSI model is to guide product developers and promote interoperability of networking products and software through a common set of guidelines. Here are the seven layers of the OSI Model, from the lowest layer to the highest: This layer deals with the physical connection between devices and the transmission and reception of raw bit streams over a physical medium. It includes specifications for cables, connectors, and electrical signals. Physical Layer (Layer 1): This layer is responsible for node-to-node data transfer—a link between two directly connected nodes. It also handles error correction from the physical layer, frame synchronization, and flow control. Ethernet and PPP are examples of data link layer protocols. Data Link Layer (Layer 2): The network layer is responsible for packet forwarding including routing through intermediate routers, as it provides the means of transferring variable-length network packets from a source to a destination through one or more networks. IP (Internet Protocol) is an example of a network layer protocol. Network Layer (Layer 3): This layer provides transparent transfer of data between end systems, or hosts, and is responsible for end-to-end error recovery and flow control. It ensures complete data transfer. TCP (Transmission Control Protocol) and UDP (User Datagram Protocol) are examples of transport layer protocols. Transport Layer (Layer 4): The session layer establishes, manages, and terminates connections between applications. It sets up, coordinates, and terminates conversations, exchanges, and dialogues between the applications at each end. It deals with session and connection coordination. Session Layer (Layer 5): This layer translates data between the application layer and the network. It is responsible for translation, compression, and encryption/decryption. It ensures that data is in a usable format and is where data encryption occurs. Presentation Layer (Layer 6): The application layer is the closest layer to the end user, and it interacts with the software application that implements a communicating component. Thus, both the application layer and the user interact directly only with software applications. This layer provides network services to end-users and provides protocols that applications use to exchange data, such as HTTP for web browsing, SMTP for email, and FTP for file transfer. Application Layer (Layer 7):

What Is the OSI Model?

OSI মডেল কি?

Was ist das OSI-Modell?

¿Qué es el modelo OSI?

Qu'est-ce que le modèle OSI ?

OSI मॉडल क्या है?

OSIモデルとは何ですか?

OSI 모델이란 무엇입니까?

Qual é o modelo OSI?

Что такое модель OSI?

OSI Modeli Nedir?

Mô hình OSI là gì?

什么是OSI模型？

90 Stories To Learn About Mozilla

121 Stories To Learn About Data Protection

This is a continuation of a series of articles in which I briefly cover the main points of a specific topic in system architecture design. The first article can be read and the full guide you can find on my . here github Any complex system is a mosaic of numerous components, each with its specific function. These components don't operate in isolation; they constantly interact over a network, exchanging data and commands. Understanding the basics of these interactions is crucial. One must understand how components communicate over the network to comprehend the system's overall performance and resilience truly. Types Networks can be divided into four types based on size, architecture, range, and function: : Designed for personal use, usually within a person's range. It might connect devices like a computer, smartphone, and smartwatch, often Bluetooth. Personal Area Network (PAN) ): Connects devices within a limited area, such as a home, office, or school. It's typically used for connecting computers and sharing resources like printers or internet connections within a confined geographical area. Local Area Network (LAN Covers a larger area than a LAN but is smaller than a WAN, typically spanning a city or a large campus. Local service providers often use it to offer connections to businesses and homes in a town. Metropolitan Area Network (MAN): : Spans a larger geographical area, often connecting multiple LANs. The internet is the most prominent example of a WAN, linking computers and networks worldwide. Wide Area Network (WAN) Components Building and maintaining networks would be impossible without specialized hardware devices: : Physical cables (like Ethernet) provide a wired connection between devices, while wireless access points allow devices to connect to the network without physical cables, using Wi-Fi or other wireless technologies. Cable & Wireless Access Point : These are hardware components, often cards inserted into computers or other devices, that allow them to connect to a network. Network Interface Card (NIC) : A network device that amplifies or regenerates a signal, allowing it to travel longer distances without degradation. It's primarily used in wired and wireless networks to extend the range of communication and ensure data integrity over extended distances. Repeater A bridge operates at the data link layer. A bridge is a repeater, adding the functionality of filtering content by reading the MAC addresses of the source and destination. It is also used for interconnecting two LANs working on the same protocol. Bridge: : These basic networking devices connect multiple devices in a LAN, acting as a single network segment. Hub cannot filter data, so data packets are sent to all connected devices. Hub : Devices in a network that connect other devices. Unlike hubs, which broadcast the same data to all devices, switches are more intelligent, directing data only to the device that needs it. Switches : Devices that forward data packets between computer networks. They determine the best path for data transfer. Routers typically connect LANs and WANs and have a dynamically updating routing table based on which they make decisions on routing the data packets. Routers Topologies Network topology is a structural layout that dictates how different network devices and components are connected and how data is transmitted. The choice of topology significantly impacts the network's performance, scalability, and fault tolerance. It is categorized into two main types: : Describes the physical layout of devices, cables, and other network components. It represents how network devices are physically connected. Physical : Describes the data flow within the network, regardless of its physical design. It represents how data is transmitted between network devices. Logical The following types of topologies are distinguished: Point-to-Point A direct connection between two nodes or endpoints. This is the simplest form of network topology. : Advantages The direct and dedicated link ensures high-speed data transfer. Simple configuration and setup. Reliable communication since there are only two nodes involved. : Disadvantages It is not scalable for larger networks as it would require a dedicated line for every pair of devices. It can be more expensive in scenarios where multiple connections are needed due to the need for individual links. Bus All devices share a single communication line. Data sent by a device is available to all other devices, but only the intended recipient accepts and processes that data. : Advantages Easy to implement for small networks. Cost-effective due to minimal cabling. : Disadvantages Performance degrades as more devices are added or network traffic increases. A single cable failure can bring down the entire network. Ring Each device is connected to two other devices, forming a ring. Data travels in one or sometimes two directions. : Advantages It can handle larger data loads than bus topology. : Disadvantages A failure in one cable or device can take down the entire network. More difficult to install and reconfigure. Star All devices are connected to a central device (e.g., a switch or hub). : Advantages Easy to install and manage. Failure in one cable doesn't affect other devices. : Disadvantages If the central device fails, the whole network is inoperable. Requires more cable than bus topology. Tree Hybrid topology that combines characteristics of star and bus topologies. Groups of star-configured networks are connected to a linear bus backbone. : Advantages Hierarchical and scalable. Grouping of devices makes it easy to manage. : Disadvantages Failure in the backbone will cause division in the network. More cabling is required than other topologies. Mesh Devices are interconnected. Every device is connected to every other device. : Advantages Provides high redundancy and reliability. Data can be transmitted from multiple devices simultaneously. : Disadvantages It requires more cabling, making it expensive. Complex to install and configure. Hybrid Combination of two or more topologies. : Advantages Flexible and reliable as it inherits the advantages of its component topologies. Scalable. : Disadvantages Complex design. It can be more expensive due to multiple configurations. Protocols Network protocols are rules or standards that define how data is transmitted and received over a network. These protocols ensure that devices on a network (or across multiple networks) can communicate with each other in a standardized way. Common Protocols : The fundamental suite of protocols that powers the Internet. TCP ensures data is sent correctly, and IP provides data is sent to the correct place. TCP/IP : A connectionless protocol that, unlike TCP, doesn't establish a connection before sending data and doesn't guarantee the order of data packets. UDP Protocols used for transferring web pages on the Internet. HTTPS includes security measures to encrypt data. HTTP, HTTPS: : A protocol designed to transfer files over a network. FTP : Used for email transmission. SMTP : Used for retrieving and storing emails from a mail server. IMAP : Used for retrieving emails from a mail server. POP3 : Used for error reporting and diagnostics related to IP processing. ICMP : Translates domain names to IP addresses, allowing users to access websites using human-readable names. DNS : Assigns IP addresses dynamically to devices on a network. DHCP : Cryptographic protocols are designed to provide secure communication over a computer network. SSL/TLS : Point-to-Point Protocol (PPP) is basically an asymmetric protocol suite for various connections or links without framing. PPP : Defines how devices on a local area network (LAN) communicate. It operates at both the physical layer and the data link layer of the OSI model. Ethernet OSI and TCP/IP Models The OSI and TCP/IP are two primary models that serve as guiding frameworks that describe the processes involved in data communication over a network. OSI Model Protocol Data Format TCP/IP Model 7 Application HTTP, DNS, SMTP, FTP Data Application 6 Presentation TLS, SSL Data Application 5 Session Sockets Data Application 4 Transport TCP, UDP Segment, Packet Transport 3 Network IP, ICMP, IPsec IP Datagram Internet 2 Data Link PPP, Ethernet Frame Network Interface 1 Physical Fiber, Wireless Bit Network Interface The (Open Systems Interconnection) model is a conceptual framework for understanding network interactions in seven layers. Each layer serves a specific function: OSI : Deals with the physical connection between devices. It defines the hardware elements, such as cables, switches, and NICs. Physical : Responsible for creating a reliable link between two directly connected nodes, handling errors, and regulating data flow. Data Link : Determines the best path to transfer data from the source to the destination across the network. Network : Ensures end-to-end communication, data flow control, and error correction. Transport : Establishes, maintains, and terminates application connections at both ends. Session : Translates data between the application and transport layers, ensuring data is readable. Presentation : Directly interacts with end-user applications, ensuring effective communication between software and lower layers of the OSI model. Application The is a more concise model used predominantly in the modern internet, which simplifies the OSI layers into four categories: TCP/IP : Combines the functions of OSI's Physical and Data Link layers, focusing on how data is sent/received on a network medium. Network Interface : Corresponds to the Network layer in OSI, handling data routing, IP addressing, and packet forwarding. Internet : Similar to OSI's Transport layer, ensuring data reaches the correct application and is transmitted reliably (TCP) or quickly (UDP). Transport : Merges the functions of OSI's Session, Presentation, and Application layers, dealing with end-user application processes. Application Security In system design, ensuring robust network security is paramount to protect sensitive data and maintain the trust of users and stakeholders, ensure business continuity, and meet regulatory requirements. Common Threats and Vulnerabilities : Malicious attempts to disrupt the normal traffic of a targeted server, service, or network by overwhelming it with a flood of internet traffic. DDoS Attacks : Software designed to disrupt, damage, or gain unauthorized access to a computer system. This includes viruses, worms, spyware, and ransomware. Malware : Attackers secretly intercept and relay communication between two parties. They can eavesdrop or impersonate one of the parties, deceiving the other. Man-in-the-Middle Attacks : Threats originating from within the organization, such as employees, former employees, or partners with inside information concerning security practices. Insider Threats : Bugs or weaknesses in software can be exploited to gain unauthorized access or disrupt services. Examples include buffer overflows and unhandled exceptions. Software Flaws : Physical components can have vulnerabilities, like firmware that can be tampered with or backdoors installed by manufacturers. Hardware Weaknesses : Devices like routers, switches, or firewalls that are not correctly configured can expose the network to various threats. Misconfigured Network Devices : Insufficient password policies, lack of multi-factor authentication, or lax access controls can allow unauthorized access. Weak Authentication and Authorization : Data that isn't encrypted can be easily intercepted and read as it travels across a network. Unencrypted Data : Systems that are no longer supported or haven't been updated can have known vulnerabilities that are easy to exploit. Outdated Systems : This refers to physical access points where an attacker could plug into the network or access servers directly. Physical Vulnerabilities Best Practices for Ensuring Network Security : Deploy hardware and software firewalls to monitor and control incoming and outgoing network traffic based on security policies. Firewalls : Use encryption protocols, especially for sensitive data, both in transit (like SSL/TLS for web traffic) and at rest (like database encryption). Encryption : Keep all systems, software, and applications updated to patch vulnerabilities. Regular Updates : Implement MFA to add a layer of security, ensuring that users provide two or more verification factors to gain access. Multi-Factor Authentication (MFA) : Use network monitoring tools to monitor the network for unusual activities or unauthorized access continuously. Network Monitoring : Educate employees and users about the importance of security and how to recognize potential threats. Security Awareness Training : Limits the spread of threats within the network and provides better control over data access. Network Segmentation : Ensures data availability and business continuity in case of breaches or failures. Backup and Disaster Recovery : Physical access to network devices can lead to breaches. Physical Security Conclusion Grasping the fundamentals of networking, from the intricacies of topologies to the nuances of basic protocols, is not merely an academic exercise—it's crucial for creating robust and efficient systems. A solid grounding in network principles ensures systems communicate seamlessly, adapt resiliently, and scale efficiently.

The System Design Cheat Sheet: Networks

সিস্টেম ডিজাইন চিট শীট: নেটওয়ার্ক

Der Spickzettel zum Systemdesign: Netzwerke

La hoja de referencia para el diseño de sistemas: redes

L'aide-mémoire pour la conception de systèmes : réseaux

सिस्टम डिज़ाइन चीट शीट: नेटवर्क

システム設計のチートシート: ネットワーク

시스템 설계 치트 시트: 네트워크

A folha de referências do design do sistema: redes

Памятка по проектированию системы: Сети

Sistem Tasarımı Hile Sayfası: Ağlar

Bảng tóm tắt về thiết kế hệ thống: Mạng

系统设计备忘单：网络

I'd like to share my approach to architecting a quite large front-end application consisting of dozens of pages and hundreds of components, implemented in parallel by a dozen front-end developers, highlighting the folder structure I'm using to streamline the development in the team. The main technologies used are TS, React, React Router, Tanstack Query, styled components, but the structure is technology agnostic. I prefer to keep the folder structure as flat as possible to reduce the learning curve for newly added developers App folders structure: /elements
/components
/features
/layouts
/pages
...
App.tsx
router.tsx /elements Basic building blocks, typically having minimal internal state, usually enhanced basic components from the UI library. Examples: /elements
    /Textbox
    /Tooltip
    /MultiSelectCheckmarks /components Blocks composed with multiple . Typically, it does not have API access but can have complex internal states or access to global contexts. /elements Examples: /components
    /DataGrid
    /List
    /Modal
    /ErrorState /features Set of components grouped by domain, typically constructed on top of and , with data access, with shared API hooks /components /elements Examples: /features
    /Users
        /UsersList
        /UserEditModal
        Users.api.ts
        Users.api.mocks.ts
        Users.types.ts
    /Projects
        /ProjectsDataGrid
        /ProjectEditModal
        /ProjectHeader
        /ProjectSidebar
        Projects.api.ts
        Projects.api.mocks.ts
        Projects.types.ts /layouts Templates shared between multiple pages, say pages in some area of the app shares footer and sidebar. Examples: /layouts
    /ProjectLayout
    /AdminLayout
    /StandalonePreviewLayout /pages Actual pages connected to routes. Composed with layout and components imported from and folders features components Examples: /pages
    /AdminDashboard
    /AdminUsers
    /Project
    /ProjectAddTask Certain folder like , , can be added to top or individual components or feature level on demand /hooks /contexts /utils Individual elements/components/pages folder structure: Individual components follow the agreed file structure to simplify search and maintainability: /ComponentName
    index.ts
    ComponentName.tsx
    ComponentName.styles.tsx
    ComponentName.types.ts
    ComponentName.tests.tsx
    ComponentName.stories.tsx Where: - re-export to shorten imports index.ts - component code ComponentName.tsx - styled components ComponentName.styles.tsx - TS types used more than once, or placed in separate file to avoid circular dependencies ComponentName.types.ts - unit tests ComponentName.test.tsx - storybook stories for component ComponentName.stories.tsx Plus files typically found in : /features - API hooks used amount the components included into the feature FeatureName.api.ts - mocks for API call to use in tests and storybook stories FeatureName.api.mocks.ts - TS types used amount the components included into the feature FeatureName.types.ts I'm using prefix everywhere to ease search in IDE and logs, and have the full context of the file when looking at opened files tabs in IDE. ComponentName Certain files can be omitted as I'm putting things inline when if makes sense and extracting out certain styles components and styles when they're used more than once and it makes sense to achieve better code structure Conclusion I've found the above folders and file structure quite usable in large enough frontend applications from my almost 15 years of development experience. Glad to hear your feedback in the comments! Putting the expanded structure example below: /elements
    /Textbox
        index.ts
        Textbox.tsx
        Textbox.styles.tsx
        Textbox.types.ts
        Textbox.tests.tsx
        Textbox.stories.tsx
/features
    /Users
        /UsersList
            index.ts
            UsersList.tsx
            UsersList.styles.tsx
            UsersList.types.ts
            UsersList.tests.tsx
            UsersList.stories.tsx
        Users.api.ts
        Users.api.mocks.ts
        Users.types.ts
    /Projects
        /ProjectsDataGrid
            index.ts
            ProjectsDataGrid.tsx
            ProjectsDataGrid.styles.tsx
            ProjectsDataGrid.types.ts
            ProjectsDataGrid.tests.tsx
            ProjectsDataGrid.stories.tsx
        Projects.api.ts
        Projects.api.mocks.ts
        Projects.types.ts
/layouts
    /ProjectLayout
        index.ts
        ProjectLayout.tsx
        ProjectLayout.styles.tsx
        ProjectLayout.types.ts
        ProjectLayout.tests.tsx
        ProjectLayout.stories.tsx
/pages
    /Project
        index.ts
        Project.tsx
        Project.styles.tsx
        Project.types.ts
        Project.tests.tsx
        Project.stories.tsx
App.tsx
router.tsx

Developing An Easy-to-Use File Structure for an Extensive React Frontend Application

Speed. Performance. Responsiveness. These ideals reign supreme in the world of web development, especially JavaScript and . A slow or janky website is the hallmark of an amateur, while a slick, optimized experience delights users and sets professionals apart. Nodejs But creating truly high-performance web apps is littered with pitfalls. Mistakes abound that can drag down the pace of your without you even realizing it. Tiny oversights that bloat your code and surreptitiously sap speed away bit by bit. JavaScript You vigilantly minify your code and leverage caching...yet your site still feels oddly sluggish at times. The UI stutters during scrolling or when buttons are clicked. Pages take eons to load. What's going on? Turns out, there are many common ways we inadvertently slow down our JavaScript. Anti-patterns that, over time, can hobble site performance. The good news? These mistakes can be avoided. Today we're spotlighting the top 19 performance pitfalls that can secretly slow down JavaScript and Node.js apps. We'll explore what causes them through illustrative examples and actionable solutions to optimize your code. Identifying and eliminating these hazards is key to crafting buttery smooth web experiences that delight users. So, let's dive in! 1. Improper Variable Declarations and Scope When first learning JavaScript, it's tempting to declare all variables globally. However, this causes problems down the road. Let's look at an example: // globals.js

var color = 'blue';

function printColor() {
  console.log(color); 
}

printColor(); // Prints 'blue' This works fine, but imagine if we loaded another script: // script2.js

var color = 'red';

printColor(); // Prints 'red'! Because is global, script2.js overwritten it! To fix this, declare variables locally inside functions whenever possible: color function printColor() {
  var color = 'blue'; // local variable
  
  console.log(color);
}

printColor(); // Prints 'blue' Now, changes in other scripts won't affect . printColor Declaring variables in the global scope when unnecessary is an anti-pattern. Try to limit globals to configuration constants. For other variables, declare them locally in the smallest possible scope. 2. Inefficient DOM Manipulation When updating DOM elements, batch changes instead of manipulating one node at a time. Consider this example: const ul = document.getElementById('list');

for (let i = 0; i < 10; i++) {
  const li = document.createElement('li');
  li.textContent = i;
  
  ul.appendChild(li);
} This appends list items one by one. It is better to build a string first then set : .innerHTML const ul = document.getElementById('list');
let html = '';

for (let i = 0; i < 10; i++) {
  html += `<li>${i}</li>`; 
}

ul.innerHTML = html; Building a string minimizes reflows. We update the DOM once instead of 10 times. For multiple updates, build up changes, then apply at the end. Or better yet, use DocumentFragment to batch appends. 3. Excessive DOM Manipulation Frequent updates can crush performance. Consider a chat app that inserts messages into the page. DOM Bad: // New message received
const msg = `<div>${messageText}</div>`;
chatLog.insertAdjacentHTML('beforeend', msg); This naively inserts on each message. Better to throttle updates: Good: let chatLogHTML = '';
const throttleTime = 100; // ms

// New message received  
chatLogHTML += `<div>${messageText}</div>`;

// Throttle DOM updates
setTimeout(() => {
  chatLog.innerHTML = chatLogHTML;
  chatLogHTML = ''; 
}, throttleTime); Now, we update at most every 100ms, keeping DOM operations low. For highly dynamic UIs, consider virtual DOM libraries like React. These minimize DOM manipulation using a virtual representation. 4. Lack of Event Delegation Attaching event listeners to many elements creates needless overhead. Consider a table with delete buttons on each row: Bad: const rows = document.querySelectorAll('table tr');

rows.forEach(row => {
  const deleteBtn = row.querySelector('.delete');  

  deleteBtn.addEventListener('click', handleDelete);
}); This adds a listener to each delete button. Better to use event delegation: Good: const table = document.querySelector('table');

table.addEventListener('click', e => {
  if (e.target.classList.contains('delete')) {
    handleDelete(e);
  }
}); Now, there's a single listener on the . Less memory overhead. <table> Event delegation utilizes event bubbling. One listener can handle events from multiple descendants. Use delegation whenever applicable. 5. Inefficient String Concatenation When concatenating strings in a loop, performance suffers. Consider this code: let html = '';

for (let i = 0; i < 10; i++) {
  html += '<div>' + i + '</div>';
} Creating new strings requires memory allocation. Better to use an array: const parts = [];

for (let i = 0; i < 10; i++) {
  parts.push('<div>', i, '</div>');
}

const html = parts.join(''); Building an array minimizes intermediate strings. concatenates once at the end. .join() For multiple string additions, use array joining. Also, consider template literals for embedded values. 6. Unoptimized Loops Loops often cause performance problems in JavaScript. A common mistake is repeatedly accessing array length: Bad: const items = [/*...*/];

for (let i = 0; i < items.length; i++) {
  // ...
} Redundantly checking inhibits optimizations. Better: .length Good: const items = [/*...*/];  
const len = items.length;

for (let i = 0; i < len; i++) {
  // ...
} Caching length improves speed. Other optimizations include hoisting invariants out of loops, simplifying termination conditions, and avoiding expensive operations inside iterations. 7. Unnecessary Synchronous Operations JavaScript's async capabilities are a key advantage. But beware of blocking I/O! For example: Bad: const data = fs.readFileSync('file.json'); // blocks! This stalls execution while reading from the disk. Instead, use callbacks or promises: Good: fs.readFile('file.json', (err, data) => {
  // ...
}); Now, the event loop continues while the file is read. For complex flows, simplifies asynchronous logic. Avoid synchronous operations to prevent blocking. async/await 8. Blocking the Event Loop JavaScript uses a single-threaded event loop. Blocking it stalls execution. Some common blockers: Heavy computational tasks Synchronous I/O Unoptimized algorithms For example: function countPrimes(max) {
  // Unoptimized loop
  for (let i = 0; i <= max; i++) {
    // ...check if prime...
  }
}

countPrimes(1000000); // Long running! This executes synchronously, blocking other events. To avoid: Defer unnecessary work Batch data processing Use Worker threads Look for optimization opportunities Keep the event loop running smoothly. Profile periodically to catch blocking code. 9. Inefficient Error Handling It's vital to handle errors properly in JavaScript. But beware of performance pitfalls! Bad: try {
  // ...
} catch (err) {
  console.error(err); // just logging
} This captures errors but takes no corrective action. Unhandled errors often lead to memory leaks or data corruption. Better: try {
  // ...
} catch (err) {
  console.error(err);
  
  // Emit error event 
  emitError(err); 
  
  // Nullify variables
  obj = null;
  
  // Inform user
  showErrorNotice();
} Logging isn't enough! Clean up artifacts, notify users, and consider recovery options. Use tools like Sentry to monitor errors in production. Handle all errors explicitly. 11. Memory Leaks Memory leaks happen when memory is allocated but never released. Over time, leaks accumulate and degrade performance. Common sources in JavaScript include: Uncleaned-up event listeners Outdated references to deleted DOM nodes Cached data that's no longer needed Accumulating state in closures For example: function processData() {
  const data = [];

  // Use closure to accumulate data
  return function() {
    data.push(getData()); 
  }
}

const processor = processData();

// Long running...keeps holding reference to growing data array! The array keeps getting larger but is never cleared. To fix: Use weak references Clean up event listeners Delete no-longer-needed references Limit closured state size Monitor memory usage and watch for growing trends. Proactively eliminate leaks before they pile up. 11. Overuse of Dependencies While npm offers endless options, resist the urge to over-import! Each dependency increases bundle size and attack surface. Bad: import _ from 'lodash';
import moment from 'moment'; 
import validator from 'validator';
// etc... Importing entire libraries for minor utilities. Better to cherries pick helpers as needed: Good: import cloneDeep from 'lodash/cloneDeep';
import { format } from 'date-fns';
import { isEmail } from 'validator'; Only import what you need. Review dependencies regularly to prune unused ones. Keep bundles lean and minimize dependencies. 12. Inadequate Caching Caching allows skipping expensive computations by reusing prior results. But it's often overlooked. Bad: function generateReport() {
  // Perform expensive processing
  // to generate report data... 
}

generateReport(); // Computes
generateReport(); // Computes again! Since inputs haven't changed, the report could be cached: Good: let cachedReport;

function generateReport() {
  if (cachedReport) {
    return cachedReport;
  }

  cachedReport = // expensive processing...
  return cachedReport; 
} Now, repeated calls are fast. Other caching strategies: Memory caches like Redis HTTP caching headers LocalStorage for client caching CDNs for asset caching Identify cache opportunities - they often provide big speedups! 13. Unoptimized Database Queries When interfacing with databases, inefficient queries can bog down performance. Some issues to avoid: Bad: // No indexing
db.find({name: 'John', age: 35}); 

// Unecessary fields
db.find({first: 'John', last:'Doe', email:'john@doe.com'}, {first: 1, last: 1});

// Too many separate queries
for (let id of ids) {
  const user = db.find({id});
} This fails to utilize indexes, retrieves unused fields, and executes excessive queries. Good: // Use index on 'name' 
db.find({name: 'John'}).hint({name: 1});

// Only get 'email' field
db.find({first: 'John'}, {email: 1}); 

// Get users in one query
const users = db.find({
  id: {$in: ids} 
}); Analyze and explain plans. Create indexes strategically. Avoid multiple piecemeal queries. Optimize datastore interactions. 14. Improper Error Handling in Promises Promises simplify asynchronous code. But unhandled rejections are silent failures! Bad: function getUser() {
  return fetch('/user')
    .then(r => r.json()); 
}

getUser(); If rejects, exception goes unnoticed. Instead: fetch Good: function getUser() {
  return fetch('/user')
    .then(r => r.json())
    .catch(err => console.error(err));
} 

getUser(); Chaining handles errors properly. Other tips: .catch() Avoid promise nesting hell Handle rejections at the top level Configure unhandled rejection tracking Don't ignore promise errors! 15. Synchronous Network Operations Network requests should be asynchronous. But sometimes sync variants get used: Bad: const data = http.getSync('http://example.com/data'); // blocks! This stalls the event loop during the request. Instead, use callbacks: Good: http.get('http://example.com/data', res => {
  // ...
}); Or promises: fetch('http://example.com/data')
  .then(res => res.json())
  .then(data => {
    // ...
  }); Async network requests allow other processing while waiting for responses. Avoid synchronous network calls. 16. Inefficient File I/O Operations Reading/writing files synchronously blocks. For example: Bad: const contents = fs.readFileSync('file.txt'); // blocks! This stalls execution during disk I/O. Instead: Good: fs.readFile('file.txt', (err, contents) => {
  // ...
});

// or promises

fs.promises.readFile('file.txt')
   .then(contents => {
     // ...  
   }); This allows the event loop to continue during the file read. For multiple files, use streams: function processFiles(files) {
  for (let file of files) {
    fs.createReadStream(file)
      .pipe(/*...*/);
  }
} Avoid synchronous file operations. Use callbacks, promises, and streams. 17. Ignoring Performance Profiling and Optimization It's easy to overlook performance until there are obvious issues. But optimization should be ongoing! Measure first with profiling tools: Browser devtools timeline Node.js profiler third-party profilers This reveals optimization opportunities even if performance seems fine: // profile.js
function processOrders(orders) {
  orders.forEach(o => {
    // ...
  });
}

processOrders(allOrders); The profiler shows taking 200ms. We investigate and find: processOrders Unoptimized loop Expensive inner operation Unnecessary work We optimize iteratively. The final version takes 5ms! Profiling guides optimization. Establish performance budgets and fail if exceeded. Measure often and optimize judiciously. 18. Not Utilizing Caching Mechanisms Caching improves speed by avoiding duplicate work. But it's often forgotten. Bad: // Compute expensive report
function generateReport() {
  // ...heavy processing...
}

generateReport(); // Computes
generateReport(); // Computes again! The same inputs always produce the same output. We should cache: Good: // Cache report contents
const cache = {};

function generateReport() {
  if (cache.report) {
    return cache.report;
  }

  const report = // ...compute...

  cache.report = report;
  return report;
} Now, repeated calls are fast. Other caching strategies: Memory caches like Redis HTTP caching headers LocalStorage for client caching CDNs for asset caching Identify cache opportunities - they often give big wins! 19. Unnecessary Code Duplication Duplicated code harms maintainability and optimizability. Consider: function userStats(user) {
  const name = user.name;
  const email = user.email;
  
  // ...logic...
}

function orderStats(order) {
  const name = order.customerName;
  const email = order.customerEmail;

  // ...logic... 
} The extraction is duplicated. We refactor: function getCustomerInfo(data) {
  return {
    name: data.name, 
    email: data.email
  };
}

function userStats(user) {
  const { name, email } = getCustomerInfo(user);
  
  // ...logic...
}

function orderStats(order) {
  const { name, email } = getCustomerInfo(order);

  // ...logic...
} Now, it's just defined once. Other fixes: Extract utility functions Build helper classes Leverage modules for reusability Deduplicate whenever you can. It improves code health and optimization. Conclusion Optimizing JavaScript application performance is an iterative process. By learning efficient practices and being diligent about profiling, dramatic speed improvements can be achieved. Key areas to focus on include minimizing DOM changes, leveraging asynchronous techniques, eliminating blocking operations, reducing dependencies, utilizing caching, and removing unneeded duplication. With attention and experience, you can discover bottlenecks and hone in on optimizations for your specific workload. The result is faster, leaner, and more responsive web apps your users will love. So be relentless about optimizations - employ these tips and see your JavaScript fly! If you like my article, feel free to follow me on . HackerNoon Also published . here

Is Your Code Slow?: Avoid These 19 Common JavaScript and Node.js Mistakes

NAT (Network Address Translation)  technology is an integral component of modern internet infrastructure, but it creates certain obstacles for direct device-to-device connections. In this article, we look a solving this problem from many angles: from NAT Punch-Through to Relay Fallback, and more. Hello again! I'm Dmitrii Ivashchenko, Lead Software Engineer at MY.GAMES. In this part of our ongoing series, "Unity Realtime Multiplayer", we'll delve into the effects of NAT on realtime multiplayer games. , we discussed the TCP, UDP, and WebSocket protocols, which allow for establishing a connection between player devices for data exchange. However, establishing a direct connection between two devices located on opposite sides of the planet is not an easy task. This is due to a number of technological and infrastructure limitations, including mechanisms like Network Address Translation (NAT). Previously NAT is a fundamental technology used to manage IP addresses. It's commonly used with routers to translate local network addresses (private IP addresses) to global IP addresses on the internet (and vice versa). It allows a single IP address to represent multiple devices in a local network, creating a layer of abstraction that effectively isolates each device. There are different types of NAT, including: : It uses one-to-one mapping from public to private IP addresses. Static NAT : It provides mapping from many to many from a pool of public IP addresses. Dynamic NAT : This is the most common type of NAT, where multiple private IP addresses are mapped to a single public IP address using different ports. PAT (Port Address Translation) or NAT Overload While NAT is important for preserving limited public IP address resources and ensuring security, NAT also creates obstacles to establishing direct connections between devices on different networks. Content Overview NAT Punch-through TCP and UDP Hole Punching ICMP Hole Punching STUN (Session Traversal Utilities for NAT) NAT Punch and Relay Fallback Conclusion NAT Punch-through NAT Punch-through, also known as hole punching, opens a direct connection without port forwarding. When successful, clients can connect directly to each other to exchange packets. However, depending on the types of NAT between clients, this often fails. There are various NAT Punch-through methods, including TCP and UDP Hole Punching, ICMP, and STUN. TCP and UDP Hole Punching TCP Hole Punching is a method used to establish a direct between two devices, each of which is behind its own NAT. This requires the assistance of a central server, which is usually called an introduction server. TCP connection ] Here are the steps in this process: As with other hole-punching techniques, both devices (let's call them Device A and Device B) start the process by connecting to the input server. Server request: The input server exchanges information between Device A and Device B; it passes the public IP address and port of each device to the other device. Information exchange: Each device attempts to establish a TCP connection with the other; usually one device (let's say Device A) starts with an active opening of the connection, while the other device (Device B) starts with a passive opening. Connection attempt: Device A sends a TCP SYN packet (connection request) to Device B. At the same time, Device B is already waiting for an incoming connection from Device A. This creates a "hole" in the NAT of each device, allowing incoming traffic to pass through. Hole punching: Finally, when the SYN packet from Device A reaches Device B through the hole in its NAT, it will respond with a SYN-ACK packet (connection request acknowledgment). Device A will then complete the handshake process by sending an ACK packet (acknowledgment). Connection established: Now that the TCP connection is established, the devices can exchange data directly, bypassing the input server. Data exchange: Like other hole-punching techniques, the success of TCP Hole Punching depends on the specific NAT configuration and network security policy. Some NATs may not allow this method to work correctly. UDP Hole Punching is similar to TCP Hole Punching but uses the UDP protocol. UDP Hole Punching is usually considered a simpler and more reliable hole-punching method compared to TCP Hole Punching because there is no need for the complex "handshake" procedure required to establish TCP connections. Instead, UDP packets can be simply sent and received without prior connection establishment. However, in the end, the choice of method for Hole Punching will be determined by the network infrastructure between your players. ICMP Hole Punching ICMP Hole Punching is a technique used to create direct connections between two devices behind NAT. This process usually requires the intervention of a third device, called an "introducer server", which assists in establishing the connection. Here's how it works, step by step: Both devices (let's call them Device A and Device B) initiate the process by contacting an input server. This establishes a "hole" in each device's NAT, allowing incoming traffic to pass through. Server Request: The input server exchanges information between Device A and Device B, passing along each device's public IP address and port to the other. Information Exchange: Now that each device knows the other's public IP address and port, they can attempt to establish a direct connection. They do this by sending an ICMP Echo Request (typically used for "ping") to the other device's address and port. Connection Attempt: If each device's NAT allows incoming ICMP traffic, these Echo Requests will pass through the "holes" in the NATs created during the initial connection to the input server. This allows a direct connection to be established between Device A and Device B. Connection Establishment: Once the connection is established, the devices can begin exchanging data directly, bypassing the input server. Data Exchange: It's important to note that the effectiveness of ICMP Hole Punching depends on the specific NAT configuration and network security policies. Some NATs or firewalls may block incoming ICMP traffic, rendering this technique unusable. STUN (Session Traversal Utilities for NAT) STUN is a tool for communication protocols that allows detecting and overcoming network addresses that are on the path between two endpoints. It is implemented as a lightweight client-server protocol that requires only simple requests and responses with a third-party server located on a shared, easily accessible network, usually the Internet. : the client, usually operating in a private network, sends a request to bind to a STUN server on the open Internet. The STUN server responds to the client, including the IP address and port number observed from the server's point of view. The main protocol works as follows Here's how STUN works step by step: The device (usually called a client) sends a request to the STUN server. This request goes through the device's NAT. STUN server request: When the request reaches the STUN server, the server analyzes how the request reached it. It determines the public IP address that was used to send the request (this is the IP address of the NAT device), and information about ports. It also determines NAT type using various tests (e.g. checking if NAT changes the port with every new connection). Determining NAT type and public IP: The STUN server then sends a response back to the device with information about its public IP address and port, as well as NAT type. STUN server response: Having received the response, the device knows its public IP address and port visible on the Internet, as well as the NAT type used by its network. This information can be used to establish direct connections with other devices on the Internet (e.g. when using NAT Punch-through technology). Using the information: STUN messages are sent in User Datagram Protocol (UDP) packets. Since UDP does not provide reliable guaranteed delivery, the retransmission of STUN requests is controlled by the application to achieve reliability. STUN servers do not implement reliability mechanisms for their responses. If reliability is required, the Transmission Control Protocol (TCP) can be used, but this leads to additional network overhead. It is important to note that the STUN protocol may not work in some scenarios, especially when using stricter types of NAT. NAT Punch and Relay Fallback Despite the existence of various hole-punching techniques, a direct connection between two devices on a network is not always possible. In such cases, a backup option in the form of a relay server is often used. This option combines NAT traversal with a backup relay. Here, clients first attempt to connect to the host using NAT traversal, and if unsuccessful, they switch to the relay server. This reduces the load on the relay server, which allows clients to still connect to the host. Conclusion It's important to understand the impact of on the development of real-time multiplayer game connections. Although NAT technology is an integral component of the modern internet infrastructure, it creates certain obstacles for direct device-to-device connections. This necessitates the use of various techniques such as NAT Punch-Through and Relay Fallback to provide the best gaming experience. NAT However, the development and optimization of networked multiplayer games is not limited to managing connections alone. The next — important — step is preparing and sending data over the network. In our next article, we'll discuss the principles of efficient data encoding and compression for networked games.

Unity Realtime Multiplayer, Part 4: Overcoming NAT Challenges

Unity Realtime Multiplayer, Part 2: TCP, UDP, WebSocket Protocols

ইউনিটি রিয়েলটাইম মাল্টিপ্লেয়ার, পার্ট 2: টিসিপি, ইউডিপি, ওয়েবসকেট প্রোটোকল

Unity Realtime Multiplayer, Teil 2: TCP-, UDP- und WebSocket-Protokolle

Multijugador en tiempo real de Unity, Parte 2: Protocolos TCP, UDP y WebSocket

Unity Realtime Multiplayer, partie 2 : TCP, UDP, protocoles WebSocket

यूनिटी रीयलटाइम मल्टीप्लेयर, भाग 2: टीसीपी, यूडीपी, वेबसॉकेट प्रोटोकॉल

Unity リアルタイム マルチプレイヤー、パート 2: TCP、UDP、WebSocket プロトコル

Unity 실시간 멀티플레이어, 2부: TCP, UDP, WebSocket 프로토콜

Unity Realtime Multiplayer, Parte 2: Protocolos TCP, UDP, WebSocket

Unity Gerçek Zamanlı Çok Oyunculu, Bölüm 2: TCP, UDP, WebSocket Protokolleri

Unity Realtime Multiplayer, Phần 2: Giao thức TCP, UDP, WebSocket

Unity 实时多人游戏，第 2 部分：TCP、UDP、WebSocket 协议

You’ve probably used the command multiple times to test the connection to the server. This is a widely available tool. Have you ever thought about how exactly it works and how to implement it yourself? I find exploring some unknown things helpful in understanding how the system works, and in this article, I'll try to explain how exactly it works and how to recreate it from scratch in ping Node.js. This is not a deep dive by any means, but we will cover some basics on how to implement the binary protocol, manipulate bits, debug network requests, measure time precisely, and more. So let's dive in. What is ping? In case you have never used before, " is a computer network administration software utility used to test the reachability of a host on an Internet Protocol (IP) network... Ping measures the round-trip time for messages sent from the originating host to a destination computer that are echoed back to the source." (c) ping ping wiki Let's give it a try. Just open a terminal and execute . You should see something similar to this: ping 1.1.1.1 $ ping 1.1.1.1
PING 1.1.1.1 (1.1.1.1): 56 data bytes
64 bytes from 1.1.1.1: icmp_seq=0 ttl=59 time=8.322 ms
64 bytes from 1.1.1.1: icmp_seq=1 ttl=59 time=19.255 ms
64 bytes from 1.1.1.1: icmp_seq=2 ttl=59 time=7.433 ms
... Behind the scenes, we send ICMP packets to and await a response. At the same time, we measure the time it takes, TTL, and some statistics across all requests. There is a high chance that you never heard about packets before. This protocol is primarily used by network devices to share operational information. It differs from more common TCP and UDP protocols but works on the same IP stack. Sounds fun, let's dive into implementation details. 1.1.1.1 ICMP Let's take a look at the protocol description on wiki. We will focus on IPv4 for simplicity, but it works similarly for IPv6. A lot is going on here. However, most of the work will be done automatically for us by OS or socket library. Let's focus on the red parts that we will have to implement ourselves. Now we need to figure out how to send those bits and bytes Debugging network with Wireshark Now, we have a good theory behind us to get started. However, to debug our program, it would be helpful to see the actual bits and bytes we send to some IPs. The easiest way to check ANY traffic your machine is using is to use It is free and open-source software that works on both Windows and macOS. Before we start, let's check if theory and practice align on how the protocol works. Wireshark. Two easy steps: Start Wireshark and choose what to capture (in my case wifi that is connected to the Internet) Add filter ICMP in the top bar as it will produce a lot of noise Now execute command in the terminal. This is more or less what you will see: $ ping 1.1.1.1 You can see all requests and responses of the ping command. Even better, Wireshark is quite powerful and knows how to handle ICMP commands. So it will help you parse bits to more meaningful and easier-to-read structures. You can also clearly see the layered structure of network protocols (Ethernet -> IP -> ICMP). This will be very helpful in validating our setup. You can also hover over Packet Bytes to highlight what they are responsible for. In this case, you can see the Type of request is equal to , which is exactly what we would expect from our protocol described above. 8 Let's code Now we have all the building blocks; we can start coding. Unfortunately, Node.js has no native support for raw sockets to use ICMP protocol. However, the npm package supports it using node-gyp to access system-level APIs. raw-socket So practically, we need to: create socket subscribe to messages send messages import raw from "raw-socket";

const socket = raw.createSocket({ protocol: raw.Protocol.ICMP });

socket.on("message", function (buffer, source) {
  // TODO Decode
});

socket.on("error", (e) => {
  console.error("Socket Error: ", e);
  socket.close();
});

const pingBuffer = createPingBuffer(1234, 0, "Payload");
socket.send(pingBuffer, 0, buffer.length, "1.1.1.1", function (error, bytes) {
  if (error) console.error("Unable to send message: ", error.toString());
});

function createPingBuffer(identifier, sequence, payload) {
  // TODO Encode
} This is the main part of the app. Here we create an ICMP socket and start listening for new messages. At the same time, we send our ping command to the IP address. 1.1.1.1 So now we need to implement encoding and decoding of the messages. Encoding ping protocol As you saw in the diagram above, we must provide 8 bytes of information: Type, Code, Checksum, Identifier, and Sequence Number. We can also provide an optional payload that will be returned to us in the response. This will be helpful later. Type = 8 (Request) = 00001000 (binary)
Code = 0 = 00000000 (binary)
Checksum = dynamic value
Identifier = 1 = 0000000000000001 (binary)
Sequence Number = 0 = 0000000000000000 (binary) For clarity, we show this information in multiple rows with a nice table. But just to be clear what we actually send is the following 64 bits: 0000100000000000111101111111111000000000000000010000000000000000 The easiest way to manipulate bits is to use Node.js . It is a subclass of JavaScript's Uint8Array and adds helpful methods to manipulate raw bytes. Buffers const ICMP_HEADER_SIZE = 8;

function createPingBuffer(identifier, sequenceNumber, payload) {
  // Allocate empty 8 bytes buffer filled with 0
  const buffer = Buffer.alloc(ICMP_HEADER_SIZE);

  buffer.writeUInt8(8, 0); // Type 1 byte with offset 0 bytes
  buffer.writeUInt8(0, 1); // Code 1 byte with offset 1 byte
  buffer.writeUInt16BE(0, 2); // Checksum 2 bytes with offset 2 bytes
  buffer.writeUInt16BE(identifier, 4); // Identifier 2 bytes with offset 4 bytes
  buffer.writeUInt16BE(sequenceNumber, 6); // Sequence Number 2 bytes with offset 6 bytes

  // Override 0 checksum with correct value based on full request
  raw.writeChecksum(buffer, 2, raw.createChecksum(buffer));

  return buffer;
} You might notice a weird BE suffix in the function name; it stands for Big-Endian. This is . There are two ways how you can pack multi-byte values in the buffer. This defines which byte should be first/last. endianness That is it! We should be able to send ping requests now. Let's check if it works using Wireshark. As you can see, it works as expected, and we were able to send a request. However, we still need to decode a response Decode ping protocol We can use similar helper methods on the Buffer class to decode the ping packet. However, there is a caveat. We will get a full IP protocol packet as a response. Yet, IP protocol has a dynamic header size. It means we will have to find where our ping message starts. Let's take a closer look at the datagram IHL stands for . It has 4 bits that specify the number of 32-bit (4 bytes) words in the header. Unfortunately, Node.js Buffers lack helper methods to read 4-bit data. It means that we will have to implement it ourselves. Internet Header Length Here we will need to use . To get the last 4 bits of a byte, we will need to use bitwise bitwise operations AND function getIPProtocolHeaderSize(buffer) {
  const versionAndIHL = buffer.readUInt8();
  const IHL = versionAndIHL & 0b00001111; // will remove everything in the first 4 bits -> 0x0000XXXX
  return IHL * 4; // multiply by 4 as it contains number of 32-bit (4 bytes) words to get total size in bytes
} Now we have everything we need to decode a response: function decodePingPacket(buffer) {
  const ipOffset = getIPProtocolHeaderSize(buffer);

  // IP level TTL
  const ttl = buffer.readUInt8(8);

  const type = buffer.readUInt8(ipOffset);
  const code = buffer.readUInt8(ipOffset + 1);
  const checksum = buffer.readUInt16BE(ipOffset + 2);
  const identifier = buffer.readUInt16BE(ipOffset + 4);
  const sequenceNumber = buffer.readUInt16BE(ipOffset + 6);

  return {
    ttl,
    type,
    code,
    checksum,
    identifier,
    sequenceNumber,
  };
} That is it! We need to precisely measure the time between request and response to have a fully functional ping client. Time measurement If you pay closer attention to the original ping implementation, you will notice a special trick to make our client stateless and don't require us to track state for request/response time as ping protocol requires sending back the same payload we send as part of the request. We can send time as part of the payload! This is what the original UNIX implementation did. Unix implementation of ping is open source, so we can learn some tricks from reading . Here, it adds as part of the payload. source code timeval struct timeval {
  time_t      tv_sec;     /* seconds */
  suseconds_t tv_usec;    /* microseconds */
}; Let's use the same approach with our client. We will send a precise time when we send the command and compare it when we get a response. Standard will not work well in this case as we deal with high-precision data. To get accurate time, we can use API. So let's put it into practice and add it to the payload together with the payload itself. Date.now() Performance const time = performance.timeOrigin + performance.now();

const uint32 = new Uint32Array(2);
uint32[0] = time / 1000; // seconds
uint32[1] = (time - uint32[0] * 1000) * 1000; // microseconds

// write it as first 8 bytes of payload
buffer.writeUInt32BE(uint32[0], 8);
buffer.writeUInt32BE(uint32[1], 12);

// write payload itself
buffer.write(payload, 16);

// compute checksum
raw.writeChecksum(buffer, 2, raw.createChecksum(buffer));

return buffer; Conclusion I intentionally simplified some things and cut some corners. Ideally, we will need to add error logging, keep track of statistics, etc. We also need to make sure to filter out all other ICMP packets that are not part of our ping request by . checking the type of request and identifier However, I hope it was an interesting journey on how to implement low-level binary protocols, measure time, debug network requests, do bit manipulations, and read the source code. There is a lot to learn from other open-source projects. I put together all the code here in . It has some extra code to connect all the pieces together. Just run this repo node index.js 1.1.1.1 $ node index.js 1.1.1.1
PING 1.1.1.1 (1.1.1.1): 28 data bytes
36 bytes from 1.1.1.1: icmp_seq=0 ttl=59 time=32.622314453125 ms
36 bytes from 1.1.1.1: icmp_seq=1 ttl=59 time=9.591552734375 ms
36 bytes from 1.1.1.1: icmp_seq=2 ttl=59 time=16.101806640625 ms
...

Building Ping Command in Node.js: Practical Guide to Buffers, Sockets, and Bit Manipulation

Let's learn about via these 66 free stories. They are ordered by most time reading created on HackerNoon. Visit the to find the most read stories about any technology. Web App Development /Learn Repo 1. Choosing Web App Architecture: 3 Tier Architecture and Cloud Architecture What's the best modern web app architecture for you? Read about major front-end web architecture types available in 2021 and peculiarities of implementation. 2. Here’s a Proof-Of-Concept for CVE-2022–32511 to Gain Remote Code Execution Proof-of-Concept for understanding and exploiting CVE-2022–32511 to gain Remote Code Execution. 3. Web Application Templates with Perfect Design in 2022 This is our rating of the best Web App Templates. Keep reading to know which ones they are and how they can speed up and improve your web development practice! 4. Here's What I Found on Scanning 2.6 Million Domains for Exposed Git Directories A scan of over 2.6 million domains revealed over 1000 publicly exposed git directories. Next to complete source code I found many credentials and api secrets. 5. How a recommendation system Web App was Built How to create, build and deploy every component behind a Bike recommendation system 6. JavaScript Pie vs Bar Charts: Choose the Right Data Visualization Tool Did you know that approximately 65% of people are visual learners? Hence, for most of us, pictures are easier to understand than text. For instance, the incumbent U.S. President prefers the information accompanied by visual aids like maps, charts, graphs, and photos, according to Reuters. 7. Enlarge your DRY :  How to Share Values Between Web App Backend and Frontend REST API endpoints paths list which backend uses to route API requests and frontend uses to make backend API requests. 8. Laravel & Vuejs: A Miraculous Combination for Perfect Web Applications With 72% of the market share, PHP is one of the most popular and widely used programming languages. Laravel is a powerful Model-View-Controller based PHP framework for all of the web artisans. This open-source PHP framework was created for creating full-featured websites. It is the best choice for web app developers who seeks expressive, simple and elegant toolkit in order to create elegant applications with a good speed. The founders of Laravel value elegance, simplicity, and readability more than anything and designed this PHP framework upholding these values. It is PHP’s fastest-growing framework owing to its scalability, ease of use, and
flexibility. 9. Why Micro Frontends Are the Future of Frontend Development Microservices have helped the backend world to divide backends into smaller, more manageable, and more efficient pieces. 10. Everything You Need to Know About Progressive Web Apps Will your company benefit from PWA development? Read who, when, and how should use it or should NOT. Find the PWA features support comparison in major platforms 11. The Difference Between Web Apps and Websites Explained In this article, you will learn all about the difference between a website and a web application, the intricacies and how much it costs to develop both options. 12. The Features and Benefits of AngularJS for Web Application Development If you are looking for a structural framework for dynamic applications, AngularJS is the ideal choice. 13. Using Webiny Headless CMS With Starter Kits for Gatsby, NextJS You can spin up a Webiny instance on your own cloud infrastructure in minutes, and use one of our 1-click starters to get build a frontend quickly. 14. What Could Be The Future of Web Development Living in the era of the digital transformation, fast and constant changes, it’s a true challenge for web developers and business holders not to lose sight of all these continuous shifts. If you’re connected with web  development, then this article is what you should read to the bottom. Here we’ll highlight the web development hits 2020 which you’d focus on this year and beyond to provide keen and tough competition in the industry. 15. Top Startups With the Best Designed Third-Party APIs Do you wonder if third-party API integrations services are even beneficial for you? Read more to eliminate any doubts you have about the third-party API. 16. Integrate Appwrite APIs and SDK for Svelte Appwrite announces the release of the Appwrite SDK for Svelte. This SDK joins other SDKs to integrate Appwrite with your web, mobile, and desktop apps. 17. Turn your Web App into a Mobile App Read the article and make a final decision about whether you really need to convert web apps into mobile apps. If yes - learn how! 18. 6 Key Benefits of Custom Web App Development A well-designed custom web app needs creativity and planning. All we need to have is a clear understanding and vision of what we want to achieve to do it. 19. Understanding the Fundamentals of Web App Architecture Get insights into the web application architecture to understand how web apps provide an amazing user experience. 20. How to Choose a web Application Framework In this article, you will get a chance to look at the criteria you must consider before you choose a framework for your project. 21. How to Add a Dark Theme to a Web App Without Begging a Designer for Help Find out how to add a dark theme to your web app by yourself. Improve accessibility of your application in a blink of an eye. 22. 7 New CSS Features That Will Smoothen Your Web Development You all must be familiar with the importance of CSS. How is it an invertible part of web development? When a person decides to step ahead in web development, HT 23. .NET Framework Programming: Architecture, Usage and Advantages .NET is a software framework that is designed and created by Microsoft. The principal variant of .Net framework was 1.0 which came in the year 2002. In simple words, it is a virtual machine for arranging and executing programs written in various languages like C#, VB.Net and so forth. 24. Should You Ever Build an App on Someone Else’s Platform? We've developed a Slack bot, but does it make good business sense to build an app on a platform wholly controlled by a bigger company? 25. WebRTC: All You Need To Know About its Advantages and Technical Challenges WebRTC is a browser technology designed to transfer streaming data between browsers or applications using point-to-point transmission technology. This technology is attractive because it allows you to establish the connection between users using only a browser. For many developers, when they learn about WebRTC, this becomes a discovery: you can create a video chat without using a third-party server, you only need a browser — and this is cool! 26. How to Build a Web Application: An Outline of the Major Steps Learn the best way to build a web app and launch it. This blog will provide you with a simple and informative guide on how to build a web application. 27. 19 Top Websites Built With Django Web Framework Softformance has published a list of the most popular Django-based websites built with Django web framework. Softformance used to use Plone CMS – Python and Zop 28. Progressive Web Apps You May Use Every Day Recently Pinterest announced the launch of Pinterest Lite, a Progressive Web Application aimed to improve user experience for users in low-bandwidth regions in Peru, Colombia, Argentina, Chile and Mexico, by significantly saving the storage space and reducing download time. 29. 7 Surprisingly Powerful Tips To Skyrocket Your Business With Progressive Web Apps We all love mobile apps. They are easy to use owing to their great design; they are fast and provide a level of accessibility that neither the business nor the consumer can have with a conventional website. 30. How to Generate Test Code with Playwright Today you will learn how to generate the code for your tests. 31. From Novice to Expert: How I Mastered Web Development Becoming an expert in Microsoft web development is no easy feat. It requires a significant amount of time, dedication, and hard work. However, the rewards that 32. 4 reasons to use React in your next Frontend Project With all its stardom and technical excellence, React will remain the superstar of web app development. However, one of the most significant aspects of using Rea 33. What Lessons We Learn From Creating Healthcare Web App Since the healthcare topic is quite popular now, I decided to share with you our exciting experience in developing a web application for patients. It was a large and severe project which IntexSoft’s (the company I work in) team was working on for several years. 34. Design Philosophies You Should Embrace When Creating Web Applications For Users With Disabilities It might be challenging to create an accessible online application in.NET, but ensuring that all users can view your web content is critical. 35. 7 Reasons to Use Automated Tests in Selenium, JUnit5, and Gauge Framework Using automated tests to optimize your web application using Selenium, JUnit5, and Gauge Framework. 36. Making Front End Development a Piece of Cake with Webix What can help you to speed up the development process, and why is it Webix? Let's find out in the article! 37. Cloud-based Vs. Web-based Applications: A  Detailed Comparison of Features & Key Aspects Cloud and web apps seem interchangeable to many. Is it true? Not at all. However, both are similar but not the same. Read this article to know the difference. 38. App Gạo is a New & Digitized Charity Experience In the times of COVID-19, how do we help others and ensure that we give them the help that they need? Here's how some Vietnamese students managed to do it. 39. Build a Chat Room With Socket.io and Express In this article, we are going to create a chat application that connects people, anonymously, to different rooms together in pairs of two. 40. Mobile or Web: What Platform Should You Launch Your App On? Not sure what type of app you need and the budget is limited? Here we've explained the difference between web and mobile app Read the article to make a decision 41. UNCTEC 2021, My Journey As A Programmer And My Biggest Success So Far UNCTEC is the UN Model of Tec de Monterrey Cuernavaca and had its first vitual edition in March 2021. 42. How To Approach Custom Web App Development Web App Development is typically less resource-consuming since the web app development process can be much faster and easier. 43. Introduction to Strapi : Headless CMS for Building Web Applications Strapi is an open-source Headless CMS that gives developers the freedom to choose their favorite tools and frameworks. 44. How To Protect Your Online Applications From Pass-the-Cookie Cyber Attacks How to strengthen your online apps against cloud service attacks such as ‘pass-the-cookie’ attacks. 45. The Possibilities for Innovation Within the JavaScript Ecosystem Can You Master the Rapidly Evolving JS Ecosystem? Discover how to discover and satisfy users' requirements to remain competitive in the marketplace. 46. How to Choose the Technology Stack for Your Web Application The right technology stack used for building a web application is a critical element of project success. The reason is pretty simple. The product creation doesn’t only imply making an outstanding user interface design and ensuring high usability. It is also about delivering a stable solution that works as intended and adds value to users. 47. Developing Web Apps on Product Hunt with Nima Owji, 2021 Noonies Nominee Hey Everybody! I’m Nima Owji. I’m a web developer and app researcher. 48. 3 Web Design Factors to Ponder Before Starting an E-commerce Venture Developing a website for an e-commerce venture is a process that needs to be done with deft care. Starting a website is easy, but to maintain it is the real deal. That's why you need to start the process with all the precautions and preparation as anything can go wrong. Web design and development is very difficult and can look impossible to perfect, especially for the newcomers. 49. Quickly Create an Angular Datagrid in Your Web Application Learn how to quickly create an Angular datagrid in your web application. See more from Wijmo today. 50. The Web Development Courses to Help you Kickstart a Career in Web Development If you want to learn web development and become a web developer, or looking for web development resources like books, online courses, and tutorials, but are not 51. Professional Debugging in Rails Debugging is as important as writing code, it can cause your program to crash or behave unexpectedly. Most of the time, debugging can be very stressful, especially when one doesn’t use the right tools to debug. 52. Storybook V2 Comic Book Builder: Part 3, A Comic Book Result This is an Example Comic Book, “Hyenas2” that resulted from a sequentially paginated, accessible, performant, responsive design, illustrated serial content docu 53. Using Lazy Loadable Components Can Lead to CLS Duality and Slow Connections Why lazy loadable components can cause CLS on slower connections and how to prevent it. 54. Never Make Assumptions: 5 Golden Rules for Web App Development No matter if you are a startup company or a big enterprise, your app needs to be intuitive and customer-facing to win many hearts. However, designing a user-friendly web app for your business is not so easy. You need to be aware of the complete rules. 55. Shall I Use ADD or COPY in the Dockerfile - What's the Difference? Every developer and every team faces confusion about COPY and ADD in the Dockerfile at some point. When I get this question, first I usually give the technical background, which is this: 56. Let’s Know the Key Aspects of Building Single Page Applications using Angular As an IT Software Consultant, I keep looking for new Angular development frameworks and AngularJS development tools, recently I have been looking for the best Angular development framework to develop single page applications (SPAs) for businesses. And, I got this: 57. How to Choose Web Application Development Company for Your Startup Launching a startup is always about incredible ambitions and passion to your idea. You’re excited and inspired and expect your team to be dedicated for your idea as well. That’s why it’s not enough to find an ordinary web app development company that can provide you with a product. 58. The Dark Side of Ruby on Rails Ruby on Rails framework (RoR) is the dream of every developer. It does pretty much everything for you without much effort, and once you learn it and deeply understand it, you can build an entire website in a couple of hours (Of course, styling it is a different story). The hard part of rails is to understand the magic behind it. 59. Website vs Web App: Which Is The Right One For Your Business Yes, there are differences between websites and web apps – some subtle, others quite distinct – and you do need to understand them to get those tasty benefits. 60. Listing of JavaScript Editable Table Libraries In this article, we review a list of commercial JavaScript editable table libraries and UI widgets that can be incorporated into web applications. 61. Xamarin: The Revolution in Cross-Platform Mobile App Development In the age of smartphones and smart TVs, every apps developer is seeking the cheapest,  fastest, and easiest ways to create and deploy high performing mobile apps. Android and iOS platforms rule the market, and as a mobile application developer, you have to choose the aptest framework to run your mobile app on more devices and provide the best user interface and experience. 62. Making a React Chat App Using Socket.io How to build your own chat with React? Create a powerful chat application in 5 simple steps with the help of web application generator. 63. Web App Development in 2022: Everything You Need to Know This blog will discuss the various steps to building progressive web apps. 64. The Coolest VueJS Resources: Developers' Choice👨‍💻 Check out these Awesome VueJS Resources For Developers 65. Django Tutorials: Building a Web App from Scratch A Django CRUD web app tutorial featuring User Authentication, CRUD operations, and Markdown support. 66. Top 50 App Development Companies: 50 Brands to Look Out For The global headcount of app developers is growing exponentially. Paradoxically, the gap between mobile and web app development expertise continues to grow as well. New trends in the field, such as artificial intelligence, blockchain, IoT, cybersecurity, VR and AR, demand new competencies that companies often lack, even within in-house development teams. Thank you for checking out the 66 most read stories about Web App Development on HackerNoon. to find the most read stories about any technology. Visit the /Learn Repo

66 Stories To Learn About Web App Development

I assume you have heard the name Andrew Carnegie at least once in your life. Andrew Carnegie was a Scottish industrialist and philanthropist who became a naturalized American. He was one of the key players in the development of the steel industry in the United States in the late 19th century. Andrew Carnegie is one of the most successful men of the Industrial Revolution. There is a story about Andrew Carnegie that has always fascinated me. Some say that while traveling by train, Andrew Carnegie noticed a man next to him doing a lot of calculations on a piece of paper. Andrew Carnegie said, “ ” What are you working on? The man replied, “ ” I have an investment opportunity and I'm considering whether to invest my life savings in it. Andrew Carnegie listened carefully to the man who had a full-time job as a telegraph operator. He then gave him the following advice: “Put all your eggs in one basket, and then watch that basket closely.” Baffled, the man replied, “ ” What do you mean, Mr. Carnegie? Andrew Carnegie continued: “I mean, focus all your resources on one opportunity, and then give it your full attention and effort. It's better to focus on one thing and do it with excellence than to spread yourself too thin across multiple projects.” When a man as brilliant as Andrew Carnegie gives you such advice, I think you know what you have to do: follow it! And as we move into 2023, I think this advice from Andrew Carnegie is more relevant than ever and should be applied to Bitcoin. I often hear some people say that you should diversify your investments in cryptocurrencies, just in case Bitcoin fails. As I repeat, if Bitcoin fails, the entire industry will fail. Without Bitcoin, no cryptocurrency will survive. Period. Your interest is in being a Bitcoin Maximalist, even though some people blame you for it. In my book “ ” I explain why being a Bitcoin Maximalist is a matter of common sense, using the example of Louis Pouzin's Datagram story: The Truth About Bitcoin This story is there to highlight something essential. When you are convinced that a specific technology has everything it takes to revolutionize the world of the future, you must be a maximalist. You can’t waste time supporting competing technologies that don’t offer the same potential. Not doing so would be dangerous for your future. The story of Louis Pouzin and the datagram is there to remind us. The next time someone calls you toxic and unrealistic because you are a Bitcoin Maximalist, don’t waste your time responding. History will show that you made the right choice, as did those who chose to become Internet Maximalists even though other competing technologies existed. Andrew Carnegie's famous advice also stems from this observation. Instead of spreading yourself thin, concentrate fully in one direction and do everything you can to succeed in it. With Bitcoin, that's the chance humanity has. A chance that more and more people are taking. After passing the 100 million user mark in September 2020, Bitcoin passed the 200 million mark in 2022. Today, Bitcoin is approaching 230 million users. Bitcoin's adoption is slowly growing as more and more people realize that Bitcoin meets a need that will become essential in the future: to be able to control the fruits of one's labor without the risk of inflation eating away at one's purchasing power but also to be able to spend the fruits of one's labor without the risk of censorship. Focusing on Bitcoin will allow you to save time and protect the fruits of your labor in a future world that looks more uncertain than ever. Still, on the same topic, I think you might enjoy reading the following article: " Don’t Make This Mistake With Bitcoin, It Will Cost You a Lot of Money and Time " Stay strong, Stay Bitcoin HODLers. Don't take for granted the word of Bitcoiners who tell you that Bitcoin is an incredible monetary revolution, but verify it for yourself by developing the knowledge to build your truth about Bitcoin. That's what I suggest you do in the book “ .” The Truth About Bitcoin: Everything you need to build your truth about Bitcoin and stop trusting others without verifying The book is available on various platforms: - On Amazon in print format: 630 pages - On Amazon in Kindle format: 543 pages - On Gumroad in PDF format: 475 pages : contact me by email at - In P2P mode in PDF format or EPUB format with payment in BTC (-20% if you buy in Bitcoin) sylvain.saurel@gmail.com Also published here .

Andrew Carnegie’s Advice From Over 150 Years Ago Applies to Bitcoin More Than Ever

150 বছরেরও বেশি আগে থেকে অ্যান্ড্রু কার্নেগির পরামর্শ বিটকয়েনে আগের চেয়ে বেশি প্রযোজ্য

Andrew Carnegies Ratschläge von vor über 150 Jahren gelten mehr denn je für Bitcoin

El consejo de Andrew Carnegie de hace más de 150 años se aplica a Bitcoin más que nunca

Les conseils d'Andrew Carnegie il y a plus de 150 ans s'appliquent plus que jamais au Bitcoin

150 से अधिक वर्षों से एंड्रयू कार्नेगी की सलाह बिटकॉइन पर पहले से कहीं अधिक लागू होती है

150年以上前のアンドリュー・カーネギーのアドバイスは、これまで以上にビットコインに適用されます

150년 전 앤드류 카네기의 조언이 그 어느 때보다 비트코인에 적용됩니다

O conselho de Andrew Carnegie de mais de 150 anos atrás se aplica ao Bitcoin mais do que nunca

Andrew Carnegie'nin 150 Yıl Önceki Tavsiyeleri Bitcoin İçin Her Zamankinden Daha Fazla Uygulanıyor

Lời khuyên của Andrew Carnegie từ hơn 150 năm trước áp dụng cho Bitcoin hơn bao giờ hết

安德鲁卡内基 150 多年前的建议比以往任何时候都更适用于比特币

142 Stories To Learn About Angular

In this tutorial, you'll learn how to exchange data between a client and a server using Python socket programming and the Socket API.  Later, this tutorial will discuss exchanging data directly between two or more Python clients using a hosted provider.  The source code used in this tutorial can be found within the . GitHub repository Socket programming connects two sockets (a client socket and a server socket) and allows them to communicate bi-directionally in real-time.  Direct socket connections can benefit all real-time applications since data can be sent or received anytime. Environment Set up You will need a stable version of installed on your machine.  If you are a Windows user, you have the option of adding Python to your PATH. Python version 3.x You will also need a code editor to follow along with this tutorial. is a popular open-source and free code editor that supports many languages and frameworks, including Python. Visual Studio Code VSCode also supports extensions for Python to help with code completion and debugging. Build and run a Python socket application Let’s build a straightforward socket application using Python. Python provides a native (socket module), so developers don’t need to depend on external libraries. Begin by setting up the Python socket client and server: socket class Create the file in the project directory. To use sockets, import the Python socket library and create a new socket object that connects to a specified IP address (in this case, localhost on port number 8080, but you can select any ipv4 address). client.py Create a new connection to the socket server, send data to the TCP server, and close the socket connection. Your file should look like this: client.py import socket
client = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
client.connect(('0.0.0.0', 8080))
client.send("I am CLIENT\n".encode())
from_server = client.recv(4096)
client.close()
print (from_server.decode()) You will need a socket server to listen for incoming connections and messages from your client. Create the file and add the following contents: server.py import socket
serv = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
serv.bind(('0.0.0.0', 8080))
serv.listen(5)
while True:
  conn, addr = serv.accept()
  from_client = ''
  while True:
    data = conn.recv(4096)
    if not data: break
    from_client += data.decode('utf8')
    print (from_client)
    conn.send("I am SERVER\n".encode())
  conn.close()
  print ('client disconnected and shutdown') binds the socket object to the hostname (localhost) on port 8080 and continually listens for new client connections. When a client connects to this address, the server accepts the connection and reads any data. Server.py Once the data is successfully read from the client, the server provides a data response, at which point the client terminates the connection. To test this out yourself, open two terminal windows simultaneously.  In one window, run: python3 server.py In the second window, run: python3 client.py Notice that the server continues running and will establish a new connection every time you run the client and append any new output. The client will send the "I am CLIENT" string to the server and wait for a reply. The server will read the client’s message, output it to the terminal, and send back a response to the client. Socket Programming in Python using PubNub So far, this tutorial has covered exchanging messages between a server and a client, but what if you need to communicate directly between Python clients? Sending data directly between two or more client devices is tricky because you run into many scaling and security considerations as your number of devices increases. A client-server architecture is used to moderate and manage your client-to-client communication. If you don’t have a web server or you worry about your server scaling to meet your application’s demands, you should opt for a hosted, real-time communication solution such as . PubNub PubNub’s cross-platform SDKs, including , can identify users and send messages to specific channels, which only subscribed clients will receive. Python Client-to-Client Python socket programming So, how would the simple app presented previously be written with PubNub to exchange messages directly between two clients?  It’s essential to understand that although PubNub uses the ‘publish’ and ‘subscribe’ architecture (pub/sub) to send and receive bidirectional messages between endpoints, it still uses sockets behind the scenes. PubNub gives you the benefits of socket communication without worrying about the details of Python network programming and maintaining an always-on connection between your clients regardless of the operating system. To integrate PubNub into the project, install the PubNub package with pip in the terminal; this will allow you to use the and communicate with the PubNub infrastructure. PubNub Python SDK pip3 install 'pubnub>=7.1.0' You will need to create two clients to connect to and communicate over the PubNub network. Create a file and add the following code: pn_client_1.py from pubnub.callbacks import SubscribeCallback
from pubnub.enums import PNStatusCategory
from pubnub.pnconfiguration import PNConfiguration
from pubnub.pubnub import PubNub
import time
import os
pnconfig = PNConfiguration()
userId = os.path.basename(__file__)
pnconfig.publish_key = 'demo'
pnconfig.subscribe_key = 'demo'
pnconfig.user_id = userId
pnconfig.ssl = True
pubnub = PubNub(pnconfig)
def my_publish_callback(envelope, status):
  # Check whether request successfully completed or not
  if not status.is_error():
    pass
class MySubscribeCallback(SubscribeCallback):
  def presence(self, pubnub, presence):
    pass
  def status(self, pubnub, status):
    pass
  def message(self, pubnub, message):
    if message.publisher == userId : return
    print ("from device " + message.publisher + ": " + message.message)
pubnub.add_listener(MySubscribeCallback())
pubnub.subscribe().channels("chan-1").execute()
## publish a message
while True:
  msg = input("")
  if msg == 'exit': os._exit(1)
  pubnub.publish().channel("chan-1").message(str(msg)).pn_async(my_publish_callback) Create the file and add the same code as you used for pn_client_2.py pn_client_1.py The code above uses 'demo' keys, but you can obtain your custom PubNub keys for free. Run both and simultaneously in two different terminal windows pn_client_1.py pn_client_2.py python3 pn_client_1.py python3 pn_client_2.py Each client initializes its connection to the PubNub network and subscribes to receive new messages whenever they are published to the channel. You can think of this as sending data over a TCP socket in Python; behind the scenes, PubNub is creating and managing the socket for you and routing your message to all clients who are listening for it. Once the remote client receives the message, the received message is displayed on the command line. chan-1 And that’s all there is to it! For more information on developing with PubNub, check out our range of .  Alternatively, check out the to understand how the platform provides real-time interactivity to applications. PubNub supports TCP and UDP datagram communication, as well as Linux, Unix, and Windows. tutorials PubNub interactive live tour Also published here: https://www.pubnub.com/blog/socket-programming-in-python-client-server-p2p/

An Essential Guide to Socket Programming in Python: Client, Server, and Peer-to-Peer Libraries

Una guía esencial para la programación de sockets en Python: bibliotecas cliente, servidor y punto a punto

Un guide essentiel de la programmation de sockets en Python : bibliothèques client, serveur et pair à pair

पायथन में सॉकेट प्रोग्रामिंग के लिए एक आवश्यक गाइड: क्लाइंट, सर्वर और पीयर-टू-पीयर लाइब्रेरी

Python でのソケット プログラミングの基本ガイド: クライアント、サーバー、およびピアツーピア ライブラリ

Um guia essencial para programação de soquete em Python: bibliotecas cliente, servidor e ponto a ponto

Hướng dẫn cơ bản về lập trình socket trong Python: Thư viện máy khách, máy chủ và ngang hàng

Python 套接字编程基本指南：客户端、服务器和对等库

Snapshot testing is a powerful technique for ensuring that your React components behave as expected over time. With React Testing Library, you can easily implement snapshot testing to verify that your components are rendering correctly. In this article, we will explore the process of snapshot testing with React Testing Library, including why it’s a useful tool and how you can use it effectively in your own projects. Why you should migrate to RTL In my previous , I explained why you should migrate away from Enzyme and what tools you can build to support this migration. React Testing Library (RTL) is a great choice for migrating from Enzyme because it encourages testing the behavior of the application from the user’s perspective, rather than testing the internal implementation details. This makes the tests more robust and less prone to breaking when the implementation changes because they are focused on the outcome of an action, rather than testing the details of the implementation. post This leads to tests that are more readable, easier to maintain, and less brittle. But RTL can become a stumbling block if your project heavily relies on the JSX snapshots, or in other words, you are too lazy to write explicit assertions for your React components and simply do in all of your tests. expect(component).toMatchSnapshot() Why RTL is not good for snapshots? When your snapshot is more than a few dozen lines it’s going to suffer major maintenance issues and slow you and your team down. Remember that tests are all about giving you confidence that you wont ship things that are broken and you’re not going to be able to ensure that very well if you have huge snapshots that nobody will review carefully. I’ve personally experienced this with a snapshot that’s over 640 lines long. Nobody reviews it, the only care anyone puts into it is to nuke it and retake it whenever there’s a change… Kent C. Dodds (creator of RTL) React Testing Library is not necessarily “bad” for snapshot testing, but it is not designed to be used primarily for that purpose. Snapshot testing is often used to check that a component’s output remains the same, even if its implementation changes. While with Enzyme, you could simply use shallow API to produce a compact render tree you could match with the snapshot, with React Testing Library you would have to operate with the real DOM. Using Material UI as an example, if you had to snapshot a component that composes DataGrid component from this library, you would receive the following outputs: // with Enzyme shallow 
<DataGrid
  rows={[/*Rows data goes here*/]}
  columns={[/*Columns goes here*/]}
  pageSize={5}
  rowsPerPageOptions={[5]}
  checkboxSelection
/>

// with RTL
<div
  class="MuiDataGrid-root MuiDataGrid-root--densityStandard MuiDataGrid-withBorderColor css-1wgqnsa"
  role="grid"
  aria-colcount="6"
  aria-rowcount="2"
  aria-multiselectable="false"
>
  <div></div>
  <div class="MuiDataGrid-main css-opb0c2">
    <div
      class="MuiDataGrid-columnHeaders MuiDataGrid-withBorderColor css-1pzw8os"
      style="min-height: 56px; max-height: 56px; line-height: 56px;"
    >
      <div
        class="MuiDataGrid-columnHeadersInner css-vcjdx3"
        role="rowgroup"
        style="transform: translate3d(0px, 0px, 0px);"
      >
        <div role="row" aria-rowindex="1" class="css-k008qs">
... I intentionally did not put the entire HTML output here in the example, but you already see the difference. And you can also notice that HTML output contains hashed class names — this means, any time you consume a new version of the DataGrid component, you would get a new hash (this methodology is called “scoped class names” and it’s out of scope for this article). What to do? A piece of advice from Kent C. Dodds: “ ”. There is also a lint rule in called which could be pretty helpful in discouraging large snapshots. avoid huge snapshots and take smaller, more focused ones. While you’re at it, see if you can actually change it from a snapshot to a more explicit assertion (because you probably can 😉) eslint-plugin-jest “no-large-snapshots” However, I have another solution for you that is future-proof (compatible with the latest versions of React and RTL) and would not require you to re-write all the snapshot tests in your codebase. Moreover, it would be almost identical to the shallow snapshot produced by Enzyme! Word of caution — it works only with Jest, you may need to write another solution if you want to integrate it with something else. The solution is based on the library that is part of React ecosystem (see React ). You can be sure that it will work with the latest version of React (at the moment of writing it is 18.2.0) — here you can find the from Dan Abramov. react-shallow-renderer documentation commit Without further ado, let me introduce you to a solution: import React from 'react';
import ShallowRenderer from 'react-test-renderer/shallow';
import { isFragment, isLazy, isPortal, isMemo, isSuspense, isForwardRef } from 'react-is';

class ReactShallowRenderer {
  instance = null;
  shallowRenderer = null;
  constructor(children, { Wrapper = null } = {}) {
    this.shallowRenderer = new ShallowRenderer();
    this.shallowWrapper = Wrapper
      ? this.shallowRenderer.render(<Wrapper>{children}</Wrapper>)
      : this.shallowRenderer.render(children);
  }

  getRenderOutput() {
    if (!this.shallowWrapper) return this.shallowWrapper;
    const getNodeName = node => {
      return node.displayName || node.name || '';
    };

    const getWrappedName = (outerNode, innerNode, wrapperName) => {
      const functionName = getNodeName(innerNode);
      return outerNode.type.displayName || (functionName !== '' ? `${wrapperName}(${functionName})` : wrapperName);
    };

    const extractType = node => {
      if (typeof node === 'string') return node;
      const name = getNodeName(node.type) || node.type || 'Component';
      if (isLazy(node)) {
        return 'Lazy';
      }

      if (isMemo(node)) {
        return `Memo(${name || extractType(node.type)})`;
      }

      if (isSuspense(node)) {
        return 'Suspense';
      }

      if (isPortal(node)) {
        return 'Portal';
      }

      if (isFragment(node)) {
        return 'Fragment';
      }
      if (isForwardRef(node)) {
        return getWrappedName(node, node.type.render, 'ForwardRef');
      }
      return name;
    };

    const transformNode = node => {
      const extractProps = ({ children, ...props }, key) => {
        const childrenArray = Array.isArray(children) ? children : [children];
        return {
          children: childrenArray.filter(Boolean).flatMap(transformNode),
          props: {
            ...props,
            ...(key ? { key } : {}),
          },
        };
      };
      if (Array.isArray(node)) {
        return node.map(transformNode);
      }
      if (typeof node !== 'object') {
        return node;
      }
      return {
        // this symbol is used by Jest to prettify serialized React test objects: https://github.com/facebook/jest/blob/e0b33b74b5afd738edc183858b5c34053cfc26dd/packages/pretty-format/src/plugins/ReactTestComponent.ts
        $$typeof: Symbol.for('react.test.json'),
        type: extractType(node),
        ...extractProps(node.props, node.key),
      };
    };

    return transformNode(this.shallowWrapper);
  }
} The critical part here is how you output the tree. Jest has special requirements to print the React Test object in a prettified fashion: Test object needs to have in order to get integrated with the Jest serializer $$typeof: Symbol.for('react.test.json') refers to the name of the node that will be displayed ( ) type <ComponentName propA="1234" /> is an optional property that takes all children nodes that need to follow the same format, and - component properties that will be displayed as node attributes in the output. children props You can wrap it into a utility function and use it in your tests. The simplest example: const shallowRender = Component => new ReactShallowRenderer(Component).getRenderOutput(); Enter fullscreen mode Exit fullscreen mode If you are using Redux, you can enhance the example from Redux : documentation interface ExtendedRenderOptions extends Omit<RenderOptions, 'queries'> {
  preloadedState?: PreloadedState<RootState>
  store?: AppStore
  mode?: 'deep' | 'shallow'
}

export function renderWithProviders(
  ui: React.ReactElement,
  {
    preloadedState = {},
    // Automatically create a store instance if no store was passed in
    store = configureStore({ reducer: { user: userReducer }, preloadedState }),
    mode = 'deep',
    ...renderOptions
  }: ExtendedRenderOptions = {}
) {
  function Wrapper({ children }: PropsWithChildren<{}>): JSX.Element {
    return <Provider store={store}>{children}</Provider>
  }

  let renderOutput;
  if (mode === 'shallow') {
    renderOutput = {
      container: new ShallowRenderer(ui, { Wrapper })
        .getRenderOutput(),
    };
  } else {
    renderOutput = render(ui, { wrapper: Wrapper, ...renderOptions });
  }
  // Return an object with the store and all of RTL's query functions
  return { store, ...renderOutput }
} Here is an example of how you can use it in your tests: it('should match snapshot', () => {
   expect(shallowRender(<MyComponent />)).toMatchSnapshot();
});

it('should match snapshot with Redux', () => {
   const {container} = renderWithProviders(<MyComponent />, {mode: 'shallow'});
   expect(container).toMatchSnapshot();
}); Conclusion In conclusion, migrating away from Enzyme to React Testing Library can bring numerous benefits to your React application’s testing process. React Testing Library focuses on testing the behavior of a component from the user’s perspective, making the tests more robust, readable, and easier to maintain. However, it’s important to keep in mind that React Testing Library operates with the real DOM, and can produce large snapshots, which should be kept small and focused. Originally published here on February 4, 2023.

Understanding Snapshot Testing in the React Testing Library

If you've ever tried to compose a web report, you know what it feels like if the result is close but no cigar. It may work, but the scrolling is slow because of poor data rendering; customization is limited to a basic theme; and there’s no drag-and-drop functionality — slowing down work and irritating users. Finding a web pivot grid component that fits your project is possible, but not effortless. There are tons of options on the market: pivot table libraries, grid components with pivoting functionality, bundles with lots of reporting stuff, etc. So I did the research for you! I tested the ten most popular pivot solutions and wrote an honest opinion on every single one. I believe that data analytics rules the world, so I dedicate this project to finding a perfect tool from the developer's side of view. Every project demands a unique set of features in their pivot table. As a result, some devs pay attention to framework compatibility first, some test the loading speed, and some need flexible customization options. I decided to categorize these tools based on their licensing models. Let's start with free and open-source tools to analyze which features this category can offer. Free and Open-source Pivot table. js PivotTable.js is an open-source JavaScript Pivot Table library. Its code is the basis of many other pivot tables, which says a lot about its architecture and ease of work. It is also customizable not only in the way it looks but also for localization. This pivot grid also allows chart creation, including some types of bars and heat map options, but the variety of charts is relatively poor. The documentation describes the processes well, but this pivot is still simple in a functional way, so you probably will need to choose a more prosperous solution or make a lot of changes. You can also check other people's forks and play with the library yourself the way you need. It's a simple, yet excellent tool to start with. Pivot Table JS Demo Loading speed: 10 000 rows / per 90 msec Licensing: MIT WebDataRocks Pivot Table WebDataRocks Pivot Table offers data analysis and visualization with simple integration and complex data analysis. Its functionality is similar to Flexmonster (a more advanced pivot grid we will review later), though mileage may wary in terms of integration, customization options, and adding data sources. This tool was created by true fans of data, and the functionality shows. The tool is more functional than pivot table.js and looks up-to-date, with constant technical support. Another good thing about WebDataRocks Pivot is that it is absolutely free. But it does have some data limitations, which is fine as long as your needs don’t exceed 1 MB. The tool also serves as entry way into Flexmonster’s commercial options, since their team developed this free offering. WebDataRocks Pivot Table Example Loading speed: 10 000 rows / per 58 msec Licensing: Free, based on custom terms Commercial tools Flexmonster Pivot Table & Charts Flexmonster Pivot is a JavaScript tool for visualizing business data. This pivot table can be integrated with any stack due to the wide support of modern development technologies and frameworks. Rich functionality, including basic ones, is situated on a comfy, customizable toolbar. You can easily aggregate, filter, sort, and group data for specific insights. Try a drill-up-and-down function to see your data from different points of view. The great advantage of Flexmonster Pivot is that you can work with massive data sets from MongoDB, ElasticSearch, OLAP cubes, any SQL database, or files up to 1GB. Rendering even millions of rows won't cause any freezes or lags, as shown in one of the demos. True pros - the extensive API and the constant product update and support with the biweekly minors, so the team is working only on this one product. The only drawback I can call is the price for one pivot solution. Though, in my opinion, it is worth it if your aim is a pivot table in its best version. Flexmonster Pivot Table Example Loading speed: 10 000 raws / per 35 msec Licensing: starting at $799 Ag-grid Ag-grid is a JavaScript data grid. It works with popular frameworks, such as Angular, Vue, or React, and of course, pure JS, and boasts of a simple toolbar with all basic functions. Among them are column selection, column reorder, row expansion, pagination, and virtual scroll. More functions can be found in the documentation, which is well-structured but not often updated. And the rendering works fast, even with 100k rows. The ability to handle big data sets is an excellent advantage of Ag-grid, as seen in the comparative analysis towards the end of the article. Ag-grid can load 10 000 rows faster than most of the tools in this list. Nonetheless, Ag-grid might not be the best solution out there as it’s just a grid with a pivot function. Not necessarily a tool ultra focused on pivoting as a whole. Ag-Grid Demo Loading: 10 000 rows / 38 msec Licensing: MIT for non-commercial usage (without pivot option) A commercial license starts at $750 Dev bundles with pivot table controls Developers also have the choice of software packages that provide a full range of solutions. These are good for those looking for a full-fledged reporting solution within an analytical or planning application. Among these kits are Syncfusion, DevExtreme, Kendo UI Grid, and JQwidgets, which offer the ability to purchase pivot functionality either separately or as part of an overall package. Syncfusion Well-trusted enterprise company Syncfusion offers many software components, including a pivot table. Like most of the products in the list, this tool is compatible with popular frameworks and has basic pivot functionality: data binding, drilling up and down, Excel-like filtering and sorting, editing, Excel and PDF exporting, several built-in aggregations, field lists, and calculated fields. You can find all the needed demos and rich documentation on the site. They have a rich knowledge base and an active blog with various articles that can be helpful when using the component. It's a good choice for when you’re already within the Syncfusion ecosystem and need to add a pivot functionality. Syncfusion Demo Loading speed: 10 000 rows / 53 msec Pricing: starting at $995 DevExtreme DevExtreme has a bundle of JS components for web development. Their DataGrid is a client-side grid control available as a jQuery component that supports binding from local arrays, JSON files, Web API, OData services, and custom remote services. I have to note that this one has huge community support. For example, DevExtreme has 1.6K stars and 487 forks on GitHub. However, the pivot table does not seem to be the most popular products of this bundle. According to reviews, the company doesn’t focus on pivot tables as much as on other of its products. DevExtreme Demo Loading speed: 10 000 rows / per 90 msec Licensing model: Non-Commercial, Non-Competitive EULA A commercial license starts at $499 Kendo UI This bundle of web dev components are natively built for the most popular frameworks, and include one for a pivot grid. The component differs slightly from other pivot grids, but does include basic features such as paging, sorting, filtering, grouping, frozen columns, virtualization and endless scrolling, state management, binding to SignalR Hub, etc. Personally, this one looked abandoned, though developers claim they are working on enhancing the component. Due to a lack of a freemium version and rather basic demos, recommending this one is going to be difficult. However, many reviews say it works pretty well with Vue, so consider this if that’s what you’re working with. Kendo Pivot Grid Loading: 10 000 rows / 125 per msec A commercial license starts at $999 JQwidgets The JqxPivotGrid is a jQuery Grid widget that provides basic pivot functionality. This pivot can be customized with JavaScript APIs. It also works across different devices and browsers. JqxPivotGrid offers an intuitive and easy-to-use user interface with basic data interaction features like grouping, sorting, filtering, paging, and scrolling. This tool is a little clumsy, though you may like its support. This pivot was seriously puzzled when I tested 10 000 rows of data, meaning it’s not well suited for big data or those looking for customization. The website is also challenging to browse. But given that you get 60+ tools in the bundle with a price of $199, this could be an ideal choice for some. JQwidgets Demo Licensing: Non-commercial license Commercial license start at $199 Webix Webix offers JavaScript UI libraries for speeding up web development, among which you can find  pivot tables and charts. This component works with popular frameworks and claims to be highly flexible for any project. It provides automatic organizing, summarizing, and comparison of complex data. Demos to show their main functionality are presented on the site: filtering, sorting, highlighting cells with different colors, total amounts by columns and rows, ready-made structures for reports, etc. The pro: samples are helpful. The con: the documentation is uncomfortable. The speed test showed Webix has one of the highest scores and Flexmonster Pivot Table and Ag-Grid. Webix Pivot Grid Demo Loading speed: 10 000 rows / per 36 msec Commercial license starts at $889 DHTMLX JS Pivot Table **DHTMLX is a front-end toolkit for implementing complex user interfaces in enterprise web apps. With cross-browser and cross-platform support, they also have an extensive API list to configure your pivot table for any needs. You can customize each aspect of this pivot by modifying one of the available attributes. They are easy to integrate because all the required information, including documentation, forum, video tutorials, and technical support is super easy to reach. This product is actively managed, though the loading speed needs to be improved as my analysis detected this as one of the slowest pivot tables. As the DHTMLX pivot and Webix pivot belong to the same company and have many similarities, it still seems Webix pivot is better. Maybe they focused on different tools from their kit. DHTML Pivot demo Loading: 10 000 rows /per 86 msec A commercial license starts at $299 Comparative Graph Conclusion Now, after reading this research on the ten best pivoting components that are available on the market, you can make your own decision based on your needs and preferences. Have to say, they are placed in random order and divided into different categories. Note! The speed testing of the pivot grids is tricky, so the results are approximate. Even when testing on the same data, you need to ensure all tools are configured the same, otherwise the results might not be accurate across tools. I tried my best to arrange all the information  and tested the tools on the same data - 10 000 rows of CSV file. Yet, I believe the testing process could be far more accurate, so I hope in my next article I'll be able to show the most precise comparison of the speed on even bigger files up to several million rows. Such a test could show the pros and cons of using different approaches to loading files and rendering grids that all these tools use. As some of them are fast with small amounts of data, others can show a lot more stable results on all file sizes and also whether they can handle more rows at a time. This list contains the information and analysis of the most used and known pivot tools on the web right now. I hope this research was helpful for your project and provided you with a broad and thorough basis for choosing the most suitable component!

Top 10 Best Pivoting Components for Developers

A database allows you to scale reads and writes by adding nodes to the cluster while keeping all the benefits of relational databases. A key feature of a distributed SQL database is that it makes a cluster look like a single logical database. Applications don’t need to know the number of nodes or implement sharding logic. distributed SQL MariaDB Xpand is a distributed SQL database compatible with MariaDB in which SQL tables are automatically partitioned based on the hash of a subset of columns (the primary key by default). Each partition forms a slice of data that is placed in a node. When a write happens, the hash is calculated, and the operation is forwarded to the correct node. MariaDB Xpand rebalances the data when a node goes down, a new node is added, or a hotspot is detected. All this happens automatically and transparently to the application. MariaDB Xpand Multiple writes can be sent in parallel to multiple nodes. Reads are forwarded to the nodes that contain the slices with the data and can run in parallel minimizing lag. This architecture is able to handle large amounts of data and maintain high levels of performance that surpass non-distributed databases. The query is sent to the data instead of data to the query. The following diagram is an example of a MariaDB Xpand database cluster with three nodes. Each slice is shown in a different color. The diagram also shows how replicas are automatically maintained for high availability: During a scale-out process, a new node is added ( in the following figure). MariaDB automatically rebalances the data to increase the overall capacity of the system: xpand_4 Distributed SQL is the best alternative to manual database sharding. It frees DevOps engineers and DBAs from tedious management operations such as data rebalancing. It also frees developers from implementing and maintaining custom sharding logic that increases the complexity of queries (especially with cross-node joins). A developer can simply write a SQL query as if it was a single-node database. Getting started with Docker The best way to get started with Distributed SQL is to try it out. makes this process extremely simple. To spin up a single-node MariaDB Xpand instance suitable for testing and experimentation using Docker, run the following: Docker docker run --rm -p3306:3306 --ulimit memlock=-1 --name xpand mariadb/xpand-single You can connect to the database as if it was a single-node MariaDB server. See to learn how to connect from multiple programming languages (Java, JavaScript/NodeJS, Python, C++). You can also connect from SQL clients such as DBeaver, DataGrip, or any IDE extensions for SQL databases. this website Once you have tried your application with a single-node Xpand instance, the best way to test its scalability and other advanced features (like automatic scaling and columnar indexing for analytics) is to head through , a cloud service that offers a free tier (no credit card required). SkySQL There also are plenty of online resources to learn more about Distributed SQL and MariaDB Xpand: Distributed SQL for Dummies (free book) Getting Started With Distributed SQL (refcard) MariaDB Xpand documentation MariaDB Xpand for distributed SQL (video animation) Taking Distributed SQL to the Next Level with Columnar Indexing (talk) What Is Distributed SQL? (webinar) Distributed SQL Essentials (refcard)

Getting started with Distributed SQL

Stories, News & Mentions about DATAGRAIL

Datagrail’s Stories on HackerNoon