The JAMstack has proven itself to be one of the top ways of producing content-driven sites, but it’s also a great place to house applications, as well. If you’ve been using the JAMstack for your performant websites, the demos in this article will help you extend those philosophies to applications as well.

When using the JAMstack to build applications, you need a data service that fits into the most important aspects of the JAMstack philosophy:

• Global distribution
• Zero operational needs
• A developer-friendly API.

In the JAMstack ecosystem there are plenty of software-as-a-service companies that provide ways of getting and storing specific types of data. Whether you want to send emails, SMS or make phone calls (Twilio) or accept form submissions efficiently (Formspree, Formingo, Formstack, etc.), it seems there’s an API for almost everything.

These are great services that can do a lot of the low-level work of many applications, but once your data is more complex than a spreadsheet or needs to be updated and store in real-time, it might be time to look into a database.

The service API can still be in use, but a central database managing the state and operations of your app becomes much more important. Even if you need a database, you still want it to follow the core JAMstack philosophies we outlined above. That means, we don’t want to host our own database server. We need a Database-as-a-Service solution. Our database needs to be optimized for the JAMstack:

• Optimized for API calls from a browser or build process.
• Flexible to model your data in the specific ways your app needs.
• Global distribution of our data like a CDN houses our sites.
• Hands-free scaling with no need of a database administrator or developer intervention.

Whatever service you look into needs to follow these tenets of serverless data. In our demos, we’ll explore FaunaDB, a global serverless database, featuring native GraphQL to assure that we keep our apps in step with the philosophies of the JAMstack.

Let’s dive into the code!

A JAMstack Guestbook App With Gatsby And Fauna

I’m a big fan of reimagining the internet tools and concepts of the 1990s and early 2000s. We can take these concepts and make them feel fresh with the new set of tools and interactions.

In this demo, we’ll create an application that was all the rage in that time period: the guestbook. A guestbook is nothing but app-generated content and interaction. A user can come to the site, see all the signatures of past “guests” and then leave their own.

To start, we’ll statically render our site and build our data from Fauna during our build step. This will provide the fast performance we expect from a JAMstack site. To do this, we’ll use GatsbyJS.

Initial setup

Our first step will be to install Gatsby globally on our computer. If you’ve never spent much time in the command line, Gatsby’s “part 0” tutorial will help you get up and running. If you already have Node and NPM installed, you’ll install the Gatsby CLI globally and create a new site with it using the following commands:

npm install -g gatsby-cli

gatsby new <directory-to-install-into> <starter>

Gatsby comes with a large repository of starters that can help bootstrap your project. For this demo, I chose a simple starter that came equipped with the Bulma CSS framework.

gatsby new guestbook-app https://github.com/amandeepmittal/gatsby-bulma-quickstart

This gives us a good starting point and structure. It also has the added benefit of coming with styles that are ready to go.

Let’s do a little cleanup for things we don’t need. We’ll start by simplifying our components.header.js

import React from 'react';

import './style.scss';

const Header = ({ siteTitle }) => (
  <section className="hero gradientBg ">
    <div className="hero-body">
      <div className="container container--small center">
        <div className="content">
          <h1 className="is-uppercase is-size-1 has-text-white">
            Sign our Virtual Guestbook
          </h1>
          <p className="subtitle has-text-white is-size-3">
            If you like all the things that we do, be sure to sign our virtual guestbook
          </p>
        </div>
      </div>
    </div>
  </section>
);

export default Header;

This will get rid of much of the branded content. Feel free to customize this section, but we won’t write any of our code here.

Next we’ll clean out the components/midsection.js file. This will be where our app’s code will render.

import React, { useState } from 'react';
import Signatures from './signatures';
import SignForm from './sign-form';


const Midsection = () => {

    const [sigData, setSigData] = useState(data.allSignatures.nodes);
    return (
        <section className="section">
            <div className="container container--small">
                <section className="section is-small">
                    <h2 className="title is-4">Sign here</h2>
                    <SignForm></SignForm>
                </section>

                <section className="section">
                    <h2 className="title is-5">View Signatures</h2>
                    <Signatures></Signatures>
                </section>
            </div>
        </section>
    )
}

export default Midsection;

In this code, we’ve mostly removed the “site” content and added in a couple new components. A that will contain our form for submitting a signature and a component to contain the list of signatures.

Now that we have a relatively blank slate, we can set up our FaunaDB database.

Setting Up A FaunaDB Collection

After logging into Fauna (or signing up for an account), you’ll be given the option to create a new Database. We’ll create a new database called guestbook.

Inside this database, we’ll create a “Collection” called signature. Collections in Fauna a group of Documents that are in turn JSON objects.

In this new Collection, we’ll create a new Document with the following JSON:

{
 name: "Bryan Robinson",
 message:
   "Lorem ipsum dolor amet sum Lorem ipsum dolor amet sum Lorem ipsum dolor amet sum Lorem ipsum dolor amet sum"
}

This will be the simple data schema for each of our signatures. For each of these Documents, Fauna will create additional data surrounding it.

{
 "ref": Ref(Collection("signatures"), "262884172900598291"),
 "ts": 1586964733980000,
 "data": {
   "name": "Bryan Robinson",
   "message": "Lorem ipsum dolor amet sum Lorem ipsum dolor amet sum Lorem ipsum dolor amet sum Lorem ipsum dolor amet sum "
 }
}

The ref is the unique identifier inside of Fauna and the ts is the time (as a Unix timestamp) the document was created/updated.

After creating our data, we want an easy way to grab all that data and use it in our site. In Fauna, the most efficient way to get data is via an Index. We’ll create an Index called allSignatures. This will grab and return all of our signature Documents in the Collection.

Now that we have an efficient way of accessing the data in Gatsby, we need Gatsby to know where to get it. Gatsby has a repository of plugins that can fetch data from a variety of sources, Fauna included.

Setting up the Fauna Gatsby Data Source Plugin

npm install gatsby-source-faunadb

After we install this plugin to our project, we need to configure it in our gatsby-config.js file. In the plugins array of our project, we’ll add a new item.

{
    resolve: `gatsby-source-faunadb`,
    options: {
    // The secret for the key you're using to connect to your Fauna database.
    // You can generate on of these in the "Security" tab of your Fauna Console.
        secret: process.env.YOUR_FAUNADB_SECRET,
    // The name of the index you want to query
    // You can create an index in the "Indexes" tab of your Fauna Console.
        index: `allSignatures`,
    // This is the name under which your data will appear in Gatsby GraphQL queries
    // The following will create queries called `allBird` and `bird`.
        type: "Signatures",
    // If you need to limit the number of documents returned, you can specify a 
    // Optional maximum number to read.
    // size: 100
    },
},

In this configuration, you provide it your Fauna secret Key, the Index name we created and the “type” we want to access in our Gatsby GraphQL query.

Where did that process.env.YOUR_FAUNADB_SECRET come from?

In your project, create a .env file — and include that file in your .gitignore! This file will give Gatsby’s Webpack configuration the secret value. This will keep your sensitive information safe and not stored in GitHub.

YOUR_FAUNADB_SECRET = "value from fauna"

We can then head over to the “Security” tab in our Database and create a new key. Since this is a protected secret, it’s safe to use a “Server” role. When you save the Key, it’ll provide your secret. Be sure to grab that now, as you can’t get it again (without recreating the Key).

Once the configuration is set up, we can write a GraphQL query in our components to grab the data at build time.

Getting the data and building the template

We’ll add this query to our Midsection component to make it accessible by both of our components.

const Midsection = () => {
 const data = useStaticQuery(
 graphql`
            query GetSignatures {
                allSignatures {
                  nodes {
                    name
                    message
                    _ts
                    _id
                  }
                }
            }`
        );
// ... rest of the component
}

This will access the Signatures type we created in the configuration. It will grab all the signatures and provide an array of nodes. Those nodes will contain the data we specify we need: name, message, ts, id.

We’ll set that data into our state — this will make updating it live easier later.

const [sigData, setSigData] = useState(data.allSignatures.nodes);

Now we can pass sigData as a prop into and setSigData into .

<SignForm setSigData={setSigData}></SignForm>


<Signatures sigData={sigData}></Signatures>

Let’s set up our Signatures component to use that data!

import React from 'react';
import Signature from './signature'   

const Signatures = (props) => {
    const SignatureMarkup = () => {
        return props.sigData.map((signature, index) => {
            return (
                <Signature key={index} signature={signature}></Signature>
            )
        }).reverse()
    }

    return (
        <SignatureMarkup></SignatureMarkup>
    )
}

export default Signatures

In this function, we’ll .map() over our signature data and create an Array of markup based on a new component that we pass the data into.

The Signature component will handle formatting our data and returning an appropriate set of HTML.

import React from 'react';

const Signature = ({signature}) => {
    const dateObj = new Date(signature._ts / 1000);
    let dateString = `${dateObj.toLocaleString('default', {weekday: 'long'})}, ${dateObj.toLocaleString('default', { month: 'long' })} ${dateObj.getDate()} at ${dateObj.toLocaleTimeString('default', {hour: '2-digit',minute: '2-digit', hour12: false})}`

    return (
    <article className="signature box">      
        <h3 className="signature__headline">{signature.name} - {dateString}</h3>
        <p className="signature__message">
            {signature.message} 
        </p>
    </article>
)};

export default Signature;

At this point, if you start your Gatsby development server, you should have a list of signatures currently existing in your database. Run the following command to get up and running:

gatsby develop

Any signature stored in our database will build HTML in that component. But how can we get signatures INTO our database?

Let’s set up a signature form component to send data and update our Signatures list.

Let’s Make Our JAMstack Guestbook Interactive

First, we’ll set up the basic structure for our component. It will render a simple form onto the page with a text input, a textarea, and a button for submission.

import React from 'react';

import faunadb, { query as q } from "faunadb"

var client = new faunadb.Client({ secret: process.env.GATSBY_FAUNA_CLIENT_SECRET  })

export default class SignForm extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            sigName: "",
            sigMessage: ""
        }
    }

    handleSubmit = async event => {
        // Handle the submission
    }

    handleInputChange = event => {
        // When an input changes, update the state
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <div className="field">
                    <div className="control">
                 <label className="label">Label
                    <input 
                        className="input is-fullwidth"
                        name="sigName" 
                        type="text"
                        value={this.state.sigName}
                        onChange={this.handleInputChange}
                    />
                    </label>
                    </div>
                </div>
                <div className="field">
                    <label>
                        Your Message:
                        <textarea 
                            rows="5"
                            name="sigMessage" 
                            value={this.state.sigMessage}
                            onChange={this.handleInputChange} 
                            className="textarea" 
                            placeholder="Leave us a happy note"></textarea>

                    </label>
                </div>
                <div className="buttons">
                    <button className="button is-primary" type="submit">Sign the Guestbook</button>
                </div>
            </form>
        )
    }

}

To start, we’ll set up our state to include the name and the message. We’ll default them to blank strings and insert them into our </code> and <code></code>.</p> <p>When a user changes the value of one of these fields, we’ll use the <code>handleInputChange</code> method. When a user submits the form, we’ll use the <code>handleSubmit</code> method.</p> <p>Let’s break down both of those functions.</p> <pre><code> handleInputChange = event => { const target = event.target const value = target.value const name = target.name this.setState({ [name]: value, }) } </code></pre> <p>The input change will accept the event. From that event, it will get the current target’s value and name. We can then modify the state of the properties on our state object — sigName, sigMessage or anything else.</p> <p>Once the state has changed, we can use the state in our <code>handleSubmit</code> method.</p> <div> <pre><code> handleSubmit = async event => { event.preventDefault(); const placeSig = await this.createSignature(this.state.sigName, this.state.sigMessage); this.addSignature(placeSig); } </code></pre> </div> <p>This function will call a new <code>createSignature()</code> method. This will connect to Fauna to create a new Document from our state items.</p> <p>The <code>addSignature()</code> method will update our Signatures list data with the response we get back from Fauna.</p> <p>In order to write to our database, we’ll need to set up a new key in Fauna with minimal permissions. Our server key is allowed higher permissions because it’s only used during build and won’t be visible in our source.</p> <p>This key needs to only allow for the ability to only create new items in our <code>signatures</code> collection.</p> <p><strong>Note</strong>: <em>A user could still be malicious with this key, but they can only do as much damage as a bot submitting that form, so it’s a trade-off I’m willing to make for this app.</em></p> <figure> <p> <a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1f03d579-5844-44fa-9dc0-7262821a0979/faunadb-signatures-permissions-full.png"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1f03d579-5844-44fa-9dc0-7262821a0979/faunadb-signatures-permissions-full.png" alt="signatures-client-permissions"></p> <p> </a><figcaption> A look at the FaunaDB security panel. In this shot, we’re creating a ‘client’ role that allows only the ‘Create’ permission for those API Keys. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1f03d579-5844-44fa-9dc0-7262821a0979/faunadb-signatures-permissions-full.png">Large preview</a>)<br /> </figcaption></figure> <p>For this, we’ll create a new “Role” in the “Security” tab of our dashboard. We can add permissions around one or more of our Collections. In this demo, we only need <code>signatures</code> and we can select the “Create” functionality.</p> <p>After that, we generate a new key that uses that role.</p> <p>To use this key, we’ll instantiate a new version of the Fauna JavaScript SDK. This is a dependency of the Gatsby plugin we installed, so we already have access to it.</p> <div> <pre><code>import faunadb, { query as q } from "faunadb" var client = new faunadb.Client({ secret: process.env.GATSBY_FAUNA_CLIENT_SECRET })</code></pre> </div> <p>By using an environment variable prefixed with <code>GATSBY_</code>, we gain access to it in our browser JavaScript (be sure to add it to your <code>.env</code> file).</p> <p>By importing the <code>query</code> object from the SDK, we gain access to any of the methods available in Fauna’s first-party Fauna Query Language (FQL). In this case, we want to use the Create method to create a new document on our Collection.</p> <div> <pre><code>createSignature = async (sigName, sigMessage) => { try { const queryResponse = await client.query( q.Create( q.Collection('signatures'), { data: { name: sigName, message: sigMessage } } ) ) const signatureInfo = { name: queryResponse.data.name, message: queryResponse.data.message, _ts: queryResponse.ts, _id: queryResponse.id} return signatureInfo } catch(err) { console.log(err); } }</code></pre> </div> <p>We pass the Create function to the <code>client.query()</code> method. Create takes a Collection reference and an object of information to pass to a new Document. In this case, we use <code>q.Collection</code> and a string of our Collection name to get the reference to the Collection. The second argument is for our data. You can pass other items in the object, so we need to tell Fauna, we’re specifically sending it the <code>data</code> property on that object.</p> <p>Next, we pass it the name and message we collected in our state. The response we get back from Fauna is the entire object of our Document. This includes our data in a <code>data</code> object, as well as a Fauna ID and timestamp. We reformat that data in a way that our Signatures list can use and return that back to our <code>handleSubmit</code> function.</p> <p>Our submit handler will then pass that data into our <code>setSigData</code> prop which will notify our Signatures component to rerender with that new data. This gives our user immediate feedback that their submission has been accepted.</p> <h4>Rebuilding the site</h4> <p>This is all working in the browser, but the data hasn’t been updated in our static application yet.</p> <p>From here, we need to tell our JAMstack host to rebuild our site. Many have the ability to specify a webhook to trigger a deployment. Since I’m hosting this demo on Netlify, I can create a new “Deploy webhook” in their admin and create a new <code>triggerBuild</code> function. This function will use the native JavaScript <code>fetch()</code> method and send a post request to that URL. Netlify will then rebuild the application and pull in the latest signatures.</p> <div> <pre><code> triggerBuild = async () => { const response = await fetch(process.env.GATSBY_BUILD_HOOK, { method: "POST", body: "{}" }); return response; }</code></pre> </div> <p><em>Both <a target="_blank" href="https://www.gatsbyjs.org/blog/2020-04-22-announcing-incremental-builds/">Gatsby Cloud</a> and <a target="_blank" href="https://www.netlify.com/blog/2020/04/23/enable-gatsby-incremental-builds-on-netlify/">Netlify</a> have implemented ways of handling “incremental” builds with Gatsby drastically speeding up build times. This sort of build can happen very quickly now and feel almost as fast as a traditional server-rendered site.</em></p> <p><em>Every signature that gets added gets quick feedback to the user that it’s been submitted, is perpetually stored in a database, and served as HTML via a build process.</em></p> <p>Still feels a little too much like a typical website? Let’s take all these concepts a step further.</p> <h3>Create A Mindful App With Auth0, Fauna Identity And Fauna User-Defined Functions (UDF)</h3> <p>Being mindful is an important skill to cultivate. Whether it’s thinking about your relationships, your career, your family, or just going for a walk in nature, it’s important to be mindful of the people and places around you.</p> <figure> <p> <a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9516d0ef-bb29-481e-8d10-f06248a60569/faunadb-mindful-mission-full.png"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9516d0ef-bb29-481e-8d10-f06248a60569/faunadb-mindful-mission-full.png" alt="Mindful Mission"></p> <p> </a><figcaption> A look at the final app screen showing a ‘Mindful Mission,’ ‘Past Missions’ and a ‘Log Out’ button. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9516d0ef-bb29-481e-8d10-f06248a60569/faunadb-mindful-mission-full.png">Large preview</a>)<br /> </figcaption></figure> <p>This app intends to help you focus on one randomized idea every day and review the various ideas from recent days.</p> <p>To do this, we need to introduce a key element to most apps: authentication. With authentication, comes extra security concerns. While this data won’t be particularly sensitive, you don’t want one user accessing the history of any other user.</p> <p>Since we’ll be scoping data to a specific user, we also don’t want to store any secret keys on browser code, as that would open up other security flaws.</p> <p>We could create an entire authentication flow using nothing but our wits and a user database with Fauna. That may seem daunting and moves us away from the features we want to write. The great thing is that there’s certainly an API for that in the JAMstack! In this demo, we’ll explore integrating Auth0 with Fauna. We can use the integration in many ways.</p> <h4>Setting Up Auth0 To Connect With Fauna</h4> <p>Many implementations of authentication with the JAMstack rely heavily on Serverless functions. That moves much of the security concerns from a security-focused company like Auth0 to the individual developer. That doesn’t feel quite right.</p> <figure> <p> <a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bd32e23e-a172-48a1-bff2-3f9001a3b2fc/faunadb-serverless-function-flow-full.png"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bd32e23e-a172-48a1-bff2-3f9001a3b2fc/faunadb-serverless-function-flow-full.png" alt="serverless function flow"></p> <p> </a><figcaption> A diagram outlining the convoluted method of using a serverless function to manage authentication and token generation. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bd32e23e-a172-48a1-bff2-3f9001a3b2fc/faunadb-serverless-function-flow-full.png">Large preview</a>)<br /> </figcaption></figure> <p>The typical flow would be to send a login request to a serverless function. That function would request a user from Auth0. Auth0 would provide the user’s JSON Web Token (JWT) and the function would provide any additional information about the user our application needs. The function would then bundle everything up and send it to the browser.</p> <p>There are a lot of places in that authentication flow where a developer could introduce a security hole.</p> <p>Instead, let’s request that Auth0 bundle everything up for us inside the JWT it sends. Keeping security in the hands of the folks who know it best.</p> <figure> <p> <a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9e77ff80-6fd4-496e-ad56-4119b9a2be1e/faunadb-auth0-rule-flow-full.png"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9e77ff80-6fd4-496e-ad56-4119b9a2be1e/faunadb-auth0-rule-flow-full.png" alt="Auth0's Rule flow"></p> <p> </a><figcaption> A diagram outlining the streamlined authentication and token generation flow when using Auth0’s Rule system. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9e77ff80-6fd4-496e-ad56-4119b9a2be1e/faunadb-auth0-rule-flow-full.png">Large preview</a>)<br /> </figcaption></figure> <p>We’ll do this by using Auth0’s Rules functionality to ask Fauna for a user token to encode into our JWT. This means that unlike our Guestbook, we won’t have any Fauna keys in our front-end code. Everything will be managed in memory from that JWT token.</p> <h4>Setting up Auth0 Application and Rule</h4> <p>First, we’ll need to set up the basics of our Auth0 Application.</p> <p>Following <a target="_blank" href="https://auth0.com/docs/quickstart/spa/vanillajs#configure-auth0">the configuration steps</a> in their basic walkthrough gets the important basic information filled in. Be sure to fill out the proper localhost port for your bundler of choice as one of your authorized domains.</p> <p>After the basics of the application are set up, we’ll go into the “Rules” section of our account.</p> <p>Click “Create Rule” and select “Empty Rule” (or start from one of their many templates that are helpful starting points).</p> <p>Here’s our Rule code</p> <div> <pre><code>async function (user, context, callback) { const FAUNADB_SECRET = 'Your Server secret'; const faunadb = require('faunadb@2.11.1'); const { query: q } = faunadb; const client = new faunadb.Client({ secret: FAUNADB_SECRET }); try { const token = await client.query( q.Call('user_login_or_create', user.email, user) // Call UDF in fauna ); let newClient = new faunadb.Client({ secret: token.secret }); context.idToken['https://faunadb.com/id/secret'] = token.secret; callback(null, user, context); } catch(error) { console.log('->', error); callback(error, user, context); } } </code></pre> </div> <p>We give the rule a function that takes the user, context, and a callback from Auth0. We need to set up and grab a Server token to initialize our Fauna JavaScript SDK and initialize our client. Just like in our Guestbook, we’ll create a new Database and manage our Tokens in “Security”.</p> <p>From there, we want to send a query to Fauna to create or log in our user. To keep our Rule code simple (and make it reusable), we’ll write our first Fauna “User-Defined Function” (UDF). A UDF is a function written in FQL that runs on Fauna’s infrastructure.</p> <p>First, we’ll set up a Collection for our users. You don’t need to make a first Document here, as they’ll be created behind the scenes by our Auth0 rule whenever a new Auth0 user is created.</p> <p>Next, we need an Index to search our <code>users</code> Collection based on the email address. This Index is simpler than our Guestbook, so we can add it to the Dashboard. Name the Index <code>user_by_email</code>, set the Collection to <code>users</code>, and the Terms to <code>data.email</code>. This will allow us to pass an email address to the Index and get a matching user Document back.</p> <p>It’s time to create our UDF. In the Dashboard, navigate to “Functions” and create a new one named <code>user_login_or_create</code>.</p> <div> <pre><code>Query( Lambda( ["userEmail", "userObj"], // Arguments Let( { user: Match(Index("user_by_email"), Var("userEmail")) }, // Set user variable If( Exists(Var("user")), // Check if the User exists Create(Tokens(null), { instance: Select("ref", Get(Var("user"))) }), // Return a token for that item in the users collection (in other words, the user) Let( // Else statement: Set a variable { newUser: Create(Collection("users"), { data: Var("userObj") }), // Create a new user and get its reference token: Create(Tokens(null), { // Create a token for that user instance: Select("ref", Var("newUser")) }) }, Var("token") // return the token ) ) ) ) ) </code></pre> </div> <p>Our UDF will accept a user email address and the rest of the user information. If a user exists in a <code>users</code> Collection, it will create a Token for the user and send that back. If a user doesn’t exist, it will create that user Document and then send a Token to our Auth0 Rule.</p> <p>We can then store the Token as an <code>idToken</code> attached to the <code>context</code> in our JWT. The token needs a URL as a key. Since this is a Fauna token, we can use a Fauna URL. Whatever this is, you’ll use it to access this in your code.</p> <p>This Token doesn’t have any permissions yet. We need to go into our Security rules and set up a new Role.</p> <p>We’ll create an “AuthedUser” role. We don’t need to add any permissions yet, but as we create new UDFs and new Collections, we’ll update the permissions here. Instead of generating a new Key to use this Role, we want to add to this Role’s “Memberships”. On the Memberships screen, you can select a Collection to add as a member. The documents in this Collection (in our case, our Users), will have the permissions set on this role given via their Token.</p> <p>Now, when a user logs in via Auth0, they’ll be returned a Token that matches their user Document and has its permissions.</p> <p>From here, we come back to our application.</p> <h4>Implement logic for when the User is logged in</h4> <p>Auth0 has an <a target="_blank" href="https://auth0.com/docs/quickstart/spa/vanillajs">excellent walkthrough for setting up a “vanilla” JavaScript single-page application</a>. Most of this code is a refactor of that to fit the code splitting of this application.</p> <figure> <p> <a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c9a57bc1-3f8d-425f-be67-3667e42c3956/faunadb-mindful-auth-full.png"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c9a57bc1-3f8d-425f-be67-3667e42c3956/faunadb-mindful-auth-full.png" alt="default Auth0 Login/Signup screen"></p> <p> </a><figcaption> The default Auth0 Login/Signup screen. All the login flow can be contained in the Auth0 screens. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c9a57bc1-3f8d-425f-be67-3667e42c3956/faunadb-mindful-auth-full.png">Large preview</a>)<br /> </figcaption></figure> <p>First, we’ll need the Auth0 SPA SDK.</p> <pre><code>npm install @auth0/auth0-spa-js</code></pre> <div> <pre><code>import createAuth0Client from '@auth0/auth0-spa-js'; import { changeToHome } from './layouts/home'; // Home Layout import { changeToMission } from './layouts/myMind'; // Current Mindfulness Mission Layout let auth0 = null; var currentUser = null; const configureClient = async () => { // Configures Auth0 SDK auth0 = await createAuth0Client({ domain: "mindfulness.auth0.com", client_id: "32i3ylPhup47PYKUtZGRnLNsGVLks3M6" }); }; const checkUser = async () => { // return user info from any method const isAuthenticated = await auth0.isAuthenticated(); if (isAuthenticated) { return await auth0.getUser(); } } const loadAuth = async () => { // Loads and checks auth await configureClient(); const isAuthenticated = await auth0.isAuthenticated(); if (isAuthenticated) { // show the gated content currentUser = await auth0.getUser(); changeToMission(); // Show the "Today" screen return; } else { changeToHome(); // Show the logged out "homepage" } const query = window.location.search; if (query.includes("code=") && query.includes("state=")) { // Process the login state await auth0.handleRedirectCallback(); currentUser = await auth0.getUser(); changeToMission(); // Use replaceState to redirect the user away and remove the querystring parameters window.history.replaceState({}, document.title, "/"); } } const login = async () => { await auth0.loginWithRedirect({ redirect_uri: window.location.origin }); } const logout = async () => { auth0.logout({ returnTo: window.location.origin }); window.localStorage.removeItem('currentMindfulItem') changeToHome(); // Change back to logged out state } export { auth0, loadAuth, currentUser, checkUser, login, logout } </code></pre> </div> <p>First, we configure the SDK with our client_id from Auth0. This is safe information to store in our code.</p> <p>Next, we set up a function that can be exported and used in multiple files to check if a user is logged in. The Auth0 library provides an <code>isAuthenticated()</code> method. If the user is authenticated, we can return the user data with <code>auth0.getUser()</code>.</p> <p>We set up a <code>login()</code> and <code>logout()</code> functions and a <code>loadAuth()</code> function to handle the return from Auth0 and change the state of our UI to the “Mission” screen with today’s Mindful idea.</p> <p>Once this is all set up, we have our authentication and user login squared away.</p> <p>We’ll create a new function for our Fauna functions to reference to get the proper token set up.</p> <div> <pre><code>const AUTH_PROP_KEY = "https://faunad.com/id/secret"; var faunadb = require('faunadb'), q = faunadb.query; async function getUserClient(currentUser) { return new faunadb.Client({ secret: currentUser[AUTH_PROP_KEY]}) } </code></pre> </div> <p>This returns a new connection to Fauna using our Token from Auth0. This token works the same as the Keys from previous examples.</p> <h4>Generate a random Mindful topic and store it in Fauna</h4> <p>To start, we need a Collection of items to store our list of Mindful objects. We’ll create a Collection called “mindful” things, and create a number of items with the following schema:</p> <div> <pre><code>{ "title": "Career", "description": "Think about the next steps you want to make in your career. What's the next easily attainable move you can make?", "color": "#C6D4FF", "textColor": "black" }</code></pre> </div> <p>From here, we’ll move to our JavaScript and create a function for adding and returning a random item from that Collection.</p> <div> <pre><code>async function getRandomMindfulFromFauna(userObj) { const client = await getUserClient(userObj); try { let mindfulThings = await client.query( q.Paginate( q.Documents(q.Collection('mindful_things')) ) ) let randomMindful = mindfulThings.data[Math.floor(Math.random()*mindfulThings.data.length)]; let creation = await client.query(q.Call('addUserMindful', randomMindful)); return creation.data.mindful; } catch (error) { console.log(error) } } </code></pre> </div> <p>To start, we’ll instantiate our client with our <code>getUserClient()</code> method.</p> <p>From there, we’ll grab all the Documents from our <code>mindful_things</code> Collection. <code>Paginate()</code> by default grabs 64 items per page, which is more than enough for our data. We’ll grab a random item from the array that’s returned from Fauna. This will be what Fauna refers to as a “Ref”. A Ref is a full reference to a Document that the various FQL functions can use to locate a Document.</p> <p>We’ll pass that Ref to a new UDF that will handle storing a new, timestamped object for that user stored in a new <code>user_things</code> Collection.</p> <p>We’ll create the new Collection, but we’ll have our UDF provide the data for it when called.</p> <p>We’ll create a new UDF in the Fauna dashboard with the name <code>addUserMindful</code> that will accept that random Ref.</p> <p>As with our login UDF before, we’ll use the <code>Lambda()</code> FQL method which takes an array of arguments.</p> <p>Without passing any user information to the function, FQL is able to obtain our User Ref just calling the <code>Identity()</code> function. All we have from our <code>randomRef</code> is the reference to our Document. We’ll run a <code>Get()</code> to get the full object. We’ll the <code>Create()</code> a new Document in the <code>user_things</code> Collection with our User Ref and our random information.</p> <p>We then return the <code>creation</code> object back out of our Lambda. We then go back to our JavaScript and return the data object with the <code>mindful</code> key back to where this function gets called.</p> <h4>Render our Mindful Object on the page</h4> <p>When our user is authenticated, you may remember it called a <code>changeToMission()</code> method. This function switches the items on the page from the “Home” screen to markup that can be filled in by our data. After it’s added to the page, the <code>renderToday()</code> function gets called to add content by a few rules.</p> <p>The first rule of Serverless Data Club is not to make HTTP requests unless you have to. In other words, cache when you can. Whether that’s creating a full PWA-scale application with Service Workers or just caching your database response with localStorage, cache data, and fetch only when necessary.</p> <p>The first rule of our conditional is to check localStorage. If localStorage does contain a <code>currentMindfulItem</code>, then we need to check its date to see if it’s from today. If it is, we’ll render that and make no new requests.</p> <p>The second rule of Serverless Data Club is to make as few requests as possible without the responses of those requests being too large. In that vein, our second conditional rule is to check the latest item from the current user and see if it is from today. If it is, we’ll store it in localStorage for later and then render the results.</p> <p>Finally, if none of these are true, we’ll fire our <code>getRandomMindfulFromFauna()</code> function, format the result, store that in localStorage, and then render the result.</p> <h4>Get the latest item from a user</h4> <p>I glossed over it in the last section, but we also need some functionality to retrieve the latest mindful object from Fauna for our specific user. In our <code>getLatestFromFauna()</code> method, we’ll again instantiate our Fauna client and then call a new UDF.</p> <p>Our new UDF is going to call a Fauna Index. An Index is an efficient way of doing a lookup on a Fauna database. In our case, we want to return all <code>user_things</code> by the <code>user</code> field. Then we can also sort the result by timestamp and reverse the default ordering of the data to show the latest first.</p> <p>Simple Indexes can be created in the Index dashboard. Since we want to do the reverse sort, we’ll need to enter some custom FQL into the Fauna Shell (you can do this in the database dashboard Shell section).</p> <pre><code>CreateIndex({ name: "getMindfulByUserReverse", serialized: true, source: Collection("user_things"), terms: [ { field: ["data", "user"] } ], values: [ { field: ["ts"], reverse: true }, { field: ["ref"] } ] }) </code></pre> <p>This creates an Index named <code>getMindfulByUserReverse</code>, created from our <code>user_thing</code> Collection. The <code>terms</code> object is a list of fields to search by. In our case, this is just the <code>user</code> field on the data object. We then provide <code>values</code> to return. In our case, we need the Ref and the Timestamp and we’ll use the <code>reverse</code> property to reverse order our results by this field.</p> <p>We’ll create a new UDF to use this Index.</p> <div> <pre><code>Query( Lambda( [], If( // Check if there is at least 1 in the index GT( Count( Select( "data", Paginate(Match(Index("getMindfulByUserReverse"), Identity())) ) ), 0 ), Let( // if more than 0 { match: Paginate( Match(Index("getMindfulByUserReverse"), Identity()) // Search the index by our User ), latestObj: Take(1, Var("match")), // Grab the first item from our match latestRef: Select( ["data"], Get(Select(["data", 0, 1], Var("latestObj"))) // Get the data object from the item ), latestTime: Select(["data", 0, 0], Var("latestObj")), // Get the time merged: Merge( // merge those items into one object to return { latestTime: Var("latestTime") }, { latestMindful: Var("latestRef") } ) }, Var("merged") ), Let({ error: { err: "No data" } }, Var("error")) // if there aren't any, return an error. ) ) ) </code></pre> </div> <p>This time our <code>Lambda()</code> function doesn’t need any arguments since we’ll have our User based on the Token used.</p> <p>First, we’ll check to see if there’s at least 1 item in our Index. If there is, we’ll grab the first item’s data and time and return that back as a merged object.</p> <p>After we get the latest from Fauna in our JavaScript, we’ll format it to a structure our <code>storeCurrent()</code> and <code>render()</code> methods expect it and return that object.</p> <p>Now, we have an application that creates, stores, and fetches data for a daily message to contemplate. A user can use this on their phone, on their tablet, on the computer, and have it all synced. We could turn this into a PWA or even a native app with a system like Ionic.</p> <p>We’re still missing one feature. Viewing a certain number of past items. Since we’ve stored this in our database, we can retrieve them in whatever way we need to.</p> <h4>Pull the latest X Mindful Missions to get a picture of what you’ve thought about</h4> <p>We’ll create a new JavaScript method paired with a new UDF to tackle this.</p> <p><code>getSomeFromFauna</code> will take an integer <code>count</code> to ask Fauna for a certain number of items.</p> <p>Our UDF will be very similar to the <code>getLatestFromFauana</code> UDF. Instead of returning the first item, we’ll <code>Take()</code> the number of items from our array that matches the integer that gets passed into our UDF. We’ll also begin with the same conditional, in case a user doesn’t have any items stored yet.</p> <div> <pre><code>Query( Lambda( ["count"], // Number of items to return If( // Check if there are any objects GT( Count( Select( "data", Paginate(Match(Index("getMindfulByUserReverse"), Identity(null))) ) ), 0 ), Let( { match: Paginate( Match(Index("getMindfulByUserReverse"), Identity(null)) // Search the Index by our User ), latestObjs: Select("data", Take(Var("count"), Var("match"))), // Get the data that is returned mergedObjs: Map( // Loop over the objects Var("latestObjs"), Lambda( "latestArray", Let( // Build the data like we did in the LatestMindful function { ref: Select(["data"], Get(Select([1], Var("latestArray")))), latestTime: Select(0, Var("latestArray")), merged: Merge( { latestTime: Var("latestTime") }, Select("mindful", Var("ref")) ) }, Var("merged") // Return this to our new array ) ) ) }, Var("mergedObjs") // return the full array ), { latestMindful: [{ title: "No additional data" }] } // if there are no items, send back a message to display ) ) ) </code></pre> </div> <p>In this demo, we created a full-fledged app with serverless data. Because the data is served from a CDN, it can be as close to a user as possible. We used <a target="_blank" href="https://synd.co/2XBbr4W">FaunaDB</a>‘s features, such as UDFs and Indexes, to optimize our database queries for speed and ease of use. We also made sure we only queried our database the bare minimum to reduce requests.</p> <h3>Where To Go With Serverless Data</h3> <p>The JAMstack isn’t just for sites. It can be used for robust applications as well. Whether that’s for a game, CRUD application or just to be mindful of your surroundings you can do a lot without sacrificing customization and without spinning up your own non-dist database system.</p> <p>With performance on the mind of everyone creating on the JAMstack — whether for cost or for user experience — finding a good place to store and retrieve your data is a high priority. Find a spot that meets your needs, those of your users, and meets ideals of the JAMstack.</p> <div> <p> <span>(ra, yk, il)</span> </div> </article> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-3285094"> <h2><a class="title" href="http://www.webmastersgallery.com/2020/06/09/12-ways-to-improve-user-interview-questions/" rel="bookmark">12 Ways To Improve User Interview Questions</a></h2> <div class="info"> <span class="date">June 9th, 2020</span> <span class="author"></span> <span class="comments"><a href="http://www.webmastersgallery.com/2020/06/09/12-ways-to-improve-user-interview-questions/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="http://feedproxy.google.com/~r/SmashingMagazine/~3/L7QYau-bXeY/"><img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/299eb012-486a-4507-b76d-c6ce24eea567/04-user-interview-questions.png" alt="Examples of hypothetical questions and how to transform them into experience-based ones."></a></div> <p> <title>12 Ways To Improve User Interview Questions</title></p> <article> <header> <h1>12 Ways To Improve User Interview Questions</h1> <address>Slava Shestopalov</address> <p> 2020-06-09T10:30:00+00:00<br /> 2020-06-10T09:35:11+00:00<br /> </header> <p>An experienced interviewer takes care of many things: builds hypotheses, selects interviewees, composes invitations, schedules appointments, sets the stage, and, of course, writes an interview script. Any of these preparations can go wrong, but the script failure means all the effort is in vain. So, if you haven’t interviewed people a lot before or you have to delegate it to non-designers, I’d recommend paying attention to high-quality questions, in the first place. Then, there is a chance they’ll smooth out other potential shortcomings.</p> <p>We’ll talk about 12 kinds of questions explained with examples. The first part includes six frequent mistakes and how to fix them. The second part presents six ways to improve decent questions and take control of difficult situations.</p> <h3>Pitfall #1: Hypothetical Questions</h3> <p>“I don’t care if people will use the new features,” said no budget owner ever. Investing in design and development, people want to make sure money will return. And direct asking, unfortunately, is not an effective way to check it, although it may intuitively seem a great idea. “Let’s go out of the office and ask ‘em!” In my practice, there were a lot of cases when people said they liked a feature but were reluctant to pay for it. So, is there any method to make sure that something not functioning yet will be needed when implemented?</p> <figure> <p> <a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/299eb012-486a-4507-b76d-c6ce24eea567/04-user-interview-questions.png"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/299eb012-486a-4507-b76d-c6ce24eea567/04-user-interview-questions.png" alt="Examples of hypothetical questions and how to transform them into experience-based ones."></p> <p> </a><figcaption> Hypothetical questions put an interviewee into the position of a dreamer, thus don’t provide reliable answers. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/299eb012-486a-4507-b76d-c6ce24eea567/04-user-interview-questions.png">Large preview</a>)<br /> </figcaption></figure> <p>I cannot recall anything more relevant than referring to people’s past experiences and behavior in similar situations. If users don’t have a habit of saving articles for later on all the news sites, what is the chance they’ll start doing it on your website? As Jakob Nielsen said, “Users spend most of their time on other sites.”</p> <div></div> <h3>Pitfall #2: Closed Questions</h3> <p>Closed questions appear from a natural human wish to be approved and gain support. However, in the interviews, they aren’t useful enough. A yes-or-no question doesn’t provoke reserved people to talk and doesn’t help much to reveal their motives and way of thinking.</p> <figure> <p> <a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6a87a41a-9e38-4802-b8f2-ac6426936977/01-user-interview-questions.png"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6a87a41a-9e38-4802-b8f2-ac6426936977/01-user-interview-questions.png" alt="Examples of closed questions and how to turn them into open questions"></p> <p> </a><figcaption> Open questions help to gather more information than the closed ones. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6a87a41a-9e38-4802-b8f2-ac6426936977/01-user-interview-questions.png">Large preview</a>)<br /> </figcaption></figure> <p>To be fair, closed questions are not evil. For example, they can serve a handy facilitation technique to make a talkative interviewee stop and turn back to the point. Also, they can help to double-check the information previously received through open questions. But if your goal is to gather as much information as possible, open questions will work better.</p> <h3>Pitfall #3: Leading Questions</h3> <p>The things considered polite in everyday conversations may be harmful to the efficiency of a user interview. Trying to help an interviewee with the options can guide them in saying what they don’t really think. A user interview is not the most comfortable situation for the majority of people, and they try to pass it as quickly as possible and at minimum effort. As a result, people tend to agree with anything more or less close to the truth or with a socially-expected choice instead of composing their answer from scratch.</p> <figure> <p> <a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0c6b938d-0569-4ae8-888a-14cf953fd09e/02-user-interview-questions.png"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0c6b938d-0569-4ae8-888a-14cf953fd09e/02-user-interview-questions.png" alt="Examples of questions that include answer options and how to fix them"></p> <p> </a><figcaption> Questions that suggest answer options lead to biased answers. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0c6b938d-0569-4ae8-888a-14cf953fd09e/02-user-interview-questions.png">Large preview</a>)<br /> </figcaption></figure> <p>That’s why it’s better to move one step at a time and build the next question upon the answer to the previous one.</p> <h3>Pitfall #4: Selfish Questions</h3> <p>Idea authors sometimes act like proud parents?—?they want everyone to admire their child. The downside of such an attitude in user interviews is the unconscious usage of the pronouns “we” or “our.” As a result, users feel as if they are taking an exam and should either adore what they see or maintain neutrality, disguising real complaints.</p> <figure> <p> <a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/29d3bc28-f609-40fa-a8fc-2ec1d4cb018a/03-user-interview-questions.png"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/29d3bc28-f609-40fa-a8fc-2ec1d4cb018a/03-user-interview-questions.png" alt="Examples of selfish questions with possessive pronouns and how to formulate them in a neutral manner"></p> <p> </a><figcaption> Possessive pronouns like “our” provoke people to praise the subject of talk instead of sharing honest feedback. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/29d3bc28-f609-40fa-a8fc-2ec1d4cb018a/03-user-interview-questions.png">Large preview</a>)<br /> </figcaption></figure> <p>In your interview script, replace possessive pronouns with neutral words like “this site” and “that application” or just call a subject of conversation by the name.</p> <p><strong>Pro tip:</strong> as an interviewer, you can try hiding or understating your job title and relation to the topic.</p> <div></div> <h3>Pitfall #5: Stacked Questions</h3> <p>There are many reasons why we ask stacked questions. It can be a human desire to be heard, the fear of being interrupted, or worrying that you might forget the next question while listening to the current answer. However, for the interview efficiency, stacked questions are not an option. Interviewees often select the one they are more comfortable to answer to or the one they managed to memorize from the stack. Remembering questions shouldn’t become the interviewee’s burden, so it’s better to ask them one by one. (And maybe the answers are so comprehensive that you won’t need some of the planned questions anymore.)</p> <figure> <p> <a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d186eb97-5919-4109-9609-7bc27f4a07f4/05-user-interview-questions.png"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d186eb97-5919-4109-9609-7bc27f4a07f4/05-user-interview-questions.png" alt="An example of piled up questions and how they should optimally go one by one in the interview"></p> <p> </a><figcaption> A stack of questions leads to a messy answer, whereas a sequence of separate questions works much better. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d186eb97-5919-4109-9609-7bc27f4a07f4/05-user-interview-questions.png">Large preview</a>)<br /> </figcaption></figure> <h3>Pitfall #6: Explanation Instead Of A Question</h3> <p>Teams that work together for some time often establish their own language and tend to bring it into the product they are building. But will users understand such words as “dashboard,” “smart update,” “inclusion,” or “trigger”? Explanatory questions put an interviewee into the position of a lexicographer and help to check what sense (if any) they put into brand concepts and expert terminology. For a designer, it gives insights into how the future product?—?a website, app, or self-service terminal?—?should speak to people.</p> <figure> <p> <a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/599a59c5-e1e8-479b-964e-99790feb8368/06-user-interview-questions.png"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/599a59c5-e1e8-479b-964e-99790feb8368/06-user-interview-questions.png" alt="Examples of questions that already contain an explanation and how to turn them into neutral open questions"></p> <p> </a><figcaption> Instead of inserting the explanation into the question it’s better to openly ask interviewees what they think this is. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/599a59c5-e1e8-479b-964e-99790feb8368/06-user-interview-questions.png">Large preview</a>)<br /> </figcaption></figure> <p>The opposite side of this approach is explaining it yourself and leading people before they have a chance to share <em>their</em> opinions. Think about this: in the interview, you are superior and can put pressure on users making them get your point. But will you always be there for thousands of users to explain how the product works? Probably no. So, it’s more efficient to discover people’s thinking styles and then create self-explanatory solutions rather than create something and push it in interviews.</p> <p>We’ve just covered six major interviewing mistakes. The next portion of advice will be about making fairly good questions even more powerful and dealing with difficult interview situations.</p> <h3>Pitfall #7: Question Clutter</h3> <p>Open questions are great until you realize there are too many details to figure out. The best method in such a situation is storytelling?—?describing a recent or the most prominent experience. As a result, an interviewee talks about a real situation and is less inclined to compose a socially desired answer or summarize various cases.</p> <figure> <p> <a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0b439c25-b075-420c-aa8d-a2c7c0b56620/07-user-interview-questions.png"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0b439c25-b075-420c-aa8d-a2c7c0b56620/07-user-interview-questions.png" alt="Examples of good open questions and how they can be turned into even more helpful storytelling questions"></p> <p> </a><figcaption> When a topic is broad, it’s better to ask for a full story instead of a series of open questions. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0b439c25-b075-420c-aa8d-a2c7c0b56620/07-user-interview-questions.png">Large preview</a>)<br /> </figcaption></figure> <p>Besides, storytelling gives the freedom to speak about aspects a person considers necessary. Usually, people start with or talk longer about the most crucial experiences.</p> <h3>Pitfall #8: Too General Questions</h3> <p>When you’ve figured out regularity or general attitude, it’s the right moment to ask the interviewee about an example. Recent-experience questions can fill in the gaps, which might have appeared while answering general questions. For an interviewer, it’s another powerful method to check if users aren’t accidentally exaggerating or dropping significant details.</p> <figure> <p> <a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9772a76e-e218-4024-bf51-d2546f5fde69/08-user-interview-questions.png"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9772a76e-e218-4024-bf51-d2546f5fde69/08-user-interview-questions.png" alt="Examples of good general open questions and even better questions referring to the user's recent experience"></p> <p> </a><figcaption> Past-experience questions give more insight into users’ behavior than general questions. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9772a76e-e218-4024-bf51-d2546f5fde69/08-user-interview-questions.png">Large preview</a>)<br /> </figcaption></figure> <h3>Pitfall #9: Talking About What You Can Observe</h3> <p>When you are lucky enough and interview people in their “natural habitat,” it’s a perfect chance to see their work process with your own eyes. So, if there is an opportunity to ask a user to demonstrate typical actions?—?offline or online?—?you’ll gather tons of insights. It’s a chance to learn about users’ habits (including shortcuts and favorite programs), level of computer skills, software environment, and the way of thinking (mental model).</p> <figure> <p> <a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b80c24ad-7f5b-452e-90b3-717795a7928c/09-user-interview-questions.png"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b80c24ad-7f5b-452e-90b3-717795a7928c/09-user-interview-questions.png" alt="Examples of experience-based questions and even more efficient requests to demonstrate behavior instead of talking about it"></p> <p> </a><figcaption> Sometimes it’s better to witness user’s behavior than to listen to its verbal description. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b80c24ad-7f5b-452e-90b3-717795a7928c/09-user-interview-questions.png">Large preview</a>)<br /> </figcaption></figure> <h3>Pitfall #10: Tolerating Vagueness</h3> <p>Abstract nouns and adjectives, for example, “comfort,” “accessibility,” “support,” “smart,” or “user-friendly,” are probably the trickiest words in the language because everyone interprets them differently. When you hear abstract names, that’s not enough to document them as they are. These words require “unboxing” and only then can support design decision-making.</p> <figure> <p> <a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0532d06a-0d5d-4fbe-9f9c-1814894a3158/10-user-interview-questions.png"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0532d06a-0d5d-4fbe-9f9c-1814894a3158/10-user-interview-questions.png" alt="Examples of questions that help to 'unbox' abstract nouns and subjective characteristics"></p> <p> </a><figcaption> Abstract concepts need unboxing; otherwise, they cannot back up design decision-making. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0532d06a-0d5d-4fbe-9f9c-1814894a3158/10-user-interview-questions.png">Large preview</a>)<br /> </figcaption></figure> <p>“Nothing is clear enough” has become my second favorite slogan after the classical UX phrase “It depends.” “Nothing is clear enough” means that you cannot be certain about the meaning if you hardly visualize a scenario from your interviewee’s life. The best way to unbox abstract concepts is by turning them into verbs.</p> <div></div> <h3>Pitfall #11: Missing Numbers</h3> <p>Generalizations like “all,” “never,” “always,” “nobody,” “often,” or“frequently” are as unclear as abstract nouns and adjectives. But the way to “unbox” generalizations is different?—?through quantifying. Basically, you ask questions about approximate numbers or proportions. An interviewee, of course, might not provide you statistics, but at least you’ll understand whether the user’s “very frequent” is about “more than a half” or “nearly 20%.” Another example: the same phrase “a lot” can mean “50 per day” for work emails, but it’ll be only “5 per year” for cybersecurity alerts.</p> <figure> <p> <a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f588e1b2-aeb4-4e33-bb73-2d9593644ff2/11-user-interview-questions.png"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f588e1b2-aeb4-4e33-bb73-2d9593644ff2/11-user-interview-questions.png" alt="Examples of questions that quantify vague words like 'all' or 'often'"></p> <p> </a><figcaption> Exaggerated or vague characteristics deserve to be quantified in the interview. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f588e1b2-aeb4-4e33-bb73-2d9593644ff2/11-user-interview-questions.png">Large preview</a>)<br /> </figcaption></figure> <h3>Pitfall #12: Undervalued WH-Questions</h3> <p>As a non-native speaker, I remember these questions from the English classes at school. The teacher often asked us to make WH-questions (What? Where? When? Who? How?) so that we could start a conversation and break the awkward silence. Nothing had changed from school times. Now, as a designer, I often use WH-questions as the main interviewing instrument.</p> <figure> <p> <a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/48f490a7-567d-403b-9953-8d841deac6dc/12-user-interview-questions.png"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/48f490a7-567d-403b-9953-8d841deac6dc/12-user-interview-questions.png" alt="Examples of open questions that start with WH: why, where, who, how, etc."></p> <p> </a><figcaption> WH-questions are great for figuring out time, locations, participants, consequences, and other details. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/48f490a7-567d-403b-9953-8d841deac6dc/12-user-interview-questions.png">Large preview</a>)<br /> </figcaption></figure> <p>My favorite question is “why.” For the sake of politeness and a more friendly atmosphere, I conceal it behind the following phrases, “What are you trying to achieve when you…?” or “Can you please explain the reason/value of…?” This is how in pursuit of a root cause you can ask several “whys” in a row without annoying your interviewee.</p> <h3>Summary</h3> <p>The question techniques above are pretty straightforward and might not take into account the nuances of a particular conversation or interviewee. Of course, even the best questions won’t make all the answers automatically objective, but they can make information more reliable and actionable. All in all, it’s always on an interviewer to adjust according to the situation. Here are the three core principles if you are in doubt about particular questions.</p> <blockquote> <p> <a target="_blank" href="http://twitter.com/share?text=Experience%20holds%20more%20truth%20than%20a%20hypothesis.%0A&url=https://smashingmagazine.com%2F2020%2F06%2Fuser-interview-questions%2F"><br /> Experience holds more truth than a hypothesis.</p> <p> </a> </p> <div> <div> <span>“</span></div> </p></div> </blockquote> <p>That’s why it’s recommended to ask about cases from the past and similar examples from other areas of a user’s life.</p> <h5>Let them tell their story; your ideas can wait</h5> <p>The goal of an interview is to explore the truth, not to sell or demonstrate something. If you force an interviewee to support you, it might mean the rest of the people won’t agree either. Also, give preference to clarifying the unknown versus checking hypotheses?—?for hypotheses, a better method is prototyping and testing.</p> <h5>If you cannot imagine it, you don’t get it</h5> <p>In a series of 1–2-hour user interviews, it’s so easy to get lazy and pretend you understand what you hear. Try challenging interviewee’s statements in your mind, “Did he say the truth? Do I know why she says that? What exactly do they mean telling me about it?”</p> <h4>Recommended Reading</h4> <ul> <li>“<a target="_blank" href="http://momtestbook.com/">The Mom Test: How to Talk to Customers and Learn If Your Business is a Good Idea when Everyone is Lying to You</a>,” a book by Rob Fitzpatrick.</li> <li>“<a target="_blank" href="https://www.nngroup.com/articles/user-interviews/">User Interviews: How, When, and Why to Conduct Them</a>,” an article by Kara Pernice for Nielsen Norman Group.</li> <li>“<a target="_blank" href="https://www.nngroup.com/videos/3-types-user-interviews/">The 3 Types of User Interviews: Structured, Semi-Structured, and Unstructured</a>,” a video by Maria Rosala for Nielsen Norman Group.</li> <li>“<a target="_blank" href="https://medium.springboard.com/the-art-of-the-user-interview-cf40d1ca62e8">The Art of the User Interview</a>,” an article by Nick Babich for Springboard.</li> <li>“<a target="_blank" href="https://www.interaction-design.org/literature/article/how-to-conduct-user-interviews">How to Conduct User Interviews</a>,” an article by Interaction Design Foundation.</li> <li>“<a target="_blank" href="https://www.nngroup.com/articles/first-rule-of-usability-dont-listen-to-users/">First Rule of Usability? Don’t Listen to Users</a>,” an article by Jakob Nielsen for Nielsen Norman Group.</li> <li>“<a target="_blank" href="https://www.nngroup.com/articles/interviewing-users/">Interviewing Users</a>,” an article by Jakob Nielsen for Nielsen Norman Group.</li> </ul> <div> <p> <span>(cc, yk, il)</span> </div> </article> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-3281466"> <h2><a class="title" href="http://www.webmastersgallery.com/2020/06/08/the-trickery-it-takes-to-create-ebook-like-text-columns/" rel="bookmark">The Trickery it Takes to Create eBook-Like Text Columns</a></h2> <div class="info"> <span class="date">June 8th, 2020</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2020/06/08/the-trickery-it-takes-to-create-ebook-like-text-columns/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <p>There’s some interesting CSS trickery in Jason Pamental’s <a target="_blank" href="https://mailchi.mp/2bbe439266f6/web-typography-news-47-on-the-nature-of-book-ishness">latest Web Fonts & Typography News</a>. Jason wanted to bring swipeable columns to his <a target="_blank" href="https://mobydick.wales/">digital book experience</a> on mobile. Which brings up an interesting question right away… <em>how do you set full-width columns that add columns horizontally, as-needed ? </em>Well that’s a good trick right there, and it’s a one-liner:</p> <pre><code>columns: 100vw auto;</code></pre> <p>But it gets more complicated and disappointing from there.</p> <p><span></span></p> <p>With just a smidge more formatting to the columns:</p> <pre><code>main { columns: 100vw auto; column-gap: 2rem; overflow-x: auto; height: calc(100vh - 2rem); font: 120%/1.4 Georgia; }</code></pre> <p>We get this:</p> <figure><video controls src="https://css-tricks.com/wp-content/uploads/2020/06/columns.mp4"></video></figure> <p><em>Which is so close to being perfect! </em></p> <p>We probably wouldn’t apply this effect on desktop, but hey, that’s what media queries are for. On mobile we get…</p> <figure><video width="400" controls="" src="https://css-tricks.com/wp-content/uploads/2020/06/no-snap.mp4"></video></figure> <p>That herky-jerky scrolling makes this a bad experience right there. We can smooth that out with <code>-webkit-overflow-scrolling: touch;</code>…</p> <figure><video controls="" width="400" src="https://css-tricks.com/wp-content/uploads/2020/06/smooth-1.mp4"></video></figure> <p>The smoothness is <em>maybe</em> better, but the fact that the columns don’t snap into place makes it almost just as bad of a reading experience. That’s what <a target="_blank" href="https://css-tricks.com/practical-css-scroll-snapping/"><code>scroll-snap</code></a> is for, but alas:</p> <blockquote> <p>Unfortunately it turns out you need a block-level element to which you can snap, and the artificially-created columns don’t count as such.</p> </blockquote> <p><em>Oh noooooo. So close! But so far! </em></p> <p>If we actually want scroll snapping, the content will need to be in block-level elements (like <code></p> <div></code>). It’s easy enough to set up a horizontal row of <code></p> <div></code> elements with flexbox like…</p> <pre><code>main { display: flex; } main > div { flex: 0 0 100vw; }</code></pre> <p>But… how many divs do we need? Who knows! This is arbitrary content that might change. And even if we did know, how would we flow content naturally between the divs? That’s not a thing. That’s why it sucks that <a target="_blank" href="https://www.cnet.com/news/reversing-course-google-rejects-adobe-web-publishing-tech/">CSS regions never happened</a>. So to make this nice swiping experience possible in CSS, we either need to:</p> <ul> <li>Allow <a target="_blank" href="https://css-tricks.com/practical-css-scroll-snapping/">scroll snapping</a> to work on columns</li> <li>Have some kind of CSS regions that is capable of auto-generating repeating block level elements as-needed by content</li> </ul> <p>Neither of which is possible right now.</p> <p>Jason didn’t stop there! He used JavaScript to figure out something that stops well short of some heavy scrolljacking thing. First, he figures out how many “pages” wide the CSS columns technique produces. Then, he adds spacer-divs to the scrolling element, each one the width of the page, and <em>those</em> are the things the scrolling element can scroll-snap to. Very clever.</p> <p>At the moment, you can experience it at <a target="_blank" href="https://mobydick.wales/">the book site</a> by flipping on an optional setting. </p> <p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/the-trickery-it-takes-to-create-ebook-like-text-columns/">The Trickery it Takes to Create eBook-Like Text Columns</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-3280770"> <h2><a class="title" href="http://www.webmastersgallery.com/2020/06/08/how-to-get-all-custom-properties-on-a-page-in-javascript/" rel="bookmark">How to Get All Custom Properties on a Page in JavaScript</a></h2> <div class="info"> <span class="date">June 8th, 2020</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2020/06/08/how-to-get-all-custom-properties-on-a-page-in-javascript/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="https://css-tricks.com/how-to-get-all-custom-properties-on-a-page-in-javascript/"><img decoding="async" src="https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/05/Lr2GwoOg.png?fit=1024%2C520&ssl=1" alt="A preview of our CSS custom property-driven color palette. Showing six cards, one for each color, including the custom property name and hex value in each card."></a></div> <p>We can use JavaScript to get the value of a CSS custom property. Robin wrote up a detailed explanation about this in <a target="_blank" href="https://css-tricks.com/get-a-css-custom-property-value-with-javascript/">Get a CSS Custom Property Value with JavaScript</a>. To review, let’s say we’ve declared a single custom property on the HTML element:</p> <pre><code>html { --color-accent: #00eb9b; }</code></pre> <p>In JavaScript, we can access the value with <code>getComputedStyle</code> and <code>getPropertyValue</code>:</p> <pre><code>const colorAccent = getComputedStyle(document.documentElement) .getPropertyValue('--color-accent'); // #00eb9b</code></pre> <p>Perfect. Now we have access to our accent color in JavaScript. You know what’s cool? If we change that color in CSS, it updates in JavaScript as well! Handy.</p> <p><span></span></p> <p>What happens, though, when it’s not just one property we need access to in JavaScript, but a whole bunch of them?</p> <pre><code>html { --color-accent: #00eb9b; --color-accent-secondary: #9db4ff; --color-accent-tertiary: #f2c0ea; --color-text: #292929; --color-divider: #d7d7d7; }</code></pre> <p>We end up with JavaScript that looks like this:</p> <pre><code>const colorAccent = getComputedStyle(document.documentElement).getPropertyValue('--color-accent'); // #00eb9b const colorAccentSecondary = getComputedStyle(document.documentElement).getPropertyValue('--color-accent-secondary'); // #9db4ff const colorAccentTertiary = getComputedStyle(document.documentElement).getPropertyValue('--color-accent-tertiary'); // #f2c0ea const colorText = getComputedStyle(document.documentElement).getPropertyValue('--color-text'); // #292929 const colorDivider = getComputedStyle(document.documentElement).getPropertyValue('--color-text'); // #d7d7d7</code></pre> <p>We’re repeating ourselves a lot. We could shorten each one of these lines by abstracting the common tasks to a function.</p> <pre><code>const getCSSProp = (element, propName) => getComputedStyle(element).getPropertyValue(propName); const colorAccent = getCSSProp(document.documentElement, '--color-accent'); // #00eb9b // repeat for each custom property...</code></pre> <p>That helps reduce code repetition, but we still have a less-than-ideal situation. Every time we add a custom property in CSS, we have to write another line of JavaScript to access it. This can and does work fine if we only have a few custom properties. I’ve used this setup on production projects before. But, it’s also possible to automate this.</p> <p>Let’s walk through the process of automating it by making a working thing.</p> <h3>What are we making?</h3> <p>We’ll make a color palette, which is a common feature in pattern libraries. We’ll generate a grid of color swatches from our CSS custom properties. </p> <p>Here’s the <a target="_blank" href="https://codepen.io/tylergaw/pen/57ccb4a5dfbadc7b32a225272994dc3d">complete demo</a> that we’ll build step-by-step.</p> <figure><figcaption>Here’s what we’re aiming for.</figcaption></figure> <p>Let’s set the stage. We’ll use an unordered list to display our palette. Each swatch is a <code></p> <li></code> element that we’ll render with JavaScript. </p> <pre><code><ul class="colors"></ul></code></pre> <p>The CSS for the grid layout isn’t pertinent to the technique in this post, so we won’t look at in detail. It’s available in the <a target="_blank" href="https://codepen.io/tylergaw/pen/57ccb4a5dfbadc7b32a225272994dc3d">CodePen demo</a>.</p> <p>Now that we have our HTML and CSS in place, we’ll focus on the JavaScript. Here’s an outline of what we’ll do with our code:</p> <ol> <li>Get all stylesheets on a page, both external and internal</li> <li>Discard any stylesheets hosted on third-party domains</li> <li>Get all rules for the remaining stylesheets</li> <li>Discard any rules that aren’t basic style rules</li> <li>Get the name and value of all CSS properties</li> <li>Discard non-custom CSS properties</li> <li>Build HTML to display the color swatches</li> </ol> <p>Let’s get to it.</p> <h3>Step 1: Get all stylesheets on a page</h3> <p>The first thing we need to do is get all external and internal stylesheets on the current page. Stylesheets are available as members of the global document.</p> <pre><code>document.styleSheets</code></pre> <p>That returns an array-like object. We want to use array methods, so we’ll convert it to an array. Let’s also put this in a function that we’ll use throughout this post.</p> <pre><code>const getCSSCustomPropIndex = () => [...document.styleSheets];</code></pre> <div> <div><a target="_blank" href="https://codepen.io/tylergaw/pen/2163695e55e0ab5e339675582cbb2462">CodePen Demo</a></div> </div> <p>When we invoke <code>getCSSCustomPropIndex</code>, we see an array of <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet"><code>CSSStyleSheet</code></a> objects, one for each external and internal stylesheet on the current page.</p> <figure><img decoding="async" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/05/jfCaNYSe.png?fit=1024%2C111&ssl=1" alt="The output of getCSSCustomPropIndex, an array of CSSStyleSheet objects"></figure> <h3>Step 2: Discard third-party stylesheets</h3> <p>If our script is running on https://example.com any stylesheet we want to inspect must also be on https://example.com. This is a security feature. From the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet%23Notes">MDN docs for <code>CSSStyleSheet</code></a>:</p> <blockquote> <p>In some browsers, if a stylesheet is loaded from a different domain, accessing <code>cssRules</code> results in <code>SecurityError</code>.</p> </blockquote> <p>That means that if the current page links to a stylesheet hosted on https://some-cdn.com, we can’t get custom properties — or any styles — from it. The approach we’re taking here only works for stylesheets hosted on the current domain.</p> <p><code>CSSStyleSheet</code> objects have an <code>href</code> property. Its value is the full URL to the stylesheet, like https://example.com/styles.css. Internal stylesheets have an <code>href</code> property, but the value will be <code>null</code>.</p> <p>Let’s write a function that discards third-party stylesheets. We’ll do that by comparing the stylesheet’s <code>href </code>value to the <code>current location.origin</code>.</p> <pre><code>const isSameDomain = (styleSheet) => { if (!styleSheet.href) { return true; } 
 return styleSheet.href.indexOf(window.location.origin) === 0; };</code></pre> <p>Now we use <code>isSameDomain</code> as a filter on<code>document.styleSheets</code>.</p> <pre><code>const getCSSCustomPropIndex = () => [...document.styleSheets] .filter(isSameDomain);</code></pre> <div> <div><a target="_blank" href="https://codepen.io/tylergaw/pen/35351c6c426ecbdfd3669d7d3ce03ab6">CodePen Demo</a></div> </div> <p>With the third-party stylesheets discarded, we can inspect the contents of those remaining.</p> <h3>Step 3: Get all rules for the remaining stylesheets</h3> <p>Our goal for <code>getCSSCustomPropIndex</code> is to produce an array of arrays. To get there, we’ll use a combination of array methods to loop through, find values we want, and combine them. Let’s take a first step in that direction by producing an array containing every style rule.</p> <pre><code>const getCSSCustomPropIndex = () => [...document.styleSheets] .filter(isSameDomain) .reduce((finalArr, sheet) => finalArr.concat(...sheet.cssRules), []);</code></pre> <div> <div><a target="_blank" href="https://codepen.io/tylergaw/pen/c99c6be39b1ff5f429e06f3cd7aecc11">CodePen Demo</a></div> </div> <p>We use <code>reduce</code> and <code>concat</code> because we want to produce a flat array where every first-level element is what we’re interested in. In this snippet, we iterate over individual <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet"><code>CSSStyleSheet</code></a> objects. For each one of them, we need its <code>cssRules</code>. <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/cssRules">From the MDN docs</a>:</p> <blockquote> <p>The read-only <code>CSSStyleSheet</code> property cssRules returns a live <code>CSSRuleList</code> which provides a real-time, up-to-date list of every CSS rule which comprises the stylesheet. Each item in the list is a <code>CSSRule</code> defining a single rule.</p> </blockquote> <p>Each CSS rule is the selector, braces, and property declarations. We use the spread operator <code>...sheet.cssRules</code> to take every rule out of the <code>cssRules</code> object and place it in <code>finalArr</code>. When we log the output of <code>getCSSCustomPropIndex</code>, we get a single-level array of <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/CSSRule"><code>CSSRule</code></a> objects.</p> <figure><img decoding="async" src="https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/dHY0PlES.png?fit=1024%2C310&ssl=1" alt="Example output of getCSSCustomPropIndex producing an array of CSSRule objects"></figure> <p>This gives us all the CSS rules for all the stylesheets. We want to discard some of those, so let’s move on.</p> <h3>Step 4: Discard any rules that aren’t basic style rules</h3> <p>CSS rules come in different types. CSS specs define each of the types with a constant name and integer. The most common type of rule is the <code>CSSStyleRule</code>. Another type of rule is the <code>CSSMediaRule</code>. We use those to define media queries, like <code>@media (min-width: 400px) {}</code>. Other types include <code>CSSSupportsRule</code>, <code>CSSFontFaceRule</code>, and <code>CSSKeyframesRule</code>. See the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/CSSRule#Type_constants">Type constants section</a> of the MDN docs for <code>CSSRule</code> for the full list.</p> <p>We’re only interested in rules where we define custom properties and, for the purposes in this post, we’ll focus on <code>CSSStyleRule</code>. That does leave out the <code>CSSMediaRule</code> rule type where it’s valid to define custom properties. We could use an approach that’s similar to what we’re using to extract custom properties in this demo, but we’ll exclude this specific rule type to limit the scope of the demo.</p> <p>To narrow our focus to style rules, we’ll write another array filter:</p> <pre><code>const isStyleRule = (rule) => rule.type === 1;</code></pre> <p>Every <code>CSSRule</code> has a <code>type</code> property that returns the integer for that type constant. We use <code>isStyleRule</code> to filter <code>sheet.cssRules</code>.</p> <pre><code>const getCSSCustomPropIndex = () => [...document.styleSheets] .filter(isSameDomain) .reduce((finalArr, sheet) => finalArr.concat( [...sheet.cssRules].filter(isStyleRule) ), []);</code></pre> <div> <div><a target="_blank" href="https://codepen.io/tylergaw/pen/729393ada1807162d223c47e4207f3e3">CodePen Demo</a></div> </div> <p>One thing to note is that we are wrapping <code>...sheet.cssRules</code> in brackets so we can use the array method filter.</p> <p>Our stylesheet only had <code>CSSStyleRules</code> so the demo results are the same as before. If our stylesheet had media queries or <code>font-face</code> declarations, <code>isStyleRule</code> would discard them.</p> <h3>Step 5: Get the name and value of all properties</h3> <p>Now that we have the rules we want, we can get the properties that make them up. <code>CSSStyleRule</code> objects have a style property that is a <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a> object. It’s made up of standard CSS properties, like <code>color</code>, <code>font-family</code>, and <code>border-radius</code>, plus custom properties. Let’s add that to our <code>getCSSCustomPropIndex</code> function so that it looks at every rule, building an array of arrays along the way:</p> <pre><code>const getCSSCustomPropIndex = () => [...document.styleSheets] .filter(isSameDomain) .reduce((finalArr, sheet) => finalArr.concat( [...sheet.cssRules] .filter(isStyleRule) .reduce((propValArr, rule) => { const props = []; /* TODO: more work needed here */ return [...propValArr, ...props]; }, []) ), []);</code></pre> <p>If we invoke this now, we get an empty array. We have more work to do, but this lays the foundation. Because we want to end up with an array, we start with an empty array by using the accumulator, which is the second parameter of <code>reduce</code>. In the body of the <code>reduce</code> callback function, we have a placeholder variable, <code>props</code>, where we’ll gather the properties. The <code>return</code> statement combines the array from the previous iteration — the accumulator — with the current <code>props</code> array.</p> <p>Right now, both are empty arrays. We need to use <code>rule.style</code> to populate props with an array for every property/value in the current rule:</p> <pre><code>const getCSSCustomPropIndex = () => [...document.styleSheets] .filter(isSameDomain) .reduce((finalArr, sheet) => finalArr.concat( [...sheet.cssRules] .filter(isStyleRule) .reduce((propValArr, rule) => { const props = [...rule.style].map((propName) => [ propName.trim(), rule.style.getPropertyValue(propName).trim() ]); return [...propValArr, ...props]; }, []) ), []);</code></pre> <div> <div><a target="_blank" href="https://codepen.io/tylergaw/pen/8ee326b200560bc5d77fe63d90b32e80">CodePen Demo</a></div> </div> <p><code>rule.style</code> is array-like, so we use the spread operator again to put each member of it into an array that we loop over with map. In the <code>map</code> callback, we return an array with two members. The first member is <code>propName</code> (which includes <code>color</code>, <code>font-family</code>, <code>--color-accent</code>, etc.). The second member is the value of each property. To get that, we use the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue"><code>getPropertyValue</code></a> method of <code>CSSStyleDeclaration</code>. It takes a single parameter, the string name of the CSS property. </p> <p>We use <code>trim</code> on both the name and value to make sure we don’t include any leading or trailing whitespace that sometimes gets left behind.</p> <p>Now when we invoke <code>getCSSCustomPropIndex</code>, we get an array of arrays. Every child array contains a CSS property name and a value.</p> <figure><img decoding="async" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/05/oz9FWtIw.png?fit=1024%2C451&ssl=1" alt="Output of getCSSCustomPropIndex showing an array of arrays containing every property name and value"></figure> <p>This is what we’re looking for! Well, almost. We’re getting every property in addition to custom properties. We need one more filter to remove those standard properties because all we want are the custom properties.</p> <h3>Step 6: Discard non-custom properties</h3> <p>To determine if a property is custom, we can look at the name. We know custom properties must start with two dashes (<code>--</code>). That’s unique in the CSS world, so we can use that to write a filter function:</p> <pre><code>([propName]) => propName.indexOf("--") === 0)</code></pre> <p>Then we use it as a filter on the <code>props</code> array:</p> <pre><code>const getCSSCustomPropIndex = () => [...document.styleSheets].filter(isSameDomain).reduce( (finalArr, sheet) => finalArr.concat( [...sheet.cssRules].filter(isStyleRule).reduce((propValArr, rule) => { const props = [...rule.style] .map((propName) => [ propName.trim(), rule.style.getPropertyValue(propName).trim() ]) .filter(([propName]) => propName.indexOf("--") === 0); 
 return [...propValArr, ...props]; }, []) ), [] );</code></pre> <div> <div><a target="_blank" href="https://codepen.io/tylergaw/pen/c2b59c4754925b1ab2119515db9bd732">CodePen Demo</a></div> </div> <p>In the function signature, we have <code>([propName])</code>. There, we’re using array destructuring to access the first member of every child array in props. From there, we do an <code>indexOf</code> check on the name of the property. If <code>--</code> is not at the beginning of the prop name, then we don’t include it in the <code>props</code> array.</p> <p>When we log the result, we have the exact output we’re looking for: An array of arrays for every custom property and its value with no other properties.</p> <figure><img decoding="async" src="https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/05/ELSQMPP8.png?fit=1024%2C190&ssl=1" alt="The output of getCSSCustomPropIndex showing an array of arrays containing every custom property and its value"></figure> <p>Looking more toward the future, creating the property/value map doesn’t have to require so much code. There’s an alternative in the <a target="_blank" href="https://drafts.css-houdini.org/css-typed-om-1/%23the-stylepropertymap">CSS Typed Object Model Level 1</a> draft that uses <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleRule/styleMap"><code>CSSStyleRule.styleMap</code></a>. The <code>styleMap</code> property is an array-like object of every property/value of a CSS rule. We don’t have it yet, but If we did, we could shorten our above code by removing the <code>map</code>:</p> <pre><code>// ... const props = [...rule.styleMap.entries()].filter(/*same filter*/); // ...</code></pre> <div> <div><a target="_blank" href="https://codepen.io/tylergaw/pen/5061057013e6ddef39cf6b54a8d6bc1f">CodePen Demo</a></div> </div> <p>At the time of this writing, Chrome and Edge have implementations of <code>styleMap</code> but no other major browsers do. Because <code>styleMap</code> is in a draft, there’s no guarantee that we’ll actually get it, and there’s no sense using it for this demo. Still, it’s fun to know it’s a future possibility!</p> <p>We have the data structure we want. Now let’s use the data to display color swatches.</p> <h3>Step 7: Build HTML to display the color swatches</h3> <p>Getting the data into the exact shape we needed was the hard work. We need one more bit of JavaScript to render our beautiful color swatches. Instead of logging the output of <code>getCSSCustomPropIndex</code>, let’s store it in variable.</p> <pre><code>const cssCustomPropIndex = getCSSCustomPropIndex();</code></pre> <p>Here’s the HTML we used to create our color swatch at the start of this post:</p> <pre><code><ul class="colors"></ul></code></pre> <p>We’ll use <code>innerHTML</code> to populate that list with a list item for each color:</p> <pre><code>document.querySelector(".colors").innerHTML = cssCustomPropIndex.reduce( (str, [prop, val]) => `${str}<li class="color"> <b class="color__swatch" style="--color: ${val}"></b> <div class="color__details"> <input value="${prop}" readonly /> <input value="${val}" readonly /> </div> </li>`, "");</code></pre> <div> <div><a target="_blank" href="https://codepen.io/tylergaw/pen/57ccb4a5dfbadc7b32a225272994dc3d">CodePen Demo</a></div> </div> <p>We use reduce to iterate over the custom prop index and build a single HTML-looking string for <code>innerHTML</code>. But <code>reduce</code> isn’t the only way to do this. We could use a <code>map</code> and <code>join</code> or <code>forEach</code>. Any method of building the string will work here. This is just my preferred way to do it.</p> <p>I want to highlight a couple specific bits of code. In the <code>reduce</code> callback signature, we’re using array destructuring again with <code>[prop, val]</code>, this time to access both members of each child array. We then use the <code>prop</code> and <code>val</code> variables in the body of the function.</p> <p>To show the example of each color, we use a <code>b</code> element with an inline style:</p> <pre><code><b class="color__swatch" style="--color: ${val}"></b></code></pre> <p>That means we end up with HTML that looks like:</p> <pre><code><b class="color__swatch" style="--color: #00eb9b"></b></code></pre> <p>But how does that set a background color? In the <a target="_blank" href="https://codepen.io/tylergaw/pen/57ccb4a5dfbadc7b32a225272994dc3d">full CSS</a> we use the custom property <code>--color</code> as the value of <code>background-color</code> for each <code>.color__swatch</code>. Because external CSS rules inherit from inline styles, <code>--color</code> is the value we set on the <code>b</code> element.</p> <pre><code>.color__swatch { background-color: var(--color); /* other properties */ }</code></pre> <p>We now have an HTML display of color swatches representing our CSS custom properties!</p> <div>CodePen Embed Fallback</div> <hr> <p>This demo focuses on colors, but the technique isn’t limited to custom color props. There’s no reason we couldn’t expand this approach to generate other sections of a pattern library, like fonts, spacing, grid settings, etc. Anything that might be stored as a custom property can be displayed on a page automatically using this technique.</p> <p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/how-to-get-all-custom-properties-on-a-page-in-javascript/">How to Get All Custom Properties on a Page in JavaScript</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-3280771"> <h2><a class="title" href="http://www.webmastersgallery.com/2020/06/08/analyzing-notion-app-performance/" rel="bookmark">Analyzing Notion app performance</a></h2> <div class="info"> <span class="date">June 8th, 2020</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2020/06/08/analyzing-notion-app-performance/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="https://3perf.com/blog/notion/"><img decoding="async" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/notion.png?fit=1024%2C674&ssl=1" alt=""></a></div> <p>Here’s a fantastic case study where Ivan Akulov looks at the rather popular writing app Notion and how the team might improve the performance in a variety of ways; through code splitting, removing unused vendor code, module concatenation, and deferring JavaScript execution. Not so long ago, we made a list for <a target="_blank" href="https://css-tricks.com/web-performance-checklist/">getting started with web performance</a> but this article goes so much further into the app side of things: making sure that users are loading only the JavaScript that they need, and doing that as quickly as possible.</p> <p><span></span></p> <figure></figure> <p>I love that this piece just doesn’t feel like dunking on the Notion team, and bragging about how Ivan might do things better. There’s always room for improvement and constructive feedback is better than guilting someone into it. Yay for making things fast while being nice about it!</p> <p><a target="_blank" href="https://3perf.com/blog/notion/" title="Direct link to featured article">Direct Link to Article</a> — <a target="_blank" href="https://css-tricks.com/analyzing-notion-app-performance/">Permalink</a></p> <p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/analyzing-notion-app-performance/">Analyzing Notion app performance</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-3280658"> <h2><a class="title" href="http://www.webmastersgallery.com/2020/06/08/open-source-vs-proprietary-software/" rel="bookmark">Open Source vs Proprietary Software</a></h2> <div class="info"> <span class="date">June 8th, 2020</span> <span class="author"></span> <span class="comments"><a href="http://www.webmastersgallery.com/2020/06/08/open-source-vs-proprietary-software/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="http://feedproxy.google.com/~r/Noupe/~3/WNCQEPKFxQ0/open-source-vs-proprietary-software.html"><img decoding="async" src="https://www.noupe.com/wp-content/uploads/2020/06/kaleidico-26MJGnCM0Wc-unsplash-1-1024x683.jpg" alt=""></a></div> <div></div> <p>When it comes to adopting a new software product for a project, there are many choices that one needs to make. A lot of factors need to be kept in mind, depending on what functions the new software will be expected to perform. One such question that needs to be answered before you can make a decision is, “Between open source vs proprietary software, which one would be better for me?”</p> <p>To choose one over the other, you would want to see a thorough comparison of both options. However, in order to choose the perfect software solution for your project, you need to know exactly what the terms ‘open source’ and ‘proprietary’ imply. Once you are clear on that, we will give you a simple yet comprehensive ‘open source vs proprietary software’ comparison, detailing the pros and cons of each.</p> <p>So let’s begin!</p> <h2><strong>What Is Open Source Software?</strong></h2> <p>There are often thousands – even millions! – of lines of code that go into developing an average computer program. That code is not always accessible to the users, but when it is, the software is said to be open source.</p> <p>In simple words, open source software refers to software that allows its users to access the “behind the scenes” source code. They are also free to make any changes they feel necessary before they start using the software. Open source licenses also allow unrestricted distribution of code for all purposes, and they are often provided free of cost.</p> <h2><strong>What Is Proprietary Software?</strong></h2> <p>As we mentioned in the previous section, not all software developers allow users to access the code for their software. Proprietary software is the property of the creator and is legally owned by them.</p> <p>Proprietary software offers restricted insight into its technical workings. The code is hidden, and the software itself also often has to be bought. There are very strict conditions regarding its usage, violating which may even land you in some serious legal trouble! Often, the distribution of this kind of software is also prohibited.</p> <h2><strong>Comparison of Open Source vs Proprietary Software</strong></h2> <p>Now that we know what each category of software entails, we move on to the actual purpose of our discussion. Let us compare the various factors that the entire “open source vs proprietary software” debate depends on.</p> <h3><strong>Ownership</strong></h3> <p>Open source software may be owned by one entity or be freely available to the developer community. This community is then responsible for the evolution of the code. There is no restriction regarding its usage or distribution as long as the conditions documented in the open source license are being met.</p> <p>The ownership works differently for bespoke proprietary software. For example, if you ask <a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly93d3cuZ29vZGNvcmUuY28udWsv&feed-stats-url-post-id=112216">GoodCore</a>, a well-known software development company, to build a dedicated software product for your organisation, then you will be the sole owner of that product. However, this ownership will not be passed onto anyone else. The customers who you license this product to will not own the code, but will own the rights to use the software as they please (given that they do not violate the terms of the end-user agreement, of course!). You can also offer additional services as part of that license.</p> <h3><strong>Independence</strong></h3> <p>With open source software, you have the freedom to work with fellow coders from the developer community. You can pick and choose the parts of the software that you want to modify for your personal use. However, it is a very taxing process.</p> <p>In the case of proprietary software, you can rely on the software provider for everything, from development to support. But then you will not have the freedom to make any modifications to the software. On top of that, you might end up facing a vendor lock-in situation. (For example, you purchase a license for <a target="_blank" href="https://www.noupe.com/development/web-application-development-in-2020.html">web application development</a> services that are provided by a company, X. After a few years, company X decides to increase its fees. You will be stuck with X because the cost of switching to a different vendor would cost an arm and a leg!)</p> <h3><strong>Ease of Use</strong></h3> <p>With increased independence, open source developers sometimes get carried away, causing the project to become unnecessarily complex or cluttered. This makes the software more developer-friendly but less user-friendly, making it especially harder to use for people with little or no technical knowledge.</p> <p>Proprietary software, in contrast, is specially developed with the end-users in mind. A lot of thought and effort is put into its development, such that it is easy and intuitive for the users. No matter how complex the ideology behind the software’s code, the interface is tried and tested, and kept as simple as possible to provide maximum usability.</p> <h3><strong>Security</strong></h3> <p>When you are picking a new software application to be implemented for a special purpose, you need it to be highly safe and secure. Thus, we must address the security concerns surrounding open source vs proprietary software.</p> <p>Making the entire source code for an application publicly available opens up a plethora of vulnerabilities. The purpose of sharing code is to allow the community to test the code for bugs and potential security risks so that it can be improved further. This greatly improves the quality of the software. However, some people may take advantage of the situation and exploit open source systems on the basis of that code.</p> <p>On the other hand, proprietary software has all its code hidden. This prevents the infrastructure of the software from being exposed to cybercriminals. However, this does not make the software completely immune from security risks; and you cannot even check because you cannot see the code! On top of that, you would have to blindly trust your software provider. Would you be willing to do that?</p> <h3><strong>Updates, Support, and Maintenance</strong></h3> <p>Often, users don’t wish to update their software products once a stable release has been properly implemented. Open source software does not have to be forcefully updated. However, it requires constant time and effort if you do want to keep it updated. If you run into a problem, you can always ask fellow developers who are part of the community. They will happily help you out; after all, this was one of the major reasons why the concept of open source software was introduced in the first place! What will you do if you invest years of effort into a particular open source project only to see it ‘forgotten’? Thus, depending on open source community support carries some level of risk and uncertainty.</p> <p>This problem is often avoided with proprietary software. Most licenses come with packages for after-sales support, regular updates, and maintenance from the vendor’s side. Here’s the catch: the vendor may not care whether you want a particular update implemented or not!</p> <h3><strong>Costs</strong></h3> <p>For those of you looking for a cost-effective software solution to implement in your organisation, this is a crucial point of discussion in the open source vs proprietary debate.</p> <p>You need to think of the costs of each type of software as a trade-off between the two key resources: time and cost.</p> <p>Open source software is usually free to use. If not, the fees are often minimal. However, as we discussed before, it may need some time to reach a stable build. There are issues regarding modifications, upgrades, and maintenance, all of which takes time, even though it is free of cost.</p> <p>While some proprietary software apps are free, most of them incur heavy costs in the form of license fees. However, once you pay the fees, you can then avail the many services that the vendor may offer as part of the software package. Thus, they are great, time-sensitive solutions.</p> <h2><strong>Wrapping up</strong></h2> <p>Proprietary software would be a great pick if you don’t have the time to experiment with new technologies, or if you have the time and money to invest in a license that requires minimal input and effort from your side.</p> <p>However, if you possess sound development knowledge and wish to work with a much more flexible, customisable, and cost-effective software application that you can modify according to your needs, open source software would be best for you.</p> <p>Now that you are aware of the exact differences between open source vs proprietary software, you will find it easier to make your decision. Your choice should depend on not only the features of each type of software but also how they will fit into your particular situation.</p> <hr> <p><em>Photo by </em><a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly91bnNwbGFzaC5jb20vQGthbGVpZGljbz91dG1fc291cmNlPXVuc3BsYXNoJmFtcDt1dG1fbWVkaXVtPXJlZmVycmFsJmFtcDt1dG1fY29udGVudD1jcmVkaXRDb3B5VGV4dA%3D%3D&feed-stats-url-post-id=112216"><em>Kaleidico</em></a><em> on </em><a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly91bnNwbGFzaC5jb20vcy9waG90b3MvZGV2ZWxvcG1lbnQ%2FdXRtX3NvdXJjZT11bnNwbGFzaCZhbXA7dXRtX21lZGl1bT1yZWZlcnJhbCZhbXA7dXRtX2NvbnRlbnQ9Y3JlZGl0Q29weVRleHQ%3D&feed-stats-url-post-id=112216"><em>Unsplash</em></a></p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-3280566"> <h2><a class="title" href="http://www.webmastersgallery.com/2020/06/08/how-to-implement-artificial-intelligence-in-mobile-app-development/" rel="bookmark">How to Implement Artificial Intelligence in Mobile App Development</a></h2> <div class="info"> <span class="date">June 8th, 2020</span> <span class="author"></span> <span class="comments"><a href="http://www.webmastersgallery.com/2020/06/08/how-to-implement-artificial-intelligence-in-mobile-app-development/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="http://feedproxy.google.com/~r/Noupe/~3/8J0e4-ZZoh4/artificial-intelligence-in-mobile-app-development.html"><img decoding="async" src="https://www.noupe.com/wp-content/uploads/2020/06/Untitled-1-1.jpg" alt=""></a></div> <div></div> <p>Artificial Intelligence is one of the biggest technological innovation that has been growing over the years. The world has been able to witness the power of this technology as it is almost used in every sphere of life. From Siri to Google Assistant, we have this technology right on our fingertips.</p> <p>Technology like Artificial Intelligence exemplifies perfection and unlocks new possibilities that everyone can reach out to seamlessly. Today we are living in a world that is technologically driven and upscales itself every single day. The integration of AI in app development is practised for a long time now and has yielded conic results.</p> <p>With certainty, it can be said that there are various <a target="_blank" href="https://www.noupe.com/essentials/benefits-of-artificial-intelligence-for-business.html">benefits of Artificial Intelligence</a> in mobile app development which has been witnessed by every <a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly93d3cubW9iaWxlYXBwZGFpbHkuY29tL21vYmlsZS1hcHAtZGV2ZWxvcG1lbnQvY29tcGFuaWVz&feed-stats-url-post-id=112210">app development company</a> from all around the globe and here’s a crux of it:</p> <ul> <li>AI is a reality, which means it is present everywhere. Trending technologies like Augmented Reality, <a target="_blank" href="https://www.noupe.com/design/best-vr-apps-in-2020.html">Virtual Reality</a>, Chatbots, etc have Artificial Intelligence completely immersed.</li> <li>When it comes to perfection, AI is widely chosen. The ability of this technology to be accurate is striking. Not only this, but AI also sets a fast pace for everything.</li> <li>When amalgamated with mobile app technology, AI can spike rates of customer satisfaction and serve them more efficiently.</li> <li><a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly93d3cuZm9yYmVzLmNvbS9zaXRlcy9sb3Vpc2NvbHVtYnVzLzIwMTkvMDkvMDgvc3RhdGUtb2YtYWktYW5kLW1hY2hpbmUtbGVhcm5pbmctaW4tMjAxOS8jMmQ5MzE0ZWQxYThk&feed-stats-url-post-id=112210">According to Forbes</a>, Sales & Marketing prioritize Machine Learning and AI more than any other department in the industry.</li> </ul> <p>Mobile application development is being completely transformed after the introduction of this technology and offering an ample amount of services to the users. Needless to say that the way user’s data was extracted has completely changed over time and people are able to highly personalize mobile applications according to their needs. Let’s now take a closer look at how artificial intelligence can be integrated into mobile applications.</p> <h2><strong>How To Incorporate AI In App Development </strong></h2> <p>Applying AI in app development can make next-level mobile applications. Let’s take a look at how to wisely use AI:</p> <h3>Understanding The Risks and Demands</h3> <p>There are certain factors that need to take care of while app development and knowing the problems that can be solved through AI will allow the developer to implement AI technology in a much better way. Once the complexities have been ruled out, adding this technology will be easy. But if AI is implemented in almost every feature then this technology will lose its essence completely.</p> <h3>APIs Are Not Everything</h3> <p>API cannot solve every problem and the more you use them, the vague they will get. But using AI will improve the design of API. with this technology building and processing APIs are much easier and it changes the design of API forever. </p> <h3>Know What Your Data Is All About</h3> <p>This phase will allow you to analyze things out and the kind of data AI will be putting in front of the users. Having a keen understanding of where your data is actually coming from will help you refine the quality. With this, your AI will be clean, informative, and interactive.</p> <h3>Data Scientists To The Rescue</h3> <p>As mentioned earlier, data refinement is an important task in order to have your AI module clean. This process can become less cumbersome if you take the help of a data scientist. A data scientist can level up the whole app development process using AI.</p> <p>The future of AI is bright and the AI software market will be dominating the future of app development as well. AI has the capability to design UX completely. </p> <figure><img decoding="async" src="https://www.noupe.com/wp-content/uploads/2020/06/image1.png" alt=""><figcaption><a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly9oYWNrZXJub29uLmNvbS9hcnRpZmljaWFsLWludGVsbGlnZW5jZS1pbi1tb2JpbGUtYXBwLWRldmVsb3BtZW50LWluLTIwMjAtd2xndzN5MnU%3D&feed-stats-url-post-id=112210">Image</a></figcaption></figure> <p>There are certain benefits of having artificial intelligence in mobile app development. The first and foremost thing that needs to be done is to know what problems AI will be able to address once it is amalgamated in app development. While there can be certain challenges in this technology, all of it should be tackled with ease and kept in control.</p> <h3>For Added Mobile App Security</h3> <p>The process of authentication can be brisk if AI technology is inherited. If this process is increased then the security of the app will be well maintained. It is estimated that AI will be able to turn down the number of security breaches and keep data secure. It is not only limited to this, with AI, security can be personalized accompanied by various suggestions in the coding phase of the app. </p> <h3>Relevant Ads Appearance</h3> <p>Ads can be a headache but with AI they are not, as this technology ensures that ads appearing on your screen is highly relevant and not out of the blue. This can be achieved by understanding user’s behavior and curating adds according to retrieved data. This way, companies can be more focused on understanding needs, and costumers will be satisfied too.</p> <h3>Seamless Searching Process</h3> <p>If you don’t want to waste much of your time searching for things on the internet, the AI-driven mobile application can be a feasible option for you. With this technology, your search engine is enhanced and works on intuition which lets you save a lot of time and search for things on the go. For example- Google, with search engines like Google all you need to type is one letter and predictive texts are displayed according to your searching behavior. </p> <h3>Digital Assistance</h3> <p>Digital assistance is present round the clock serving your general queries right on time without any delay. These digital assistants can be in forms of Chatbots, which are clearly leading customer care services. Chatbots have brought massive changes in customer experience and satisfaction scales have certainly gone up after the emergence of this technology. </p> <h4><strong>Summing Up!</strong></h4> <p>There are several technologies that have geared up to set a benchmark but artificial intelligence has clearly left a huge impact by providing various facilities that took industries by the storm. This technology is not only serving mobile app development sectors but other major sectors like Healthcare, E-commerce, Education, Manufacturing, and so forth. </p> <p>As smartphones and mobile applications are embracing such technologies, users to are enchanted with how easy it is to manage everything right in front of the eyes. Strong features of AI like swift data collection, advanced search options, and a more personalized approach, AI has been able to make lives facile. It’s not only about the users using such services, but several organizations like mobile app development have noticed faster developmental rates and easy integration. </p> <hr> <p><a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly93d3cuZnJlZXBpay5jb20vZnJlZS1waG90b3MtdmVjdG9ycy90ZW1wbGF0ZQ%3D%3D&feed-stats-url-post-id=112210">Template vector created by freepik – www.freepik.com</a></p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-3280567"> <h2><a class="title" href="http://www.webmastersgallery.com/2020/06/08/moving-prescription-to-the-digital-e-prescribe-2/" rel="bookmark">Moving Prescription to the Digital: e-Prescribe</a></h2> <div class="info"> <span class="date">June 8th, 2020</span> <span class="author"></span> <span class="comments"><a href="http://www.webmastersgallery.com/2020/06/08/moving-prescription-to-the-digital-e-prescribe-2/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="http://feedproxy.google.com/~r/Noupe/~3/9XjEgE_PXVA/e-prescribe.html"><img decoding="async" src="https://www.noupe.com/wp-content/uploads/2020/06/national-cancer-institute-L8tWZT4CcVQ-unsplash-1024x683.jpg" alt=""></a></div> <div></div> <p>For quite a long time prescriptions information has been shared electronically, via e-mail, text messages, or fax, although the legal script has remained the piece of paper, signed by a healthcare provider.</p> <p>Following the global tendency of workflow automation and digitalization prescription routine changes as well so that the legal document converts into the prescription data which is stored on secure online servers and can be accessed at any time from any device. All the user needs is credentials and permission from the patient who is the one to assign and manage roles on the account. The signed piece of paper is no longer needed, as of now, the new electronic type of prescription is optional and patients may also select to get a paper prescription copy if they want.</p> <p>Over the last few years, there has been a significant increase in demand for more advanced EHR services, resulting in many new, highly innovative healthcare IT (HIT) businesses. <a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly93d3cuY2hldHUuY29tL2hlYWx0aGNhcmUvYWxsc2NyaXB0cy5waHA%3D&feed-stats-url-post-id=112206">HIT organizations offering these solutions</a> are under immense pressure both to satisfy the unique needs of their clients and to provide the key features that consumers demand from any <a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly93d3cuam90Zm9ybS5jb20vYmxvZy9oaXBhYS1hbmQtZWhyLw%3D%3D&feed-stats-url-post-id=112206">electronic health record (EHR</a>) – all while tightly monitoring costs.</p> <h4>COMMISSIONS AFFORDABILITY with ePrescribing:</h4> <ul> <li>Hundreds of participants in the data exchange and integration business Provide the prescribers with the full set of data functions</li> <li>Have your way Integrate with Web API (SSO) to reduce maintenance and upgrade Choose full integration for maximum control with your own BUI</li> <li>Known Leader Innovation of electronic pharmacy for two decades, Automated updates helps you satisfy with confidence continuously changing regulatory requirements.</li> <li>Training 200,000 ePrescribe users connect Wide variety of easy to use apps A $2b total R&D from 2003 sponsored by a top 10 HIT group. Self-Developed e-prescribing vs “Plug-and-Play” with Veradigm ePrescribe</li> </ul> <p>SELF-DEVELOPED ePrescribe is Expensive, time-consuming, has a high learning curve and is not focused on your core capability, besides it requires constant updating for new mandates vs VERADIGM ePrescribe being straightforward and cost-effective, it keeps your focus where it needs to be, experience that pre-dates EMRs plus Automatic updates keep you ahead of regulatory changes.</p> <h4>A Moving Target</h4> <p>E-Prescribing is an option for a healthcare provider that gives him the capability to electronically transmit an actual original prescription straight to a pharmacy. The automation of this process provides a lot of benefits such as the document becomes error-free, while the handwriting copy could contain manual mistakes. Also, the copy of the prescription is easier to understand and reaches the pharmacy immediately, which totally improves the quality of patient care, so a patient will be aware of the current drug availability at the chosen location and the prescription will be ready for a pick up by the time the person gets to the pharmacy.</p> <p>Electronic pharmacy regulatory requirements are increasingly tighter and higher. To handle updates efficiently through a professional HIT service. The environment that is changing — especially because of the risk of wrongness — is a virtual nightmare. Health care providers expect more than just paperless prescriptions from today’s prescription options. With its diverse collection of advanced features, Veradigm ePrescribe helps you fulfill this goal.</p> <h4><a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly92ZXJhZGlnbS5jb20vZXByZXNjcmliZS8%3D&feed-stats-url-post-id=112206">Veradigm ePrescribe</a> Features:</h4> <p>VERADIGM gives users access to a discounted health plan or a pharmacy benefit manager, cash pricing, therapeutic alternatives, and competitive prices in different pharmacies, providing prescription price transparency at the health care point. All information is patient-specific and available through the workflow of e-prescription. Hundreds of thousands of vendors will use it for hundreds of millions of transactions for market transparency.</p> <p>HCP interviewees indicated that patients save 93 percent of the time for estimating price and/or treatment-based alternative details on their prescription. The opportunity to include insurance and pricing data has a positive effect on 85 percent of HCP respondents on patient satisfaction with their practice.</p> <h4>PATIENT FINANCIAL ASSISTANCE</h4> <p>The authorization of workflow is specifically concerned with the automated delivery of program information. It enables users to identify financial aid programs available within the ordinary workflows for particular patients, provide quick and easy access and print available prescription coupons, and also helps to decrease the costs, compliance and adherence of patients out of pocket</p> <p>VERADIGM Electronic Prior Authorization (EPA) allows your users to automate the submission of authorization approval within your e-prescribing workflow, reduces wait time for additional insurance approvals on medications—from days or weeks to minutes and provides the ability to Spend less time on the phone with insurance companies and pharmacies.</p> <h4>EPCS AND PDMP</h4> <p>Please take Proactive Steps to Assist in Addressing Opioid Addiction through EPCS and PDMP * Integration (Prescription Drug Monitoring Programme). It allows you to directly and remotely pass patient prescriptions to your preferred pharmacy. Enhances patient safety by reducing unsafe dosages, doctor shopping, and potential abuse and improving patient satisfaction with an efficient process of form enforcement and ensuring compliance with the regulation of state PDMP programs.</p> <p>VERADIGM ePrescribe MOBILE provides the option to the user to access e-prescribing from anywhere with internet connection, deliver a single workflow across desktop and mobile devices for your users, providing the ability to move through patient files effectively and in a timely manner. Besides, it gives Efficient real-time access through one-touch user authentication.</p> <h3>How to get started</h3> <p>By visiting our registration website, you can register for ePrescribe. The number, NPI number, state number, and expiration dates are required for your DEA license number. To verify the identity and license information, you are required to answer several questions. Once the registration process has been completed, you will be sent an email to review your DEA, your last four social security measures and answer your secret question. Then you will be asked to enter a username and password in your practice spot. You can now sign up for ePrescribe and add other clinical staff or suppliers on your account. You may instantly start prescribing.</p> <p>E-prescribing has proved its significant role in the process of decreasing prescription errors and helping enhance patients’ information safety and data accessibility. The United States government views electronic medical records as one of the key factors for successful creation of a national health information system.</p> <hr> <p><em>Photo by </em><a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly91bnNwbGFzaC5jb20vQG5jaT91dG1fc291cmNlPXVuc3BsYXNoJmFtcDt1dG1fbWVkaXVtPXJlZmVycmFsJmFtcDt1dG1fY29udGVudD1jcmVkaXRDb3B5VGV4dA%3D%3D&feed-stats-url-post-id=112206"><em>National Cancer Institute</em></a><em> on </em><a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly91bnNwbGFzaC5jb20vcy9waG90b3MvZG9jdG9yLXBob25lP3V0bV9zb3VyY2U9dW5zcGxhc2gmYW1wO3V0bV9tZWRpdW09cmVmZXJyYWwmYW1wO3V0bV9jb250ZW50PWNyZWRpdENvcHlUZXh0&feed-stats-url-post-id=112206"><em>Unsplash</em></a></p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-3280553"> <h2><a class="title" href="http://www.webmastersgallery.com/2020/06/08/moving-prescription-to-the-digital-e-prescribe/" rel="bookmark">Moving Prescription to the Digital: e-Prescribe</a></h2> <div class="info"> <span class="date">June 8th, 2020</span> <span class="author"></span> <span class="comments"><a href="http://www.webmastersgallery.com/2020/06/08/moving-prescription-to-the-digital-e-prescribe/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="http://feedproxy.google.com/~r/Noupe/~3/67og7bsPFZw/moving-prescription-to-the-digital-e-prescribe.html"><img decoding="async" src="https://www.noupe.com/wp-content/uploads/2020/06/national-cancer-institute-L8tWZT4CcVQ-unsplash-1024x683.jpg" alt=""></a></div> <div></div> <p>For quite a long time prescriptions information has been shared electronically, via e-mail, text messages, or fax, although the legal script has remained the piece of paper, signed by a healthcare provider.</p> <p>Following the global tendency of workflow automation and digitalization prescription routine changes as well so that the legal document converts into the prescription data which is stored on secure online servers and can be accessed at any time from any device. All the user needs is credentials and permission from the patient who is the one to assign and manage roles on the account. The signed piece of paper is no longer needed, as of now, the new electronic type of prescription is optional and patients may also select to get a paper prescription copy if they want.</p> <p>Over the last few years, there has been a significant increase in demand for more advanced EHR services, resulting in many new, highly innovative healthcare IT (HIT) businesses. <a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly93d3cuY2hldHUuY29tL2hlYWx0aGNhcmUvYWxsc2NyaXB0cy5waHA%3D&feed-stats-url-post-id=112206">HIT organizations offering these solutions</a> are under immense pressure both to satisfy the unique needs of their clients and to provide the key features that consumers demand from any <a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly93d3cuam90Zm9ybS5jb20vYmxvZy9oaXBhYS1hbmQtZWhyLw%3D%3D&feed-stats-url-post-id=112206">electronic health record (EHR</a>) – all while tightly monitoring costs.</p> <h4>COMMISSIONS AFFORDABILITY with ePrescribing:</h4> <ul> <li>Hundreds of participants in the data exchange and integration business Provide the prescribers with the full set of data functions</li> <li>Have your way Integrate with Web API (SSO) to reduce maintenance and upgrade Choose full integration for maximum control with your own BUI</li> <li>Known Leader Innovation of electronic pharmacy for two decades, Automated updates helps you satisfy with confidence continuously changing regulatory requirements.</li> <li>Training 200,000 ePrescribe users connect Wide variety of easy to use apps A $2b total R&D from 2003 sponsored by a top 10 HIT group. Self-Developed e-prescribing vs “Plug-and-Play” with Veradigm ePrescribe</li> </ul> <p>SELF-DEVELOPED ePrescribe is Expensive, time-consuming, has a high learning curve and is not focused on your core capability, besides it requires constant updating for new mandates vs VERADIGM ePrescribe being straightforward and cost-effective, it keeps your focus where it needs to be, experience that pre-dates EMRs plus Automatic updates keep you ahead of regulatory changes.</p> <h4>A Moving Target</h4> <p>E-Prescribing is an option for a healthcare provider that gives him the capability to electronically transmit an actual original prescription straight to a pharmacy. The automation of this process provides a lot of benefits such as the document becomes error-free, while the handwriting copy could contain manual mistakes. Also, the copy of the prescription is easier to understand and reaches the pharmacy immediately, which totally improves the quality of patient care, so a patient will be aware of the current drug availability at the chosen location and the prescription will be ready for a pick up by the time the person gets to the pharmacy.</p> <p>Electronic pharmacy regulatory requirements are increasingly tighter and higher. To handle updates efficiently through a professional HIT service. The environment that is changing — especially because of the risk of wrongness — is a virtual nightmare. Health care providers expect more than just paperless prescriptions from today’s prescription options. With its diverse collection of advanced features, Veradigm ePrescribe helps you fulfill this goal.</p> <h4><a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly92ZXJhZGlnbS5jb20vZXByZXNjcmliZS8%3D&feed-stats-url-post-id=112206">Veradigm ePrescribe</a> Features:</h4> <p>VERADIGM gives users access to a discounted health plan or a pharmacy benefit manager, cash pricing, therapeutic alternatives, and competitive prices in different pharmacies, providing prescription price transparency at the health care point. All information is patient-specific and available through the workflow of e-prescription. Hundreds of thousands of vendors will use it for hundreds of millions of transactions for market transparency.</p> <p>HCP interviewees indicated that patients save 93 percent of the time for estimating price and/or treatment-based alternative details on their prescription. The opportunity to include insurance and pricing data has a positive effect on 85 percent of HCP respondents on patient satisfaction with their practice.</p> <h4>PATIENT FINANCIAL ASSISTANCE</h4> <p>The authorization of workflow is specifically concerned with the automated delivery of program information. It enables users to identify financial aid programs available within the ordinary workflows for particular patients, provide quick and easy access and print available prescription coupons, and also helps to decrease the costs, compliance and adherence of patients out of pocket</p> <p>VERADIGM Electronic Prior Authorization (EPA) allows your users to automate the submission of authorization approval within your e-prescribing workflow, reduces wait time for additional insurance approvals on medications—from days or weeks to minutes and provides the ability to Spend less time on the phone with insurance companies and pharmacies.</p> <h4>EPCS AND PDMP</h4> <p>Please take Proactive Steps to Assist in Addressing Opioid Addiction through EPCS and PDMP * Integration (Prescription Drug Monitoring Programme). It allows you to directly and remotely pass patient prescriptions to your preferred pharmacy. Enhances patient safety by reducing unsafe dosages, doctor shopping, and potential abuse and improving patient satisfaction with an efficient process of form enforcement and ensuring compliance with the regulation of state PDMP programs.</p> <p>VERADIGM ePrescribe MOBILE provides the option to the user to access e-prescribing from anywhere with internet connection, deliver a single workflow across desktop and mobile devices for your users, providing the ability to move through patient files effectively and in a timely manner. Besides, it gives Efficient real-time access through one-touch user authentication.</p> <h3>How to get started</h3> <p>By visiting our registration website, you can register for ePrescribe. The number, NPI number, state number, and expiration dates are required for your DEA license number. To verify the identity and license information, you are required to answer several questions. Once the registration process has been completed, you will be sent an email to review your DEA, your last four social security measures and answer your secret question. Then you will be asked to enter a username and password in your practice spot. You can now sign up for ePrescribe and add other clinical staff or suppliers on your account. You may instantly start prescribing.</p> <p>E-prescribing has proved its significant role in the process of decreasing prescription errors and helping enhance patients’ information safety and data accessibility. The United States government views electronic medical records as one of the key factors for successful creation of a national health information system.</p> <hr> <p><em>Photo by </em><a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly91bnNwbGFzaC5jb20vQG5jaT91dG1fc291cmNlPXVuc3BsYXNoJmFtcDt1dG1fbWVkaXVtPXJlZmVycmFsJmFtcDt1dG1fY29udGVudD1jcmVkaXRDb3B5VGV4dA%3D%3D&feed-stats-url-post-id=112206"><em>National Cancer Institute</em></a><em> on </em><a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly91bnNwbGFzaC5jb20vcy9waG90b3MvZG9jdG9yLXBob25lP3V0bV9zb3VyY2U9dW5zcGxhc2gmYW1wO3V0bV9tZWRpdW09cmVmZXJyYWwmYW1wO3V0bV9jb250ZW50PWNyZWRpdENvcHlUZXh0&feed-stats-url-post-id=112206"><em>Unsplash</em></a></p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div id="pagenavi"> <span class="newer"><a href="http://www.webmastersgallery.com/2020/06/page/11/" >Newer Entries</a></span> <span class="older"><a href="http://www.webmastersgallery.com/2020/06/page/13/" >Older Entries</a></span> <div class="fixed"></div> </div> </div> <!-- main END --> <!-- sidebar START --> <div id="sidebar"> <!-- sidebar north START --> <div id="northsidebar" class="sidebar"> <!-- feeds --> <div class="widget widget_feeds"> <div class="content"> <div id="subscribe"> <a rel="external nofollow" id="feedrss" title="Subscribe to this blog..." href="http://www.webmastersgallery.com/feed/"><abbr title="Really Simple Syndication">RSS</abbr></a> </div> <div class="fixed"></div> </div> </div> <!-- showcase --> <div id="text-389627311" class="widget widget_text"> <div class="textwidget"><a href="http://feeds2.feedburner.com/webmastersgallery" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds2.feedburner.com/webmastersgallery" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe for latest Updates</a></div> </div><div id="text-389629461" class="widget widget_text"> <div class="textwidget"><form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=webmastersgallery', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="webmastersgallery" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank" rel="noopener">FeedBurner</a></p></form></div> </div></div> <!-- sidebar north END --> <div id="centersidebar"> <!-- sidebar east START --> <div id="eastsidebar" class="sidebar"> <!-- categories --> <div class="widget widget_categories"> <h3>Categories</h3> <ul> <li class="cat-item cat-item-518"><a href="http://www.webmastersgallery.com/category/affiliate-programs/">Affiliate Programs</a> </li> <li class="cat-item cat-item-147"><a href="http://www.webmastersgallery.com/category/design/">Designing</a> </li> <li class="cat-item cat-item-519"><a href="http://www.webmastersgallery.com/category/domain-names/">Domain Names</a> </li> <li class="cat-item cat-item-37"><a href="http://www.webmastersgallery.com/category/e-commerce/">E-commerce</a> </li> <li class="cat-item cat-item-509"><a href="http://www.webmastersgallery.com/category/internet-directories/">Internet Directories</a> </li> <li class="cat-item cat-item-510"><a href="http://www.webmastersgallery.com/category/message-boards/">Message Boards</a> </li> <li class="cat-item cat-item-1"><a href="http://www.webmastersgallery.com/category/uncategorized/">Others</a> </li> <li class="cat-item cat-item-506"><a href="http://www.webmastersgallery.com/category/programming/">Programming</a> </li> <li class="cat-item cat-item-511"><a href="http://www.webmastersgallery.com/category/promotion-and-marketing/">Promotion and Marketing</a> </li> <li class="cat-item cat-item-534"><a href="http://www.webmastersgallery.com/category/scripts-and-programming/">Scripts and Programming</a> </li> <li class="cat-item cat-item-513"><a href="http://www.webmastersgallery.com/category/search-engines/">Search Engines</a> </li> <li class="cat-item cat-item-135"><a href="http://www.webmastersgallery.com/category/social-media/">Social Media</a> </li> <li class="cat-item cat-item-514"><a href="http://www.webmastersgallery.com/category/softwares/">Softwares</a> </li> <li class="cat-item cat-item-515"><a href="http://www.webmastersgallery.com/category/tips-and-tutorials/">Tips and Tutorials</a> </li> <li class="cat-item cat-item-338"><a href="http://www.webmastersgallery.com/category/web-hosting/">Web Hosting</a> </li> <li class="cat-item cat-item-516"><a href="http://www.webmastersgallery.com/category/webmaster-tools/">Webmaster Tools</a> </li> <li class="cat-item cat-item-501"><a href="http://www.webmastersgallery.com/category/webmaster-resources/">Webmasters Resources</a> </li> <li class="cat-item cat-item-3"><a href="http://www.webmastersgallery.com/category/web-design/">Website Design</a> </li> </ul> </div> </div> <!-- sidebar east END --> <!-- sidebar west START --> <div id="westsidebar" class="sidebar"> <!-- blogroll --> <div class="widget widget_links"> <h3>Blogroll</h3> <ul> <li><a href="http://wordpress.org/development/">Development Blog</a></li> <li><a href="http://codex.wordpress.org/">Documentation</a></li> <li><a href="http://wordpress.org/extend/plugins/">Plugins</a></li> <li><a href="http://wordpress.org/extend/ideas/">Suggest Ideas</a></li> <li><a href="http://wordpress.org/support/">Support Forum</a></li> <li><a href="http://wordpress.org/extend/themes/">Themes</a></li> <li><a href="http://planet.wordpress.org/">WordPress Planet</a></li> </ul> </div> </div> <!-- sidebar west END --> <div class="fixed"></div> </div> <!-- sidebar south START --> <div id="southsidebar" class="sidebar"> <!-- archives --> <div class="widget"> <h3>Archives</h3> <ul> <li><a href='http://www.webmastersgallery.com/2024/11/'>November 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/10/'>October 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/09/'>September 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/08/'>August 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/07/'>July 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/06/'>June 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/05/'>May 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/04/'>April 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/03/'>March 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/02/'>February 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/01/'>January 2024</a></li> <li><a href='http://www.webmastersgallery.com/2023/12/'>December 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/11/'>November 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/10/'>October 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/09/'>September 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/08/'>August 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/07/'>July 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/06/'>June 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/05/'>May 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/04/'>April 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/03/'>March 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/02/'>February 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/01/'>January 2023</a></li> <li><a href='http://www.webmastersgallery.com/2022/12/'>December 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/11/'>November 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/10/'>October 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/09/'>September 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/08/'>August 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/07/'>July 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/06/'>June 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/05/'>May 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/04/'>April 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/03/'>March 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/02/'>February 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/01/'>January 2022</a></li> <li><a href='http://www.webmastersgallery.com/2021/12/'>December 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/11/'>November 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/10/'>October 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/09/'>September 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/08/'>August 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/07/'>July 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/06/'>June 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/05/'>May 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/04/'>April 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/03/'>March 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/02/'>February 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/01/'>January 2021</a></li> <li><a href='http://www.webmastersgallery.com/2020/12/'>December 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/11/'>November 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/10/'>October 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/09/'>September 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/08/'>August 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/07/'>July 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/06/' aria-current="page">June 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/05/'>May 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/04/'>April 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/03/'>March 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/02/'>February 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/01/'>January 2020</a></li> <li><a href='http://www.webmastersgallery.com/2019/12/'>December 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/11/'>November 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/10/'>October 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/09/'>September 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/08/'>August 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/07/'>July 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/06/'>June 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/05/'>May 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/04/'>April 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/03/'>March 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/02/'>February 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/01/'>January 2019</a></li> <li><a href='http://www.webmastersgallery.com/2018/12/'>December 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/11/'>November 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/10/'>October 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/09/'>September 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/08/'>August 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/07/'>July 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/04/'>April 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/01/'>January 2018</a></li> <li><a href='http://www.webmastersgallery.com/2017/12/'>December 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/11/'>November 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/09/'>September 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/08/'>August 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/07/'>July 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/06/'>June 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/05/'>May 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/04/'>April 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/03/'>March 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/02/'>February 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/01/'>January 2017</a></li> <li><a href='http://www.webmastersgallery.com/2016/12/'>December 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/11/'>November 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/10/'>October 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/09/'>September 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/08/'>August 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/07/'>July 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/06/'>June 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/05/'>May 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/04/'>April 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/03/'>March 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/02/'>February 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/01/'>January 2016</a></li> <li><a href='http://www.webmastersgallery.com/2015/12/'>December 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/11/'>November 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/10/'>October 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/09/'>September 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/08/'>August 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/07/'>July 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/06/'>June 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/05/'>May 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/04/'>April 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/03/'>March 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/02/'>February 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/01/'>January 2015</a></li> <li><a href='http://www.webmastersgallery.com/2014/12/'>December 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/11/'>November 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/10/'>October 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/09/'>September 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/08/'>August 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/07/'>July 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/06/'>June 2014</a></li> <li><a href='http://www.webmastersgallery.com/2013/07/'>July 2013</a></li> <li><a href='http://www.webmastersgallery.com/2013/01/'>January 2013</a></li> <li><a href='http://www.webmastersgallery.com/2012/12/'>December 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/08/'>August 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/07/'>July 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/06/'>June 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/05/'>May 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/04/'>April 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/01/'>January 2012</a></li> <li><a href='http://www.webmastersgallery.com/2011/11/'>November 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/06/'>June 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/03/'>March 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/02/'>February 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/01/'>January 2011</a></li> <li><a href='http://www.webmastersgallery.com/2010/12/'>December 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/11/'>November 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/09/'>September 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/07/'>July 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/06/'>June 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/05/'>May 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/02/'>February 2010</a></li> <li><a href='http://www.webmastersgallery.com/2009/12/'>December 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/08/'>August 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/07/'>July 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/06/'>June 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/05/'>May 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/04/'>April 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/03/'>March 2009</a></li> </ul> </div> <!-- meta --> <div class="widget"> <h3>Meta</h3> <ul> <li><a href="http://www.webmastersgallery.com/wp-login.php">Log in</a></li> </ul> </div> </div> <!-- sidebar south END --> </div> <!-- sidebar END --> <div class="fixed"></div> </div> <!-- content END --> <!-- footer START --> <div id="footer"> <a id="gotop" href="#" onclick="MGJS.goTop();return false;">Top</a> <a id="powered" href="http://wordpress.org/">WordPress</a> <div id="copyright"> Copyright © 2009-2024 Webmasters Gallery </div> <div id="themeinfo"> Theme by <a href="http://www.neoease.com/">NeoEase</a>. Valid <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">CSS 3</a>. </div> </div> <!-- footer END --> </div> <!-- container END --> </div> <!-- wrap END --> </body> </html>