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

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 创建自定义表单字段的指南

The Noonification: Why Is Upwork Suspending Six-Figure Clients? (4/8/2024)

After more than ten years on Elance / oDesk / Upwork, I dare to say that I’ve seen and experienced it first-hand: all the good, the bad, and the ugly. I wrote about my fellow freelancers who have suffered blow by blow; the most notorious ones, the introduction of and . I could live with the fact that my words had fallen on deaf remote-work-community ears. I also didn’t use the opportunity to cherish my see-I-told-you-so moments when , got caught red-handed for to make freelancers spend their connects, and was exposed for the legal catch-22 called “ .” connects required for submitting proposals Draconian sections of Upwork’s Terms Upwork almost bled to death on the stock market posting fake jobs Conversion Fee I’ve always been objective and ready to be challenged and proved wrong for every single claim I made and every single word I wrote, but helplessly emotional when more than . Why? Because nobody cared. Because we’re fully aware of the bitter remote work reality that… 100K freelance accounts on Upwork got purged in just one week Little did I know that the suspension train goes both ways. Look, the clients get suspended, as well. But, there’s a huge difference. Upwork What I’d witnessed was in every freelancer’s best interest. I’m talking about fraudsters and “predators” which are a common problem not only on Upwork but on every freelance platform. What’s right is right in this case, and Upwork is fighting the right fight to make sure its platform is as safe and secure as possible by suspending these kinds of clients. However, what a fellow freelancer brought to my attention was something completely different and unheard of. Upwork “Whales” Are Supposed To Be A Protected Species, Are They Not? The so-called Upwork “whales” are every freelancer’s dream. I’m talking about six-figure spenders on Upwork. There are even seven-and-eight-figure whales, but they’re reserved for crème de la crème of the Upwork freelance elite. So, back to my freelance friend who has been swimming with the six-figure whales on Upwork successfully for quite some time. One day, he shared a screenshot with me that got him upset. He couldn’t submit a proposal and, thus, wasn’t able to work, because this client got suspended. At first, I didn’t understand what was all the fuss about. My friend told me that was unthinkable for more than one reason. First, nobody kills the goose that lays the golden eggs in their right business mind. Second, after spending so much money on Upwork and hundreds of projects under your client’s belt you know all the ins and outs of Upwork Terms, especially the no-no things that can get you in suspension trouble (temporary or permanent). Finally, not just Upwork, but every platform would think twice about suspending a long-term client with deep pockets. You can suspend a hundred freelancers without blinking an eye because there are thousands of newbies eager to take their place. But, killing a whale on Upwork can have serious business consequences. I did my best to sympathize with my brother in freelance arms, but my one swallow doesn't make a summer comforting line was hard to swallow for him. So, a few days later, he hit me with another screenshot: Then, that very week came the third in a row: I was about to unchain the situation DiCaprio-style, “you had my curiosity, now you have my attention,” but I think that Ian Fleming’s Goldfinger is a better choice: Mr Bond, they have a saying in Chicago: 'Once is happenstance. Twice is coincidence. The third time it's enemy action'. The “enemy’s action” had more “casualties” to report the next week of our “investigation.” We even tried to find a pattern. My friend had a theory related to the latest price increase of Upwork Plus membership for freelancers. He thought that was the last straw that pushed some Upwork freelancers and clients to continue work outside the platform. They violated Upwork Terms, got caught, and suspensions followed. Yet, this didn’t make sense to me. Why would a freelance membership fee increase be a client’s problem and reason-for-treason? After two more pieces of evidence, I finally accepted that this wasn’t a coincidence. Eight “whales” times six-figure amounts they have spent, well, that’s a lot of money to “write off” just like that, even for Upwork. OK. I mean, it’s not OK. What’s going on, and why? New Clients on the Upwork Block Even if you aren’t as successful and diligent as my friend who cares deeply about “whales,” but you happen to be an enthusiastic freelancer on Upwork then you probably haven’t missed their CEO’s LinkedIn post about the impressive financial report for the previous year: This post goes on and on, but there’s one part that caught my eye: What’s 8 suspended against 31 new clients? Nothing. Right? I guess that “enterprise clients” stand for potential “whales.” Yet, it’s going to take some time to hit six or seven-figure spending targets for these new Upwork clients. Just like all freelancers are equal, but some freelancers are more equal than others ( ), all Upwork clients are equal, but some clients are more equal than others (“Client Spend” category filter ). JSS - Job Success Score for those who have an Upwork profile I forgot to mention one tiny detail. My friend and I were able to find eight six-figure suspended clients on Upwork in three weeks. So, the legit question remains: how many more clients have been suspended in the meantime (by the time you’re reading this story)? Honestly, Upwork's financial reports and suspended clients, no matter how much they spend, don’t affect my average resting heart rate, but the number of freelancers who are used to and supposed to work for these gone-with-the-wind clients certainly do. Based on my first-hand experience each of these whales has dozens of open active jobs at any given moment for a good price on average. So, eight suspended whales means hundreds of Upwork freelancers with no work. Where Have All The Good Upwork Clients Gone? All those clients haven’t left the remote work world just because Upwork suspended them. Some of them may even return because we can’t know for sure if these were temporary or permanent suspensions. Yet, some are gone for good. Where they’re going to hire and work next? That’s the million-dollar question, literally. I can’t believe that in October it’s going to be five years since I asked the question that’s still waiting to age well: Is Freelance Anarchy The Future of Freelancing? Let that story sink in, read it because it’s not what you think. Contrary to the unpopular belief and prejudice of Upwork Community moderators, I don’t want or cheer for Upwork to collapse on the stock market. I just want , to the good old days with no connects and (questionable) suspensions. Upwork to get back to its basics If there’s someone who can make freelancing great again it’s not this guy… …but Upwork itself. The day when I won’t have the “material” to write about Upwork, it’s going to be a good day for both clients and freelancers. Until that day, you still have to pay to play on Upwork, this way or another. FREE-lancing; that’s how the whole remote work thing started. Remember?

Why Is Upwork Suspending Six-Figure Clients?

কেন আপওয়ার্ক ছয়-চিত্রের ক্লায়েন্টকে সাসপেন্ড করছে?

Warum sperrt Upwork Kunden mit sechsstelligen Umsätzen?

¿Por qué Upwork suspende a los clientes de seis cifras?

Pourquoi Upwork suspend-il les clients à six chiffres ?

अपवर्क छह-आंकड़ा ग्राहकों को निलंबित क्यों कर रहा है?

Upwork が 6 桁のクライアントを停止しているのはなぜですか?

Upwork가 6자릿수 클라이언트를 일시 중지하는 이유는 무엇입니까?

Por que o Upwork está suspendendo clientes de seis dígitos?

Почему Upwork приостанавливает работу шестизначных клиентов?

Upwork Neden Altı Rakamlı Müşterileri Askıya Alıyor?

Tại sao Upwork đình chỉ các khách hàng sáu con số?

Upwork 为何暂停六位数客户？

Logistics is a sector where mistakes usually cost thousands of dollars at best and client relationships at worst. Problems with trucks, car accidents, theft, heavy unexpected traffic—over the years, I’ve learned the hard way how to be forearmed for every situation and minimize risks. Here are some steps that I outline and follow to perform swift operations. Even with the boom of AI systems, the human factor still remains crucial. Finding the Real Problem: If something doesn’t work—take your time to identify problems. Don’t blame others, but collect facts and analyze the whole picture. Whether it's breakdowns in communication, shipment delays, or inefficiencies in processes—find those underlying reasons. Remember, what lies on the surface might be a consequence, not the cause. Ask yourself and your team the right questions, conduct analysis, and ask your superior if needed. Do your best to pinpoint the problem and create the best solution to get this issue out of the way, and brief your team on steps to follow next time it occurs. Or keep it in your books—keeping track of your solutions is an important task, saving you time by not reinventing the wheel the next time something similar occurs. Analyzing Data: Check key performance indicators like on-time delivery rates, inventory turnover, and transportation costs to ensure everything stays on track—literally and figuratively. Use data metrics to gain insights into your operational process, and check what's off track. This way, if a problem occurs, you’ll see what caused it and know the underlying reasons precisely. And if you follow the previous step, you’ll check your book for ideas on how to solve it. Using Team Effort: Logistics is about collaborative effort, and practical problem-solving needs a team approach. Be mindful throughout your work, and foster a culture of open communication by creating a safe space for your employees to share, brainstorm, and experiment. When you face problems, you could significantly leverage the diverse expertise within your company to solve challenges. Cross-functional teams bring together experts with different skill sets and perspectives, which leads to great solutions. Promise you’ll never underestimate your team. Even the youngest, fresh perspectives can shed new light on business processes and offer surprising insights. Adapting: You never know what tomorrow brings, and it’s crucial to be able to adapt your strategy. Whether it’s a delayed shipment, weather advisories, new laws, or rules—have a plan B, C, and D to remain flexible and open to alternative approaches. My team and I sometimes play this game where we try to come up with new solutions to common issues in our sector or try to solve a problem that happened with our competitors. It helps to keep an eye on the prize and be prepared. You can't afford to say no to a customer or fail to deliver. Improving: Unfortunately, problem-solving is not a one-time thing but rather an ongoing process: Monitoring outcomes. Soliciting feedback from team members. Evaluating the effectiveness of your solutions helps refine your approach over time. This allows us to stay one step ahead and support our operational excellence. I’d also recommend exploring new solutions by attending professional events and talking to experts from your field to know how others are coping with the same problems. Connect with companies in other regions who are not your straight competitors to pick each other's brains. Embracing Technology: Technology is everything, and it plays a significant role in today's logistics operations. From inventory management systems to route optimization software, it streamlines processes and increases business efficiency. I believe it’s important to check what technological advancements are available in the market and, after carefully examining them, integrate them into your operations. This can help optimize your problem-solving capabilities. Logistics operations are not rocket science, however, it sometimes is if you don’t play your cards right or unforeseen accidents occur and you don’t have a plan B up your sleeve. Here, I've shared my advice on how you can use simple steps that don't require extra costs, people, or other resources, but manage the risks of time that you can take to think about how to improve your processes to make the most seamless and uneventful deliveries.

Mastering the Operational Logistics: Solving Problems When Client Relationships Are at Risk

Inna Olenina discusses how to foster long-term relationships with major clients, establish effective communication within the development team, and create products that are as user-friendly as possible. Principal Software Engineer, Inna Olenina, has been crafting software solutions for global market leaders for over two decades. She has collaborated with Motorola, Nokia, Samsung, and Sony, developing products that range from key functions of high-tech medical equipment to operating systems and antivirus software. As a leading engineer, she has also mentored professionals, helping them grasp the design of programs and the subtleties of algorithms. For the past seven years, Inna has been instrumental in the creation and development of AI-enabled retail apps. These apps, used by tens of thousands of users from over 70 countries, assist brands in understanding how their products are positioned on store shelves, analyzing data, and adapting their sales strategy. Given Olenina’s extensive experience, deep expertise, and successful track record, she was entrusted not only with ensuring the technical flawlessness of products but also with customer communications. Inna assumed management responsibilities, supporting customers worldwide in the process of using the applications and consulting on the implementation of new features. Inna Olenina shared insights on how to effectively address customer problems, build long-term relationships with them, and bring technological products to perfection, all while fostering a positive atmosphere within the team. Q: Inna, you've worked on a diverse range of projects, spanning from medicine to retail. Did you find it challenging to adapt, or do your competencies seamlessly apply across all domains? A: Understanding programming principles has been invaluable in my journey. If you're proficient in C++, transitioning to Java becomes relatively straightforward. However, I did need to readjust. As a mobile and embedded systems engineer, I constantly delve into the intricacies of new devices and operating systems.  While Android app development differs significantly from industrial healthcare software projects, I embraced the learning curve. For instance, my collaboration with Stereotaxis—a company specializing in non-surgical arrhythmia treatment using remote magnetic navigation—required me to comprehend basic anatomy.  Writing programs to control such equipment and process the 3D images displayed on doctors' computers during procedures demanded this foundational knowledge. Similarly, when developing retail applications, I delved deep into understanding our customers' business specifics. I identified crucial data points, optimized functions for users, and meticulously minimized the risk of introducing erroneous indicators. Q: How did you transition from development to management? A: For a significant period, I served as the lead developer for retail applications in the CIS. In 2018, as one of the key employees, I was presented with the opportunity to relocate to the US and assume a managerial role. This marked a new phase in my career development in addition to the complex and innovative technical work, I took on responsibilities for product quality control and user consultation. I interact with customers from all over the world not just in the US, but also in Canada, Latin America, Europe, and even China and India. Customers reach out to me when they encounter any issues with their apps. My primary responsibility is to analyze the situation and identify solutions. Q: What challenges do clients most often encounter? A: Problems can be categorized into user and technical issues. User problems refer to difficulties experienced by specific users. These can arise due to misconfigured device settings, application configuration errors, device incompatibility with our products, or a lack of understanding of the functionality leading to errors in the data collection process. Sometimes, it’s as simple as a lack of network connectivity. Technical errors are more complex; they can occur, for instance, after a new release and necessitate revisions from the team. In such cases, I need to relay information to the development team responsible for a particular functionality, persuade them of the need for changes, and agree on deadlines. It’s crucial to remember that you can’t just update the program and immediately, without testing, release this version to the customer. Sometimes, solving one problem can give rise to another. Therefore, setting the right expectations for the customer is also important for me. Q: How exactly do you understand what the customer's problem is? A: Over the course of my work, I've developed a clear algorithm of actions. The first step is to request logs from applications and devices, meticulously analyzing the data. Often, at this stage, I can already provide the client with clear recommendations. However, if there aren't sufficient logs, I engage the users in a collaborative process. We replay the users’ actions within the app online, discussing the situation in detail to uncover the root of the problem. In my work, meticulous documentation plays a pivotal role. Every step agreements, product changes, and code modifications are meticulously recorded in our IT system.  This practice aligns with the Scrum project management methodology, emphasizing iterative development and close interaction with the customer. Having this comprehensive documentation benefits the entire team managers, developers, and testers alike. It allows us to verify the product against the client's requirements. So, when someone encounters a technical issue after an update release, I can delve into the code, identify the highlighted lines with recent changes, and pinpoint any errors. Q: Could you provide examples of challenging problems that you've been able to resolve? A: For instance, there was a day when I discovered that large volumes of data were corrupted during transmission from several dozen mobile devices to the server. I promptly crafted an optimal script to restore them and forward them for further processing. Another example - after interacting with users, I identified a flaw in the application interface that complicated the entry and verification of information on one of the screens. I took the initiative to enhance the product and developed a prototype that met the customer's needs. On another occasion, I encountered a performance issue when querying a database from the server and proposed an innovative solution - alter the data type and modify the scenario in which it is requested. In all instances, both time and money were saved for the clients and my company. Q: You have to interact with people from completely different countries all the time. How do you do it? A: This is indeed a challenging task because mentalities and communication styles vary significantly across different regions. What is considered normal in the West may be entirely incomprehensible to clients from the East, and vice versa. To succeed in this endeavor, I've dedicated time to studying cultural differences and the subtle nuances of communication. Over the years, I've honed my ability to find a common language with clients who come from vastly different backgrounds. As a result, I've received many expressions of gratitude from them. Q: Can you provide some tips on how to communicate with customers? A: Firstly, it’s crucial to have not only a deep understanding of your own product but also of the customer’s business and its needs. This knowledge will assist you in quickly identifying the problem and asking the right clarifying questions. Secondly, it’s important to convey the main ideas to the customer as clearly as possible, without burdening them with technical details that are unlikely to interest them. . Thirdly, managing the customer’s expectations properly is key - if you realize that it takes a day to update a product, you should not promise that it will be ready in a couple of hours. And, of course, remember that you and the client are not on opposite sides of the barricades - you are one team of professionals. It’s necessary to include the customer in the process and provide them with feedback. Honest and open communication, calmness, and a problem-solving attitude will help you establish a long-term and strong relationship. Q: Is it ever the case that a customer comes in with a request to improve a product rather than solve a problem? A: Yes, indeed, and it happens quite frequently. Clients observe their competitors in the market, and if they notice an effective solution, they often request for it to be replicated. I would say that there are two primary requests in the market today.  Firstly, users desire an interface that is as simple as possible, free from unnecessary elements, and enables them to perform tasks efficiently. The fewer actions required to achieve a goal, the better. As a result, customers have repeatedly requested for processes to be simplified and automated. Q: What do you do if someone approaches you with such a request? A: When customers approach me with proposals, I consult with them to understand their goals, needs, and desired functionalities. I then evaluate whether such a project can be implemented. This involves understanding the system requirements, estimating the cost of the project, determining the development timeline, and assessing the potential impact. If it’s beneficial to make changes, I liaise with the development team. Together, we explore opportunities to bring the customer’s idea to life, propose different options, and find common ground in case of disagreements. Among other tasks, I prepare architectural design recommendations for my colleagues, test the implementation, and then validate the effectiveness of the products when interacting with customers. Q: It appears that you frequently interact with the development team. Could you share how to foster constructive relationships within the team? A: The fundamental principle is that the team should operate as a cohesive unit. Early in my career, I experienced working in a team where members did not listen or understand each other: frontend developers were at odds with backend developers, each blaming the other for their mistakes. This is not an ideal situation. It's crucial that every team member comprehends not only their role and responsibilities but also their colleagues' areas of responsibility and the interconnections between processes. Furthermore, open, transparent communication and a friendly team atmosphere are essential. Team members should feel comfortable asking questions or making suggestions whenever something is unclear. Such initiatives should be encouraged. Of course, regular meetings are necessary to synchronize on projects. This way, all team members stay informed about the progress and understand the action plan for the immediate future.

Balancing Technical Excellence & Client Satisfaction: A Software Engineer's Perspective

Today’s business climate is one where you only need one opportunity to turn things around. We’ve all seen it repeatedly - several companies never really believed that they had what it takes, but they got one killer idea that changed things for them. In an increasingly opportunistic environment, being able to spot the right chances to take your business to the next level is rare. But, the companies that can recognize opportunities and seize upon them easily become the next big thing. At the moment, one of the most impressive opportunities facing companies today is tech transformation. Organizations are constantly in search of the next wave that can help them become better and improve their operations. And as the past few years have shown, optimizing your tech stack as much as possible can easily be the key to your expansion as a company. This is the reason why Devart is here: the firm has been providing a variety of productivity solutions to Fortune 500 companies, providing them with assistance in enhancing their operations and the communication that occurs within their technology teams. We spoke to Dmytro Nikolaenko, Founder and CEO of Devart, to understand what factors helped the company stay competitive in the exponentially developing technology market for over two decades and how they are preparing for the digital transformation, connected to the arrival of AI and other newest technologies. 1. What is the vision behind Devart? How did you choose the niche for your business? Data is one of the keys to the modern world, no doubt about that. It's a cornerstone of sorts that will never lose any of its relevance. As long as there is software, it has to interact with data. And this is where our solutions come into play. They empower users to manage data with maximum convenience and minimum effort. They provide users with multiple tools that effectively augment their capabilities in daily work. They help reduce manual routine, automate it where possible, and focus on things that really matter. To achieve that, the whole team has to work a lot. We have to evolve our tools non-stop. We have to keep them powerful and intuitive for users of different backgrounds and skill sets. To top it off, we're committed to providing our clients with exceptional, highly responsive support. More or less, this sums up the vision behind Devart. And I was lucky to gather together a team of skilled and talented people who proved capable of making it all work. 2. What is the role of database management in today's fast-paced software development landscape? It's a vital part of that landscape. A database's main functions are information storage, retrieval, and updating. Data about every facet of company operations may be kept in a database, and database administration is essential for creating software that is dependable, strong, and efficient. Imagine that you're in charge of a software product, and you release updates under a standard development cycle. The release of each update is a chance to keep up-to-date with the demands of your customers, to prove the relevance of your product. Basically, it's a chance to sell. Naturally, you want to make the road to each release as short and painless as possible. And when it comes to database development and management, database management tools can offer a true shortcut. For example, dbForge tools for SQL Server can help you unify database development, management, testing, and deployment into a single DevOps cycle, perfectly automated and integrated into your general workflow. And if your workflow changes, these tools are flexible enough to catch up with it. 3. What are the best strategies for the software project teams to adopt to break the cycle of misaligned goals, fragmented tech stack, workflows, or output that come with a siloed team? Proper clarification of goals and well-aligned teamwork is a matter of good management. To avoid teams becoming fixated on increasingly specific, narrow objectives that often lead to misalignment between departments and duplication of efforts, tech leaders should provide a broad, holistic vision for the entire organization to aspire to and set clear priorities. The subject of fragmented tech stacks and workflows is one of the most common problems faced by our clients. In many use cases, a rapidly growing company needed to reshape its database development and management workflows to keep up with the pace of changes. And in each case, our tools helped them make it possible. When performing everyday routine work and coding, users of Devart database administration and development tools consistently report a considerable gain in productivity of 20–30%. We're really proud to be part of their success. 4. How do you plan to accommodate the growing trend for AI, decentralized data, or decentralized database management solutions? The primary incentive for us is the market demand which is why we are focused on the traditional relational databases. This market blooms and doesn't show any signs of decline. In addition, we are very interested in AI utilization in the forthcoming perspective and keep an eye on the rapid developments in this particular area and use cases. As soon as there are proven cases for AI-enabled tools for software or database development, we will expand our offering - our team has enough talent and perseverance to make it happen. Conclusion Tech transformation is one of the most critical parts of business operations in our world. At the end of the day, tech is everywhere - being able to manipulate and control it, while also gaining the right insights from your use of technology, will be one of the areas to focus on as a business looking to grow.

How to Start a Technology Business That Can Attract Clients From the Fortune 500 List

CLIENTLY

cliently.com

-- employees

Since n.d.

COMPANY RANKING

CLIENTLY

EVERGREEN INDEX #2931

Representing this company? Click here to claim and customize this page!

Cliently WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

CLIENTLY

cliently.com

-- employees

Since n.d.

COMPANY RANKING

CLIENTLY

EVERGREEN INDEX #2931

RELATED COMPANIESRANK

STORIES ABOUT CLIENTLY

Representing this company? Click here to claim and customize this page!

Cliently WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!