Cliently is the premier SaaS application that helps companies of all sizes find sustainable sources of leads

Cliently

cliently

Everybody wants to access web apps from their mobile phone and that’s why developers must create their React apps in a mobile-first fashion. There are multiple problems when comes to building apps for various devices such as many display resolutions, screen orientation, and touch events. Today, I’ll show you how to handle touch events in like a pro without any NPM libraries. Obviously, libraries can make your lives easier but did you know it only takes 50 lines of code to create your own component to handle mobile swipe events? I will teach you how to do so. React As always, my articles are based on the problems I was solving in real life. Recently I decided to migrate my version of the 2048 Game to Next.js and React 18 and this inspired me to rethink some parts of the initial design. To eliminate confusion, I will only focus on handling touch events in React and show you the best practices when comes to creating React apps that support mobile devices. open-source If you are intrigued by how to build the 2048 game from scratch, you should consider enrolling to my React course on Udemy. Link below. I will walk you through the entire process of creating the 2048 Game with animations. In the end, learning should bring us joy and fulfillment and nothing is more satisfying than making a complete game from scratch. Quick intro In early 2020, I released the very first version of my 2048 game. I wrote a short article describing my decision process and why I designed my code in a different way than other open-source versions. Immediately my article went viral on Reddit and FreeCodeCamp since it completely changed the perspective on this problem. My implementation was different than others because it supported mobile devices and had awesome animations. Other open source implementations of 2048 in React were janky and incomplete. Despite my efforts, the initial version wasn’t perfect and that’s why I decided to refresh it. I updated it to React 18, changed the build process by migrating it to Next.js, and rewrote styles from LESS to classic CSS. Still, I wasn’t happy about the fact I used a lot of NPM libraries - especially libraries responsible for dealing with mobile touch events. I used a library called and it was perfect to support multi-gesture touch events in JavaScript. Unfortunately, doesn’t support React and it forced me to create my own React wrapper for this library. But I found yet another problem - the NPM library hadn’t been updated for the last 8 years and it puzzled me. is downloaded more than 1.4 million times weekly but nobody is maintaining it. hammerjs hammerjs hammerjs Technically, my project wasn’t critical so I still could take advantage of this library. I always prioritize high quality of code but usage of unmaintained library cannot be considered as good practice. That’s why I created my component from scratch. Custom React Component - MobileSwiper I decided to call this component and declared two props as its arguments – and : MobileSwiper children onSwipe export default function MobileSwiper({ children, onSwipe }) {
	return null   
} Let me briefly explain them: allow me to inject any HTML elements inside this component. children is a callback that will be triggered each time user swipes within a given area. In my case, I want to enable mobile swipes on the game board only. All other parts of app should be scrollable. onSwipe To detect the swipeable area I created a reference to the DOM element. Basically, only this element will allow custom touch events. I did it by using the hook, and using it to reference a element: useRef div import { useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
	const wrapperRef = useRef(null)

    return <div ref={wrapperRef}>{children}</div>
} Once I declared the area I was ready to focus on handling swipes. The easiest way to detect them is by comparing the starting and ending positions of the user's finger. This means I needed to store the initial position of the user's finger in state ( and coordinates) and compare it with the last known finger position (before the user lifts the finger off their screen): x y import { useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
	const wrapperRef = useRef(null)
	const [startX, setStartX] = useState(0)
	const [startY, setStartY] = useState(0)    

    return <div ref={wrapperRef}>{children}</div>
} Then I was ready to implement finger tracking, I created two callbacks using standard JavaScript touch events: used to set the starting position of the user's finger. handleTouchStart handling the final position of the user's finger and calculating the shift (delta) from the starting point. handleTouchEnd Let's look into the event handler first: handleTouchStart import { useCallback, useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
	const wrapperRef = useRef(null)
	const [startX, setStartX] = useState(0)
	const [startY, setStartY] = useState(0)    

	const handleTouchStart = useCallback((e) => {
        if (!wrapperRef.current.contains(e.target)) {
      		return
    	}

    	e.preventDefault()

	    setStartX(e.touches[0].clientX)
    	setStartY(e.touches[0].clientY)
  	}, [])
    
    return <div ref={wrapperRef}>{children}</div>
} Let me explain it: I wrapped this helper into the hook to improve the performance (caching). useCallback The statement checks if user is swiping within a declared area. If they do it outside of it,  the event will not be triggered and user will simply scroll the application. if disables the default scrolling event. e.preventDefault() The last two lines store and coordinates in state. x y Now let's focus the event handler: handleTouchEnd import { useCallback, useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
	const wrapperRef = useRef(null)
	const [startX, setStartX] = useState(0)
	const [startY, setStartY] = useState(0)    

	const handleTouchStart = useCallback((e) => {
        if (!wrapperRef.current.contains(e.target)) {
      		return
    	}

    	e.preventDefault()

	    setStartX(e.touches[0].clientX)
    	setStartY(e.touches[0].clientY)
    }, [])
    
  	const handleTouchEnd = useCallback((e) => {
        if (!wrapperRef.current.contains(e.target)) {
            return
        }
        
        e.preventDefault()
        
        const endX = e.changedTouches[0].clientX
        const endY = e.changedTouches[0].clientY
        const deltaX = endX - startX
        const deltaY = endY - startY
        
        onSwipe({ deltaX, deltaY })
    }, [startX, startY, onSwipe])
    
    return <div ref={wrapperRef}>{children}</div>
} As you can see, I’m taking the final and coordinates of user's finger and deduct the starting and coordinates from the final ones. Thanks to that I am able to calculate horizontal and vertical shift of the finger (aka deltas). x y x y Then I passed calculated deltas onto the callback which will be coming from other components to promote reusability. PS. If you remember, I declared the callback in the component's props. onSwipe onSwipe In the end, I needed to take advantage of created event callbacks and hook them into the event listener: import { useCallback, useEffect, useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
	const wrapperRef = useRef(null)
	const [startX, setStartX] = useState(0)
	const [startY, setStartY] = useState(0)    

	const handleTouchStart = useCallback((e) => {
        if (!wrapperRef.current.contains(e.target)) {
      		return
    	}

    	e.preventDefault()

	    setStartX(e.touches[0].clientX)
    	setStartY(e.touches[0].clientY)
  	}, [])
    
  	const handleTouchEnd = useCallback(
    (e) => {
        if (!wrapperRef.current.contains(e.target)) {
            return
        }
        
        e.preventDefault()
        
        const endX = e.changedTouches[0].clientX
        const endY = e.changedTouches[0].clientY
        const deltaX = endX - startX
        const deltaY = endY - startY
        
        onSwipe({ deltaX, deltaY })
    }, [startX, startY, onSwipe])   
    
 	useEffect(() => {
        window.addEventListener("touchstart", handleTouchStart)
        window.addEventListener("touchend", handleTouchEnd)
        
        return () => {
            window.removeEventListener("touchstart", handleTouchStart)
            window.removeEventListener("touchend", handleTouchEnd)
        }
  	}, [handleTouchStart, handleTouchEnd])
    
    return <div ref={wrapperRef}>{children}</div>
} Let’s use it The component is ready now and I can use it with my other components. As I mentioned at the beginning, I created this component to handle mobile swipes on the game board of my 2048 Game, and that’s where this example code comes from. MobileSwiper If you want to use it in your project feel free to copy & paste the function and hook it as I did it on the game board: handleSwipe import { useCallback, useContext, useEffect, useRef } from "react"
import { Tile as TileModel } from "@/models/tile"
import styles from "@/styles/board.module.css"
import Tile from "./tile"
import { GameContext } from "@/context/game-context"
import MobileSwiper from "./mobile-swiper"

export default function Board() {
	const { getTiles, moveTiles, startGame } = useContext(GameContext);
	
    // ... removed irrelevant parts ...
    
    const handleSwipe = useCallback(({ deltaX, deltaY }) => {
    	if (Math.abs(deltaX) > Math.abs(deltaY)) {
            if (deltaX > 0) {
            	moveTiles("move_right")
            } else {
            	moveTiles("move_left")
            }
        } else {
            if (deltaY > 0) {
                moveTiles("move_down")
            } else {
                moveTiles("move_up")
            }
        }
    }, [moveTiles])

 	// ... removed irrelevant parts ...

	return (
    	<MobileSwiper onSwipe={handleSwipe}>
      		<div className={styles.board}>
        		<div className={styles.tiles}>{renderTiles()}</div>
        		<div className={styles.grid}>{renderGrid()}</div>
      		</div>
    	</MobileSwiper>
  	)
} Let's focus on the handler first. As you can see, I‘m comparing if is greater than to estimate if the user swiped horizontally (left/right) or vertically (top/bottom). handleSwipe deltaX deltaY If it was a horizontal swipe, then: negative means they swiped to the left. deltaX positive means they swiped to the right. deltaX If it was a vertical swipe, then: negative means they swiped up. deltaY positive means they swiped down. deltaY Now, let's move on to the statement of the Board component. As you can see, here’s where my custom MobileSwiper component comes into play. I am passing the helper to the property, and wrapping the HTML code of the game board to enable swiping on it. return handleSwipe onSwipe It works but unfortunately, the result isn't perfect - scrolling events are mixed up with swipes: This is happening because modern browsers use passive event listeners to improve the scrolling experience on mobile devices. it means that the I added that event handlers never take effect. preventDefault To fix scrolling behavior, I disabled passive listeners on the component by setting flag to : MobileSwiper passive false import { useCallback, useEffect, useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
	// ... removed to improve visibility ...
    
 	useEffect(() => {
        window.addEventListener("touchstart", handleTouchStart, { passive: false })
        window.addEventListener("touchend", handleTouchEnd, { passive: false })
        // ... removed to improve visibility ...
  	}, [handleTouchStart, handleTouchEnd])
    
	// ... removed to improve visibility ...
} Now the scrolling behavior is gone and my 2048 Game works like a charm: Conclusion I am not against using libraries because they can speed up your work but sometimes you can build your custom solution in 50 lines of code just like I showed you today. That’s why i believe that you don’t need any library to handle mobile events in React. Wanna learn more tricks like this one? If you wish to learn more React tricks like this one, or simply you want to say ‘thank you’, consider joining my course on Udemy where I will teach you how to . You will not only learn clever tricks like that one but also find solutions to the most common mistakes that React developers make. create the 2048 game in React (special discount for HackerNoon readers) 🧑‍🎓 Join React 18 course on Udemy Believe it or not, this is the most up-to-date React 18 and Next.js course on Udemy. I released in January 2024 and I’ll keep updating it.

You Don't Need NPM Libraries To Handle Mobile Events

DRY, or Don't Repeat Yourself, is one of the most well-known software development principles. Many engineers will go to great lengths to achieve this laudable goal, so a successful programming language must be designed with this in mind. Interfaces are just one of the tools that programming languages implement to enable code reuse. Although there are countless differences in the way programming languages implement interfaces, they all define a contract for interaction between software components. Differentiating itself from the typical object-oriented implementation, the Go programming language implements interfaces in a way that aims to reduce complexity, encourage composition, and enable flexible use of the types. Implicit Interfaces The most impactful difference between Go’s interfaces and those from object-oriented languages is that Go’s interfaces work by implicit implementation. Rather than requiring a type to explicitly declare that it implements an interface, determines that a type satisfies an interface as long as it implements all of the required method signatures. The different types and the interface they implement are only coupled by the code using them, rather than always being linked together. Go This difference offers a few key benefits: Reduce complexity and coupling by limiting the hierarchical inheritance of interfaces Simplify types that implement multiple interfaces Enables you to add interfaces later on when they become necessary instead of designing entire applications around them Interfaces can be created for types in different packages This last benefit is the most interesting and unique. The ability to define an interface based on external types leads to a few more specific advantages: Client code can define how it will use types rather than relying on library code to tell it how types must be used Create polymorphic relationships with types that you do not own or cannot change, which allows you to use them more flexibly Solve import cycle issues by changing the location of interface definitions Create mocks of imported types to make your code more testable No Inheritance By excluding inheritance, Go reduces the complexity that can occur from a deep hierarchical structure. When programs are designed around a base set of classes or interfaces, any simple changes to those base structures require a significant refactor. The alternative practice of composition leads to reduced complexity and more readable code. Composition relies on splitting up functionality among different types and using them together, instead of re-defining the functionality of types through inheritance. Now you can re-use these individual components elsewhere, add more functionality with new components, and easily refactor or remove existing ones. Instead of being concerned about what type something , your code just needs to know about what that type , and luckily the interface informs it. is can do Use Case: Polymorphism Polymorphism is perhaps the entire reason behind the existence of interfaces. This common practice is one of the most effective and easy-to-use methods of code reuse. Since an interface defines a strict contract for how types are used, these different types can be used interchangeably; this is polymorphism. A very common and useful scenario for this is having a flexible storage backend for your program: use Postgres in production, SQLite when running locally, and mocks when testing (or skip the database mocks, but that's a topic for another day). type StorageClient interface {
    GetValue(id string) (string, error)
}

func NewStorageClient(clientType string) (StorageClient, error) {
    switch clientType {
        case "sqlite":
            return sqlite.NewClient()
        case "postgres":
            return postgres.NewClient()
        default:
            return nil, fmt.Errorf("invalid client type: %s", clientType)
    }
} This implementation allows you to easily use the interface throughout the program without concern for the data storage layer behind it. StorageClient Use Case: Testing and Mocks You can take advantage of the implicit nature of interfaces by defining an interface for the functions you use from an external library. For example, you are assigned a task to implement a function that fetches recent rain data, in inches, from a weather data API. The made-up weather provider publishes Go package called , which provides a struct with various weather-related methods returning data in metric units: weather Client func GetRainInches(since time.Duration, client weather.Client) (float32, error) {
    rainMM, err := client.GetRain(since)
    if err != nil {
        return 0, fmt.Errorf("error getting data from API: %w", err)
    }

    return rainMM / 2.54, nil
} How will you unit test this code? Since Go has implicit interfaces, you can create your interface that just defines the methods that you need from the library. Now, if your function expects this interface instead, you can create your mocks. Since you currently just need the method, this is simple: GetRain type WeatherClient interface {
    GetRain(time.Duration) (float32, error)
}

func GetRainInches(since time.Duration, client WeatherClient) (float32, error) {
    rainMM, err := client.GetRain(since)
    if err != nil {
        return 0, fmt.Errorf("error getting data from API: %w", err)
    }

    return rainMM / 2.54, nil
} Then, your test file might contain a new struct that also implements the interface: type MockWeatherClient struct {
    expectedErr error
    expectedMM  float32
}

func (c MockWeatherClient) GetRain(time.Duration) (float32, error) {
    return c.expectedMM, c.expectedErr
} After this simple refactor, you do not depend on external libraries to provide interfaces that make your code testable! You have the additional side-effect of being one step closer to allowing your program to use different weather APIs generically. Conclusion and Warnings While interfaces in Go were designed with considerations for simplicity and avoiding some of the common pitfalls of object-oriented patterns, there are still some things to be aware of. It may be tempting to define interfaces for everything with the hopes that you can create a more generic and flexible program. Remember that one of the implicit interfaces is that you can easily create a new interface when you need it without making changes to any existing types, so there is no benefit to creating interfaces early in the process. Additionally, since types do not explicitly declare which interfaces they implement, it may be hard to tell which types are being used by your program when you have superfluous interfaces. While there are always tradeoffs and no perfect solutions, I have found Go's version of interfaces to be incredibly flexible, intuitive, and useful. I have been able to create more flexible programs and improve testability all while minimizing complexity. Also published here.

Go Interfaces Are Just Like Magic

The PDF format has become indispensable in modern software, serving as a versatile solution for diverse document types. For businesses seeking secure, editable, and user-friendly PDFs, emerges as a valuable choice. boast a rich array of features catering to various industries. Foxit Foxit’s PDF SDK libraries Web browser-based PDFs, in particular, find myriad applications in document management. They play a pivotal role in numerous banking systems, facilitating tasks such as generating monthly statements. Additionally, the compliance industry relies on web-based PDFs for secure data collection and storage. This tutorial guides you through leveraging the Foxit PDF SDK for Web to craft customized form fields within your web browser PDF documents. The accompanying allows you to follow along and implement the steps outlined in the tutorial. GitHub repository What is Foxit PDF SDK for Web? , among the diverse PDF SDKs offered by Foxit, stands out as an all-encompassing PDF library that leverages the advantages of Foxit’s rendering engine. This SDK empowers you to seamlessly integrate a comprehensive and fully customizable PDF viewer into your applications. The Foxit PDF SDK for Web Web PDFs crafted with Foxit’s SDK enable users to effortlessly view, fill out, annotate, and sign documents in various languages directly from their mobile or desktop browsers using JavaScript. The SDK is compatible with all major browsers, including Firefox, Safari, Chrome, and Opera. To illustrate the functionality, you will embark on creating a new PDF project from a template, employing the Foxit PDF SDK for Web to provide the necessary structure. This hands-on approach will offer a practical demonstration of how the SDK enhances PDF capabilities within your web-based projects. Implementing Foxit PDF SDK for Web Foxit PDF SDK for Web. The ZIP file should contain the SDK, documentation and examples. Download You can preview these examples by running an HTTP server from the unzipped directory. # NPX available with NPM v5.2 or newer
npx http-server Setup the Project This tutorial uses for frontend tooling. It’s based on ES modules (ESM), fast, and comes with everything you need to use the SDK out of the box. To create a new project from a template and start the development server, make sure you’ve got Node.js version 12.2.0 or newer and run the following commands: Vite npm create vite@latest project -- --template vanilla
cd project
npm install
npm run dev Move the SDK into the created directory. For the rest of this tutorial, the SDK is assumed to be available at , relative to the parent directory. ./FoxitPDFSDKForWeb project Loading the PDF You will need a PDF viewer with a document uploaded to begin experimenting. To initialize the PDF viewer, first create the HTML structure and load the SDK. 

<body>
<div class="container">
<div id="viewer"></div>
<div id="menu"></div>
</div>
<script src="./FoxitPDFSDKForWeb/lib/PDFViewCtrl.full.js"></script>
<script type="module" src="/main.js"></script>
</body>
 Additionally, in , add some CSS to style the elements: style.css /* style.css */
html {
height: 100%;
}b
ody {
height: 100%;
margin: 0;
}.
container {
width: 100%;
height: 100%;
display: flex;
}#
viewer {
height: 100%;
flex: 1;
overflow: auto;
}#
menu {
width: 10rem;
}.
menu-element {
background: #f1f5f9;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;font-family: monospace;
margin: 0.5rem;
} Inside , use the SDK to create an instance of the : main.js pdfViewer import "./style.css";
const licenseSN = "...";
const licenseKey = "...";
const viewerContainer = document.getElementById("viewer");
const pdfViewer = new PDFViewCtrl.PDFViewer({
libPath: "./FoxitPDFSDKForWeb/lib",
jr: {
licenseSN,
licenseKey,
},
customs: {
ScrollWrap: PDFViewCtrl.CustomScrollWrap.create(viewerContainer),
},
}); You can find your values for and inside the file. licenseSN licenseKey ./FoxitPDFSDKForWeb/examples/license-key.js The pdfViewer is created by providing the constructor with a configuration object containing: The relative path to the folder of the unzipped SDK package libPath: lib Config options for the JR engine that include, most importantly, licensing information jr: A custom component that controls PDF sizing and scrolling, where setting it adjusts the viewer to the container customs.ScrollWrap: With created, all you have to do is initialize it and load the document: pdfViewer // ...
const loadPDF = async (url) => {
const response = await fetch(url);
const blob = await response.blob();return pdfViewer.openPDFByFile(blob);
};
pdfViewer.init(viewerContainer);
loadPDF("./FoxitPDFSDKForWeb/docs/FoxitPDFSDKforWeb_DemoGuide.pdf"); The above snippet fetches the PDF file as a and opens it in the viewer using its method. The PDF document used is a demo guide from the SDK’s included documentation. blob openPDFByFile() The additional space on the right will serve as a menu for draggable form fields. Creating Custom Form Fields All you need to create a form field with the Foxit SDK is a viewer, the form field’s metadata (such as field type or select options), and the form field position. For this example, you’ll create a set of predefined form fields with ready metadata that the user can drag and drop into the viewer. Defining Metadata Start by defining the metadata for allowed fields, as well as additional helpers: // ...
const menuContainer = document.getElementById("menu");
const randomId = () => `_${Math.random().toString(36).substring(2, 9)}`;
const FieldTypes = PDFViewCtrl.PDF.form.constant.Field_Type;
const formFields = [
{
label: "Push Button",
name: "push-button",
type: FieldTypes.PushButton,
width: 50,
height: 30,
},
{
label: "Checkbox",
name: "checkbox",
type: FieldTypes.CheckBox,
width: 50,height: 30,
},
{
label: "Radio Button",
name: "radio-button",
type: FieldTypes.RadioButton,
width: 80,
height: 30,
},
{
label: "Combo Box",
name: "combo-box",
type: FieldTypes.ComboBox,
width: 60,
height: 30,
},
{
label: "List Box",
name: "list-box",
type: FieldTypes.ListBox,
width: 60,
height: 100,
},
{
label: "Text",
name: "text",
type: FieldTypes.Text,
width: 60,
height: 30,
},
];
const comboBoxOptions = [
{ label: "10", value: "10", selected: true, defaultSelected: true },
{ label: "20", value: "20", selected: false, defaultSelected: false },
{ label: "30", value: "30", selected: false, defaultSelected: false },
{ label: "40", value: "40", selected: false, defaultSelected: false },
];
const listBoxOptions = comboBoxOptions; The function will generate IDs to identify form fields within the document. is a shortcut for faster reference of predefined field types available in the SDK. Each form field entry contains: randomId() FieldTypes A to inform the user about its use label A for matching dragged elements to the metadata entries name A to indicate the field’s type type A and for calculating the position rectangle within the PDF width height Lastly, comboBoxOptions and listBoxOptions contain sample options for fields that require users to select one. Creating Drag and Drop Elements With the metadata ready, you can create a function for handling the logic of drag and drop, as well as the form field placement: // ...
const loadFormFieldsMenu = async (PDFDoc) => {
const PDFForm = await PDFDoc.loadPDFForm();
formFields.forEach((formField) => {
const element = document.createElement("div");
element.draggable = true;
element.id = formField.name;
element.classList.add("menu-element");
element.textContent = formField.label;
element.addEventListener("dragstart", (event) => {
event.dataTransfer.setData("text/plain", event.target.id);
});
menuContainer.append(element);
});
}; The function accepts —an SDK object representing a PDF document—as an argument. It’s used to retrieve a object, which will be used to add and configure the form fields, after those fields are processed into draggable elements and added to the side menu. PDFDoc PDFForm Each element has a attribute set to to allow for dragging, as well as an corresponding to each form field’s unique name to match them with the underlying metadata. This is later used inside the event listener to transfer it during the drag and drop action. draggable true id id dragstart To get the parameter required for the function, you’ll have to get the resulting of the function by modifying it as below: PDFDoc loadFormFieldsMenu() promise loadPDF() // ...
loadPDF("./FoxitPDFSDKForWeb/docs/FoxitPDFSDKforWeb_DemoGuide.pdf").then(
(PDFDoc) => {
loadFormFieldsMenu(PDFDoc);
}
); With the menu items created, the app now looks like this: Implementing Drag & Drop Functionality Having created the draggable elements, it’s time to fully implement the drag and drop functionality and allow for creating form fields in the viewer: // ...
const loadFormFieldsMenu = async (PDFDoc) => {
// ...
viewerContainer.addEventListener("dragover", (event) => {
event.preventDefault();
});
viewerContainer.addEventListener("drop", async (event) => {
event.preventDefault();
const droppedFormFieldName = event.dataTransfer.getData("text/plain");
const formField = formFields.find(
({ name }) => name === droppedFormFieldName
);
const pos = await pdfViewer.convertClientCoordToPDFCoord({
clientX: event.clientX,
clientY: event.clientY,
});
const id = randomId();await PDFForm.addControl(pos.index, id, formField.type, {
left: pos.left - formField.width / 2,
right: pos.left + formField.width / 2,
top: pos.top + formField.height / 2,
bottom: pos.top - formField.height / 2,
});
const field = PDFForm.getField(id);
if (formField.type === FieldTypes.ComboBox) {
field.setOptions(comboBoxOptions);
} else if (formField.type === FieldTypes.ListBox) {
field.setOptions(listBoxOptions);
}
});
};
// ... In the above code, the event listener forwards the interaction to be handled in the event by calling . dragover drop preventDefault() Inside the event handler, the matching metadata is first retrieved using the dragged element’s data. Then, the mouse position from the event is transformed into PDF coordinates using the method available on the instance. drop convertClientCoordToPDFCoord() pdfViewer The position, metadata, and randomly generated ID are used in the method call from the object created earlier in the function. The method accepts the following arguments: addControl() PDFForm The index of the page to place the form field at (retrieved from call) convertClientCoordToPDFCoord() The randomly generated ID for the newly created form field The type of the form field according to provided constants (retrieved from metadata) The argument that defines the placement for the form field in the form of a rectangle, calculated using and to make the mouse coordinates the form field’s center width height Finally, in case the field accepts a list of options, it’s first accessed by the method of the object using the ID. The options are set accordingly using the method. getField() PDFForm setOptions() The final app, with a few form fields already placed, looks like this: Conclusion Adding functionality to your PDFs can indeed bring significant benefits to your organization and users. Electronic updates and signatures save time, money, and effort, while customized and secure documents enhance trust in your company. As demonstrated earlier, multilingual PDF tool, coupled with the Foxit PDF SDK for Web, provides a robust solution. You can create custom form fields, implement drag-and-drop functionality, and unlock a range of capabilities. However, this is just the tip of the iceberg. The Foxit PDF SDK for Web offers a comprehensive set of features for further enhancing your PDF functionality. Foxit’s To delve deeper into the possibilities, refer to the and additional resources provided by the SDK. The documentation will guide you through advanced features, customization options, and best practices. official documentation If you want to review the tutorial or check your work, you can refer to the associated with the tutorial. The repository likely contains the source code, examples, and additional materials to help you understand and implement the concepts covered in the tutorial. GitHub repository Also published . here

A Guide to Creating Custom Form Fields Using the Foxit PDF SDK for Web

ওয়েবের জন্য Foxit PDF SDK ব্যবহার করে কাস্টম ফর্ম ফিল্ড তৈরি করার জন্য একটি গাইড

Eine Anleitung zum Erstellen benutzerdefinierter Formularfelder mit dem Foxit PDF SDK for Web

Una guía para crear campos de formulario personalizados utilizando Foxit PDF SDK para Web

Un guide pour créer des champs de formulaire personnalisés à l'aide du SDK Foxit PDF pour le Web

वेब के लिए फॉक्सिट पीडीएफ एसडीके का उपयोग करके कस्टम फॉर्म फ़ील्ड बनाने के लिए एक गाइड

Foxit PDF SDK for Webを使用してカスタムフォームフィールドを作成するためのガイド

웹용 Foxit PDF SDK를 사용하여 사용자 정의 양식 필드를 만드는 방법에 대한 안내

Um guia para criar campos de formulário personalizados usando o Foxit PDF SDK for Web

Руководство по созданию настраиваемых полей формы с помощью Foxit PDF SDK для Интернета

Web için Foxit PDF SDK'yı Kullanarak Özel Form Alanları Oluşturma Kılavuzu

Hướng dẫn tạo trường biểu mẫu tùy chỉnh bằng Foxit PDF SDK cho web

使用 Foxit PDF SDK for Web 创建自定义表单字段的指南

In a previous post, I provided an introduction to Apache Iceberg and showed how it uses MinIO for storage. I also showed how to set up a development machine. To do this, I used Docker Compose to install an Apache Spark container as the processing engine, a REST catalog, and MinIO for storage. I concluded with a very simple example that used Apache Spark to ingest data and PyIceberg to query the data. If you are new to Apache Iceberg or if you need to get Apache Iceberg set up on your development machine, then give this a read. introductory post In this post, I’ll pick up where my previous post left off and investigate a common big data problem – the need for a single solution to provide storage for raw data, unstructured data, and structured data (data that has been curated from raw data). Additionally, the same solution should provide a processing engine that allows for efficient reporting against the curated data. This is the promise of Data Lakehouses - the capabilities of Data Warehouses for structured data and the capabilities of Data Lakes for unstructured data - all in a centralized solution. Let’s look at our big data scenario in more detail. A Common Problem The diagram below depicts a common problem and a hypothetical solution. Data is coming into a data center from multiple locations and in multiple formats. What is needed is a centralized solution that allows raw data to be transformed such that a processing engine can efficiently support business intelligence, data analytics, and machine learning. At the same time, this solution must also be capable of storing unstructured data (text, images, audio, and video) for data exploration and machine learning. It should also keep any data that was transformed in its original format in case a transformation needs to be replayed or a data integrity issue needs to be investigated. As a concrete example, imagine a global custodial bank that is managing mutual funds for its clients. Data representing the accounting book of records and the investment book of records for each fund for each client is streaming into the Data Lakehouse constantly from geographies around the world. From there, safe passage checks need to occur (was everything sent received), and data quality checks need to run. Finally, the data can be partitioned and loaded into another store that will support start-of-day and end-of-day reporting. Alternately, maybe this diagram represents an IOT scenario where weather stations are sending temperature and other weather-related data. Regardless of the scenario, what is needed is a way to store the data safely in its original format and then transform and process any data that needs to be stored in a more structured fashion - all in one centralized solution. This is the promise of a Data Lakehouse - the best of a Data Warehouse and a Data Lake combined into one centralized solution. Let’s make the hypothetical solution described above real. This is depicted in the diagram below. There are two logical components to our Data Lakehouse. The first is an implementation of Apache Iceberg for structured data - the equivalent of a Data Warehouse. (This is what I built out in my - so I will not go into detail here.) The second logical component is MinIO for unstructured data - the Data Lake side of our Data Lakehouse. All data coming into the Lakehouse is delivered to this logical instance of MinIO. In reality, the two logical instances of MinIO shown above could be the same instance of MinIO in your data center. If the cluster you are running MinIO in can handle the ingestion of all incoming data and the processing requirements of Apache Iceberg, then such a deployment will save money. This is, in fact, what I will do in this post. I’ll use a bucket within Apache Iceberg’s instance of MinIO to hold all unstructured and raw data. previous post Let’s start playing with data by introducing the dataset I will use for this exercise and ingesting it into MinIO. The Global Summary of the Day Dataset The dataset we will experiment with in this post is a public dataset known as the Global Surface Summary of the Day (GSOD), which is managed by the National Oceanic and Atmospheric Administration (NOAA). NOAA currently maintains data from over 9000 stations around the world and the GSOD dataset contains summary information per day from these stations. You can download the data . There is one gzip file per year. It starts in 1929 and ends in 2022 (at the time of this writing). To build our Data Lakehouse, I downloaded every year’s file and put it in the MinIO instance being used for our Data Lakehouse. I put all files in a bucket named `lake.` The two buckets within our instance of MinIO are shown below. The `warehouse` bucket was created when we installed Apache Iceberg. here I used the MinIO console to ingest the raw data manually. In a professional pipeline, you will want to do this in an automated fashion. Check out to see how to use Kafka and Kubernetes to get data into MinIO. How to Set up Kafka and Stream Data to MinIO in Kubernetes These files are packaged for downloading convenience –  if you try to use them directly to create a report or a graph, then that would be a very IO-intensive operation (and potentially CPU-intensive). Imagine that you want to chart the average temperature per year from a specified station. To do this, you have to open every file and search through every row, looking for the entries that match your station on the day of interest. A better option is to use our Data Lakehouses capabilities for curating the data and reporting on the curated data. The first step is to set up a new Jupyter notebook. Set up a Jupyter Notebook First, navigate to the Jupyter Notebook server that is installed in the Apache Spark processing engine. It can be found at . Create a new notebook and in the first cell, add the imports shown below. (All the completed notebooks created in this post can be found .) http://localhost:8888 here from collections import namedtuple
import csv
import json
import logging
import tarfile
from time import time
from typing import List

from minio import Minio
from minio.error import S3Error
import pandas as pd
import pyarrow as pa
import pyarrow.parquet as pq

pd.options.mode.chained_assignment = None
bucket_name = 'lake' Notice that we are importing the MinIO library. The notebook we are building is an ETL pipeline from unstructured storage (MinIO Data Lake) to structured storage (Apache Iceberg, which uses MinIO under the hood.) The start of your notebook should look like this. Now, we can create an Iceberg database and table for our data. Creating an Iceberg Database and Table Creating the database and table for the GSOD dataset is straightforward. The script below will create the database which we will name `noaa`. Add this in a cell after the imports. %%sql
CREATE DATABASE IF NOT EXISTS noaa; The script below will create the table. gsod %%sql
CREATE TABLE IF NOT EXISTS noaa.gsod (
  station string,
  date timestamp,
  latitude double,
  longitude double,
  name string,
  temp double
)
USING iceberg
PARTITIONED BY (station) As you play around with Apache Iceberg, you will often want to drop a table so you can start an experiment over. The script below will drop the table should you wish to change anything about its setup. gsod %%sql
DROP TABLE IF EXISTS noaa.gsod; Ingesting Data from MinIO to Iceberg Now that we have the raw year-based zip files in our Lakehouse, we can extract, transform and load them into our Data Lakehouse. Let’s introduce some helper functions first. The function below will return a list of MinIO objects in a specified bucket that matches a prefix. def get_object_list(bucket_name: str, prefix: str) -> List[str]:
'''
Gets a list of objects from a bucket.
'''
  logger = logging.getLogger('gsod_logger')
  logger.setLevel(logging.INFO)

  # Load the credentials and connection information.
  with open('credentials.json') as f:
    credentials = json.load(f)

  # Get data of an object.
  try:
    # Create client with access and secret key
    client = Minio(credentials['url'], # host.docker.internal
      credentials['accessKey'],
      credentials['secretKey'],
      secure=False)

    object_list = []
    objects = client.list_objects(bucket_name, prefix=prefix, recursive=True)
    for obj in objects:
      object_list.append(obj.object_name)

    except S3Error as s3_err:
      logger.error(f'S3 Error occurred: {s3_err}.')
      raise s3_err
    except Exception as err:
      logger.error(f'Error occurred: {err}.')
      raise err

  return object_list Note that in the code above, a MinIO credentials file is needed. This can be obtained from the MinIO console. If you do not know how to get MinIO credentials, then there is a section of this that shows how to generate and download them. post Next, we need a function to get an object from MinIO. Since the objects are tar files we also need this function to extract data out of the tar archive and transform it into a Pandas DataFrame. This is done using the function below. def tar_to_df(bucket_name: str, object_name: str) -> pd.DataFrame:
  '''
  This function will take a tarfile reference in MinIO and do the following:
  - unzip the tarfile
  - turn the data into a single DataFrame object
  '''
  logger = logging.getLogger('gsod_logger')
  logger.setLevel(logging.INFO)

  # Temp file to use for processing the tar files.
  temp_file_name = 'temp.tar.gz'
  # Load the credentials and connection information.
  with open('credentials.json') as f:
    credentials = json.load(f)

  # Get data of an object.
  try:
    # Create client with access and secret key
    client = Minio(credentials['url'], # host.docker.internal
      credentials['accessKey'],
      credentials['secretKey'],
      secure=False)


    object_info = client.fget_object(bucket_name, object_name, temp_file_name)

    Row = namedtuple('Row', ('station', 'date', 'latitude', 'longitude', 'elevation',     

                     'name', 'temp', 'temp_attributes', 'dewp',
                     'dewp_attributes', 'slp', 'SLP_attributes', 'stp', 'stp_attributes', 

                     'visib', 'visib_attributes',
                     'wdsp', 'wdsp_attributes', 'mxspd', 'gust', 'max', 'max_attributes', 

                     'min', 'min_attributes', 'prcp',
                     'prcp_attributes', 'sndp', 'frshtt'))
    # Columns of interest and their data types.
    dtypes={
      'station': 'string',
      'date': 'datetime64[ns]',
      'latitude': 'float64',
      'longitude': 'float64',
      'name': 'string',
      'temp': 'float64'
    }

    tar = tarfile.open(temp_file_name, 'r:gz')
    all_rows = []
    for member in tar.getmembers():
      member_handle = tar.extractfile(member)
      byte_data = member_handle.read()
      decoded_string = byte_data.decode()
      lines = decoded_string.splitlines()
      reader = csv.reader(lines, delimiter=',')

    # Get all the rows in the member. Skip the header.
    _ = next(reader)
    file_rows = [Row(*l) for l in reader]
    all_rows += file_rows

    df = pd.DataFrame.from_records(all_rows, columns=Row._fields)
    df = df[list(dtypes.keys())]
    for c in df.columns:
      if dtypes[c] == 'float64': df[c] = pd.to_numeric(df[c], errors='coerce')
    df = df.astype(dtype=dtypes)

  except S3Error as s3_err:
    logger.error(f'S3 Error occurred: {s3_err}.')
    raise s3_err
  except Exception as err:
    logger.error(f'Error occurred: {err}.')
    raise err

  return df Both of these functions are generic utilities that can be reused regardless of what you are doing with MinIO. Consider putting them in your personal collection of code snippets or your organization's Github Gist. Now, we are ready to send data to the warehouse side of our Lakehouse. This can be done with the code below, which starts a Spark session, loops through all the GSOD tar files, extracts, transforms and sends it to our Iceberg table. from pyspark.sql import SparkSession
spark = SparkSession.builder.appName('Jupyter').getOrCreate()

objects = get_object_list(bucket_name, 'noaa/gsod')

for obj in reversed(objects):
  print(obj)
  df = tar_to_df(bucket_name, obj)
  table = pa.Table.from_pandas(df)
  pq.write_table(table, 'temp.parquet')
  df = spark.read.parquet('temp.parquet')
  df.write.mode('append').saveAsTable('noaa.gsod') The code in this section manually loaded data from a MinIO bucket. In a production environment, you will want to deploy this code in a service and use for automated ingestion. MinIO Bucket Events Querying the Iceberg Data Lakehouse using PyIceberg Let’s start a new notebook for reporting. The cell below imports the utilities we will need. Specifically, we will be using PyIceberg for data retrieval, Pandas for data wrangling, and Seaborn for visualizing data. from pyiceberg.catalog import load_catalog
from pyiceberg.expressions import GreaterThanOrEqual, EqualTo
import pandas as pd
import seaborn as sns

pd.options.mode.chained_assignment = None
catalog = load_catalog('default') What we want to do is calculate the average temperature per year for a given weather station. This gives us one number per year and takes into account all the seasons of the year. The first step is to query Iceberg for all data for a given station. This is done below using PyIceberg. tbl = catalog.load_table('noaa.gsod')

sc = tbl.scan(row_filter="station == '72502014734'")
df = sc.to_arrow().to_pandas()
df.head(10) The station id used in the code above is for a station located at Newark Liberty International Airport, NJ, US. It has been operational since 1973 (almost 50 years of data). When the code runs, you will get the output below. (I am using the DataFrame head() function to get a sample.) Next, we need to group by year and calculate the mean. Using Pandas, this is a few lines of code. No looping is needed. df['year'] = df['date'].dt.year
df = df[['year','temp']]
grouped_by_year = df.groupby('year')
average_by_year = grouped_by_year.mean()
average_by_year Once this cell runs, you will see a single value for each year. The top few years are shown below. Finally, we can visualize our yearly averages. We will use Seaborn to create a line plot. This takes just one line of code. sns.lineplot(data=df, x="year", y="temp", errorbar=None) The line plot is shown below. Another command you should always run after running a report for the first time is below. [task.file.file_path for task in sc.plan_files()] This is a list comprehension that will give you a list of all the data files in Apache Iceberg that have data matching your query. There will be a lot, even though Iceberg’s metadata can filter out many. Seeing all the files involved drives home the fact that high-speed object storage is an important part of a Lakehouse. Summary In this post, we built a Data Lakehouse using MinIO and Apache Iceberg. We did this using the GSOD dataset. First, raw data was uploaded to the Lake side of our Data Lakehouse (MinIO). From there, we created a database and a table in Apache Iceberg (the Data Warehouse side of our Data Lakehouse). Then we built a simple ETL pipeline to move data from the Lake to the Warehouse within the Data Lakehouse. Once we had Apache Iceberg fully populated with data, we were able to create an average yearly temperature report and visualize it. Keep in mind that if you want to build a Data Lakehouse in production, then you will need MinIO’s enterprise features. Consider looking at , , and . Object Lifecycle Management Security Best Practices Kafka Streaming Bucket Events Also published . here

Creating a Data Lakehouse using Apache Iceberg and MinIO

Creando un Data Lakehouse usando Apache Iceberg y MinIO

Création d'un Data Lakehouse à l'aide d'Apache Iceberg et MinIO

अपाचे आइसबर्ग और मिनिओ का उपयोग करके डेटा लेकहाउस बनाना

Apache Iceberg と MinIO を使用したデータ レイクハウスの作成

Criando um Data Lakehouse usando Apache Iceberg e MinIO

Tạo Data Lakehouse bằng Apache Iceberg và MinIO

使用 Apache Iceberg 和 MinIO 创建 Data Lakehouse

How to Create a Python CLI Program for Trello Board Management (Part 1)

ট্রেলো বোর্ড পরিচালনার জন্য কীভাবে একটি পাইথন সিএলআই প্রোগ্রাম তৈরি করবেন (পর্ব 1)

So erstellen Sie ein Python-CLI-Programm für die Trello-Board-Verwaltung (Teil 1)

Cómo crear un programa CLI de Python para la gestión de tableros de Trello (Parte 1)

Comment créer un programme Python CLI pour la gestion de la carte Trello (Partie 1)

ट्रेलो बोर्ड प्रबंधन के लिए पायथन सीएलआई प्रोग्राम कैसे बनाएं (भाग 1)

Trello ボード管理用の Python CLI プログラムを作成する方法 (パート 1)

Trello 보드 관리를 위한 Python CLI 프로그램을 만드는 방법(1부)

Como criar um programa Python CLI para o Trello Board Management (Parte 1)

Trello Pano Yönetimi için Python CLI Programı Nasıl Oluşturulur (Bölüm 1)

Cách tạo chương trình Python CLI để quản lý Trello Board (Phần 1)

如何为 Trello Board 管理创建 Python CLI 程序（第 1 部分）

Next.js 13 app router feature plus server and client side components to some extent brought changes on how we approach integration and state management using redux toolkit. This tutorial is meant to take you through how to add and use redux toolkit in your next.js 13 projects. We will go through a real world example whereby, we need to store authentication data in redux state and in this case it will be persisted. We will also access this data in the some of the components that need it. Assumptions You are comfortable writing react functional components using Typescript. You are familiar with redux toolkit - creating slices and reducer functions You are familiar with Next.js 13 app router You are familiar with the node.js package managers, I am using yarn in this case. If you are a complete beginner in next.js or redux toolkit, this tutorial may not be suitable for you, but i have provided all the code to follow along. Requirements A backend API with login and logout endpoint. To simplify things, i have a simple nest.js backend with a simulation of login and logout functionality in repo. Clone it, run to install packages , and then run . Your are good to go. this yarn yarn run start:dev You also need a next.js13 app, created using the . Again all the code for this tutorial can be found in repo to follow along. npx create-next-app@latest this Let’s get started Here is the file structure of the project. Using the app router feature of next.js 13. Create a Redux Store We need some packages. These are  @reduxjs/toolkit and react-redux. However, i added redux-persist and redux-logger. Only redux-logger is optional, the other three are required for the rest of the tutorial. yarn add @reduxjs/toolkit react-redux redux-persist redux-logger After installing the packages let us dive into creating the store. app/store/index.ts import { combineReducers, configureStore } from "@reduxjs/toolkit";
import { useDispatch, TypedUseSelectorHook, useSelector } from "react-redux";
import { persistReducer } from "redux-persist";
// import storage from "redux-persist/lib/storage";
import { authReducer } from "./slices/authSlice";
import storage from "./customStorage";
import logger from "redux-logger";

const authPersistConfig = {
  key: "auth",
  storage: storage,
  whitelist: ["isAuth", "jid"],
};

const rootReducer = combineReducers({
  auth: persistReducer(authPersistConfig, authReducer),
});

export const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({ serializableCheck: false }).concat(logger),
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector; The code above is responsible for creating the redux store for us. Notice the authPersistConfig definition. This code directs the redux store to persist auth data but only the isAuth and jid keys specified in the whitelist array. Also note the storage am using, its not directly from redux-persist. I have a custom implementation that will take care of execution of the code in client and server side. Using the storage directly from redux-persist results to an error in the server side. Below is the customStorage implementation. Inspiration from github thread. this app/store/customStorage.ts "use client";

import createWebStorage from "redux-persist/lib/storage/createWebStorage";

const createNoopStorage = () => {
  return {
    getItem(_key: any) {
      return Promise.resolve(null);
    },
    setItem(_key: any, value: any) {
      return Promise.resolve(value);
    },
    removeItem(_key: any) {
      return Promise.resolve();
    },
  };
};

const storage =
  typeof window !== "undefined"
    ? createWebStorage("local")
    : createNoopStorage();

export default storage; Notice that in the storage definition am creating a dummy store since its impossible to create local storage in the server side.  By checking existence of the window object i can choose when to create the storage. Next, we create an authSlice. app/store/slices/authSlice.ts import { createSlice } from "@reduxjs/toolkit";
import type { PayloadAction } from "@reduxjs/toolkit";

export interface IAuthState {
  isAuth: boolean;
  jid: string;
}

const initialState: IAuthState = {
  isAuth: false,
  jid: "",
};

export const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    setAuth: (state, action: PayloadAction<boolean>) => {
      state.isAuth = action.payload;
    },
    setJid: (state, action: PayloadAction<string>) => {
      state.jid = action.payload;
    },
  },
});

// Action creators are generated for each case reducer function
export const { setAuth, setJid } = authSlice.actions;

export const authReducer = authSlice.reducer; Here we get the actions and reducer to play around with the auth state. Notice the two keys and . These are the ones we persisted in the store. isAuth jid Last, we need a way to consume the state in our components. Typically, in previous versions of nextjs we could add the provider in the _app.(jsx/tsx) file. In next.js 13 however, with server components being the default for all pages, it can be challenging to have the provider in the root of the app as it is meant to work on the client. This means we have to initialize the provider separately and wrap it only on client side components that need access to the store. app/store/ReduxProvider.tsx import { Provider } from "react-redux";
import { store } from ".";
import { persistStore } from "redux-persist";

persistStore(store); // persist the store

export default function ReduxProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  return <Provider store={store}>{children}</Provider>;
} The code above creates the provider for us. Notice the persistStore line of code. Since we need to persist a section of the state, we need this line before supplying the store to the Provider. With the provider in place we can move it to client components that need access to the the store. Create the Next.js 13 Pages We will look into three pages which are essential to test the functionality we want. ie Home,Login and Account pages. On running the client app,and visiting you will see this simple home page.  Nothing fancy, just a navbar and text http://localhost:3000 Here is the home page code. app/(navbar)/page.tsx export default function Home() {
  return (
    <div className="p-5">
      <h3>Home</h3>
    </div>
  );
} Here is the login page code. app/(navbar)/login/page.tsx import ClientLoginFormWrapper from "./ClientFormWrapper";

export default function Login() {
  return (
    <div className="h-screen w-full flex">
      <div className="m-auto">
        <h1 className="font-bold text-3xl">Login</h1>
        <br />
        <ClientLoginFormWrapper />
      </div>
    </div>
  );
} code. This is a client side component marked with the directive “use client“ at the top of the file. It has functionality that only works in the client side. Notice the <ReduxProvider/> wrapper. It will work in this case since it is in a client component. This allows us to have the redux store in the components it wraps. app/(navbar)/login/ClientFormWrapper.tsx "use client";

import ReduxProvider from "@/app/store/ReduxProvider";
import LoginForm from "./Form";

export default function ClientLoginFormWrapper() {
  return (
    <ReduxProvider>
      <LoginForm />
    </ReduxProvider>
  );
} this file has the login form code. Two html input fields and a submit button with both the onchange and onsubmit handlers. app/(navbar)/login/LoginForm.tsx "use client";

import { useAppDispatch } from "@/app/store";
import { setAuth, setJid } from "@/app/store/slices/authSlice";
import { useRouter } from "next/navigation";
import { useState } from "react";

// client side to add interactivity using local state
export default function LoginForm() {
  const [loading, setLoading] = useState(false);
  const [values, setValues] = useState({ username: "", password: "" });
  const router = useRouter();

  const dispatch = useAppDispatch();

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setValues({ ...values, [name]: value });
  };

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);
    try {
      const res = await fetch("http://localhost:3002/auth/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(values),
        credentials: "include",
        mode: "cors",
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.message);
      dispatch(setJid(data.access_token));
      dispatch(setAuth(true));
      router.push("/account");
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <div>
          <label htmlFor="username">Username</label>
        </div>
        <input
          name="username"
          id="username"
          type="text"
          className="w-full border-2 border-gray-900"
          onChange={handleChange}
          value={values.username}
        />
      </div>
      <br />
      <div>
        <div>
          <label htmlFor="password">Password</label>
        </div>
        <input
          name="password"
          type="password"
          className="w-full border-2 border-gray-900"
          onChange={handleChange}
          value={values.password}
        />
      </div>
      <br />
      <div>
        <button type="submit" className="bg-blue-700 p-2 text-white font-bold">
          Login
        </button>
      </div>
    </form>
  );
} Lets take a look at the onSubmit handler. The login endpoint returns a response object with an key. In this component note that i can access the redux store method since it is wrapped by the . I can therefore dispatch the token to the store where it is then persisted. Am also dispatching true value to update the state. After successful login, using the i redirect user to the page. access_token dispatch ReduxProvider isAuth router account With the nest.js backend above running, you can type any dummy username and password and this will take you to the account page. Here is the code. app/(navbar)/account/page.tsx import ClientStuff from "./ClientStuff";

export default function Account() {
  return (
    <div className="p-5">
      <ClientStuff />
    </div>
  );
} this is a client component that fetches user data from the backed and shows a welcome message. Notice we can use hooks in this component as it is client component. app/(navbar)/account/ClientStuff.tsx "use client";

import { store, useAppSelector } from "@/app/store";
import { useEffect, useState } from "react";

export default function ClientStuff() {
  const [loading, setLoading] = useState(true);
  const [username, setUsername] = useState("");
  const jid = store.getState().auth.jid;

  useEffect(() => {
    const getData = async () => {
      try {
        const res = await fetch("http://localhost:3002/user/profile", {
          headers: { Authorization: `Bearer ${jid}` },
          mode: "cors",
        });
        const data = await res.json();
        setUsername(data.sub);
        setLoading(false);
      } catch (error) {
        console.log(error);
      }
    };

    getData();
  }, [jid]);

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      <h3 className="font-bold text-4xl">Welcome {username}!</h3>
    </div>
  );
} If the app router is still new to you, you might be a little confused by the file structure am using. Let’s discuss a few things about the app router feature. By default, all next.js 13 projects will have a pages folder with a file. This is how it looks like. It is a function component with , and tags. This is the root layout to be used with all the pages in your applications. layout.tsx children prop html body import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
} Based on your design and requirements, you will make decisions on how you will layout your application. In this application, i needed a navbar that will be used in all pages. I therefore had to use a concept in next.js 13 called . For more information check out the . This enabled me to group all the pages that needed the navbar inside the folder without affecting the url. route groups docs (navbar) Here is the code in the layout in (navbar) folder. I called it NavLayout app/(navbar)/layout.tsx import MainNavbarClientWrapper from "./NavbarClientWrapper";

export default function NavLayout({ children }: { children: React.ReactNode }) {
  return (
    <main>
      <div className="w-full h-16 bg-black">
        <MainNavbarClientWrapper />
      </div>
      {children}
    </main>
  );
} With this layout all the pages in the folder will have the navbar. (navbar) app/(navbar)/NavbarClientWrapper.tsx "use client";

import ReduxProvider from "../store/ReduxProvider";
import MainNavbar from "./Navbar";

export default function MainNavbarClientWrapper() {
  return (
    <ReduxProvider>
      <MainNavbar />
    </ReduxProvider>
  );
} This is a client component, and hence am able to add the to wrap the component. ReduxProvider MainNavbar app/(navbar)/Navbar.tsx "use client";

import Link from "next/link";
import { MouseEvent, useEffect, useState } from "react";
import { useAppDispatch, useAppSelector } from "../store";
import { setAuth, setJid } from "../store/slices/authSlice";
import { usePathname, useRouter } from "next/navigation";


export default function MainNavbar() {
  const isAuth = useAppSelector((state) => state.auth.isAuth);
  const [isAuthenticated, setIsAuthenticated] = useState<boolean>();
  const dispatch = useAppDispatch();
  const pathname = usePathname();
  const router = useRouter();

  useEffect(() => {
    if (isAuth) {
      setIsAuthenticated(true);
    } else {
      setIsAuthenticated(false);
    }
  }, [isAuth]);

  const handleLogout = async (e: MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    await fetch("http://localhost:3002/auth/logout", {
      credentials: "include",
      mode: "cors",
    });
    const inAuthPage = pathname.startsWith("/account");
    if (inAuthPage) {
      router.push("/login");
    }
    dispatch(setJid(""));
    dispatch(setAuth(false));
  };

  return (
    <nav className="flex content-between justify-between w-full h-full px-5 text-white">
      <div className="w-2/3 h-full flex">
        <Link href={"/"} className="my-auto font-bold text-4xl">
          Test App
        </Link>
      </div>

      <div className="flex justify-end w-1/3">
        {isAuthenticated && (
          <>
            <Link className="m-auto" href={"/account"}>
              Account
            </Link>
            <button onClick={handleLogout}>Logout</button>
          </>
        )}
        {isAuthenticated === false && (
          <div className="flex">
            <Link href={"/login"} className="m-auto">
              Login
            </Link>
          </div>
        )}
      </div>
    </nav>
  );
} In here, we have the logout handler which makes a request to server and blacklists the token. Then we can update the state by dispatching the and setters. With this functionality the user is logged out from the application. jid isAuth Final thoughts Redux remains to be a go to state manager in react apps development. Only by consuming it in client components that we can safely use it without interfering with the next.js server side functionality.

How to manage state in Next.js 13 using Redux Toolkit

With the advent of , the general recommendation is to . However, you’ll often want to conditionally display Server Components using client-side interactivity. In this case, Server Components should be passed to Client Components as props so that the client side is responsible for determining how the Server Components are displayed. React Server Components move Client Components to the leaves of your component tree where possible We’re going to explore two strategies for passing Server Components as props: passing Server Components as and children passing Server Components as custom props to allow for more flexibility over each component. Passing Server Components as children Passing JSX as children to components is a common compositional practice in React. Server Components can be explicitly nested within Client Components from a parent Server Component. The Client Component will receive the generic prop which contains the server-rendered result of the Server Components passed as children. The Client Component has no knowledge of the contents of and is merely responsible for determining how to display the content. Here’s an example of Server Components being passed as to a Client Component: children children children // ServerList.jsx
import ClientList from './ClientList'
import ServerListItem from './ServerListItem'
import getData from './utils/getData'

export default async function ServerList() {
  const data = await getData()

  return (
    <ClientList>
      {data.map((listItem) => (
        <ServerListItem key={listItem.id} message={listItem.message} />
      ))}
    </ClientList>
  )
} // ServerListItem.jsx
export default function ServerListItem({ message }) {
  return <li>{message}</li>
} // ClientList.jsx
'use client'

import React from 'react'

export default function ClientList({ children }) {
  const [showChildren, setShowChildren] = React.useState(true)

  const handleClick = () => {
    setShowChildren((prevState) => !prevState)
  }

  return (
    <>
      <button onClick={handleClick}>Toggle Children</button>
      <ul>
        {showChildren && children}
      </ul>
    </>
  )
} In the example above, the component gets some data and maps them to a series of components passed as children to . has an interactive button which, when clicked, toggles whether the contents of the prop are displayed on the page. <ServerList> <ServerListItem> <ClientList> <ClientList> children Passing Server Components as Custom Props When JSX is passed as to a component, the component is unable to manipulate the individual components that make up its children; all children follow the same rules. However, there are many cases where you may want more control over the individual Server Components passed to the Client Component. To achieve this, Server Components should be passed as a custom prop to the Client Component, often with some additional information required for the client-side logic. children Let’s refactor our basic list example from above to introduce filtering logic based on a user’s input: // ServerList.jsx
import ClientList from './ClientList'
import ServerListItem from './ServerListItem'
import getData from './utils/getData'

export default async function ServerList() {
  const data = await getData()

  const listItems = data.map((listItem) => ({
    message: listItem.message,
    content: <ServerListItem key={listItem.id} message={listItem.message} />,
  }))

  return <ClientList listItems={listItems} />
} // ServerListItem.jsx
export default function ServerListItem({ message }) {
  return <li>{message}</li>
} // ClientList.jsx
'use client'

import React from 'react'

export default function ClientList({ listItems }) {
  const [filterInput, setFilterInput] = React.useState('')

  const handleChange = (e) => {
    setFilterInput(e.target.value)
  }

  const filteredItems = listItems
    .filter((listItem) => listItem.message.includes(filterInput))
    .map((listItem) => listItem.content)


  return (
    <>
      <input onChange={handleChange} />
      <ul>
        {filteredItems}
      </ul>
    </>
  )
} In this example, creates an array of objects which is passed as the prop to . Each object has a key for which the value is the server-rendered result of a component as well as the which will ultimately be displayed by the . The has an that, when changed, updates the state variable. This state is then used to determine if each should be displayed based on whether or not the meets the filtering criteria. <ServerList> listItems <ClientList> content <ServerListItem> message <ServerListItem> <ClientComponent> <input> filterInput filterInput listItem.content listItem.message Conclusion Passing Server Components as props to Client Components is useful when the displaying of the Server Components is tied to some client-side interactivity or state. Nesting Server Components within a Client Component and using the prop is best when all child components adhere to the same display conditions. Creating a custom prop to pass Server Components to a Client Component is an alternative when control over individual child components or additional information alongside the components is needed. Both strategies leave the Client Component with only the responsibility to decide how its children will be placed on the page while taking advantage of the performance benefits of rendering those children on the server. children

Using Client Components to Display React Server Components

How to Create Your Own AnythingGPT — a Bot That Answers the Way You Want it to

কীভাবে আপনার নিজের যেকোন জিপিটি তৈরি করবেন - একটি বট যা আপনি যেভাবে চান সেভাবে উত্তর দেয়

So erstellen Sie Ihr eigenes AnythingGPT – einen Bot, der so antwortet, wie Sie es möchten

Cómo crear su propio AnythingGPT: un bot que responde de la manera que usted quiere

Comment créer votre propre AnythingGPT - un bot qui répond comme vous le souhaitez

अपना खुद का कुछ भी जीपीटी कैसे बनाएं - एक बॉट जो आपकी इच्छानुसार उत्तर देता है

独自の AnythingGPT を作成する方法 — 希望どおりに応答するボット

나만의 무엇이든 만드는 방법GPT — 원하는 방식으로 응답하는 봇

Como criar seu próprio AnythingGPT - um bot que responde da maneira que você deseja

Kendi İstediğiniz Şeyi Nasıl YaratabilirsinizGPT — İstediğiniz Şekilde Yanıt Veren Bir Bot

Cách tạo mọi thứ của riêng bạnGPT — bot trả lời theo cách bạn muốn

如何创建您自己的 AnythingGPT — 一个按照您想要的方式回答的机器人

As a professional, creating a new user for product testing may seem like a simple task – just complete the registration form and you're ready to go. However, what if you need to test a user with a year-long message history, or evaluate how a video service feature works for a particular A/B testing group? These situations can quickly become tedious and time-consuming when creating users manually. QA In this article, we will share our journey of developing a tool that fully automates that process. Let's dive in! Introducing our User Management Tool At Social Discovery Group, we provide online services that connect people around the world. Our products enable users to communicate through chat and video, and share media content. As our products evolved, we started to encounter increasingly complex test scenarios. For example, we needed to examine a user's profile with an expired subscription or analyze the functionality of a contact list with over 30 entries. To generate a "history-rich" user, we had to execute multiple API queries, send messages to RabbitMQ, and run SQL scripts. As these steps were already incorporated into our automated tests, the manual QA team frequently asked us to perform an automated test to create the needed user. Over time, the creation of a single user started to take longer than the testing itself. Therefore, we decided to find a way to empower any employee to handle the user creation process independently. Our test automation is written in C#. We actively utilize API calls to our application resources in automated tests. For instance, we use the following method for client registration: RegisterClient(client, param1, param2, param3); var client = new Client(); After analyzing our framework, we concluded that the easiest solution for creating the necessary users for testing would be to develop an ASP.NET Web Forms application using our methods. We envisioned a website that QA testers could use to easily create the required users. Here's what we did: Created a new ASP.NET Web Forms project called the "User Management Tool" or UMT. Added the primary automated test project as a submodule in GIT. Configured the build and deployment of UMT to one of our servers (based on the IIS webserver) via Jenkins. Assigned a DNS and began to develop the functionality. First, we added a page for user creation. Testers could select additional parameters and configure the user according to their preferences – either as a new user or with a long history of chats. Here's what the process looked like: Creating an ASPX page and adding necessary elements for user configuration such as age, gender, name, country, etc. Adding an element to display the results. Implementing the logic to call the required functions upon clicking the action button. Here is the code for the page, including the output element. <!DOCTYPE html> <title></title>
</head>
<body> <div>
              <div>
                <label>Client type:</label> </asp:DropDownList>
            </div> <label>How much clients we should register:</label> </div>
            </div>
            <div> </div>
        </div>
    </form> </body>
</html> <%@ Page Language = "C#" AutoEventWireup = "true" CodeBehind = "WebForm1.aspx.cs" Inherits = "Habrl.Pages.Registration.RegistrationForm1" %> <html xmlns = "http://www.w3.org/1999/xhtml" > <head runat = "server" > <form id = "registration" runat = "server" > <asp:DropDownList ID = "clientType" runat = "server" AutoPostBack = "true" CssClass = "select" OnSelectedIndexChanged = "clientType_OnSelectedIndexChanged" > <asp:ListItem value = "regularClient" Selected = "True" >Regular client</asp:ListItem> <asp:ListItem value = "clientWithChatHistory" >Client with chat history</asp:ListItem> <asp:ListItem value = "inactiveClient" >Inactive Client</asp:ListItem> <div id = "usersCountDiv" runat = "server" > <asp:TextBox ID = "clientsCount" runat = "server" CssClass = "input" Text = "1" ></asp:TextBox> <div class = "errorMsg" > <asp:RequiredFieldValidator Display = "Dynamic" runat = "server" ControlToValidate = "usersCount" ErrorMessage = "Define clients count!" ></asp:RequiredFieldValidator> <asp:RangeValidator Display = "Dynamic" runat = "server" ControlToValidate = "clientsCount" Type = "Integer" MinimumValue = "1" MaximumValue = "30" ErrorMessage = "We can create from 1 till 30 clients at once!" ></asp:RangeValidator> <asp:Button CssClass = "MyButton separateButton" ID = "SubmitButton" runat = "server" text = "Register" OnClick = "OnRegisterButtonClick" ></asp:Button> <div runat = "server" id = "result" ></div> Here’s the logic implementation: int _clientsCount;
        string _clientType; {
            _clientsCount = int.Parse(clientsCount.Text);
            _clientType = clientType.SelectedValue;
        } { { RegisterClient(client, _clientType);
                clients.Add(client);
            });                
            result.InnerHtml = GenerateTableViewForClientsEnumerable(clients);
        }
    } public partial class RegistrationForm : System . Web . UI . Page { protected void Page_Load ( object sender, EventArgs e ) protected void OnRegisterButtonClick ( object sender, EventArgs e ) var clients = new ConcurrentBag<Client>(); Parallel.For( 0 , _clientsCount, _ => var client = new Client(); Upon registering, we receive the following table: The RegisterClient method used in UMT is identical to the one used in our autotests. This means that whenever we introduce new functionality to our products, our autotests are automatically updated, and those changes are reflected in UMT as well. UMT essentially serves as a front-end implementation over our contracts, which provide the underlying autotest code. Thanks to UMT, the entire team can now easily create the required user profile in any of our numerous testing environments with just a couple of clicks. The manual QA team can generate even the most intricate user profiles independently, without requiring any involvement from the automation team. To our surprise, the development team has also started to leverage UMT for their purposes. Development and Improvement After we released UMT, we began to receive requests for new features. We added pages for user management (including online status emulation and messaging) and payment management. Later, the mobile team approached us with a concern: creating a UMT user on mobile devices required a lot of time and effort to input email and password details. In response, we added a small but useful feature to UMT – the generation of QR codes with login links and deep links for mobile applications. As we continued to develop UMT, we underwent two major redesigns and added a tree-like menu to the site. As a result, the original user registration page has undergone significant transformation and now looks entirely different. Over the course of UMT's five-and-a-half-year existence, we expanded the tool far beyond its original purpose of facilitating product testing. We added sections to automate DevOps activities, such as restarting services and servers, configuring, cleaning, and linking test environments, and providing statistical information, as well as a knowledge base and more. In the next section, I will take a closer look at some of these features. Authorization After a while, we decided to restrict access to UMT for certain employees (for example, those on probation). To do this, we added a database and a table with roles and users, implemented domain authentication, and assigned permissions. With this system in place, we can identify the user session and give the user access to specific functionality based on their rights. We also added Google authorization to UMT, given our company's use of Google services. Services and test environment As UMT became a popular tool among the team, our QA team wanted to manage services and test beds through UMT instead of relying on various scripts and tools like Ansible. We added the ability to restart Docker and Windows services, IIS, and web nodes, and edit the configs of those services. We also included a feature for configuring these services and comparing them across test beds. TestRail and Jenkins is a crucial part of our work, and we often have more than ten test runs in progress at any given time. However, it can be challenging to locate a particular run among many others in Jenkins or to check its position in the queue. To address this issue, we developed a page in UMT that displays data on all current runs and those in the queue. This page polls all of our Jenkins instances to collect information about running jobs, which is then presented in tables for easy reference. Test automation Additionally, UMT offers a separate page for creating TestPlans with TestRuns enabled in TestRail. With just a few clicks, users can choose from several basic TestPlans with testing scenarios. UMT has also proven useful for parsing failed autotests or investigating anomalous user behavior. Previously, these tasks required manually opening Fiddler for API queries or connecting to the database to execute SQL queries. With UMT, however, dedicated pages provide comprehensive technical information on users created in the test bed, making problem-solving faster and more efficient. Today, UMT is a full-fledged project that continues to evolve as the test automation department receives new tasks for adding functionality or fixing bugs. Prioritized tasks are included in the sprint. UMT remains an essential tool for our staff, saving them time and effort by collecting many routine activities in one place. There is no longer a need to take notes, save API queries to Fiddler or Postman, or open SQL Studio to perform database routines. So if your company faces similar challenges, you now know what to do. Written by Pavel Yasonau, Team Lead QA Automation at Social Discovery Group

QA Automation on vacation. How we developed a tool that creates test users for us

Optimización de la automatización del control de calidad: nuestro proyecto de vacaciones para la creación de usuarios de prueba

Rationalisation de l'automatisation de l'assurance qualité : notre projet de vacances pour la création d'utilisateurs de test

क्यूए ऑटोमेशन को सुव्यवस्थित करना: टेस्ट यूजर क्रिएशन के लिए हमारा वेकेशन प्रोजेक्ट

QA 自動化の合理化: テスト ユーザー作成のための休暇プロジェクト

Simplificando a automação de controle de qualidade: nosso projeto de férias para criação de usuários de teste

Hợp lý hóa tự động hóa QA: Dự án kỳ nghỉ của chúng tôi để tạo người dùng thử nghiệm

简化 QA 自动化：我们用于测试用户创建的假期项目

There is a lot of hype around nowadays. A lot of articles shows us different examples of how it can help us, others claims that it can do work of some specialties. Some articles provide examples of how we can integrate ChatGPT into our software systems. Despite the fact that it has a simple HTTP API, there are many of developers who prefer using some ready-to-use clients rather than spending time for developing their own ChatGPT client from scratch. ChatGPT In this article I'm going to review two Go language ChatGPT clients. One of them is represented on the official , another one is mentioned in project repository. ChatGPT website awesome-go Obtaining an API key Before you start any experiments, you need to obtain your personal Key. It is used in every query and should be included in ” HTTP Header. You can also use an organization ID if your account has multiple organizations and you want to specify to which of them the particular request belongs. It can be passed as an header value as it mentioned in the official documentation. API “Authorization “OpenAI-Organization” To obtain API Key visit and use “Create new secret key” button ( ). this page see image 1 Additional information can be found . here Libraries You can check the list of ChatGPT libraries on the . As you can see, there are only two libraries initially provided: and Node.js. Nevertheless, some additional community libraries are also represented on the page and among them. If you check repository you can find one more additional ChatGTP library: . In this article, I am going to compare these two libraries and give some examples of their usage. official website Python Go library (go-gpt3 by sashabaranov) awesome-go openaigo by otiai10 Simple Examples: Models methods of ChatGPT API allow you to get a list of available models and information about them. There are only two related methods: List models and Retrieve model. More information can be found on the . Models official website otiai10/openaigo supports both methods ( ): see full code here client := otiai10.NewClient(apiKey)
models, err := client.ListModels(ctx)
fmt.Printf("otiai10 ListModels: %v \n (err: %+v)\n\n",
	utils.SPrintStruct(models), err)

model, err := client.RetrieveModel(ctx, models.Data[0].ID)
fmt.Printf("otiai10 RetrieveModel: %v \n (err: %+v)\n\n",
	utils.SPrintStruct(model), err) sashabaranov/go-openai supports only ListModels (but usually it’s enough, because the info data is included in the List response for each model) ( ): see full code here client := sashabaranov.NewClient(apiKey)
models, err := client.ListModels(ctx)
fmt.Printf("sashabaranov ListModels: %v \n (err: %+v)\n\n",
	utils.SPrintStruct(models), err) Streams: Completions and Chat Both and methods can , but only sashabaranov/go-openai supports this feature. Completions Chats stream back partial progress Example of Completions stream ( ): see full code here client := sashabaranov.NewClient(apiKey)
completionStream, err := client.CreateCompletionStream(ctx, sashabaranov.CompletionRequest{
	Model:       "text-davinci-003",
	Prompt:      "Say this is a test",
	MaxTokens:   7,
	Temperature: 0,
	TopP:        1,
	N:           1,
	Stream:      true,
	Stop:        []string{"\n"},
})

resp := sashabaranov.CompletionResponse{}
for {
	resp, err = completionStream.Recv()
	if err == io.EOF {
		fmt.Printf("sashabaranov CreateCompletionStream streamReader.Recv(): EOF\n")
		break
	} else if err != nil {
		fmt.Printf("sashabaranov CreateCompletionStream streamReader.Recv() error: %v\n", err)
		break
	}
	fmt.Printf("sashabaranov CreateCompletionStream streamReader.Recv(): \n%v\n\n", utils.SPrintStruct(resp))
} Example of Chat stream ( ): see full code here client := sashabaranov.NewClient(apiKey)
completionStream, err := client.CreateChatCompletionStream(ctx, sashabaranov.ChatCompletionRequest{
	Model: "gpt-3.5-turbo",
	Messages: []sashabaranov.ChatCompletionMessage{
		{
			Role:    "user",
			Content: "Hello!",
		},
	},
})

resp := sashabaranov.ChatCompletionStreamResponse{}
for {
	resp, err = completionStream.Recv()
	if err == io.EOF {
		fmt.Printf("sashabaranov ChatCompletionResponse streamReader.Recv(): EOF\n")
		break
	} else if err != nil {
		fmt.Printf("sashabaranov ChatCompletionResponse streamReader.Recv() error: %v\n", err)
		break
	}
	fmt.Printf("sashabaranov ChatCompletionResponse streamReader.Recv(): \n%v\n\n", utils.SPrintStruct(resp))
} It’s worth mentioning that there is a pull request to the otiai10/openaigo repository that adds streaming . support for Chats Supported Methods and Examples sashabaranov/go-openai otiai10/openaigo Examples Models - List Models Supported Supported example - Retrieve Model Not supported Supported example Completions - Completion Supported Supported example - Completion stream Supported Not supported example Chat - Chat Supported Supported example - Chat stream Supported Not supported example Edits Supported Supported example Images - Create image Supported Supported example - Create image edit Supported Supported example - Create image variation Supported Supported example Embeddings Supported Supported example Audio - Create transcription Supported Not supported example - Create translation Supported Not supported example Files - List files Supported Supported example - Upload file Supported Supported example - Delete file Supported Supported example - Retrieve file Supported Supported example - Retrieve file content Not supported Supported example Fine-tunes - Create fine-tune Supported Supported example - List fine-tunes Supported Supported example - Retrieve fine tune Supported Supported example - Cancel fine-tune Supported Supported example - List fine-tune events Supported Supported example - Delete fine-tune model Supported Supported example Moderations Supported Supported example (deprecated) Engines (deprecated) - List engines Supported Not supported example (deprecated) - Retrieve engine Supported Not supported example Conclusion Both libraries support most features, but not all. If you are not sure which one is best for your software system, you can choose because it supports more features such as streams. On the other hand, expecting io.Reader when you need to send some file to ChatGPT. In most cases, this is a more flexible and convenient way, for example you can embed file into a go binary. sashabaranov's go-gpt3 openaigo by otiai10 Lead image generated with Stable Diffusion 2.1 using the prompt: “Programming robot.”

ChatGPT Go Libraries: A Comparison With Examples

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 套接字编程基本指南：客户端、服务器和对等库

Using Redis Streams with NestJS: Part 3 - Consumer groups

Using Redis Streams with NestJS: Part 2 - Reading from Stream

This is part 1 of a 3-part series, where we will explore how to use Redis streams with NestJS. It is structured in 3 parts: Setting up the NestJS application and connecting to Redis Populating Redis streams and reading from in fan-out mode Using to handle one stream from multiple actors in a way that one message is sent to and processed only by a single actor (consumer) consumer groups By the end of this series, you will have the knowledge and tools necessary to create your own NestJS app that utilizes Redis streams to handle real-time data. The full code is available on github Assumed prior knowledge Before diving into this post, it is assumed that you have a basic understanding of and . Familiarity with is also recommended, as they will be used in the examples to listen to the Redis stream continuously. NestJS Redis JavaScript generators We will also use and to create and run our Redis server and application. Docker Docker Compose NestJS is a typescript framework, so you should be familiar with it too. To familiarize yourself with these things, I recommend: NestJS docs TypeScript Redis: Redis streams intro The tutorial Generators: JavaScript Generators reference Dr. Axel Rauschmayer's book's "JavaScript for impatient programmers" sections on and generators (available free online) synchronous asynchronous Docker: Docker Docker Compose It's also important to note that while this post explicitly covers the integration of Redis streams with NestJS, the concepts, and techniques discussed here can also be applied to other frameworks and languages. Redis streams is a versatile tool that can be used in a wide range of applications and architectures. Therefore, even if you are not using NestJS, the general concepts, and approaches outlined in this post can still apply to your projects and stack. Setup Creating a new NestJS application To get started, we will need to create a new NestJS application. This can be done using the NestJS CLI, which can be installed via npm by running . Once installed, you can create a new application by running , where "redis-streams" is the name of your application. npm i -g @nestjs/cli nest new redis-streams This will create a new directory with the same name, containing the basic structure of a NestJS application. Docker setup To simplify things, we are going to use file to include both our app and Redis server: docker-compose.yml # docker-compose.yml

version: '3'

services:
  app:
    container_name: app
    image: node:18
    environment:
      HTTPS_METHOD: noredirect
    ports:
      - 8081:3000
    volumes:
      - ./:/usr/src/app/
    working_dir: /usr/src/app
    command: npm run start:dev

  redis:
    container_name: redis
    image: redis:7
    restart: always Now you can run to build and run your services. To see console output, use docker-compose up -d docker-compose logs You should see the following message: LOG [NestApplication] Nest application successfully started +7ms Connecting to Redis Setting up client library node-redis To call Redis from we are going to use the official NodeJS Redis client library node-redis $ npm i redis There are also other libraries, e.g. is a noteworthy alternative. You can see the list of clients ioredis on the Redis website Redis module Finally, we can start working with Redis from our application. First, will create a new module for Redis-related services. $ nest g module redis You should see this: // redis.module.ts

import { Module } from '@nestjs/common';

@Module({
  providers: [],
  exports: [],
})
export class RedisModule {} RedisClient factory To use from library we are going to create a factory provider for it: RedisClient node-redis // redis-client.factory.ts

import { FactoryProvider } from '@nestjs/common';
import { createClient } from 'redis';
import { RedisClient, REDIS_CLIENT } from './redis-client.type';

export const redisClientFactory: FactoryProvider<Promise<RedisClient>> = {
  provide: REDIS_CLIENT,
  useFactory: async () => {
    const client = createClient({ url: 'redis://redis:6379/0' });
    await client.connect();
    return client;
  },
}; Let's break it down. We create a that will call async function provided in : FactoryProvider useFactory // redis-client.factory.ts
// --snip--
  useFactory: async () => {
    const client = createClient({ url: 'redis://redis:6379/0' });
    await client.connect();
    return client;
  },
// --snip-- We call function from library, and pass it the URL consisting of , where: createClient redis {protocol}://{host}:{port}/{database} protocol= redis host = - this is specified in with . Usually, you would create an environment variable with your Redis instance IP and use it here. redis docker-compose.yml container_host: redis port = - default Redis port 6379 database = default database 0 We connect to the Redis server await client.connect(); Return the created & connected client. You may have noticed that we did not provide an instance of type but , which is our injection token. Also, is our custom type, not .
This is due to on v4 not exporting the type, so we need to create our own in file: RedisClient REDIS_CLIENT RedisClient redis node-redis RedisClient /redis-client.type.ts export type RedisClient = ReturnType<typeof createClient>;
export const REDIS_CLIENT = Symbol('REDIS_CLIENT'); All that is left is to add this to our module: // redis.module.ts

//  --snip--
@Module({
  providers: [redisClientFactory],
})
export class RedisModule {} Creating RedisService Next, let's add a that will create a layer of abstraction from . RedisService RedisClient $ nest g service redis In there we will inject our RedisClient // redis.service.ts

// --snip--
@Injectable()
export class RedisService implements OnModuleDestroy {
  public constructor(
    @Inject(REDIS_CLIENT) private readonly redis: RedisClient,
  ) {}

  onModuleDestroy() {
    this.redis.quit();
  }
} Not to leave hanging connections, we are going to close the connection to the Redis by calling on lifecycle event. this.redis.quit() OnModuleDestroy Ping for Redis server To check that we have successfully connected to Redis, let's add an API endpoint that calls call Redis ping // redis.service.ts

  ping() {
    return this.redis.ping();
  } Let's export RedisService so that we can use it in other modules: // redis.module.ts

// --snip--
  exports: [RedisService],
// --snip-- Now we will import it into and pass through our call to ping redis: AppService // app.service.ts

@Injectable()
export class AppService {
// --snip--
  constructor(
    private readonly redisService: RedisService,
  ) {}

  redisPing() {
    return this.redisService.ping();
  }
// --snip-- Finally, we can add a new endpoint to AppController that will execute a ping to the Redis server and send the response to the user: // app.controller.ts

// --snip--

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get('redis-ping')
  redisPing() {
    return this.appService.redisPing();
  }
} Now, with our app and Redis server running, we can open our endpoint , and you should see the response: /redis-ping http://localhost:8081/redis-ping Congratulations! We have finished part 1 of the 3-part series and created a NestJS application with a working connection to our Redis server! In part 2 we are going to create, populate and read from Redis streams.

Using Redis Streams with NestJS: Part 1 - Setup

In this article, I will show you how to use React to replace useEffect in most cases. I've been watching , and it's 🤯 blows my mind in a 😀 good way. I agree that useEffect has been used so much that it makes our code dirty and hard to maintain. I've been using useEffect for a long time, and I'm guilty of misusing it. I'm sure React has features that will make my code cleaner and easier to maintain. "Goodbye, useEffect" by David Khoursid What is useEffect? useEffect is a hook that allows us to perform side effects in function components. It combines componentDidMount, componentDidUpdate, and componentWillUnmount in a single API. It's a compelling hook that will enable us to do many things. But it's also a very dangerous hook that can cause a lot of bugs. Why useEffect is dangerous? Let's take a look at the following example: import React, { useEffect } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((c) => c + 1)
    }, 1000)
    return () => clearInterval(interval)
  }, [])

  return <div>{count}</div>
} It's a simple counter that increases every second. It uses useEffect to set an interval. It also uses useEffect to clear the interval when the component unmounts. The code snippet above is a widespread use case for useEffect. It's a straightforward example, but it's also a terrible example. The problem with this example is that the interval is set every time the component re-renders. If the component re-renders for any reason, the interval will be set again. The interval will be called twice per second. It's not a problem with this simple example, but it can be a big problem when the interval is more complex. It can also cause memory leaks. How to fix it? There are many ways to fix this problem. One way is to use useRef to store the interval. import React, { useEffect, useRef } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)
  const intervalRef = useRef()

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setCount((c) => c + 1)
    }, 1000)
    return () => clearInterval(intervalRef.current)
  }, [])

  return <div>{count}</div>
} The above code is a lot better than the previous example. It doesn't set the interval every time the component re-renders. But it still needs improvement. It's still a bit complicated. And it still uses useEffect, which is a very dangerous hook. useEffect is not for effects As we know about useEffect, it combines componentDidMount, componentDidUpdate, and componentWillUnmount in a single API. Let's give some examples of it: useEffect(() => {
  // componentDidMount?
}, []) useEffect(() => {
  // componentDidUpdate?
}, [something, anotherThing]) useEffect(() => {
  return () => {
    // componentWillUnmount?
  }
}, []) It's effortless to understand. useEffect is used to perform side effects when the component mounts, updates, and unmounts. But it's not only used to perform side effects. It's also used to perform side effects when the component re-renders. It's not a good idea to perform side effects when the component re-renders. It can cause a lot of bugs. It's better to use other hooks to perform side effects when the component re-renders. useEffect is not a lifecycle hook. import React, { useState, useEffect } from 'react'

const Example = () => {
  const [value, setValue] = useState('')
  const [count, setCount] = useState(-1)

  useEffect(() => {
    setCount(count + 1)
  })

  const onChange = ({ target }) => setValue(target.value)

  return (
    <div>
      <input type="text" value={value} onChange={onChange} />
      <div>Number of changes: {count}</div>
    </div>
  )
} useEffect is not a state setter import React, { useState, useEffect } from 'react'

const Example = () => {
  const [count, setCount] = useState(0)

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`
  }) // <-- this is the problem, 😱 it's missing the dependency array

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
} I recommend reading this documentation: https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects Imperative vs Declarative : When something happens, execute this effect. Imperative : When something happens, it will cause the state to change and depending (dependency array) on which parts of the state changed, this effect should be executed, but only if some condition is true. And React may execute it again for concurrent rendering. Declarative no reason Concept vs Implementation : Concept useEffect(() => {
  doSomething()

  return () => cleanup()
}, [whenThisChanges]) : Implementation useEffect(() => {
  if (foo && bar && (baz || quo)) {
    doSomething()
  } else {
    doSomethingElse()
  }

  // oops, I forgot the cleanup
}, [foo, bar, baz, quo]) : Real-world implementation useEffect(() => {
  if (isOpen && component && containerElRef.current) {
    if (React.isValidElement(component)) {
      ionContext.addOverlay(overlayId, component, containerElRef.current!);
    } else {
      const element = createElement(component as React.ComponentClass, componentProps);
      ionContext.addOverlay(overlayId, element, containerElRef.current!);
    }
  }
}, [component, containerElRef.current, isOpen, componentProps]); useEffect(() => {
  if (removingValue && !hasValue && cssDisplayFlex) {
    setCssDisplayFlex(false)
  }
  setRemovingValue(false)
}, [removingValue, hasValue, cssDisplayFlex]) It's scary to write this code. Furthermore, it will be normal in our codebase and messed up. 😱🤮 Where do effects go? React 18 runs effects twice on the mount (in strict mode). Mount/effect (╯°□°)╯︵ ┻━┻ -> Unmount (simulated)/cleanup ┬─┬ /( º _ º /) -> Remount/effect (╯°□°)╯︵ ┻━┻ Should it be placed outside of the component? The default useEffect? Uh... awkward. Hmm... 🤔 We couldn't put it in render since it should be no side-effects there because render is just like the right-hand of a math equation. It should be only the result of the calculation. What is useEffect for? Synchronization useEffect(() => {
  const sub = createThing(input).subscribe((value) => {
    // do something with value
  })

  return sub.unsubscribe
}, [input]) useEffect(() => {
  const handler = (event) => {
    setPointer({ x: event.clientX, y: event.clientY })
  }

  elRef.current.addEventListener('pointermove', handler)

  return () => {
    elRef.current.removeEventListener('pointermove', handler)
  }
}, []) Action effects vs Activity effects Fire-and-forget            Synchronized
 (Action effects)        (Activity effects)

        0              ----------------------       ----------------- - - -
        o              o   |     A   |      o       o     | A   |   A
        o              o   |     |   |      o       o     | |   |   |
        o              o   |     |   |      o       o     | |   |   |
        o              o   |     |   |      o       o     | |   |   |
        o              o   |     |   |      o       o     | |   |   |
        o              o   |     |   |      o       o     | |   |   |
        o              o   V     |   V      o       o     V |   V   |
o-------------------------------------------------------------------------------->
                                       Unmount      Remount Where do action effects go? Sorta. Event handlers. <form
  onSubmit={(event) => {
    // 💥 side-effect!
    submitData(event)
  }}
>
  {/* ... */}
</form> There is excellent information in Beta React.js. I recommend reading it. Especially the . "Can event handlers have side effects?" part Absolutely! <u>Event handlers are the best place for side effects.</u> Another great resource I want to mention is Where you can cause side effects In React, <u>side effects usually belong inside event handlers.</u> If you've exhausted all other options and can't find the right event handler for your side effect, you can still attach it to your returned JSX with a <u>useEffect</u> call in your component. This tells React to execute it later, after rendering, when side effects are allowed. <u> </u> However, this approach should be your last resort. "Effects happen outside of rendering" - David Khoursid. (state) => UI
(state, event) => nextState // 🤔 Effects? UI is a function of the state. As all the current states are rendered, it will produce the current UI. Likewise, when an event happens, it will create a new state. And when the state changes, it will build a new UI. This paradigm is the core of React. When do effects happen? Middleware? 🕵️ Callbacks? 🤙 Sagas? 🧙‍♂️ Reactions? 🧪 Sinks? 🚰 Monads(?) 🧙‍♂️ Whenever? 🤷‍♂️ State transitions. Always. (state, event) => nextState
          |
          V
(state, event) => (nextState, effect) // Here Where do action effects go? State transitions. Event handlers. Which happen to be executed at the same time as event handlers. We Might Not Need an Effects We could use useEffect because we don't know that there is already a built-in API from React that can solve this problem. Here is an excellent resource to read about this topic: You Might Not Need an Effect We don't need useEffect for transforming data. useEffect ➡️ useMemo (even though we don't need useMemo in most cases) const Cart = () => {
  const [items, setItems] = useState([])
  const [total, setTotal] = useState(0)

  useEffect(() => {
    setTotal(items.reduce((total, item) => total + item.price, 0))
  }, [items])

  // ...
} Read and think about it again carefully 🧐. const Cart = () => {
  const [items, setItems] = useState([])
  const total = useMemo(() => {
    return items.reduce((total, item) => total + item.price, 0)
  }, [items])

  // ...
} Instead of using to calculate the total, we can use to memoize the total. Even if the variable is not an expensive calculation, we don't need to use to memoize it because we're basically trading performance for memory. useEffect useMemo useMemo Whenever we see in , it's a warning sign that we can simplify it. setState useEffect Effects with external stores? useSyncExternalStore useEffect ➡️ useSyncExternalStore ❌ Wrong way: const Store = () => {
  const [isConnected, setIsConnected] = useState(true)

  useEffect(() => {
    const sub = storeApi.subscribe(({ status }) => {
      setIsConnected(status === 'connected')
    })

    return () => {
      sub.unsubscribe()
    }
  }, [])

  // ...
} ✅ Best way: const Store = () => {
  const isConnected = useSyncExternalStore(
    // 👇 subscribe
    storeApi.subscribe,
    // 👇 get snapshot
    () => storeApi.getStatus() === 'connected',
    // 👇 get server snapshot
    true
  )

  // ...
} We don't need useEffect for communicating with parents. useEffect ➡️ eventHandler ❌ Wrong way: const ChildProduct = ({ onOpen, onClose }) => {
  const [isOpen, setIsOpen] = useState(false)

  useEffect(() => {
    if (isOpen) {
      onOpen()
    } else {
      onClose()
    }
  }, [isOpen])

  return (
    <div>
      <button
        onClick={() => {
          setIsOpen(!isOpen)
        }}
      >
        Toggle quick view
      </button>
    </div>
  )
} 📈 Better way: const ChildProduct = ({ onOpen, onClose }) => {
  const [isOpen, setIsOpen] = useState(false)

const handleToggle = () => {
  const nextIsOpen = !isOpen;
  setIsOpen(nextIsOpen)

  if (nextIsOpen) {
    onOpen()
  } else {
    onClose()
  }
}

  return (
    <div>
      <button
        onClick={}
      >
        Toggle quick view
      </button>
    </div>
  )
} ✅ Best way is to create a custom hook: const useToggle({ onOpen, onClose }) => {
  const [isOpen, setIsOpen] = useState(false)

  const handleToggle = () => {
    const nextIsOpen = !isOpen
    setIsOpen(nextIsOpen)

    if (nextIsOpen) {
      onOpen()
    } else {
      onClose()
    }
  }

  return [isOpen, handleToggle]
}

const ChildProduct = ({ onOpen, onClose }) => {
  const [isOpen, handleToggle] = useToggle({ onOpen, onClose })

  return (
    <div>
      <button
        onClick={handleToggle}
      >
        Toggle quick view
      </button>
    </div>
  )
} We don't need useEft for initializing global singletons. useEffect ➡️ justCallIt ❌ Wrong way: const Store = () => {
  useEffect(() => {
    storeApi.authenticate() // 👈 This will run twice!
  }, [])

  // ...
} 🔨 Let's fix it: const Store = () => {
  const didAuthenticateRef = useRef()

  useEffect(() => {
    if (didAuthenticateRef.current) return

    storeApi.authenticate()

    didAuthenticateRef.current = true
  }, [])

  // ...
} ➿ Another way: let didAuthenticate = false

const Store = () => {
  useEffect(() => {
    if (didAuthenticate) return

    storeApi.authenticate()

    didAuthenticate = true
  }, [])

  // ...
} 🤔 How if: storeApi.authenticate()

const Store = () => {
  // ...
} 🍷 SSR, huh? if (typeof window !== 'undefined') {
  storeApi.authenticate()
}
const Store = () => {
  // ...
} 🧪 Testing? const renderApp = () => {
  if (typeof window !== 'undefined') {
    storeApi.authenticate()
  }

  appRoot.render(<Store />)
} We don't necessarily need to place everything inside a component. We don't need useEffect for fetching data. useEffect ➡️ renderAsYouFetch (SSR) or useSWR (CSR) ❌ Wrong way: const Store = () => {
  const [items, setItems] = useState([])

  useEffect(() => {
    let isCanceled = false

    getItems().then((data) => {
      if (isCanceled) return

      setItems(data)
    })

    return () => {
      isCanceled = true
    }
  })

  // ...
} 💽 Remix way: import { useLoaderData } from '@renix-run/react'
import { json } from '@remix-run/node'
import { getItems } from './storeApi'

export const loader = async () => {
  const items = await getItems()

  return json(items)
}

const Store = () => {
  const items = useLoaderData()

  // ...
}

export default Store ⏭️🧹 Next.js (appDir) with async/await in Server Component way: // app/page.tsx
async function getData() {
  const res = await fetch('https://api.example.com/...')
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.

  // Recommendation: handle errors
  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error('Failed to fetch data')
  }

  return res.json()
}

export default async function Page() {
  const data = await getData()

  return <main></main>
} ⏭️💁 Next.js (appDir) with useSWR in Client Component way: // app/page.tsx
import useSWR from 'swr'

export default function Page() {
  const { data, error } = useSWR('/api/data', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>

  return <div>hello {data}!</div>
} ⏭️🧹 Next.js (pagesDir) in SSR way: // pages/index.tsx
import { GetServerSideProps } from 'next'

export const getServerSideProps: GetServerSideProps = async () => {
  const res = await fetch('https://api.example.com/...')
  const data = await res.json()

  return {
    props: {
      data,
    },
  }
}

export default function Page({ data }) {
  return <div>hello {data}!</div>
} ⏭️💁 Next.js (pagesDir) in CSR way: // pages/index.tsx
import useSWR from 'swr'

export default function Page() {
  const { data, error } = useSWR('/api/data', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>

  return <div>hello {data}!</div>
} 🍃 React Query (SSR way: import { getItems } from './storeApi'
import { useQuery } from 'react-query'

const Store = () => {
  const queryClient = useQueryClient()

  return (
    <button
      onClick={() => {
        queryClient.prefetchQuery('items', getItems)
      }}
    >
      See items
    </button>
  )
}

const Items = () => {
  const { data, isLoading, isError } = useQuery('items', getItems)

  // ...
} ⁉️ Really ⁉️ What should we use? useQuery? useSWR? useEffect? or... just use() 🤔 use() is a new React function that accepts a promise conceptually similar to await. use() handles the promise returned by a function in a way that is compatible with components, hooks, and Suspense. Learn more about use() in the React RFC. function Note({ id }) {
  // This fetches a note asynchronously, but to the component author, it looks
  // like a synchronous operation.
  const note = use(fetchNote(id))
  return (
    <div>
      <h1>{note.title}</h1>
      <section>{note.body}</section>
    </div>
  )
} Fetching in useEffect problems 🏃‍♂️ Race conditions 🔙 No instant back button 🔍 No SSR or initial HTML content 🌊 Chasing waterfall Reddit, Dan Abramov Conclusion From fetching data to fighting with imperative APIs, side effects are one of the most significant sources of frustration in web app development. And let's be honest, putting everything in useEffect hooks only helps a little. Thankfully, there is a science (well, math) to side effects, formalized in state machines and statecharts, that can help us visually model and understand how to orchestrate effects, no matter how complex they get declaratively. Resources Remix Next.js React Query use SWR Goodbye, useEffect - David Khourshid React 18: The One with Suspense for Data Fetching

How to Use React to Replace useEffect

Cómo usar React para reemplazar useEffect

Comment utiliser React pour remplacer useEffect

उपयोग प्रभाव को बदलने के लिए प्रतिक्रिया का उपयोग कैसे करें

React を使用して useEffect を置き換える方法

Como usar React para substituir useEffect

Cách sử dụng React để thay thế useEffect

如何使用 React 替代 useEffect

The post introduced a solution for automating AWS Identity Center groups to AWS accounts and permission set assignments for groups created within AWS Identity Center from an external Identity Provider. This post assumes a familiarity with the AWS IAM service and concepts such as roles and policies. Introduction to Central Identity and Access Control on AWS AWS multi-account environments are commonly set up with central identity and access control instead of doing this on a per-individual account basis. AWS offers the IAM Identity Center (formerly Single Sign On) service for centralized access control, permissions, and access to AWS accounts. Identity Center supports bringing an organization's existing users and groups into the AWS environment. IAM's documentation refers to this as using an external identity provider (IdP) to federate users and groups with Identity Center. Within the Identity Center permissions are managed via permission sets, which in turn are a collection of IAM policies. Once a permission set has been assigned for a user or group to an account, Identity Center will automatically create IAM roles in the account. The role's policies are configured from the permission set. In addition, the role has a trust policy configured that allows the role to be only assumed when the user has been authenticated by the federated identity provider. Managing AWS access control and permissions should always follow the least privilege permissions concept for any task for the environment's users. AWS environments typically are set up for role-based access control where roles have sufficient permissions setup to accomplish the required tasks. Roles in the AWS Identity Center are commonly mapped to federated groups from the IdP. Depending on the requirements for granularity this potentially results in a 1:1 relationship between an IdP's groups and the combination of the AWS account and permission set. Let's look at a practical example. The AWS account 'app1-prod'  should be accessed by the operators of the account using three different permissions depending on the tasks at hand. For day-to-day regular operations, most tasks should be read only and fall within the category of visibility, monitoring, and observation. One can use AWS' provided AWS-managed policy and the permissions defined by the policies would get the job done. ReadOnlyAccess For emergency changes to the environment and management of the IAM service within the account, the policies from AWS's managed the policy can be used. AdministratorAccess For any other tasks requiring interactive changes to the environment permissions defined the policies from AWS's managed the policy can be used. PowerUserAccess In the example scenario, the IdP would have to hold three groups, giving the group's members access to the AWS account app1-prod with the three permission sets , and . ReadOnlyAccess AdministratorAccess PowerUserAccess Creating the groups in the IdP and assignment of the permission sets to the AWS accounts for the group must be accomplished first before users from the groups can log into the AWS account. Many organizations have automated AWS account creation since new applications and workloads need to be accommodated frequently. It is not uncommon for a workload to be deployed across several AWS accounts, each requiring an IAM Identity Center setup before being handed over to the users of the accounts. AWS does not provide an out-of-the-box solution for automating the creation of groups and permission sets to AWS account assignments and thus frequently this step is performed manually introducing delays and additional work. Solution This post describes a solution using AWS serverless resources for AWS Identity Center federated group to account and permission set assignment automation. This solution assumes that the naming of the group follows a regular pattern that contains the target AWS account and permission set as part of the name of the group. As an example, we will use the group name . The solution implementation is built with the following assumptions that the group name encodes: aws_accountname_a A constant prefix for groups for AWS account access (the string ) aws_ The account name where the group should be assigned (the string - any nonwhite space characters between the characters of the whole group name) accountname _ A short name of the permission set (the string to refer to for permission set) that the group should be assigned to the account _p AWSPowerUserAccess Prerequisites The user has an AWS account that has IAM Identity Center enabled. The user has IAM Identity Center configured to use an external identity provider for the user and group federation. The external identity provider is configured and set up for automatic provisioning, see the references section of this post. The user has adequate permissions to manage resources within the account (using CloudFormation or using other methods). High-Level Architecture The following diagram shows a high-level architecture of the solution. Workflow of the Solution The basic workflow of the solution is highlighted in the following steps: The external identity provider provisions a group within the AWS IAM Identity Center using the SCIM protocol between the identity provider and AWS IAM Identity Center, triggering an AWS CloudTrail event. An AWS EventBridge rule monitors for the event raised upon provisioning and triggers an AWS Lambda function, passing the event details to the function. The function decodes the group name from the event detail as it contains the desired account name, and the desired permission set name to be assigned to the group and performs the assignment within IAM Identity Center API. The process is logged in an AWS CloudWatch log group for auditing and debugging purposes. In case of failure, an email will be dispatched. Implementation The solution is implemented in AWS CloudFormation but should be fairly portable to be implemented in other Infrastructure as Code frameworks such as Terraform, etc. The main components are the EventBridge rule to listen for the desired event, the Lambda function and its IAM permissions, and the SNS component for sending emails on failure. CloudFormation Template The solution ships as a single CloudFormation template that should be fairly easy to deploy to the AWS account that has Identity Center enabled. Description: AWS SSO Automation Components

Parameters:
  ManagedResourcePrefix:
    Type: String
  InstanceArn:
    Type: String
  SMTPNotifyAddress:
    Type: String
  TopicName:
    Type: String
    Default: "AssigmentTopic"

Resources:
  NewSSOGroupEventRule:
    Type: AWS::Events::Rule
    Properties:
      Description: Trigger for when a new SSO Group is propagated from external IdP via SCIM
      EventPattern:
        source:
        - aws.sso-directory
        detail-type:
        - AWS API Call via CloudTrail
        detail:
          eventSource:
          - sso-directory.amazonaws.com
          eventName:
          - CreateGroup
      Targets:
        - Arn: !GetAtt SsoAssignGroupsFunction.Arn
          Id: sso-assign-group-function
  ExecutionRole:
    Type: AWS::IAM::Role
    Properties:
      AssumeRolePolicyDocument:
        Version: 2012-10-17
        Statement:
        - Effect: Allow
          Principal:
            Service: lambda.amazonaws.com
          Action:
          - sts:AssumeRole
      ManagedPolicyArns:
      - arn:aws:iam::aws:policy/service-role/AWSLambdaBasicExecutionRole
      Policies:
      - PolicyName: SSOandOrgPermissions
        PolicyDocument:
          Version: 2012-10-17
          Statement:
          - Effect: Allow
            Action:
            - sso-directory:Describe*
            - sso-directory:Get*
            - sso-directory:List*
            - sso-directory:Describe*
            - sso-directory:Search*
            - sso:Describe*
            - sso:Get*
            - sso:List*
            - sso:CreateAccountAssignment
            - sso:ProvisionPermissionSet
            - identitystore:List*
            - identitystore:Describe*
            - organizations:ListAccounts
            - sns:Publish
            Resource: '*'
  AssignmentTopic:
    Type: AWS::SNS::Topic
    Properties:
      Subscription:
        - Endpoint: !Ref SMTPNotifyAddress
          Protocol: "email"
      TopicName: !Ref TopicName
  SsoAssignGroupsFunction:
    Type: AWS::Lambda::Function
    Properties:
      Code:
        ZipFile: |
          """ This function is intended to be a standalone Lambda function for SSO Permission Set
          to AWS Account Assignment """

          import re
          import os
          import logging
          import json
          from time import sleep
          import boto3
          import traceback

          logger = logging.getLogger()
          logger.setLevel(logging.DEBUG)


          # This function assumes that groups are named like aws_<account-name>_<a|r|p>
          # see the documentation of this function for details.
          CONST_PREFIX = "aws"
          g_account_pattern = rf"^{CONST_PREFIX}_(\S*)_(\S*)"

          PSET_NAME_MAPPING_DICT = {
              "r": "AWSReadOnlyAccess",
              "a": "AWSAdministratorAccess",
              "p": "AWSPowerUserAccess",
          }

          sso_admin_client = boto3.client("sso-admin")
          org_client = boto3.client("organizations")
          sns_resource = boto3.resource("sns")


          def list_permission_sets(sso_instance_arn) -> dict:
              """Returns a dictionary of permissionssets for a given SSO Instance."""
              perm_set_dict = {}
              response = sso_admin_client.list_permission_sets(InstanceArn=sso_instance_arn)
              results = response["PermissionSets"]
              while "NextToken" in response:
                  response = sso_admin_client.list_permission_sets(
                      InstanceArn=sso_instance_arn, NextToken=response["NextToken"]
                  )
                  results.extend(response["PermissionSets"])

              for permission_set in results:
                  perm_description = sso_admin_client.describe_permission_set(
                      InstanceArn=sso_instance_arn, PermissionSetArn=permission_set
                  )
                  perm_set_dict[perm_description["PermissionSet"]["Name"]] = permission_set
              return perm_set_dict


          def list_aws_accounts() -> list:
              """Returns a list of account dictionaries containing  name id of each account"""
              account_list = []
              paginator = org_client.get_paginator("list_accounts")
              page_iterator = paginator.paginate()

              for page in page_iterator:
                  for acct in page["Accounts"]:
                      # only add active accounts
                      if acct["Status"] == "ACTIVE":
                          data = {"name": acct["Name"], "id": acct["Id"]}
                          account_list.append(data)
              #logger.debug("List of accounts: %s", account_list)
              return account_list


          def lambda_handler(event, context):
              """Main method for Lambda function, will handle the IAM Identity Center permission set to IAM Identity Center directiry group and AWS account mapping"""
              logger.debug("Invoked with event: %s", event)
              try:
                  group_display_name = event["detail"]["responseElements"]["group"]["displayName"]
                  if group_display_name == "":
                      logger.debug(
                          "Recieved SCIM CreateGroup event for roup name '%s'", group_display_name
                      )
                      raise Exception("Event did not contain the group display name property")

                  result = re.search(g_account_pattern, group_display_name)
                  print(result)
                  if not result:
                      logger.error(
                          "Security group: '%s' does not matching naming convention for account assignment. REGEX retourned matches: %s",
                          group_display_name, result,
                      )
                      raise Exception(
                          "Security group does not match convention for account assignment automation"
                      )

                  account_name = result.group(1)
                  short_name_pset = result.group(2)  # "a" "p" or "r"

                  if short_name_pset not in PSET_NAME_MAPPING_DICT:
                      logger.error(
                          "Short name '%s' for permission set is not known", short_name_pset
                      )
                      raise Exception("Short name for permission set is not known")

                  permission_set_name = PSET_NAME_MAPPING_DICT[short_name_pset]
                  logger.debug(
                      "Searching for account '%s' and permission set '%s'",
                      account_name,
                      permission_set_name,
                  )

                  accounts = list_aws_accounts()

                  instance_arn = os.getenv("INSTANCE_ARN")
                  logger.info("IAM Identity Center Instance ARN is configured '%s'", instance_arn)

                  if instance_arn is None:
                      raise Exception("No IAM Idenity Center Instance ARN is configured.")

                  logger.debug("Found IAM Idenity Center instance arn '%s'", instance_arn)
                  permission_sets = list_permission_sets(instance_arn)

                  logger.debug("Permission sets found '%s'", permission_sets)

                  account_id, permission_set_arn, account_name = None, None, None
                  for account in accounts:
                      logger.info("Id of desired account is '%s' ", account["id"])
                      account_id = account.get("id")
                      account_name = account.get("name")

                  if account_id is None:
                      logger.error("Can't find desired account '%s'", account_name)
                      raise Exception("Clould not find account")

                  for name, arn in permission_sets.items():
                      if name == permission_set_name:
                          logger.info("ARN of desired permission set is '%s'", arn)
                          permission_set_arn = arn

                  if permission_set_arn is None:
                      logger.error("Can't find desired permission set %s", permission_set_arn)
                      raise Exception("Can't find desired permission set")

                  principal_id = event["detail"]["responseElements"]["group"]["groupId"]
                  logger.info("PrincipalId of the group is: %s", principal_id)
                  if principal_id is None:
                      logger.error("Could not retrieve the princiapal id of group %s", principal_id)
                      raise Exception("Could not retrieve the princial id of the group")

                  request = {
                      "InstanceArn": instance_arn,
                      "TargetId": account_id,
                      "TargetType": "AWS_ACCOUNT",
                      "PermissionSetArn": permission_set_arn,
                      "PrincipalType": "GROUP",
                      "PrincipalId": principal_id,  #AWS IAM Identity Center group identifier
                  }

                  cracct_response = sso_admin_client.create_account_assignment(**request)
                  cracct_request_id = cracct_response["AccountAssignmentCreationStatus"][
                      "RequestId"
                  ]

                  for tries in range(5):
                      # The docs explain the following valid status states "IN_PROGRESS"|"FAILED"|"SUCCEEDED"
                      ps_prov_set_status = (
                          sso_admin_client.describe_account_assignment_creation_status(
                              InstanceArn=instance_arn,
                              AccountAssignmentCreationRequestId=cracct_request_id,
                          )
                      )
                      logger.info("Assignment attempt %s", tries)
                      status = ps_prov_set_status["AccountAssignmentCreationStatus"]["Status"]

                      if status == "IN_PROGRESS":
                          logger.info("Assignment is in progress")
                          logger.info("Sleeping for 5 seconds")
                          sleep(5.0)
                          continue
                      if status == "FAILED":
                          logger.error("Account assigned has failed")
                          raise Exception("Account assignment has failed")
                          return

                  logger.info(
                      "SUCCESS: Security Group: %s assigned to Account: %s with permission set: %s",
                      group_display_name,
                      account_name,
                      permission_set_name,
                  )
              except Exception as err:
                  message = {"Exception Details": str(err),
                                    "event": event}
                  return message
                  sns_topic = os.getenv("SNS_TOPIC")
                  topic = sns_resource.Topic(sns_topic)
                  topic.publish(
                      Message=json.dumps(message),
                      Subject="Account Association Operation Failed: SSO Automation",
                  )
                  logger.info("Error notification sent via SNS")

      Handler: 'assign_group_to_account.lambda_handler'
      Role: !GetAtt ExecutionRole.Arn
      Runtime: 'python3.9'
      MemorySize: 128
      Timeout: 900
      Environment:
        Variables:
          SNS_TOPIC: !Ref AssignmentTopic
          INSTANCE_ARN: !Ref InstanceArn
  EventsFunctionPermission:
    Type: AWS::Lambda::Permission
    Properties:
      Action: lambda:InvokeFunction
      FunctionName: !GetAtt SsoAssignGroupsFunction.Arn
      Principal: events.amazonaws.com
      SourceArn: !GetAtt NewSSOGroupEventRule.Arn

`

# References
See https://docs.aws.amazon.com/singlesignon/latest/userguide/provision-automatically.html for details on how to set a external Identity Provider configuration for provisioning.

Automating AWS Identity Center Permissions Management

Sometimes we need to download files from some storage. Files have some metadata like name, size, and extension (maybe we need more metadata, but let’s keep it simple), also files should implement interface for getting bytes of this content. io.Reader So file struct may look like this: package file

import (
   "io"
)

func NewFile(name string, extension string, size int, r io.Reader) *File {
   return &File{Name: name, Extension: extension, Size: size, r: r}
}

type File struct {
   r         io.Reader
   Name      string
   Extension string
   Size      int
}

func (f *File) Read(p []byte) (n int, err error) {
   return f.r.Read(p)
} I want to implement sending this struct from the server to the client using Golang/gRPC. gRPC API Before beginning to implement the server and the client we need to have API. Our API is quite simple: syntax = 'proto3';

package api.v1;

option go_package = "github.com/andrey-berenda/go-filestorage/generated/v1;api";

service FileService {
  rpc Download(DownloadRequest) returns(stream DownloadResponse);
}

message DownloadRequest{
  string id = 1;
}

message DownloadResponse{
  bytes chunk = 1;
} As we can see in our API there is no file metadata: metadata will be in headers because we need to send it only once and headers are the best candidate for achieving this goal. Because of this we need to have method and constructor from metadata in our struct: Metadata() package file

import (
   "io"
   "strconv"

   "google.golang.org/grpc/metadata"
)

var fileNameHeader = "file-name"
var fileTypeHeader = "file-type"
var fileSizeHeader = "file-size"

func (f *File) Metadata() metadata.MD {
   return metadata.New(map[string]string{
      fileNameHeader: f.Name,
      fileTypeHeader: f.Extension,
      fileSizeHeader: strconv.Itoa(f.Size),
   })
}

func NewFromMetadata(md metadata.MD, r io.Reader) *File {
   var name, fileType string
   var size int

   if names := md.Get(fileNameHeader); len(names) > 0 {
      name = names[0]
   }
   if types := md.Get(fileTypeHeader); len(types) > 0 {
      fileType = types[0]
   }
   if sizes := md.Get(fileSizeHeader); len(sizes) > 0 {
      size, _ = strconv.Atoi(sizes[0])
   }

   return &File{Name: name, Extension: fileType, Size: size, r: r}
} Server implementation The interface for the server looks like this: type FileServiceServer interface {
   Download(req *pb.DownloadRequest, server pb.FileService_DownloadServer) error
} At first, we need to check if the client sent the file id: if req.GetId() == "" {
   return status.Error(codes.InvalidArgument, "id is required")
} Then we get files from some storage: f, ok := getFile(req.Id)
if !ok {
   return status.Error(codes.NotFound, "file is not found")
} In my example, the storage is very simple and keeps everything in memory(only one file named “gopher”): //go:embed static/gopher.png
var gopher []byte

func getFile(fileID string) (*file.File, bool) {
   if fileID != "gopher" {
      return nil, false
   }
   return file.NewFile("gopher", "png", len(gopher), bytes.NewReader(gopher)), true
} After getting the file we send the headers: err := server.SendHeader(f.Metadata())
if err != nil {
   return status.Error(codes.Internal, "error during sending header")
} And send content: const chunkSize = 1024 * 3
   chunk := &pb.DownloadResponse{Chunk: make([]byte, chunkSize)}
   var n int Loop:
   for {
      n, err = f.Read(chunk.Chunk)
      switch err {
      case nil:
      case io.EOF:
         break Loop
      default:
         return status.Errorf(codes.Internal, "io.ReadAll: %v", err)
      }
      chunk.Chunk = chunk.Chunk[:n]
      serverErr := server.Send(chunk)
      if serverErr != nil {
         return status.Errorf(codes.Internal, "server.Send: %v", serverErr)
      }
   }
   return nil The server is implemented. The chunk size is not so big, I think we can increase it to 1MB or something like that, but keep the chunk size as a multiple of 3 (I will explain later why it is important). All code of the server is here : Client implementation I want to implement the method for the Client: type Client struct {
   client pb.FileServiceClient
}

func (c Client) GetFile(ctx context.Context, fileID string)(*file.File, error) For reaching this we need to make a gRPC request to the server: response, err := c.client.Download(
   ctx,
   &pb.DownloadRequest{Id: fileID},
)
if err != nil {
   return nil, fmt.Errorf("client.LoadFile: %w", err)
} After that we need to get headers from the context: md, err := response.Header()
if err != nil {
   return nil, fmt.Errorf("response.Header: %w", err)
} And finally, create and copy all content from response to io.Pipe : *io.PipeWriter r, w := io.Pipe()
f := file.NewFromMetadata(md, r)
go copyFromResponse(w, response)
return f, nil Implementation of the copying is here: func copyFromResponse(w *io.PipeWriter, res pb.FileService_DownloadClient) {
   message := new(pb.DownloadResponse)
   var err error
   for {
      err = res.RecvMsg(message)
      if err == io.EOF {
         _ = w.Close()
         break
      }
      if err != nil {
         _ = w.CloseWithError(err)
         break
      }
      if len(message.GetChunk()) > 0 {
         _, err = w.Write(message.Chunk)
         if err != nil {
            _ = res.CloseSend()
            break
         }
      }
      message.Chunk = message.Chunk[:0]
   }
} The client is implemented. And here is all code of the client . Bonus When you send files using simple HTTP there is one advantage: you can get files by id using only bash without writing any code in Golang. Is there a way to do it when we use gRPC with streams? The answer is “Yes”. To achieve this, we need to have , , , . If the server is served on you can get your “gopher” using this command: grpcurl jq tr base64 localhost:8000 grpcurl -plaintext -d '{"id":"gopher"}' localhost:8000 api.v1.FileService.Download  | jq .chunk | tr -d '"\n' | base64 -d > gopher.png This command will work correctly only if each chunk has a bytes count multiple by 3. If the chunk size is not multiple by 3 we will get an error during decoding from string to bytes using . base64 Final Thoughts In this article, I covered the topic of how to send “File” (see the struct at the beginning of the article) from server to client using Golang/gRPC. All code you can find in my . GitHub repository

How to Download Files Using Golang and gRPC

Events in Svelte are quite intuitive and easy to use. In this guide, we'll look at how to get started with Svelte events. It is assumed you have a good understanding of Javascript for this guide. If you are brand new to Svelte, it might make sense to read my guide on before beginning. creating your first Svelte application What are events in Svelte? When we create new components in Svelte, we will usually want them to do certain things when users interact with them - for example, hover over them, or click on them. Svelte allows for all the events you'd typically find in Vanilla Javascript. Let's start with a basic example. The component below creates a simple counter: <script>
    // we write export let to say that this is a property
    // that means we can change it later!
    let x = 0;
    const addToCounter = function() {
        ++x;
    }
</script>

<button id="counter">{x}</button> Every time the user clicks on the button, we want to fire, which will increase by 1, and display it within the button itself. To do that, we will add an event. addToCounter x Here is the event we'll need to add for when the user clicks the button: <button id="counter" on:click={addToCounter}>{x}</button> We use in Svelte to indicate that the value of this property is Javascript. Any Javascript event can be used in the place of . {} valid click For example, the below will increase the counter any time the mouse moves over the : button <button id="counter" on:mouseover={addToCounter}>{x}</button> Similarly, you can use other Javascript events, like , , , , , , , etc. These are just examples - but any Javascript event you want to use can be used. click scroll hover mouseup pointerup pointerdown mousedown How to Access Event Data in your Svelte Events? Sometimes, we want to access or data when a user interacts with our component. The object carries a lot of useful information about the event fired. To do that, we simply need to change our handler into a function. e event event For example, let’s retrieve the click position of the button, and display that to the user this time. <script>
    // we write export let to say that this is a property
    // that means we can change it later!
    let x = 0;
	let click = [0, 0]
    
    const addToCounter = function(e) {
	    click[0] = e.clientX;
	    click[1] = e.clientY;
        ++x;
    }
</script>

<button id="counter" on:click={(e) => { addToCounter(e) }}>
    Clicked {x} times, last at {click[0]}, {click[1]}
</button> Here, we store and in a variable, and display that to the user any time the button is clicked. e.clientX e.clientY For those that don't know, and both refer to an aspect of the position of the cursor when the event was fired. e.clientX e.clientY Svelte is naturally reactive, so the button will update automatically with the latest data, whenever it is clicked. Svelte Event Forwarding Event forwarding is whenever a user triggers an event on a child component, which we want to handle in the parent component. It is essentially saying that this component can have a specific event, but it is not handled here. Looking at our prior example, we can set up event forwarding first by setting up events that can be forwarded on the child component. Let's say we create a component in a file called which looks like the one below. One button is clickable, while the other is not. Comp.svelte <button on:click>
    Click me, I am a button
</button>
<button>
    I am unclickable. Ignore me.
</button> Here we are saying that the first button has a valid event. This is useful since it lets us define certain elements within a component with valid events which can be forwarded upwards. In our parent, then, we can import our button, like so: on:click <script>
    import Comp from './Comp.svelte';

    let x = 0;
    const addToCounter = () => {
        ++x;
    }
</script>

<Comp on:click={addToCounter} /> Now when the user clicks on the first within , it will fire the event and run the function. If we removed from completely, then no event would trigger despite defining on our component. button Comp on:click addToCounter on:click Comp.svelte on:click Comp That means we can not only define that a child should have an event attached to it, but we can also define which elements have that event, by adding it to the child component itself. This gives us a lot of flexibility. specific Final thoughts Svelte events are straightforward to use, and the fact that they follow the same naming conventions as Vanilla Javascript events makes them incredibly simple to use. In this guide, we've covered the basics so you can get started. Also Published Here For more Svelte content, try my other articles here

A Basic Introduction to Event Handling in Svelte for Beginners

Stories, News & Mentions about CLIENTLY

Cliently’s Stories on HackerNoon