Modal build better cloud infrastructure for data apps

Modal

A guide on how to master React Native modal complex flows. Do you find using modals in React Native to be a bit of a pain? You’re not alone! Trying to keep control of its open state and repeating the code everywhere you want to use it can be pretty tedious. And the problem only gets worse when you try to create complex flows. Once you get past two modals, your main component is a mess, and the state is all over the place.  I’ve experienced this first-hand in many big companies, like (by AB-InBev), , and now at . Zé Delivery Alfred Delivery X-Team But don’t despair! Most people think that’s the only way. Still, in this article, I will explain how problems start and how to deal with them elegantly while improving your development experience. It will even help you use modals inside and outside React components (in Sagas, for example!) . This article's teachings have been encapsulated in this library: https://github.com/GSTJ/react-native-magic-modal The Challenges Of A “Simple Flow” Imagine this. You work on Facebook, and the Product Team asks for a ‘simple flow’: As a company, I would like to show a modal asking the user to rate the app between 0–5 stars after the user likes a post for the first time. a. I show another modal asking for feedback on how to improve. f the user rates it with less than four stars, b. , show a happy modal asking the user to rate us on the app store. Otherwise , show a ‘thanks’ modal, thanking the user for their support. Finally It isn’t so far-fetched, right? Four modals deep, it brings up a lot of questions from the developer's side. Where should this logic be placed? How should we process the output from the last modal? How do we keep this clean? Can you spot what the code will be like? Do you see yourself writing complex logic to handle the order of the modals, making sure every modal has already transitioned to not visible and having tons of useStates in place? The growth of the problem Imagine you finally did it, you finished the flow, and the Product Team loves the outcome! They now want to expand this flow to show up only once whenever the user likes **anything** for the first time, whether it’s a post, a comment, or a product. How would you approach it? You will have to copy-paste all those four modals on every screen where liking is possible. Maybe you even go ahead and turn all of those into a single component. Even then, adding this wrapper component to every screen is still needed. A few months pass by, and the Development Team now sees the complexity of handling likes differently on every screen and wants to pass this responsibility to a that can be called from anywhere. How do you show the modal only when the [Saga’s Action](https://(https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers) is fired? Sagas run outside React components. Redux Saga I can confidently say that I’ve experienced those scenarios happening. Working in the food delivery industry, we consistently asked the user to rate the app, the delivery, and their purchase. How to avoid it? Let’s start by tackling the state. Managing it is one of the most important things while working with modals. Expose Internal Properties With “useImperativeHandle” In short, allows you to expose internal properties via Ref. If you have a modal component, you could use to expose their `show` and `hide` functions. Meaning it can take care of its own state without delegating to its parent component with , for example.  This can be helpful when you want to make your code clearer and avoid passing down many props. Let’s give it a try: useImperativeHandle useImperativeHandle props import React, { useState, useImperativeHandle } from 'react';
import { Text } from 'react-native';
import ModalContainer from 'react-native-modal';

export const ExampleModal = React.forwardRef((ref) => {
  const [isVisible, setIsVisible] = useState(false);

  const show = () => setIsVisible(true);
  const hide = () => setIsVisible(false);

  useImperativeHandle(ref, () => ({ hide, show }));

  return (
    <ModalContainer onBackdropPress={hide} isVisible={isVisible}>
      <Text>My awesome modal!</Text>
    </ModalContainer>
  );
}); That's the transition to a better place. While this is a step in the right direction, it doesn't solve all of our problems. Namely: To use it, we need to pass a prop from a hook, which means we can't call outside React components. ref useRef show We still need to instantiate the component on every screen. There’s no way to use it on multiple screens without having repeated. ExampleModal Externally exposing the component’s Ref Most people don't know this, but React has a createRef method that can be used outside React components. In fact, it's even in the React-Navigation documentation for edge cases. In practice, the flexibility it brings can be seen here: import React, { useState, useImperativeHandle } from 'react';
import { Text } from 'react-native';
import ModalContainer from 'react-native-modal';

export const imperativeModalRef = React.createRef();

export const SmartExample = () => {
  const [isVisible, setIsVisible] = useState(false);

  const show = () => setIsVisible(true);
  const hide = () => setIsVisible(false);

  useImperativeHandle(imperativeModalRef, () => ({ hide, show }));

  return (
    <ModalContainer onBackdropPress={hide} isVisible={isVisible}>
      <Text>My awesome modal!</Text>
    </ModalContainer>
  );
}; Now can be imported and used anywhere, as long as is on the root. We can use show and hide from every component, function, or . imperativeModalRef SmartExample Saga That solves most of our issues, but there's still one: It is hard to manage a project with many modal refs and modals on the root. That's where you can get creative with abstractions to make the render any modal you want! One way to do this is to make the function receive a component and render it. SmartExample show Going the extra mile Instead of making you guys reinvent the wheel, I've created an open-source library that encapsulates all these concepts and more, with full TypeScript support based on . react-native-modal Here's a basic idea of how to use it: "Talk is cheap. Show me the code." ― Linus Torvalds. import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { MagicModalPortal, magicModal } from 'react-native-magic-modal';

const ConfirmationModal = () => (
  <View>
    <TouchableOpacity onPress={() => magicModal.hide({ success: true })}>
      <Text>Click here to confirm</Text>
    </TouchableOpacity>
  </View>
);

const ResponseModal = ({ text }) => (
  <View>
    <Text>{text}</Text>
    <TouchableOpacity onPress={() => magicModal.hide()}>
      <Text>Close</Text>
    </TouchableOpacity>
  </View>
);

const handleConfirmationFlow = async () => {
  // We call it with or without props, depending on the requirements of the modal.
  const result = await magicModal.show(ConfirmationModal);

  if (result.success) {
    return magicModal.show(() => <ResponseModal text="Success!" />);
  }

  return magicModal.show(() => <ResponseModal text="Failure :(" />);
};

export const MainScreen = () => {
  return (
    <View>
      <TouchableOpacity onPress={handleConfirmationFlow}>
        <Text>Start the modal flow!</Text>
      </TouchableOpacity>
      <MagicModalPortal />
    </View>
  );
}; Example using react-native-magic-modal As you can see, it gives you loads of flexibility, unimaginable before, by simply abstracting the concepts we’ve gone through. Now, the confirmation flow can be called from anywhere. Inside or outside React components. Also, it automatically deals with common issues regarding modals. Did you know that, in React Native, you can’t show two modals simultaneously? Even if you try to show a modal right after another, it would probably fail as the last modal is still animating its ‘close’ state. Fortunately, the issue is already dealt with on our side. https://github.com/react-native-modal/react-native-modal/issues/30 This same logic has already been battle-tested on big companies I’ve worked on, like (by AB-InBev), , and . Zé Delivery Alfred Delivery X-Team The documentation is easy to understand and will give you a headstart. You can learn more about it here: React Native Magic Modal https://github.com/GSTJ/react-native-magic-modal Contributions accepted! Thanks for the read. If you liked the article, follow me on and . Linkedin Github Also Published here

What Everyone Is Getting Wrong About React Native Modals

Modal is a common UX element. A modal is a dialog box/popup window that is displayed on top of the current page. You must have used pop-ups and notifications for your website. For some people pop-ups are really annoying😫 if it doesn't behave as it should. It must have good UI/UX. In this article, we're going to create an efficient 🤩 from scratch without using any library. Modal component Demo Link🖤: https://react-reusable-components.vercel.app/ Our main goal is to create an efficient modal which, Has a good layout Doesn't break ui when we use overflow in the parent component Can render content Dynamically Clean and Elegant animation Looks good (good UI) Have more control for User (like clicking outside can close modal) etc. Let’s get started! If you prefer video format then you can watch this video 📽👇 Create your react-app using, npx create-react-app react-modal For this tutorial, I'm going to use so make sure you have installed node-sass package. To install it do, Sass npm install node-sass Let's create a Basic Modal component open App.js file. clean🧹 unnecessary code. Now create one button in the App.js file to open and close modal just like this 👇 </div> <div className= "App" > < button > Modal </ button > Create one state to open and close modal. Write below 👇 code: );
} import { useState } from "react" ; import "./App.scss" ; function App ( ) { const [modal, setModal] = useState( false ); const Toggle = () => setModal(!modal); return ( < div className = "App" > < button className = "clickme" onClick = {() => Toggle()}> Modal </ button > </ div > export default App; Contains modal state which is false initially. Line 6: A Toggle method to toggle modal state from false to true and vice-versa. Line 7: Make sure to connect method to onClick of the button. Line 11: Toggle() Next, create file and Write below 👇 code: Modal.js );
}; const Modal = () => { return ( < div > Modal </ div > export default Modal; Now import it in the Modal in file. App.js Here we have imported `Modal` component. And passed 
modal state as shown in the props. Line 17: Now open and write below code 👇 Modal.js );
}; import Close from "./times-solid.svg" ; const Modal = ( { show } ) => { return ( <> { show ? < div className = "modalContainer" > < div className = "modal" > < header className = "modal_header" > < h2 className = "modal_header-title" > Modal Title </ h2 > < button className = "close" > < img src = {Close} alt = "close" /> </ button > </ header > < main className = "modal_content" > This is Modal Content </ main > < footer className = "modal_footer" > < button className = "modal-close" > Cancel </ button > < button className = "submit" > Submit </ button > </ footer > </ div > </ div > : null } </> export default Modal; Deconstruct Show from the props. Line 3: We will display the modal only when the show state is true. Line 7: This is the whole .
 Modal Container div contains the modal. Line 9 to 30: Modal layout In the modal div, There is one header that contains the and Button (You can use any icon for the close button). modal title close The main tag contains the of the modal. content Footer has 2 buttons one is and another is . submitted canceled Now when you press a button modal will show and on pressing again it will close the modal. First Let's add some styling to our modal. Create a file and import it in the file. Modal.scss Modal.js Copy and paste this styling in the file. Modal.scss This will give your modal a better look. By applying this you can make it 
look like frost-glass. Line 21: backdrop-filter Let's add Close event in modal In the file pass toggle method as props in the modal just like this 👇 App.js <Modal show={modal} title= "My Modal" close={Toggle}/> open file and deconstruct close from the props. Modal.js );
}; import Close from "./times-solid.svg" ; const Modal = ( { show, close } ) => { return ( <> { show ? < div className = "modalContainer" onClick = {() => close()} > < div className = "modal" onClick = {(e) => e.stopPropagation()}> < header className = "modal_header" > < h2 className = "modal_header-title" > Modal Title </ h2 > < button className = "close" onClick = {() => close()}> < img src = {Close} alt = "close" /> </ button > </ header > < main className = "modal_content" > This is modal content </ main > < footer className = "modal_footer" > < button className = "modal-close" onClick = {() => close()}> Cancel </ button > < button className = "submit" > Submit </ button > </ footer > </ div > </ div > : null } </> export default Modal; Deconstruct Close from the props. Line 3: We have added close method in 3 places: At the close button. Line 16: At the cancel button. Line 22: : We have also added a close method here too. Why? because whenever the user clicks outside it should close the modal. So here, when the user clicks on the modalContainer it closes the modal. Line 11 here we have to stop these click events in the modal else it will close it so for that we have used e.stopPropagation(). Line 13: You can also add event Listener and add functionality 
in which when user clicks esc key, It closes the modal. (It is good for user experience) hint: Let's use Portals to render the Modal component ⏩ What🧐 are ? portals Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. ⏩ Why🤔 should we use portals? Sometimes when we use or properties in the parent component then we need child component (like modal or dialogues) to break container visually, and portals can be very handy to do that because it renders children outside of DOM hierarchy. overflow z-index ⏩ The syntax✍ for to create a portal👇 ( 
element, ) ReactDOM.createPortal DOM node where you want to render this element So let's implement portals in our Modal component. To use the portal we have to create one more element in the dom. Generally, our whole App renders in the div with the id root. Open file. index.html and above the root div create one more div with the id . modal Just like this 👇 <div id= "modal" /> < div id = "root" /> Open file and edit it just like this, Modal.js );
}; import ReactDOM from "react-dom" ; import "./modal.scss" ; import Close from "./times-solid.svg" ; const Modal = ( { show, close } ) => { return ReactDOM.createPortal( <> { show ? < div className = "modalContainer" onClick = {() => close()} > < div className = "modal" onClick = {(e) => e.stopPropagation()}> < header className = "modal_header" > < h2 className = "modal_header-title" > Modal Title </ h2 > < button className = "close" onClick = {() => close()}> < img src = {Close} alt = "close" /> </ button > </ header > < main className = "modal_content" > This is modal content </ main > < footer className = "modal_footer" > < button className = "modal-close" onClick = {() => close()}> Cancel </ button > < button className = "submit" > Submit </ button > </ footer > </ div > </ div > : null }, document.getElementById("modal") </> export default Modal; Import ReactDom. Line 1: After return creates a portal using , As it's the first argument we have passed the whole modal component and for the second argument we have passed the dom node where we want to render it. Line 6: ReactDom.createPortal We want to render our component in the div with id modal. Line 34: Let's make Modal content Dynamic: open file and pass title as a prop and content inside the component as shown below, App.js This is Modal content
</Modal> <Modal show={modal} title= "My Modal" close={Toggle}> Here we have passed the title as props and modal content as the children. Open and write, Modal.js (Final Modal.js code) Deconstruct and from the props. Line 5: title children Insert title in the curly braces. Line 17: Render children using the curly braces. Line 22: Now if you want to add a little animation in the modal you can watch the video or you can go to the git repository and read📚 code. Thanks For Reading😄 Feel free to visit my youtube channel: @CodeBucks

ReactJS Custom Modal Component using Hooks and Portals

Componente modal personalizado de ReactJS usando ganchos y portales

Nowadays, Modals are one of the most used components in React Application, having an easy way to create React Modals will help you sheep Modals related features fast in your upcoming React Applications. In this tutorial, we will build A simple React Modal using only 22 lines of code. The gif below will help you understand what we are trying to build Let's started Create React Project First, create a simple react project using create-react-app CLI. $ npx Create-react-app SimpleModal React ; ReactDOM ; ; { ( <h1>Create React Modal in X line of code </h1> <button>Click Me</button> );
} rootElement = .getElementById( );
ReactDOM.render( import from "react" import from "react-dom" import "./styles.css" ( ) function App return < = > div className "App" </ > div const document "root" , rootElement); < /> App In this tutorial, we will use the package  which is a simple and Powerful react component with a lot of benefits : react-popup Modal, Tooltip, Menu: All in one 🏋️ Full style customization 👌 Function as children pattern to take control over your popup anywhere in your code. 💪 IE Support. 🚀 TypeScript Support 👌 All these clocks in at around 3 kB zipped. ⚡️ This package is available in npm repository as reactjs-popup. It will work correctly with all popular bundlers. $ yarn add reactjs-popup Create React Modal Import Component from reactjs-popup and start using it like the following. Popup Add property as a simple React Button element and set property to true. trigger modal React ; ReactDOM ; Popup ; ; { ( <h1>Create React Modal with 22 line of code </h1> <Popup modal trigger={<button>Click Me</button>}>
        Modal Content
      </Popup> );
} rootElement = .getElementById( );
ReactDOM.render( import from "react" import from "react-dom" import from "reactjs-popup" import "./styles.css" ( ) function App return < = > div className "App" </ > div const document "root" , rootElement); < /> App Customizing and Styling  React Modal we need to create a file for Modal Content component and add some style Content.js React ; ({ close }) => ( <a className="close" onClick={close}>
      &times;
    </a> <div className="header"> Modal Title </div> <div className="content">
      {" "}
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, a nostrum.
      Dolorem, repellat quidem ut, minima sint vel eveniet quibusdam voluptates
      delectus doloremque, explicabo tempore dicta adipisci fugit amet
      dignissimos?
      <br />
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit
      commodi beatae optio voluptatum sed eius cumque, delectus saepe
      repudiandae explicabo nemo nam libero ad, doloribus, voluptas rem alias.
      Vitae?
    </div> ); //content.js import from "react" export default < = > div className "modal" </ > div { : ;
} > { : ; : solid gray; : ; : center; : ;
} > { : ; : ;
} > { : auto;
} > { : ; : ; : center;
} > { : pointer; : absolute; : block; : ; : ; : - ; : - ; : ; : ; : ; : solid ;
} /* index.css */ .modal font-size 12px .modal .header width 100% border-bottom 1px font-size 18px text-align padding 5px .modal .content width 100% padding 10px 5px .modal .actions margin .modal .actions width 100% padding 10px 5px text-align .modal .close cursor position display padding 2px 5px line-height 20px right 10px top 10px font-size 24px background #ffffff border-radius 18px border 1px #cfcece Now it's time for some magic Because provides a child as function pattern, you have full control on Popup state reactjs-popup we will update our example to use a function as a child instead of a  react element to implement `close` button. React ; ReactDOM ; Popup ; Content ; ; { ( <h1>Create React Modal with 22 line of code </h1> <Popup modal trigger={<button>Click Me</button>}>
        {close => <Content close={close} />}
      </Popup>
    </div> <App /> //index.js import from "react" import from "react-dom" import from "reactjs-popup" import from "./Content.js" import "./styles.css" ( ) function App return < = > div className "App" );
}

const rootElement = document.getElementById("root");
ReactDOM.render( , rootElement); Final Result reactjs-popup : https://react-popup.elazizi.com/ Repo : https://github.com/yjose/create-react-modal-with-22-line-of-code Codesandbox : https://codesandbox.io/s/create-react-modal-with-22-lines-of-code-v2u7t Make sure to visit react-popup home page Thanks for reading! If you think other people should read this post and use this project, tweet, and share the post. Remember to follow me, so you can get notified about my future posts.

Create React Modal using reactjs-popup

Vue.js is a powerful JavaScript library used for building responsive and interactive user interfaces. Vue is used for its flexibility and simplicity. One of the special features of Vue.js that sets it apart is its plugin system which helps developers extend their Vue application functionality without altering its original behavior. In this article, we will explore what Vue plugins are, their benefits, how to integrate them into our Vue application, and examine some examples to gain a practical understanding of plugin usage. Vue.js plugins serve as modular components that extend the functionality of the Vue application without altering its original behavior. They also enable developers to add special features in the form of custom plugins and also add third-party plugins to the Vue app. Think of plugins as specialized tools you can add to a toolbox with each designed to extend and enhance the functionalities of your Vue application in a modular way. The way you can include a specific tool for a particular task in your toolbox is the same way Vue plugins add a specific functionality that is tailored to your application's needs. Imagine you have an application with multiple components, and you need to manage shared data across these components. Though Vue provides built-in features to handle data sharing, handling complex scenarios like this efficiently might require additional tools. Thereby the need for a plugin that can handle such a task. Vue plugins can be used to solve a wide range of problems from managing shared data across components to handling complex user interactions. They can also be used to improve the functionality of Vue applications and to optimize the rendering process. ​Vue.js plugins help developers solve a wide range of problems faced when building user interfaces. Below, are some examples of third-party plugins. Vue-select plugin is used for list filtering. Vuex plugin for state management. Vue-global for making global libraries available in the Vue application. Vue-directive for adding global directive in the Vue application. Syntax Now that we have understood the purpose and significance of Vue plugins, let us delve into the syntax for the incorporation of Vue plugins into our applications. Understanding this is very crucial in getting the benefits of plugins in our app. To use Vue.js third-party plugins, you first need to install it via the package manager npm or yarn. Once installed, you can make use of it in your app by importing it. The example below shows how to use a third-party plugin. npm install vue-plugin-name

// Import the plugin

import MyPlugin from 'my-plugin';

// Create a Vue instance

const app = createApp(App);

// Use the plugin

app.use(MyPlugin);

// Mount the app

app.mount('#app'); To use custom plugins, when creating custom plugins, you need to define a function that takes the Vue application instance as an argument. This function is where you add the functionality you want your plugin to provide. Below, is a syntax for creating a custom plugin. // Define the plugin
const MyPlugin = {
 install(app, options) {
 // Add functionality here

 app.config.globalProperties.$myMethod = function() {
   // Do something
 };
 },
};

// Create a Vue instance
const app = createApp(App);

// Use the plugin
app.use(MyPlugin);

// Mount the app
app.mount('#app'); Plugin Examples Let's explore some examples of the usage of plugins in Vue. In the example, we are going to look at the different forms of plugins. 1. Third-Party Plugins In this example, we will use the Vue router plugin used for handling page routing. / Step 1: Install Vue Router
npm install vue-router@4

// Step 2: Import and Use Vue Router
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import About from './components/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

const app = createApp(App)

app.use(router)

app.mount('#app') 2. Custom Plugins They are personalized components you create in your app depending on your needs. Think of them as solutions you craft out yourself for a specific task. There are two examples to illustrate how custom plugins are made and applied to our app. The first example is customizing a greeting message while the other one is customizing a modal. Output: Greeting Message Example This example defines a Vue.js plugin that utilizes the options parameter and also adds a global method $displayGreeting to the app. ​The use of app.config.globalProperties object here is to add global properties or methods to the Vue instance. And this enables the properties or methods to be accessible by any component in the application. // Define a Vue.js plugin that adds a global method for displaying a greeting message

export default {

 install: (app, options) => {

   // Add a global method $displayGreeting to the Vue.js application

   // This method constructs a greeting message using the provided name and some predefined greeting and ending strings

   app.config.globalProperties.$displayGreeting = function(name) {

     this.greeting = options.greeting + name + options.ending;

   };

 },

}; // Create a Vue.js application and use the plugin
import { createApp } from 'vue';
import App from './App.vue';
import DisplayPlugin from './displayPlugin';

const app = createApp(App);

// Use the plugin with options for the greeting and ending strings
app.use(DisplayPlugin, { greeting: 'Welcome to, ', geekstogeeks: '!' });

app.mount('#app'); // Define a Vue.js component that uses the global method to display a greeting message
<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'

const name = ref('') // Define a data property for the name
const inputName = ref('') // Define a data property for the input name

onMounted(() => {
 // Call the global method when the component is mounted
 // Pass the input name as an argument to the method
 const instance = getCurrentInstance()
 instance?.appContext.config.globalProperties.$displayName(instance, inputName.value)
})
</script>

<template>
 <div>
   <input type="text" v-model="inputName" placeholder="Enter your name">
   <h1>{{ name }}!</h1>
 </div>
</template> Output: A Simple Modal Example In this example, we will explore how to create a custom plugin by creating a simple modal. Step 1 Create a new file myModal.vue to hold the modal functionalities //Create the modal component. 
<template>
  <transition name="modal">
    <div class="modal-mask" @click="$emit('close')">
      <div class="modal-wrapper" @click.stop>
        <div class="modal-container">
          <slot></slot>
          <button class="modal-default-button" @click="$emit('close')">Close</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<style scoped>
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-container {
  background: white;
  padding: 20px;
  border-radius: 10px;
}
</style> Step 2 Create the modal plugin //Create a file modalPlugin.js, to hold your plugin code. 

import MyModal from './MyModal.vue';

export default {
  install: (app) => {
    app.component('my-modal', MyModal);
  },
}; Step 3 Use the Plugin in your Application Javascript//In your main.js file, import the plugin and then apply it to your Vue app. 
import { createApp } from 'vue';
import App from './App.vue';
import modalPlugin from './modalPlugin';

const app = createApp(App);

app.use(modalPlugin);

app.mount('#app'); Step 4 Use the modal in your component Javascript//You can now use the my-modal component in any Vue component. 
<template>
  <div>
    <button @click="showModal = true">Show Modal</button>
    <my-modal v-if="showModal" @close="showModal = false">
      <h1>Successful!</h1>
      <p>You clicked the button.</p>
    </my-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
    };
  },
};
</script> Conclusion We have looked at what Vue plugins are and their importance in the development process of applications. How their attributes can be beneficial for developers in the building of dynamic and interactive interfaces. Also, we delve into how to create our own required plugins for our apps or choose a suitable one from third-party plugins. Understanding how to integrate plugins into our app not only makes our work easier as developers but also brings about good practice. Further reading. More examples

Vue.js Plugins: What Are They, Their Benefits, and How to Integrate Them

It is a trap! We got your focus and will not let him out! These words you must hear every time you have opened a modal dialog. But you wont… Modal dialog , or are an UI trick to let you do something “single” — upload a file, provide an URL, “Are you sure”, “Click a button to win $$$” and so on. Modal dialog Lightbox Focused task Usually, you shall not, and cannot not, do anything else — you are able to perform any actions only inside hightlited modal. This is true to native modals, but not usually true for DOM implementations. “Design” But, if you want to stylish your page, and your dialogs — you have to implement “modals” using the DOM API, HTML and CSS. And to do it? Cover the entire page with a shadow. Place a dialog(window, lightbox or task) above it. Simple and Usable. And here our story starts… This is screen shot from — a quite usable modal library, which will cover the one unusual thing. react-aria-modal demo Normally you cant click at elements “outside” — they are covered by shadow. “Tab-out” from a modal. But you can In this case — modal is not very “modal”. React-aria-modal is it by using . fixing react-focus-trap Best practices MDN has a perfect article about building accesseble dialog boxes. It explain WHAT YOU have to do, but not explaining — HOW. _The dialog role is used to mark up a DHTML based application dialog or window that separates content or UI from the…_developer.mozilla.org Using the dialog role In short: you have to manage keyboard focus. And next they describe how. — is a perfect solution. It passes all the tests. jQuery UI dialog But where to get a good component in React/Vue/Angular/non-jQuery world? ? No focus management. http://www.material-ui.com/#/components/dialog — Nope. https://semantic-ui.com/modules/modal.html — Nope https://react.semantic-ui.com/modules/modal — Nope https://atlaskit.atlassian.com/components/modal-dialog — Nope. https://rambler-digital-solutions.github.io/rambler-ui/#/components/Popup?_k=vs348d — 🤷‍♂ https://ant.design/components/modal/ — 🤷‍♂ http://blueprintjs.com/docs/#core/components/dialog ….this list is infinite…. is quite strange — it handles change focus by Tab, but allows to leave a Modal by Shift+Tab. Ant works well, but will return focus only to autofocus element, or first element with tabIndex. Otherwise — will not. BluePrint.js They just are using improper way to manage a focus. The is NO ideal solution. Hooray! PS: Except jQuery. It just works. Focus trap Just to recall — I’v mention the library. It can show a Modal. ! And it uses react-focus-trap to manage focus. react-aria-modal Correctly react-focus-trap is a simple React component, which will not let your leave a boundaries of . Focus Modal But then I checked the sources — I’v found that it is . not a trap That’s A Trap. I found . And emulation is the worse thing you can do. only emulation How react-focus-trap works. It will attach global keyboard event listeners. On “Tab” it will collect all* tabbable elements and manually move focus from one to another. By doing this it will control focus, and that is a goal. But all* is not all. does not include area elements, for example. And you should not emulate the browser bahevior. Tabbles How to do it in a better way? How to lock a Focus There is 3.5 good ways to do it. The best way Move all elements from body into div with tabIndex=-1. By tabindex is not working for chilren, so you might set negative tabIndex to all the elements with a script, or just set , a new html property to disable inteactions with a whole DOM-tree… which is not supported anywhere, yet (but you can use polifills). inert By the time you can set pointer-events: none, and disable user-select on top node. Just to be sure. Move modal out of that div and gave a positive tabIndex. And least but not least — you should set aria-hidden to the Div, to not let the screen reader to read anything outside the modal of the modal to prevent accidentally escaping. And on “everything” to achieve it. Screen readers should also be trapped inside aria-hidden is the only way This is native browser behavior, and anything except Modal will be untabbale in a real. PS: Not everything — you still can tab-out from a page. May be you want it? _On my current project we have some modal panes that open up on certain actions. I am trying to get it so that when that…_stackoverflow.com Keep tabbing within modal pane only The smart way Just attach a handle to a last(and first) element, and handle Tab only on the “edges” $(':tabbale:last').on('keydown', function (e) {     if ($("this:focus") && (e.which == 9)) {        e.preventDefault();        $(':input:first').focus();    }}); It will work, it will preserve browser behavior “between” edges… but will . ignore tabIndex and element modifications This is better that “whole” emulation, but you should ignore this way. The right way The right way is not to emulate Tab, but to just not let him out. Not let the focus out. focus-trap-react is emulation, but (a different one!) is not. react-focus-trap According to react-focus-trap the sources attaches a global listener to “focus” event. Then something got focus it will check WHO. If focus is outside modal — it will be returned to the element. first This solution is very close to the ideal, but it will always return a focus to the first element, and have no idea about tabIndex. But anyway — this is the right way. Let the focus do anything inside modal, just lock it. The Focus Lock That means — if no good solution exists — it is time to create a new solution. Lock and loaded… First I planned to write an article about KISS principle, and explain the meaning of it by comparing react-focus-trap with . But now I am unsure — it is will KISS-friendly or not.. react-focus-lock But, to say the truth — this is not Focus Trap. And even not Focus-Lock. This is Focus Jail, or Focus Wall. Focus is free inside, it just cant pass the Border Security (and Jon Snow) React-focus-lock React-focus-lock, the solution I’v build and I am going to talk about uses the last and not the best way to detect the focus change — onBlur/FocusOut event. It is not as handy as FocusIn event, as long node will first lose focus, and then new component will get it — so you have to wait before check. But.. FocusOut is internal event, as long FocusIn is external. If you can listen only on your own node — you should no it. TabIndex and the Prisoner of Azkaban But the trickiest thing is to handle tabIndex _without_ emulation tabIndex. I did not found any existing solution except focus-trap-react, which is not a solution, and yet again have to build my own. Algorithm is simple: 1. Remember the last focused item.2. On focusOut: find common parent of modal and document.activeElement get all tabbable element inside common parent. get all elements inside the Modal3. Find the difference between last focused item and current.4. If diff(current-active)>1 -> return focus to the last node.5. If current < first node -> go to the last-by-order6. If current > last node -> go to the first-by-order7. If first < current < last -> move cursor to the nearest-in-dirrection tabbable The most tricky one is #7. If you use tabIndex(dont do it!) you can have: Focus outside Modal Focus inside Modal Focus outside Modal Yet again inside.. Neat :) Most of realizations does ignore tabIndex at all :) inert Conclusion Anyway, I’v spent few hours on weekends and create a quite usable components, which can help you to lock the Pandora Box you might have. Usage is simple: <FocusLock disabled={disabled}> Something inside </FocusLock> And you can use it for React(as ), or for Vue(as ). And get a good experience in both cases. react-focus-lock vue-focus-lock Here is the demo: (lock is , or it will steal ANY focus, forcing you to close browser tab :P) disabled by default Just wrap your modal with simple component, and you will become more WAI-ARIA compatible. PS: And you will also get auto-focus out of the box :) After a year of development *-Focus-lock could lock anything anywhere, supports “focus groups”, autodetects React 16 Portals, and provides some extra helper component for your service. It is still the “best” focus-locking library, based on the “right” principles. PS! You still have to hide “everything else” with aria-hidden. Lock can’t do it for you — it is not it’s job. You also have to wrap focus trap with element with , and yet again you have to do it by yourself. role=’dialog’ You have to make everything except you modal in-accessible. Un-reachable. Inert. How to do it? block everything except the Modal, using a “shadow”, “lightbox” or experimental HTML attribute. Or (or Dom-Locky) to just disable all iterations with the rest of the page. inert React-Locky wrap everything except modal with to “hide it”. aria-hidden A good article you should read about building accessible dialogs from Google IO: _As the sites we build increasingly become more app-like it's important that the platform keep up and give component…_robdodson.me Building better accessibility primitives So this is React-Aria, the modals that “just works”. _A demo of react-aria-modal_davidtheclark.github.io react-aria-modal demo Links You just read an artile about React-focus-lock, a jail for your focus. This is Component with Single Responsibility, to help you “fix” your modals _react-focus-lock - It is a trap! A lock for a Focus._github.com theKashey/react-focus-lock And this one is for Vue.js (10 lines of code, sweet!) _vue-focus-lock - It is a trap! A lock for a Focus._github.com theKashey/vue-focus-lock PS: And dont forget about pure vanilla . Which will use focusIn event :) dom-focus-lock And don’t forget about another part of good modals — event isolation, and preventing body from scrolling, while modal is being opened. _So, JFYI, you just scrolled a page down to this place. You were able to do it. The problem is – sometimes you should…_hackernoon.com How to train a your Scroll _First of all — WHY one have to fight the scroll?_medium.com How to fight the <body> scroll

It’s a (focus) Trap!

Authors:
(1) Qian Yang, Zhejiang University, Equal contribution. This work was conducted during Qian Yang’s internship at Alibaba Group;
(2) Jin Xu, Alibaba Group, Equal contribution;
(3) Wenrui Liu, Zhejiang University;
(4) Yunfei Chu, Alibaba Group;
(5) Xiaohuan Zhou, Alibaba Group;
(6) Yichong Leng, Alibaba Group;
(7) Yuanjun Lv, Alibaba Group;
(8) Zhou Zhao, Alibaba Group and Corresponding to Zhou Zhao (zhaozhou@zju.edu.cn);
(9) Yichong Leng, Zhejiang University
(10) Chang Zhou, Alibaba Group and Corresponding to Chang Zhou (ericzhou.zc@alibaba-inc.com);
(11) Jingren Zhou, Alibaba Group. Table of Links Abstract and 1. Introduction 2 Related Work 3 AIR-Bench and 3.1 Overview 3.2 Foundation Benchmark 3.3 Chat Benchmark 3.4 Evaluation Strategy 4 Experiments 4.1 Models 4.2 Main Results 4.3 Human Evaluation and 4.4 Ablation Study of Positional Bias 5 Conclusion and References A Detailed Results of Foundation Benchmark 4.1 Models We evaluate the performance of various LALMs with instruction-following capabilities. These models are either open-sourced or accessible through public APIs, such as SpeechGPT (Zhang et al., 2023), BLSP (Wang et al., 2023a), SALMONN (Tang et al., 2023a), Qwen-AudioChat (Chu et al., 2023), and Qwen-Audio Turbo [3]. Additionally, we consider large multi-modality models with audio understanding abilities like PandaGPT (Su et al., 2023), Macaw-LLM (Lyu et al., 2023), and NExT-GPT (Wu et al., 2023b). Besides, we also incorporate a concatenative approach comprising Whisper-large-v2 (Radford et al., 2023) and GPT-4 Turbo (OpenAI, 2023) for tasks related to speech as a baseline. We evaluate the performance of all these models on both funda mental and chat benchmarks, utilizing their latest publicly available checkpoints. In cases of multiple checkpoints, we select the model with the largest parameter size. For all models, we directly follow their default decoding strategies for evaluation. This paper is available on arxiv under CC BY 4.0 DEED license. [3] https://help.aliyun.com/zh/dashscope/developerreference/qwen-audio-api Authors: (1) Qian Yang, Zhejiang University, Equal contribution. This work was conducted during Qian Yang’s internship at Alibaba Group; (2) Jin Xu, Alibaba Group, Equal contribution; (3) Wenrui Liu, Zhejiang University; (4) Yunfei Chu, Alibaba Group; (5) Xiaohuan Zhou, Alibaba Group; (6) Yichong Leng, Alibaba Group; (7) Yuanjun Lv, Alibaba Group; (8) Zhou Zhao, Alibaba Group and Corresponding to Zhou Zhao (zhaozhou@zju.edu.cn); (9) Yichong Leng, Zhejiang University (10) Chang Zhou, Alibaba Group and Corresponding to Chang Zhou (ericzhou.zc@alibaba-inc.com); (11) Jingren Zhou, Alibaba Group. Authors: Authors: (1) Qian Yang, Zhejiang University, Equal contribution. This work was conducted during Qian Yang’s internship at Alibaba Group; (2) Jin Xu, Alibaba Group, Equal contribution; (3) Wenrui Liu, Zhejiang University; (4) Yunfei Chu, Alibaba Group; (5) Xiaohuan Zhou, Alibaba Group; (6) Yichong Leng, Alibaba Group; (7) Yuanjun Lv, Alibaba Group; (8) Zhou Zhao, Alibaba Group and Corresponding to Zhou Zhao (zhaozhou@zju.edu.cn); (9) Yichong Leng, Zhejiang University (10) Chang Zhou, Alibaba Group and Corresponding to Chang Zhou (ericzhou.zc@alibaba-inc.com); (11) Jingren Zhou, Alibaba Group. Table of Links Abstract and 1. Introduction Abstract and 1. Introduction 2 Related Work 2 Related Work 3 AIR-Bench and 3.1 Overview 3 AIR-Bench and 3.1 Overview 3.2 Foundation Benchmark 3.2 Foundation Benchmark 3.3 Chat Benchmark 3.3 Chat Benchmark 3.4 Evaluation Strategy 3.4 Evaluation Strategy 4 Experiments 4.1 Models 4.1 Models 4.2 Main Results 4.2 Main Results 4.3 Human Evaluation and 4.4 Ablation Study of Positional Bias 4.3 Human Evaluation and 4.4 Ablation Study of Positional Bias 5 Conclusion and References 5 Conclusion and References A Detailed Results of Foundation Benchmark A Detailed Results of Foundation Benchmark 4.1 Models We evaluate the performance of various LALMs with instruction-following capabilities. These models are either open-sourced or accessible through public APIs, such as SpeechGPT (Zhang et al., 2023), BLSP (Wang et al., 2023a), SALMONN (Tang et al., 2023a), Qwen-AudioChat (Chu et al., 2023), and Qwen-Audio Turbo [3]. Additionally, we consider large multi-modality models with audio understanding abilities like PandaGPT (Su et al., 2023), Macaw-LLM (Lyu et al., 2023), and NExT-GPT (Wu et al., 2023b). Besides, we also incorporate a concatenative approach comprising Whisper-large-v2 (Radford et al., 2023) and GPT-4 Turbo (OpenAI, 2023) for tasks related to speech as a baseline. We evaluate the performance of all these models on both funda mental and chat benchmarks, utilizing their latest publicly available checkpoints. In cases of multiple checkpoints, we select the model with the largest parameter size. For all models, we directly follow their default decoding strategies for evaluation. This paper is available on arxiv under CC BY 4.0 DEED license. This paper is available on arxiv under CC BY 4.0 DEED license. available on arxiv [3] https://help.aliyun.com/zh/dashscope/developerreference/qwen-audio-api

Performance Assessment of LALMs and Multi-Modality Models

Introduction The introduction of the new HTML <dialog> tag is a big change in how we make websites. It changes how we create and handle pop-up boxes in web applications. This article will look into what's good about the <dialog> tag, what it can do, and how to use it, showing why it's important for developers. The Traditional Method: Longer and Difficult ❌ Creating a popup window before used a lot of CSS and JavaScript. Here's an example of how people did it back then: <div id="myDialog" class="dialog">
    <p>Dialog content here...</p>
    <button id="closeBtn">Close</button>
</div>


<style>
.dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none; /* Hide the dialog by default */
    /* Additional styling for appearance */
    padding: 20px;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.dialog.open {
    display: block; /* Show the dialog when 'open' class is added */
}
</style>


<script>
document.addEventListener('DOMContentLoaded', () => {
    const dialog = document.getElementById('myDialog');
    const closeBtn = document.getElementById('closeBtn');
    closeBtn.addEventListener('click', () => {
        dialog.classList.remove('open');
    });
    setTimeout(() => {
        dialog.classList.add('open');
    }, 1000);
});
</script> This code snippet shows how complicated it was just to show a simple popup. But still, the backdrop color is missing we need extra effort to show this. The New Way: Simplified With <dialog> ✅ The <dialog> tag is a new part of HTML that makes it easier to create and handle pop-up windows. Here's a basic way to use the <dialog> tag: <dialog id="myDialog" style="border: none; border-radius: 3px;">
    <p>This is a sample HTML dialog</p>
    <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>


<style>
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}
</style> Features and Methods 1. Showing a Dialog To display a dialog, you can use the show() or showModal() methods: document.getElementById('myDialog').show();
// or
document.getElementById('myDialog').showModal(); 2. Auto-Open Dialog The open attribute keeps the dialog open from the moment the page loads: <dialog id="myDialog" open>
   <p>Auto-open dialog content here...</p>
</dialog> Note
When you use the open attribute to automatically display a <dialog> element or use javascript show() method to show the dialog, the ::backdrop pseudo-element may not function as expected. Therefore, you need to manually configure the modal backdrop background. 3. Auto Close Button Using the built-in close functionality, no JavaScript is required to close the dialog: <dialog id="myDialog">
    <p>Dialog content here...</p>
    <button id="closeBtn" onclick="this.closest('dialog').close()">Close</button>
</dialog> Styling the <dialog> Tag Backdrop Styling The <dialog> element includes a special ::backdrop pseudo-element for styling: dialog::backdrop {
   background: rgba(0, 0, 0, 0.8);
} Main Element Styling Styling the main element is simple and can be adjusted to meet your design requirements. dialog {
   padding: 20px;
   border-radius: 10px;
   background-color: white;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} Accessibility Improvements The <dialog> tag automatically follows the official guidelines for being easy to use and accessible. For example, you can close the dialog box by pressing the Escape key. This means there's no need for extra software that might not follow these important rules. Conclusion The new HTML <dialog> tag greatly helps web developers by making it easier to create pop-ups and dialog boxes. It provides ready-to-use features, is easy to handle, and makes websites more accessible and responsive. This makes it a very important tool for modern website building. If you want to learn more about HTML5 tags, check out my blog post: Mastering HTML5: Essential Tips and Tricks for Web Developers See the Pen  https://codepen.io/Thesyntax-Diaries/pen/eYwBwWN Check out the basic functionality in the CodePen demo above to see how it works. If you enjoyed this article, please share it with others. Your support means a lot! Happy Coding 😊 Introduction The introduction of the new HTML <dialog> tag is a big change in how we make websites. It changes how we create and handle pop-up boxes in web applications. <dialog> This article will look into what's good about the <dialog> tag, what it can do, and how to use it, showing why it's important for developers. <dialog> The Traditional Method: Longer and Difficult ❌ Creating a popup window before used a lot of CSS and JavaScript. Here's an example of how people did it back then: <div id="myDialog" class="dialog">
    <p>Dialog content here...</p>
    <button id="closeBtn">Close</button>
</div>


<style>
.dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none; /* Hide the dialog by default */
    /* Additional styling for appearance */
    padding: 20px;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.dialog.open {
    display: block; /* Show the dialog when 'open' class is added */
}
</style>


<script>
document.addEventListener('DOMContentLoaded', () => {
    const dialog = document.getElementById('myDialog');
    const closeBtn = document.getElementById('closeBtn');
    closeBtn.addEventListener('click', () => {
        dialog.classList.remove('open');
    });
    setTimeout(() => {
        dialog.classList.add('open');
    }, 1000);
});
</script> <div id="myDialog" class="dialog">
    <p>Dialog content here...</p>
    <button id="closeBtn">Close</button>
</div>


<style>
.dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none; /* Hide the dialog by default */
    /* Additional styling for appearance */
    padding: 20px;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.dialog.open {
    display: block; /* Show the dialog when 'open' class is added */
}
</style>


<script>
document.addEventListener('DOMContentLoaded', () => {
    const dialog = document.getElementById('myDialog');
    const closeBtn = document.getElementById('closeBtn');
    closeBtn.addEventListener('click', () => {
        dialog.classList.remove('open');
    });
    setTimeout(() => {
        dialog.classList.add('open');
    }, 1000);
});
</script> This code snippet shows how complicated it was just to show a simple popup. But still, the backdrop color is missing we need extra effort to show this. The New Way: Simplified With <dialog> ✅ <dialog> The <dialog> tag is a new part of HTML that makes it easier to create and handle pop-up windows. Here's a basic way to use the <dialog> tag: <dialog> <dialog> <dialog id="myDialog" style="border: none; border-radius: 3px;">
    <p>This is a sample HTML dialog</p>
    <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>


<style>
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}
</style> <dialog id="myDialog" style="border: none; border-radius: 3px;">
    <p>This is a sample HTML dialog</p>
    <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>


<style>
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}
</style> Features and Methods 1. Showing a Dialog To display a dialog, you can use the show() or showModal() methods: show() showModal() document.getElementById('myDialog').show();
// or
document.getElementById('myDialog').showModal(); document.getElementById('myDialog').show();
// or
document.getElementById('myDialog').showModal(); 2. Auto-Open Dialog The open attribute keeps the dialog open from the moment the page loads: open <dialog id="myDialog" open>
   <p>Auto-open dialog content here...</p>
</dialog> <dialog id="myDialog" open>
   <p>Auto-open dialog content here...</p>
</dialog> Note When you use the open attribute to automatically display a <dialog> element or use javascript show() method to show the dialog, the ::backdrop pseudo-element may not function as expected. Therefore, you need to manually configure the modal backdrop background. Note When you use the open attribute to automatically display a <dialog> element or use javascript show() method to show the dialog, the ::backdrop pseudo-element may not function as expected. Therefore, you need to manually configure the modal backdrop background. <dialog> ::backdrop 3. Auto Close Button Using the built-in close functionality, no JavaScript is required to close the dialog: <dialog id="myDialog">
    <p>Dialog content here...</p>
    <button id="closeBtn" onclick="this.closest('dialog').close()">Close</button>
</dialog> <dialog id="myDialog">
    <p>Dialog content here...</p>
    <button id="closeBtn" onclick="this.closest('dialog').close()">Close</button>
</dialog> Styling the <dialog> Tag <dialog> Backdrop Styling The <dialog> element includes a special ::backdrop pseudo-element for styling: <dialog> ::backdrop dialog::backdrop {
   background: rgba(0, 0, 0, 0.8);
} dialog::backdrop {
   background: rgba(0, 0, 0, 0.8);
} Main Element Styling Styling the main element is simple and can be adjusted to meet your design requirements. dialog {
   padding: 20px;
   border-radius: 10px;
   background-color: white;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} dialog {
   padding: 20px;
   border-radius: 10px;
   background-color: white;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} Accessibility Improvements The <dialog> tag automatically follows the official guidelines for being easy to use and accessible. <dialog> For example, you can close the dialog box by pressing the Escape key. This means there's no need for extra software that might not follow these important rules. Conclusion The new HTML <dialog> tag greatly helps web developers by making it easier to create pop-ups and dialog boxes. <dialog> It provides ready-to-use features, is easy to handle, and makes websites more accessible and responsive. This makes it a very important tool for modern website building. If you want to learn more about HTML5 tags, check out my blog post: Mastering HTML5: Essential Tips and Tricks for Web Developers Mastering HTML5: Essential Tips and Tricks for Web Developers See the Pen https://codepen.io/Thesyntax-Diaries/pen/eYwBwWN https://codepen.io/Thesyntax-Diaries/pen/eYwBwWN Check out the basic functionality in the CodePen demo above to see how it works. If you enjoyed this article, please share it with others. Your support means a lot! Happy Coding 😊

Modal

modal.com

-- employees

Since n.d.

COMPANY RANKING

MODAL

EVERGREEN INDEX #7922

Modal WIKI

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

Modal

modal.com

-- employees

Since n.d.

COMPANY RANKING

MODAL

EVERGREEN INDEX #7922

RELATED COMPANIESRANK

STORIES ABOUT MODAL

Modal WIKI

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