Forem: Hibs

How to Embed Audio in a Data Grid in Under 60 Seconds

Hibs — Mon, 28 Oct 2019 22:15:24 +0000

This is part four of my “Functionality in Under 60 Seconds” blog series. These walkthroughs are meant to highlight how easy it is to add interactivity and functionality to ZingGrid data grids and tables.

Watch the short video below to see how easy it is to embed audio in ZingGrid data grids, or scroll further to read a short summary covering the basics.

The first thing you’ll want to do is follow this checklist to make sure you’ve set up ZingGrid properly in preparation for implementing this feature:

Make sure the audio you want to embed is already hosted online, and that you have permission to link to it.
Update your JSON dataset to include the URLs to the audio you'd like to embed. Make sure to include the embed URL in your dataset, as opposed to the direct URL.
Make sure you've set up a basic grid by referencing the ZingGrid library in your development environment using either the CDN or self-hosted options

As a quick refresher, if you're using ZingGrid in a basic HTML page, this is what your code should look like before starting this tutorial:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
      <title></title>
      <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  </head>
  <body>
    <zing-grid></zing-grid>
  </body>
</html>

From here, it's just a matter of adding your data to your grid, and adding columns so you can specify the column type for your embedded audio.

Embedding Audio in Under a Minute

Let's say you have a basic dataset featuring a song from SoundCloud associated with each planet in our solar system. This dataset will yield two columns of data when rendered in ZingGrid, the last of which contains audio embeds.

As I mentioned at the beginning of this post, it's important that you use the embed URLs for the audio, as opposed to the direct URLs. In the case of SoundCloud audio, this is what the difference between those two types of URLs looks like:

Embed URL: https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/344477157&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true

Direct URL: https://soundcloud.com/user-831103706/sza-the-weekend

Your JSON dataset will probably look something like this once you've added your audio embed URLs to it:

[ 
  {
    "planet": "Mercury",
    "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/71907937&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
  },
  {
    "planet": "Venus",
    "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/220740990&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
  },
  {
    "planet": "Earth",
    "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/141390585&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
  },
  {
    "planet": "Mars",
    "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/207049506&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
  },
  {
    "planet": "Jupiter",
    "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/99286795&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
  },
  {
    "planet": "Saturn",
    "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/71907938&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
  },
  {
    "planet": "Uranus",
    "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/141390929&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
  },
  {
    "planet": "Neptune",
    "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/306642706&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
  },
  {
    "planet": "Pluto",
    "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/305014611&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
  }
]

This is what your code would look like if you were to add your data inline to your grid:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  </head>
  <body>
    <zing-grid
      data='[ 
      {
        "planet": "Mercury",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/71907937&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Venus",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/220740990&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Earth",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/141390585&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Mars",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/207049506&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Jupiter",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/99286795&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Saturn",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/71907938&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Uranus",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/141390929&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Neptune",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/306642706&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Pluto",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/305014611&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      }
      ]'>
    </zing-grid>
  </body>
</html>

At this point, your grid should look something like this when rendered — but don’t worry because it’s not a mistake:

To render the last column in your dataset as an audio embed instead of a string containing the embed URL, you'll need to manually specify the columns in your grid so you can change the last column's column type.

To do this, add two zg-column tags inside <zing-grid></zing-grid> – one for each unique key in your JSON data. In our case, our sample dataset has two unique JSON keys, so we'll add two <zg-column></zg-column> tags inside the <zing-grid></zing-grid> tag.

Within each set of <zg-column></zg-column> tags, we'll add index="" and fill in each JSON key name in the order we'd like the columns to appear. In the zg-column tag for audio, we'll add the type="" attribute with a value of iframe to specify that the column should render iframe content instead of strings of text.

If you're using the sample data from this tutorial, your column tags should look like this:

<zg-colgroup> 
  <zg-column index="planet"></zg-column>
  <zg-column index="audio" type="iframe"></zg-column>
</zg-colgroup>

Remember, you don't need to specify the column type for the planet column because ZingGrid's default column type is text.

If you're following along, your code should look like this (focus on the code below the inline data):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  </head>
  <body>
    <zing-grid
      data='[ 
      {
        "planet": "Mercury",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/71907937&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Venus",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/220740990&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Earth",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/141390585&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Mars",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/207049506&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Jupiter",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/99286795&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Saturn",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/71907938&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Uranus",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/141390929&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Neptune",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/306642706&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      },
      {
        "planet": "Pluto",
        "audio": "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/305014611&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
      }
      ]'>
      <zg-colgroup>
        <zg-column index="planet"></zg-column>
        <zg-column index="video" type="iframe"></zg-column>
      </zg-colgroup>
    </zing-grid>
  </body>
</html>

That’s all you need to do to render audio embeds in your ZingGrid data grid! The above code will yield the following result:

And those are the basics of adding audio embeds in your ZingGrid data tables & grids. View the live demo in our Studio playground to see how it works, and to play around with the final result.

How the ZingSoft Team Uses Notion for Shared Knowledge Management

Hibs — Thu, 17 Oct 2019 19:11:59 +0000

Until around a year ago, internal knowledge management was a stubborn thorn in my team’s side. Dedicated wiki solutions like Gitbook weren’t cutting it for us, over-generalized solutions like the Google Suite of products stumbled with internally linked docs and multimedia embeds, and internal knowledge base add-ons (I’m looking at you Gitlab and Clubhouse) weren’t powerful or flexible enough to meet our needs.

To be fair, it’s a tall order to holistically manage internal knowledge documentation for a small team across a variety of domains like software development, web development, marketing, sales, design, product development, and project management. It’s an even taller order to expect any team to adopt not only a new product, but new processes as well without running into a few roadblocks. This is where Notion really saved the day for us.

Before we settled on one dedicated way to document our fickle body of accumulated knowledge, the ZingSoft team knowledge base consisted of a brittle hodgepodge of various services and products including Gitlab, Github, Clubhouse, Airtable, Google Sheets, Google Docs, and Gmail. This network was barely held together by Toby bookmarks (Toby’s wonderful, but that’s a post for another day).

This is what our knowledge base looked like before Notion.

Compared to the previous solutions we tried, Notion has been the Swiss Army Knife of knowledge management solutions. So much so that it has actually changed the way the ZingSoft team approaches internal documentation. “That should probably go in Notion,” is a suggestion you’ll hear often if you listen in on our team’s conversations and meetings lately. The best part is, that thing usually does end up in Notion by the end of the workday, which is a testament to how well-integrated it’s become in our team’s workflows.

This is what our knowledge base now looks like using Notion.

Of course, there are caveats to any documentation solution. Even the greatest knowledge management tool can fall victim to a team that habitually under- or over-documents things. Beyond that, a knowledge base is no substitution for well-defined information architecture given that it's a reflection of the way that information is organized in teammates' minds.

Internal documentation is as much about the organization of ideas as it is about the way they’re preserved. The importance of that insight is further emphasized in “Everyday Information Architecture,” by Lisa Marie Martin – a quick and helpful read for anyone who finds themselves organizing information in a variety of contexts throughout the workweek.

By paying attention to the architecture of your internal documentation, it becomes easier over time to distinguish between what does and doesn't belong there. This prevents your knowledge base from becoming bloated with too many details. For us it's been important to learn the importance of delineating the right information while balancing the need for flexibility. Notion makes it easy to restructure our information as needed as our organization strategy changes.

A quick GIF showing you what some of our internal information architecture looks like.

So what are the specific selling points that have made the ZingSoft team a loyal Notion customer? Here are some of the things I've enjoyed about using it as a knowledge base:

It's fully-featured for editing and viewing across desktop and mobile devices
Real-time collaboration is easy. You can see which users are currently viewing a page, as well as their page position and edits
Built-in version history for your pages lets you revert changes if needed
Powerful embeds! I'm able to embed read-only Figma & Airtable files with ease, along with many other embed types.
Content blocks give you just enough control over the presentation of your information
Somewhat customizable design – you can upload your own icons and header imagery for your pages

Is there more we could do to improve our internal knowledge management? Absolutely! As the GIF above shows, our team's way of organizing information may make sense to us, but it's still a bit of a puzzle for newcomers, as it doesn't seem to have much of a rhyme or reason. Despite that, the information architecture we've chosen has allowed our productivity to increase dramatically, and has helped resurface internal knowledge that would have otherwise remained hidden.

For any team stuck in analysis paralysis when it comes to their internal documentation, the best advice I can suggest is to approach knowledge management iteratively, and to find a tool that complements your team's way of working. Many times teams don't clearly understand what they need out of a knowledge management tool, nor have they put enough thought into what the structure of that knowledge should look like. Notion has been forgiving for us in these situations, and I encourage you to give it a try if your team has similar needs!

How to Embed Videos in a Data Grid in Under 60 Seconds

Hibs — Wed, 14 Aug 2019 16:27:19 +0000

This is part three in my “Functionality in Under 60 Seconds” blog series. These walkthroughs are meant to highlight how easy it is to add interactivity and functionality to ZingGrid data grids and tables.

Watch the short video below to see how easy it is to add videos to ZingGrid data grids, or scroll further to read a short summary covering the basics.

The first thing you’ll want to do is follow this checklist to make sure you’ve set up ZingGrid properly in preparation for implementing this feature:

Make sure the videos you want to embed are already hosted online, and that you have permission to use them
Update your JSON dataset to include the URLs to the videos you'd like to embed. Make sure to include the video embed URL in your dataset, not the direct video URL.
Make sure you've set up a basic grid by referencing the ZingGrid library in your development environment using either the CDN or self-hosted options

As a quick refresher, if you're using ZingGrid in a basic HTML page, this is what your code should look like before starting this tutorial:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
    </head>
    <body>
        <zing-grid></zing-grid>
    </body>
</html>

From here, it's just a matter of adding your data to your grid, and adding columns so you can specify the column type for your embedded media.

Embedding Videos in Under a Minute

Let's say you have a basic dataset featuring videos of classical musical compositions dedicated to each planet in our solar system. This dataset will yield two columns of data when rendered in ZingGrid, the last of which contains videos.

As I mentioned at the beginning of this post, it's important that you use the embed URL for videos, as opposed to the direct URL. In the case of YouTube videos, this is what the difference between those two types of URLs looks like:

Embed URL: https://www.youtube.com/embed/RkiiAloL6aE

Direct URL: https://www.youtube.com/watch?v=RkiiAloL6aE

Your JSON dataset will probably look something like this once you've added your video URLs to it:

[ 
    {
        "planet": "Mercury",
        "video": "https://www.youtube.com/embed/RkiiAloL6aE"
    },
    {
        "planet": "Venus",
        "video": "https://www.youtube.com/embed/EE6_PacCnRw"
    },
    {
        "planet": "Earth",
        "video": "https://www.youtube.com/embed/MbHQ6eWANIo"
    },
    {
        "planet": "Mars",
        "video": "https://www.youtube.com/embed/Jmk5frp6-3Q"
    },
    {
        "planet": "Jupiter",
        "video": "https://www.youtube.com/embed/Gu77Vtja30c"
    },
    {
        "planet": "Saturn",
        "video": "https://www.youtube.com/embed/MO5sB56rfzA"
    },
    {
        "planet": "Uranus",
        "video": "https://www.youtube.com/embed/aDFGmiXnLjU"
    },
    {
        "planet": "Neptune",
        "video": "https://www.youtube.com/embed/v4wuV14QlNM"
    },
    {
        "planet": "Pluto",
        "video": "https://www.youtube.com/embed/N_v8G0fo4Ws"
    }
]

This is what your code would look like if you were to add this data inline to your grid:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
    </head>
    <body>
        <zing-grid
        data='[ 
    {
        "planet": "Mercury",
        "video": "https://www.youtube.com/embed/RkiiAloL6aE"
    },
    {
        "planet": "Venus",
        "video": "https://www.youtube.com/embed/EE6_PacCnRw"
    },
    {
        "planet": "Earth",
        "video": "https://www.youtube.com/embed/MbHQ6eWANIo"
    },
    {
        "planet": "Mars",
        "video": "https://www.youtube.com/embed/Jmk5frp6-3Q"
    },
    {
        "planet": "Jupiter",
        "video": "https://www.youtube.com/embed/Gu77Vtja30c"
    },
    {
        "planet": "Saturn",
        "video": "https://www.youtube.com/embed/MO5sB56rfzA"
    },
    {
        "planet": "Uranus",
        "video": "https://www.youtube.com/embed/aDFGmiXnLjU"
    },
    {
        "planet": "Neptune",
        "video": "https://www.youtube.com/embed/v4wuV14QlNM"
    },
    {
        "planet": "Pluto",
        "video": "https://www.youtube.com/embed/N_v8G0fo4Ws"
    }
]'>
        </zing-grid>
    </body>
</html>

At this point, your grid should look something like this when rendered – but don't worry, it's not a mistake:

To render the last column in your dataset as a video instead of a string containing the video URL, you'll need to manually specify the columns in your grid so you can change the last column's column type.

To do this, add two <zg-column></zg-column> tags inside the <zing-grid></zing-grid> tag – one for each unique key in your JSON data. In our case, our sample dataset has two unique JSON keys, so we'll add two <zg-column></zg-column> tags inside the <zing-grid></zing-grid> tag.

Within each set of <zg-column></zg-column> tags, we'll add index="" and fill in each JSON key name in the order we'd like the columns to appear. In the zg-column tag for video, we'll add the type="" attribute with a value of iframe to specify that the column should render iframe content instead of strings of text.

If you're using the sample data from this tutorial, your column tags should look like this:

<zg-colgroup>
    <zg-column index="planet"></zg-column>
    <zg-column index="photo" type="iframe"></zg-column>
</zg-colgroup>

You don't need to specify the column type for the planet column because ZingGrid's default column type is set to text.

If you're following along, your code should look like this (focus on the code below the inline data):

<!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8">
   <title></title>
   <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  </head>
  <body>
   <zing-grid
     data='[
      {
      "planet": "Mercury",
      "video": "https://www.youtube.com/embed/RkiiAloL6aE"
     },
     {
      "planet": "Venus",
      "video": "https://www.youtube.com/embed/EE6_PacCnRw"
     },
     {
      "planet": "Earth",
      "video": "https://www.youtube.com/embed/MbHQ6eWANIo"
     },
     {
      "planet": "Mars",
      "video": "https://www.youtube.com/embed/Jmk5frp6-3Q"
     },
     {
      "planet": "Jupiter",
      "video": "https://www.youtube.com/embed/Gu77Vtja30c"
     },
     {
      "planet": "Saturn",
      "video": "https://www.youtube.com/embed/MO5sB56rfzA"
     },
     {
      "planet": "Uranus",
      "video": "https://www.youtube.com/embed/aDFGmiXnLjU"
     },
     {
      "planet": "Neptune",
      "video": "https://www.youtube.com/embed/v4wuV14QlNM"
     },
     {
      "planet": "Pluto",
      "video": "https://www.youtube.com/embed/N_v8G0fo4Ws"
     }
    ]'>
    <zg-colgroup>
     <zg-column index="planet"></zg-column>
     <zg-column index="video" type="iframe"></zg-column>
    </zg-colgroup>
   </zing-grid>
  </body>
 </html>

That's all you need to do to render videos in your ZingGrid data grid! The above code will yield the following result.

And those are the basics of adding video embeds in your ZingGrid data tables & grids. View the live demo in our Studio playground to see how it works, and to play around with the final result.

How the ZingSoft Team Uses CloudApp to Streamline their Media Capture Workflow

Hibs — Tue, 06 Aug 2019 16:13:54 +0000

At ZingSoft, we're always on the lookout for new tools that can make our jobs easier, which also means that we've tried many, many different products and services. If I had to choose just one tool that's been the most transformative for my team's overall productivity in the past year, CloudApp would be one of my top two contenders for that title. Perhaps it's surprising to hear that a media-capture application could make such a big impact on a software development team, but the reality is that it has filled a gap we were unaware of – one we didn't realize was having such a big impact on our workflows.

As it turns out, there are many reasons why everyone from a software developer, to a graphic designer, to a QA tester might need to capture a screenshot, GIF, or video recording of what's happening on their computer screen. What's more, it's perfectly reasonable to expect someone in any of those team roles to want to annotate and share those recordings as well. Enter CloudApp, a cloud-based media recording application that not only includes all of the aforementioned functionality, but which also stores all recorded media in the cloud (are you noticing a theme here?) for later access and retrieval from any desktop. Here's what a CloudApp capture looks like:

On the surface, the functionality that CloudApp provides may seem easy to de-emphasize. After all, it's simple enough to take screenshots natively, and many basic image viewing applications nowadays have some form of basic annotative abilities. However, CloudApp differentiated itself with my team by making the process of capturing, annotating, and sharing motion graphics and video as easy as it is with static screenshots. Additionally, its non-invasive UX means that the app is there when we need it, but nearly invisible when we don't. This combination of thoughtful functionality and minimal presence is what ultimately made it so easy for my teammates to integrate it into their various workflows, regardless of their role.

The use cases in which we've found ourselves using CloudApp are many. They run the gamut from capturing bugs in the JavaScript libraries we build, to recording weird behavior in our various websites and apps, to visually bookmarking inspirational things we come across on the web, to creating content for our marketing materials (like the screenshots in this blog post). However, beyond its many use cases, CloudApp's sharing options are what have also made it invaluable to us. We can share a single piece of media directly by dragging and dropping the file, or via various cloud-based link sharing options (e.g. direct link, download link, embed code, etc). We can also share our recorded media directly to various platforms like Slack, Trello, Twitter, etc. from CloudApp's interface.

At a higher level, CloudApp has made it easier for my team to visually communicate the value of our ZingGrid and ZingChart data visualization products to existing and potential customers. Our two JavaScript libraries are predominantly presentational, and having a tool that makes it so easy to visually convey what our products can do has been transformative and time-saving. Producing content like product tutorials, email campaigns, bug reports/stories, and internal status presentations have become easier than ever thanks to the help that CloudApp provides.

How to Embed Images in a Data Grid in Under 60 Seconds

Hibs — Tue, 23 Jul 2019 17:58:47 +0000

Welcome to my “ZingGrid Functionality in Under 60 Seconds” blog series. These walkthroughs are meant to highlight how easy it is to add interactivity and functionality to ZingGrid data grids and tables.

Watch the short video below to see how easy it is to add images to ZingGrid data grids, or scroll further to read a short summary covering the basics.

The first thing you’ll want to do is follow this checklist to make sure you’ve set up ZingGrid properly in preparation for implementing this feature. Check out this post if you'd like to learn more about creating your first data grid with ZingGrid.

Make sure the images you want to embed are already hosted online, and that you have permission to use them.
Update your JSON dataset to include the URLs to the images you'd like to embed.
Make sure you've set up a basic grid by referencing the ZingGrid library in your development environment using either the CDN or self-hosted options

As a quick refresher, if you're using ZingGrid in a basic HTML page, this is what your code should look like before starting this tutorial:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
    </head>
    <body>
        <zing-grid></zing-grid>
    </body>
</html>

From here, it's just a matter of adding your data to your grid, and adding columns so you can specify the column type for your embedded images.

Embedding Images in Under a Minute

Let's say you have a simple dataset about the planets in our solar system. This dataset will yield three columns of data when rendered in ZingGrid, the last of which contains images. Your JSON dataset might look something like this:

[ 
    {
        "planet": "Mercury",
        "moons": "0",
        "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fmercury-200px.jpg?alt=media&token=23f8d355-ca73-4334-980c-23f5ae91d087"
    },
    {
        "planet": "Venus",
        "moons": "0",
        "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fvenus-200px.jpg?alt=media&token=1f6119d6-414d-4f1e-906d-514d7f5a295f"
    },
    {
        "planet": "Earth",
        "moons": "1",
        "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fearth-200px.jpg?alt=media&token=33df1022-e000-4e95-9996-5b9101af627d"
    },
    {
        "planet": "Mars",
        "moons": "2",
        "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fmars-200px.jpg?alt=media&token=ff1209b7-ef9d-496d-8a93-ef1cd8fad794"
    },
    {
        "planet": "Jupiter",
        "moons": "67",
        "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fjupiter-200px.jpg?alt=media&token=64c3cf9b-5541-475b-9711-17f046cff801"
    },
    {
        "planet": "Saturn",
        "moons": "62",
        "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fsaturn-200px.jpg?alt=media&token=e4af20df-8319-4644-8361-e3f5b9a75d9f"
    },
    {
        "planet": "Uranus",
        "moons": "27",
        "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Furanus-200px.jpg?alt=media&token=a9e99164-7417-4a05-80eb-421c3867e9c5"
    },
    {
        "planet": "Neptune",
        "moons": "13",
        "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fneptune-200px.jpg?alt=media&token=29d86d30-995c-45eb-ab96-1b99b7b1535c"
    },
    {
        "planet": "Pluto",
        "moons": "4",
        "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fpluto-200px.jpg?alt=media&token=b7cbb041-df9b-48f8-b9ab-4f0f12df4efd"
    }
]

This is what your code would look like if you were to add this data inline to your grid:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
    </head>
    <body>
        <zing-grid
        data='[ 
            {
            "planet": "Mercury",
            "moons": "0",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fmercury-200px.jpg?alt=media&token=23f8d355-ca73-4334-980c-23f5ae91d087"
            },
            {
            "planet": "Venus",
            "moons": "0",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fvenus-200px.jpg?alt=media&token=1f6119d6-414d-4f1e-906d-514d7f5a295f"
            },
            {
            "planet": "Earth",
            "moons": "1",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fearth-200px.jpg?alt=media&token=33df1022-e000-4e95-9996-5b9101af627d"
            },
            {
            "planet": "Mars",
            "moons": "2",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fmars-200px.jpg?alt=media&token=ff1209b7-ef9d-496d-8a93-ef1cd8fad794"
            },
            {
            "planet": "Jupiter",
            "moons": "67",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fjupiter-200px.jpg?alt=media&token=64c3cf9b-5541-475b-9711-17f046cff801"
            },
            {
            "planet": "Saturn",
            "moons": "62",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fsaturn-200px.jpg?alt=media&token=e4af20df-8319-4644-8361-e3f5b9a75d9f"
            },
            {
            "planet": "Uranus",
            "moons": "27",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Furanus-200px.jpg?alt=media&token=a9e99164-7417-4a05-80eb-421c3867e9c5"
            },
            {
            "planet": "Neptune",
            "moons": "13",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fneptune-200px.jpg?alt=media&token=29d86d30-995c-45eb-ab96-1b99b7b1535c"
            },
            {
            "planet": "Pluto",
            "moons": "4",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fpluto-200px.jpg?alt=media&token=b7cbb041-df9b-48f8-b9ab-4f0f12df4efd"
            }
        ]'>
        </zing-grid>
    </body>
</html>

At this point, your grid should look something like this when rendered – but don't worry, it's not a mistake:

This is where the magic happens! To render the third column in your dataset as an image instead of a string containing an image path, you'll need to manually specify the columns in your grid so you can change the third column's column type.

To do this, add three zg-column tags inside <zing-grid></zing-grid> – one for each unique key in your JSON data. In our case, our sample dataset has three unique JSON keys, so we'll add three <zg-column></zg-column> tags inside the <zing-grid></zing-grid> tag.

Within each set of <zg-column></zg-column> tags, we'll add index="" and fill in each JSON key name in the order we'd like the columns to appear. In the zg-column tag for photo, we'll add the type="" attribute with a value of image to specify that the column should render images instead of strings of text.

If you're using the sample data from this tutorial, your column tags should look like this:

<zg-colgroup>
    <zg-column index="planet"></zg-column>
    <zg-column index="moons"></zg-column>
    <zg-column index="photo" type="image"></zg-column>
</zg-colgroup>

You don't need to specify the column type for the planet and moons columns because ZingGrid's default column type is text.

If you're following along, your code should look like this (focus on the code below the inline data):

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
    </head>
    <body>
        <zing-grid
        data='[ 
            {
            "planet": "Mercury",
            "moons": "0",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fmercury-200px.jpg?alt=media&token=23f8d355-ca73-4334-980c-23f5ae91d087"
            },
            {
            "planet": "Venus",
            "moons": "0",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fvenus-200px.jpg?alt=media&token=1f6119d6-414d-4f1e-906d-514d7f5a295f"
            },
            {
            "planet": "Earth",
            "moons": "1",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fearth-200px.jpg?alt=media&token=33df1022-e000-4e95-9996-5b9101af627d"
            },
            {
            "planet": "Mars",
            "moons": "2",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fmars-200px.jpg?alt=media&token=ff1209b7-ef9d-496d-8a93-ef1cd8fad794"
            },
            {
            "planet": "Jupiter",
            "moons": "67",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fjupiter-200px.jpg?alt=media&token=64c3cf9b-5541-475b-9711-17f046cff801"
            },
            {
            "planet": "Saturn",
            "moons": "62",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fsaturn-200px.jpg?alt=media&token=e4af20df-8319-4644-8361-e3f5b9a75d9f"
            },
            {
            "planet": "Uranus",
            "moons": "27",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Furanus-200px.jpg?alt=media&token=a9e99164-7417-4a05-80eb-421c3867e9c5"
            },
            {
            "planet": "Neptune",
            "moons": "13",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fneptune-200px.jpg?alt=media&token=29d86d30-995c-45eb-ab96-1b99b7b1535c"
            },
            {
            "planet": "Pluto",
            "moons": "4",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fpluto-200px.jpg?alt=media&token=b7cbb041-df9b-48f8-b9ab-4f0f12df4efd"
            }
        ]'>
            <zg-colgroup>
                <zg-column index="planet"></zg-column>
                <zg-column index="moons"></zg-column>
                <zg-column index="photo" type="image"></zg-column>
            </zg-colgroup>
        </zing-grid>
    </body>
</html>

And that's all you need to do to render images in your ZingGrid data grid! The above code will yield the following result:

Those are the basics of adding image embeds in your ZingGrid data tables & grids. View the live demo in our Studio playground to see how it works, and so you can play around with the final result.

How the ZingSoft Team Uses StatusHero to Improve Intra-Team Communication

Hibs — Tue, 09 Jul 2019 18:40:25 +0000

Whether you're on a small development team, or are part of a much larger development organization, intra-team communication is vital regardless of your team's size. Yet given the increasing proliferation of digital communication tools and contexts in the modern workplace, that's easier said than done – especially during the ebb and flow of a busy workday.

At ZingSoft, we've been using a suite of popular tools for active communication with solid results for years, but more recently we realized we also had a passive communication problem. This distinction between active and passive communication patterns within teams is important for a few reasons. Whereas active communication is more immediate and direct (e.g. chat or email), passive communication is more persistent and indirect (e.g. status updates or a shared calendar).

Information can easily and quickly become buried when using active communication formats. In general, those conversational forms of communication aren't ideal for capturing and revisiting information like status updates or schedules. For example, relying solely on chat or face-to-face conversations can make it difficult for everyone to keep track of what everyone else on your team is doing within a given time period.

This is why StatusHero has become such an integral part of our team's daily workflow. It's a tool for tracking daily status updates and simple metrics around our team's daily goals, and it integrates well with tools we already use, like Gitlab and Clubhouse. Tried and true services like Slack, Gmail, and Zoom have been the workhorses of our digital interactions for years, but they're geared towards active, conversational communication formats.

In a workplace like ours where some teammates work remotely 100% of the time, while others split their time between in-office and remote work, the need for passive communication solutions like StatusHero becomes magnified. When your team's founder & CEO is also a computer science professor and soon-to-be data visualization professor, the need for those solutions becomes imperative.

So what does a status update look like? Every morning, everyone on the ZingSoft team receives a reminder via Slack to take a few minutes to fill out their StatusHero update for the day. A daily update involves succinctly answering four simple questions:

Did you meet yesterday's goals?
What did you do yesterday?
What are your goals for today?
Are you blocked by anything?

Every teammate's response is then displayed on a daily dashboard that chronicles a few simple metrics around team participation and goals, as well as everyone's status update for the day. This makes it easy to check in on what your team as a whole is doing on any given day, and also gives you the flexibility to go back as far as you need to if you'd like to see what someone was doing on a given day. Over time, you can begin to form a high-level picture of team health and productivity using StatusHero's Reports feature. With Reports, you can gauge team health over time based on comparisons like the proportion of daily goals hit versus days blocked.

Beyond the obvious benefits, StatusHero has helped increase our team's productivity in unexpected ways too. When it comes time to create presentations summarizing team activity over the course of the week or month (during retrospective or all-hands meetings, for example), StatusHero makes it so much easier to go back and summarize what everyone worked on. If I lose track of what I was working on due to a prolonged interruption, StatusHero makes it much quicker for me to re-orient myself in my workweek.

If you find that your development team could use some passive communication, then daily status updates are definitely a great place to start. Whether you go with StatusHero or a different type of solution, I highly recommend you explore how integrating more passive forms of communication into your team's daily workflow can increase productivity while helping your teammates feel better-informed.

What is User Testing, and Why is it Important?

Hibs — Wed, 03 Apr 2019 17:14:33 +0000

User testing is a misleading term. It implies that what’s being tested is the user, when in reality what’s being tested is the product or service. This is important to remember in any discussion about user feedback gathering because that feedback is an indicator of your project’s perceived value and usefulness in the eyes of users – not just rationally, but also emotionally.

Indicators like these can provide tangible ways for teams to develop empathy with both existing and potential users. In turn, teams can use those insights to iteratively improve upon their projects.

The goal should be to interpret that gathered feedback to provide a better product or service that people want to use, whether because it’s pleasurable, helpful, useful, needed, etc. User testing is a great way to collect that user feedback under controlled circumstances. This is especially true if you’ve already clarified your target audiences. If you haven’t, then user testing can be a starting point to help you begin to do so.

Generally speaking, user testing involves designing scenarios to gather feedback from a relevant audience segment within a desired context. Put even more simply, it’s a way to listen to your users. Although user testing can be found across many different design contexts, I’m focusing on user testing for the web because I work on a digital product team.

General to Specific User Testing

User tests can be used as exploratory starting points for uncovering friction and pain points that need to be prioritized, or they can be designed with specific use cases or problems in mind. This general/specific approach to user testing can be used in a spectrum (e.g. you start general and over time progress to specific user tests), or as needed (e.g. you start specific to answer pre-existing questions or to solve unambiguous problems).

One factor that can affect the motivation behind user testing is the stage of development of the project in question. Newer projects might benefit from a more general user testing strategy, whereas more established projects might benefit from a more specific user testing strategy that focuses on feature releases, for example. A general-to-specific user testing progression can also make sense for teams that haven’t tried user testing before.

In my case, when I first began exploring user testing I chose the former, more general approach for my product and team for two reasons: 1) It was my first experience with user testing, as well as my team’s, and 2) I wanted user feedback to help guide my team’s development initiatives along with my design and marketing initiatives. The second reason is especially important to me because our product is still new.

User Feedback Formats

Documented user feedback usually comes in some combination of video, audio, and/or text forms. To determine which feedback format suits your team, it helps to consider the following things:

The tools you’re using to administer the test
The location of the user taking the test (remote vs on-site)
Your goals for the test
Your available bandwidth for reviewing and evaluating the test feedback
Who needs to access and review test feedback

Different feedback formats provide different kinds of value to you as the tester, and it’s worth considering what format best meets your needs. This can be especially important if your user tests are administered remotely. Here are some points that illustrate why it’s important to consider feedback format:

Written feedback
- Pro: Encourages more user reflection before answering, which means feedback is usually clearer and more cohesive
- Pro: Can be better for capturing small details
- Pro: Quickest way for testers to review feedback
- Con: Less representative of user’s emotional response in-the-moment
Video feedback
- Pro: Screen recordings show you exactly what the user is experiencing on their machine, in their browser, etc.
- Pro: Direct video can show body language and facial expressions
- Con: It can take a long time to review all test footage, even if sped up
Audio feedback
- Pro: It’s easier to capture initial user reactions with emotion intact
- Pro: Inflection, tone of voice, etc. can indicate user’s emotional response along with the content of their feedback
- Con: It can take a long time to review all test footage, even if sped up

Determining Production Value

User tests can be as formal or informal as you need them to be. I’ve designed and administered user tests on a paid platform on one hand, and using a shared Google doc and Quicktime recording on the other hand. Ultimately, the primary value that paid tools can provide lies in finding qualified people to take your test who fit your target demographic. There are plenty of secondary features like video transcription, annotation, and recording that can also make paid services worthwhile.

The only paid service I’ve used to administer user testing so far is UserTesting, but I encourage you to explore UserTesting’s AlternativeTo page to get a broader overview of similar user testing tools out there.

If you'd like to see what an actual user test looks like, I've customized an informal user test in a Google doc. You can use this template as a starting point for designing your own user tests, or you can just check it out to see what kinds of questions are asked in a basic user test.

Click to view user testing template

Creating a data grid with a remote endpoint using ZingGrid

Hibs — Wed, 13 Mar 2019 19:23:56 +0000

In my last post, I covered data basics in the ZingGrid JavaScript library for data grids and data tables. Today, I'll show you how to connect remote data sources to ZingGrid. Check out the video tutorial to see how it’s done, or follow along with me in this written tutorial.

The three main things you'll learn about in this post are:

The [src] attribute
Remote JSON data
Dynamic endpoints

You can use your own remote dataset to follow along, but we've also provided the following remote endpoint for you to use, too: https://cdn.zinggrid.com/datasets/remote-data.json

The [src] Attribute

ZingGrid provides the src attribute to get data from a remote source and display it. You can use either a relative path or a remote URL. When you use the src attribute, an AJAX request is made internally to fetch your data.

The src attribute can be implemented in two different ways:

Using the top-level <zing-grid> tag
Using the <zg-data> tag

Using the top-level `<zing-grid>` tag

The simplest way to use the src attribute is to add it to the top-level <zing-grid> tag like this:

<zing-grid
  src="https://cdn.zinggrid.com/datasets/remote-data.json">
</zing-grid>

Using the `<zg-data>` tag

The more robust way to use the src attribute involves adding it to the <zg-data> tag. This method allows you to nest <zg-param> tags within <zg-data> so you can adjust the actions of your src endpoint. This is what the syntax for <zg-data> looks like:

<zing-grid>
  <zg-data src="https://cdn.zinggrid.com/datasets/remote-data.json"></zg-data>
</zing-grid>

Here's a live example of a data grid using <zg-data>:

Learn more about the markup elements <zg-data> and <zg-param> in our docs.

Remote JSON

The src attribute works for most simple and straightforward data structures. However, datasets aren't always that simple, and you might not always be connecting to an endpoint you control. Consider the following data structure:

{
  "company": {
    "name": "Planet Express",
    "employees": [
      {
        "name": "Philip J. Fry",
        "actor": "Billy West",
        "job": "Delivery Boy",
        "origin": "Earth",
        "gender": "male",
        "species": "Human"
      } ...
    ]
  }
}

The default src fetch will only try to access the top-level company property. What if instead you wanted to list data starting from the company.employees level? In that case you would want to add the recordPath attribute to <zg-param> like this:

<zing-grid>
  <zg-data src="https://cdn.zinggrid.com/datasets/remote-data-recordpath.json">
    <zg-param name="recordPath" value="company.employees"></zg-param>
  </zg-data>
</zing-grid>

Here's a live example of recordPath in action:

To learn more about using <zg-data> and <zg-param>, check out the list of available attributes in ZingGrid.

Dynamic Endpoint

So far I've shown you how to connect static endpoints to ZingGrid, but what if you want to connect to a dynamic endpoint with data that changes? All you need to do is poll that endpoint with an interval and update your grid via the setData() API method.

const zgRef = document.querySelector('zing-grid');
fetch('https://cdn.zinggrid.com/datasets/remote-data-recordpath.json')
  .then(res => res.json())
  .then(data => zgRef.setData(data))
  .catch(err => console.error('--- Error In Fetch Occurred ---', err));

This is what a demo with a dynamic endpoint looks like:

And there you have it – that's the gist of connecting to remote data sources in ZingGrid. I hope you found this helpful – any feedback is appreciated! Look out for the next tutorial in this series if you're interested in learning how to customize columns in ZingGrid 🖖

Get Started with Data Basics in ZingGrid

Hibs — Thu, 21 Feb 2019 17:19:34 +0000

In my last post, I walked you through building your first data grid with ZingGrid, a JavaScript library for data grids and data tables. Now, I'm going to summarize the essentials when it comes to adding data to your grid after page-load. Check out the video tutorial to see how it’s done, or follow along with me in this written tutorial.

The two topics you'll learn about in this post are:

Data types that ZingGrid accepts
Data assignment in ZingGrid

Data types that ZingGrid accepts

ZingGrid accepts five types of data structures:

Array of Objects [{}]
Array of Nested Objects [{key: {}}]
Object of Objects {key: {}}
Object of Nested Objects {key: {key: {}}}
Array of Arrays [[]]

Note that when you nest objects in your data, ZingGrid will automatically create nested column headers for you by default. Here's an example of what I mean:

Array of Objects

View a live example using this data structure.

[
  {
    "name": "Philip J. Fry",
    "origin": "Earth"
  }
]

Array of Nested Objects

View a live example using this data structure.

[
  {
    "employee": {
      "name": "Philip J. Fry",
      "origin": "Earth"
    }
  }
]

Object of Objects

View a live example using this data structure.

{
  "1": {
    "name": "Philip J. Fry",
    "origin": "Earth"
  },
  "2": {
    "name": "Turanga Leela",
    "origin": "Earth"
  }
}

Object of Nested Objects

View a live example using this data structure.

{
  "1": {
    "employee": {
      "name": "Philip J. Fry",
      "origin": "Earth"
      }
  },
  "2": {
    "employee": {
      "name": "Turanga Leela",
      "origin": "Earth"
      }
  }
}

Array of Arrays

View a live example using this data structure.

[
  ["Philip J. Fry","Earth"],
  ["Turanga Leela","Earth"] ...
]

Data Assignment in ZingGrid

ZingGrid provides the data attribute as the most primitive method of assigning data to the grid. This data must have a valid JSON structure. This is per HTML spec when passing objects and arrays to HTML attributes. There are three supported ways to set ZingGrid's data attribute:

HTML inline data
ZingGrid API
HTML attribute manipulation

HTML Inline Data (Stringified)

Assigning inline data in markup is the most basic way of assigning data in ZingGrid. This is the method we've used in all of our examples so far in this series.

<zing-grid data='[{"name": "Philip J. Fry"}]'></zing-grid>

ZingGrid API

To assign JavaScript Object data, use the ZingGrid API method setData(). This is the most efficient way to assign data in ZingGrid. This is because this assignment involves property assignment as opposed to attribute manipulation. This means data is being directly assigned to the internal ZingGrid component data property. Check out the API docs to see all of the data methods, or view the live example below.

const zgRef = document.querySelector('zing-grid');
const data = [{...}];
// target grid and assign data directly
zgRef.setData(data);

Attribute Manipulation

Assigning data through JavaScript as an object is the most practical use of assigning data, and it can be achieved via direct attribute manipulation. This will assign a string to the HTML attribute so the data string will appear in the markup, but this isn't a good idea for large datasets. View the live example belown.

const zgRef = document.querySelector('zing-grid');
const data = [{...}];
// target attribute directly and stringify your data structure
zgRef.setAttribute('data', JSON.stringify(data));

Ok, those are the basics about data in ZingGrid. Please let me know if you have any questions, and keep an eye out for the next tutorial in this series if you'd like to learn about connecting remote JSON files and endpoints to ZingGrid. 🔌👀

Creating Your First Data Grid with ZingGrid

Hibs — Fri, 15 Feb 2019 21:06:45 +0000

In this post, I'm going to show you how easy and quick it is to create a data grid or data table in less than five minutes using ZingGrid. Watch the video tutorial to see these steps in action, or follow along with this blog post to learn about the syntax you’ll need to get started with ZingGrid.

The three main things you'll learn how to do in this tutorial are:

Importing the ZingGrid library
Referencing the ZingGrid library
Rendering the grid

Importing the ZingGrid Library

To import the library you need to download it as a resource first, which you can do one of three ways – via the CDN link, via a package manager, or via direct download.

CDN Link

The CDN link is the quickest set-up option you can use to import the ZingGrid library.

<script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>

Package Manager

If you'd rather use a package manager, you can run npm install zinggrid to install the library via npm.

<script type="module">
  import ZingGrid from 'ZingGrid';
</script>

Direct Download

Your third option is to download the ZingGrid library from our website or from our public GitHub repository.

<script type="module">
  import ZingGrid from './index.js';
</script>
<!-- fallback for no module support -->
<script nomodule src="./dist/zinggrid.min.js"></script>

Referencing the ZingGrid library

To use the library, you'll need to reference the script into your environment. In this example, we're using the CDN link, so we'll just add it to the <head> tag and add the defer attribute to prevent a render blocking script during page parse.

We're deferring the script because the library doesn't need to be loaded before the component is parsed. Once the script is registered, all instances of <zing-grid> on the page will automatically be instantiated.

<!DOCTYPE html>
<html>
<head>
  <!--Script Reference-->
  <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
</head>
<body>
  <!--Grid Component-->
  <zing-grid></zing-grid>
</body>
</html>

A slightly different approach you can use is to put the <script> tag at the bottom of your document, which is effectively the same as the defer process above.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <!--Grid Component-->
  <zing-grid></zing-grid>
  <!--Script Reference-->
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</body>
</html>

Rendering the Grid

Making your first grid is as simple as creating a <zing-grid> tag and adding a data attribute. The data attribute expects grid data in valid JSON format, so that's how we'll be adding our sample data to this grid.

In this example, we're also using the caption attribute to add a title to our data grid.

Here's what your markup should look like once you've added your JSON data to the data attribute:

<!DOCTYPE html>
<html>
<head>
  <!--Script Reference[1]-->
  <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
</head>
<body>
  <!--Grid Component Placement[2]-->
  <zing-grid
    caption="Hello Futurama"
    data='[{
        "name": "Philip J. Fry",
        "origin": "Earth"
      },
      {
        "name": "Turanga Leela",
        "origin": "Earth"
      },
      {
        "name": "Bender Bending Rodriguez",
        "origin": "Earth"
      },
      {
        "name": "Amy Wong",
        "origin": "Mars"
      },
      {
        "name": "Doctor John Zoidberg",
        "origin": "Decapod 10"
      },
      {
        "name": "Lord Nibbler",
        "origin": "Earth"
      }
    ]'>
  </zing-grid>
</body>
</html>

Here's a live demo of this grid in action:

All of ZingGrid's main library features are typically attributes added to the top-level <zing-grid> tag. You can find the full list of available attributes and features in our API references docs.

And that's all you need to do to build your first grid using the ZingGrid library – thanks for your interest! Stay tuned for the next tutorial in this series, where I'll walk you through data basics in ZingGrid 🖖

Forem: Hibs

How to Embed Audio in a Data Grid in Under 60 Seconds

Embedding Audio in Under a Minute

How the ZingSoft Team Uses Notion for Shared Knowledge Management

How to Embed Videos in a Data Grid in Under 60 Seconds

Embedding Videos in Under a Minute

How the ZingSoft Team Uses CloudApp to Streamline their Media Capture Workflow

How to Embed Images in a Data Grid in Under 60 Seconds

Embedding Images in Under a Minute

How the ZingSoft Team Uses StatusHero to Improve Intra-Team Communication

What is User Testing, and Why is it Important?

General to Specific User Testing

User Feedback Formats

Determining Production Value

Click to view user testing template

Creating a data grid with a remote endpoint using ZingGrid

The [src] Attribute

Using the top-level <zing-grid> tag

Using the <zg-data> tag

Remote JSON

Dynamic Endpoint

Get Started with Data Basics in ZingGrid

Data types that ZingGrid accepts

Array of Objects

Array of Nested Objects

Object of Objects

Object of Nested Objects

Array of Arrays

Data Assignment in ZingGrid

HTML Inline Data (Stringified)

ZingGrid API

Attribute Manipulation

Creating Your First Data Grid with ZingGrid

Importing the ZingGrid Library

CDN Link

Package Manager

Direct Download

Referencing the ZingGrid library

Rendering the Grid

Using the top-level `<zing-grid>` tag

Using the `<zg-data>` tag