DEV Community: Yuriy Sountsov

Faster Content Modeling with Kimmel

Yuriy Sountsov — Tue, 06 Apr 2021 20:39:28 +0000

Content modeling in Kontent

Kontent is a headless CMS platform that allows enterprises to reach more customers, unify content across the business, and structure content for future content needs, all in one place. As a headless CMS, all content delivery is API-driven, so the same content can show up on any device or channel. 🧠

What about content modeling? Modeling in Kontent is an art that has a dedicated space in the Kontent documentation. A successful content model can bring a project faster to release, make it easier to maintain, and satisfy future content needs beyond the initial requirements. Content models come in myriad forms, but largely involve content types, content type snippets, and content type elements. 🧩

Why does content modeling need to be faster?

The modern world is all about prototyping, iteration, and automation. Faster development, faster campaigns, faster release cycles, faster time to market. There are build and deployment pipelines, and AI-driven personalization algorithms. The faster you create your content model, the sooner downstream components can do their thing, thus making your colleagues happier and other teams in the company busier sooner. ⚡

With faster content modeling, all stakeholders can feel more empowered to contribute their insights and ideas, because they know that the effort-to-reward ratio is elevated with a faster process. It also means that mistakes are less significant, and any issues in the content model can be resolved with less time lost. 💯

What is Kimmel?

Kimmel is an app where you can use Kontent Model Language (KML) to quickly scaffold content types. Kimmel contains three parts: writing, parsing, and deploying. Writing is done in the browser just like Kontent. Parsing is done on a server and deploying is how you move the model into Kontent so you can start working with content based on the model. ⌨

How Kimmel helps you, the marketer

At the very start of the project, all stakeholders need to be involved in the content model. As a marketer, you can use Kimmel to quickly iterate some of your ideas on what the types should be and how they should relate. In Kimmel, you can quickly glance over everything described for the project so you can spot anything that is missing or unclear. Since KML is text-based, you can easily send it via email or chat to colleagues for review, or collaborate over a call. 🎉

How Kimmel helps you, the developer

When it comes to development, having a strong content model helps the applications using it be simpler and easier to read. Quickly iterating a content model in Kimmel accelerates the time it takes to reach the application architecture step and reduces the time until deliverables are ready for review. Seeing the types and their relationships can also give you a preview of what UI components to create or what backend services will be needed. If there is a need for custom elements, then you will be able to allocate time to make those or import them from the Custom element sample gallery. 📦

Content modeling in Kimmel

Writing KML

KML as a markup language is a shorthand for many of the same actions you can take in the Kontent interface when making content models. Its syntax is a of cross between YAML and TypeScript, but simplified for content modeling. First you describe a type like this:

Type My type

Then, on each new line under this first one you describe the elements, which are called properties in KML:

Type My type
  Date[] A date
  Text[] The title
  MultipleChoice[Awesome,Only amazing] How cool this is

Each property almost one-to-one corresponds to a Kontent element:

One major difference is that the multiple choice element is broken into two properties: SingleChoice and MultipleChoice to represent radio options and checkboxes, respectively.
Linked types are referenced by name:

  Type My type
    Date[] A date
    Text[] The title
    MultipleChoice[Awesome,Only amazing] How cool this is
    Type2[] A linked type

  Type2 My linked type

Snippets use a special prefix:

  Type My type
    Date[] A date
    Text[] The title
    MultipleChoice[Awesome,Only amazing] How cool this is
    Type2[] A linked type
    ...SnippetType

  Type2 My linked type

  SnippetType My snippet type

Url slugs and other supporting elements are not supported yet.

Properties can have options:

Type My type
  Date[*] A date
  Type2[1-3] A linked type

Type2 My linked type

The * means that the property is required, and 1-3 means that there is a minimum of 1 and a maximum of 3 items allowed in that property. 🧠

Options can have details:

Type My type
  Text[words(60)] The title

Writing words(60) means that property can have a maximum of 60 words. Different properties have their own options and details.

Using the Kimmel text editor, it is easy to write new properties and move them around between types. By clicking on a name, you can also see where else it shows up, all on one screen. 💻

Parsing KML

Once you have some KML written, Kimmel automatically parses it and shows you a structure of what you wrote (in our favorite format, JSON). If there are no syntax issues, you can expand and collapse types to see their values and relationships. This is a preview of how the types will look once they are in Kontent and ready for content. 🏃‍♀️

Kimmel includes a toggle called Strict which switches parsing between Strict mode and Loose mode. Strict mode produces an error if there is any issue with the structure that the KML represents: an undescribed linked type, a snippet inside a snippet, et cetera. Loose mode tries to fix some types of issues, and can be useful when you're quickly jotting down KML and wish to see the parsed result. 🧪

Deploying KML

The last step is deploying to Kontent. By clicking Deploy to Kontent and providing a Management API key, all of the KML is added to the key's project as new types. Once the model is deployed, you can start making content based on the model! 🎢

Photo by 贝莉儿 DANIST on Unsplash

Modeling common scenarios with Kimmel

Blog

A blog is a common content channel that easily decomposes to a complex content model. At the very top, you might have a name, featured posts, and information on social profiles:

Blog Blog
  Text[characters(60),*] Name
  Post[1+] Featured posts
  Social[1+] Social profiles

Social
  Text[*] URL
  Asset[images] Icon

The name is required and limited to 60 characters. We do not want long blog names! There is always at least one (read as "one plus") featured post, and the same for social profiles. 📱

Posts have some useful properties, like a title, teaser, authors, a header image, categories, and, of course, the body:

Post Blog post
  Text[characters(80),*] Title
  Text[*] Teaser
  Person[1+,*] Authors
  CreditedImage[1,*] Header
  Category[1+] Category
  RichText[p,b,i,a,ul,images,h2,*] Body
    Product

CreditedImage
  Asset[images,*] Header
  Person[1+,*] Authors

Category
  Text[words(3)] Name
  MultipleChoice[Highlight] Options

The header image is more than just an asset: it also includes information about the authors or photographers of the image. The body allows a few common styles, images, and one component, product. This represents a callout of an external product that the authors reference in their copy. 🎁

The last two types represent a person and a product. Both of them can have a single photo asset and descriptions with limited styles:

Person
  Text[words(3),*] Name
  Text[] URL
  Asset[1,images] Photo
  SingleChoice[Contributor,Associate,Owner] Position
  RichText[p,a,words(30)] Short biography
  RichText[p,a,words(60)] Biography
  Social[] Social profiles

Product
  Text[*] Name
  Number[*] Price
  Number[*] Discount
  Text[*] Store name
  Asset[1,images,*] Photo
  RichText[p,a,words(60)] Description
  Text[*] URL

Only the person's name is required; everything else is optional! Contrast that with product, where only the description is optional. ⚖

With these types, you can create rich blog content with room for expansion down the line: more components in the posts' rich text, or wider restrictions for different copy. 🎉

Billboard

Kimmel, like Kontent, is not limited to web content models. A billboard, or a non-web screen, is a good example of a channel outside of websites. Billboards typically have rotating ads with transitions between each one. At the top is the billboard itself:

Billboard Billboard
  Ad[1+,*] Ads
  Transition[1] Default transition

There is no name or other external information because the billboard is presented without a user context: it could be by a highway, at a bus station, or in a shopping mall, so only the ads are presented. Ads and transitions represent just enough content for an editor or an integration to compose a billboard experience:

Ad
  Asset[images,1,*] Content
  Number[*] Duration in seconds
  SingleChoice[Preferred,High,Medium,Low,Filler,*] Priority
  Transition[1] Custom transition

Transition
  Text[words(5),*] Name
  RichText[p,b,i,a] Description

You may have an integration to expose the model to a reseller using a custom presentation where they can configure their ads any way they want. This means that transitions need a name to distinguish them, but a description is optional. 🏷

Todo list

Lastly, we can consider a classic content model example: a todo list. A todo list is structured into projects and each project has any number of todo items in a hierarchy:

TodoList Todo list
  Project[1+,*] Projects

Project
  Text[*] Name
  RichText[p,a,b,i] Notes
  TodoItem[] Todo items

There are no restrictions on the number of todo items in a project. Each todo item has reminders and todo tasks:

TodoItem Todo item
  RichText[p,a,b,i,*] Content
  Date[] Due date
  Text[] Comment
  Reminder[] Reminders
  SingleChoice[Not started,In progress,Completed] Status
  SingleChoice[Red,Blue,Green,Orange,Yellow,Purple] Label
  TodoItem[] Todo items
  TodoTask[] Tasks

Reminder
  SingleChoice[Email,Text message,App] Type
MultipleChoice[Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday,*] Days
  Date[*] Time
  SingleChoice[Once,Weekly,*] Frequency
  Number[] Maximum times

TodoTask
  RichText[p,a,b,i,*] Content
  MultipleChoice[Highlight,Optional] Options

Since todo items can link to other todo items, this model contains "closed chains", which are measured in the stats of KML:

TodoItem>TodoItem
Project>TodoItem>TodoItem
TodoList>Project>TodoItem>TodoItem

Faster and faster

Kimmel promises to accelerate content modeling, simplify the content pipeline, and improve analytics on your content model. This ensures a strong foundation for the rest of the project, so that both marketers and developers can benefit and future changes can be prototyped. 🚅

Let me know down below if you have any questions or would like to start a discussion!

Xpand your Xperience with Xpandable Sections

Yuriy Sountsov — Mon, 05 Apr 2021 15:44:39 +0000

Sections in Kentico Xperience 13

Kentico Xperience 13 is a modern digital experience platform aimed at content management, digital marketing, and commerce projects. It can be deployed on-premises or in the cloud to deliver engaging, personalized experiences, create remarkable digital touchpoints, build solutions using a modern .NET MVC platform, and integrate with the tools you need. 👑

Kentico Xperience 13 includes a WYSIWYG page builder that structures page content into editable areas with sections, and sections into widget zones with widgets. Typically sections are created by developers to suit different layouts: two columns, three columns, a column and a CTA box, or any other presentation. Once defined in code, the sections are available in the page builder for marketers to use. 🖼

However, if there is a layout that a marketer wishes to have, they must go to the developers and describe their use case, from which the developers will need to prioritize a sprint to make it happen. This takes time and effort, delaying both the marketer and the developers' work and causing friction in the content pipeline. 😠

Enter no-code xpandable sections

The Xpandable section is a way to avoid that friction. It is a section which allows a marketer to define how many and in which shape the section's widget zones are. It can be two columns, three columns, or a Sierpinski triangle of zones - there are no limits! 🚀

The marketer can change the direction of a group of widget zones, switching from horizontal to vertical, and can also name zones for easy identification. 🎉

For styling, the direction, name, depth, and index of each widget zone show up as HTML classes, so targeting a specific zone or group of zones becomes straightforward. 💯

The section comes in a NuGet package (a shareable package of code) that a developer can install to your Kentico Xperience 13 project and then it becomes available in the page builder. After this one-time installation, no further developer assistance is needed. 👍

The possibilities xtend beyond the horizon! ☀

Let me know down below if you have any questions or would like to start a discussion!

Kontent ♥ Svelte ♥ Custom elements

Yuriy Sountsov — Wed, 24 Feb 2021 18:02:12 +0000

Photo by Clément Hélardot on Unsplash

The power of Kontent

But what is content? How do you define content? Kontent solves this by creating a reliable structure of items composed of elements. The elements range from plain text to dates to tags to lists of references to other items. Nearly anything can be modeled by combining these elements like LEGO pieces to represent a website, a training manual, a sport directory, you name it. ✨

With great power comes great exploration, and it sometimes happens that you want to model something outside of the known elements. Some examples are geolocation, a video, or a structured list of items. Kontent provides a way to model these and other types of content using custom elements. 🎉

Custom elements run on a host of your choice and only need a browser SDK to communicate with Kontent. This way they have their own UI and their own behavior, and give you freedom to model any content. We will come back to custom elements later... ⌚

The power of Svelte

Svelte is a state-of-the-art JavaScript application compiler that takes a lot of boilerplate out of writing browser apps so that you can focus on the reactive user experience. To learn more about Svelte check out the tutorial for a rundown of the basics. 🎓

The best way to deliver a good user experience is to be extremely fast. But why repeat what has already been well said by the creator himself? Just give this a watch: 👀

Along with Svelte comes Sapper, an easy way to create static sites running Svelte. Sapper can also quickly deploy to Vercel, a modern app host with unlimited deployments. 🔮

By their powers combined...

With Svelte, we have a way to rapidly create Kontent custom elements. While Svelte takes away the application boilerplate, there is still some boilerplate needed to make custom elements work - initialization, converting a rich object to a string value, reacting to changes in the context (e.g. we want to disable the element when the Kontent item is also disabled), and keeping up with the improving UI. 🤔

Introducing `kontent-custom-element-app`. 🎆

kontent-custom-element-app (KCEA for short) is a tool that maintains a template to make Kontent custom elements in Svelte as easy as a .svelte component in the src/routes/elements directory using <CustomElement /> to wrap the component's HTML. 🌯

<CustomElement bind:value bind:config bind:disabled>
  // Inputs and values here...
</CustomElement>

KCEA comes with one starter custom element showing different ways to store custom values. It bundles four types of content: text, number, date, and object: 🎭

KCEA also optionally installs two sample custom elements that show more possibilities: color and list. ⚡

Would you like to know more?

Photo by Stefan Steinbauer on Unsplash

KCEA comes with some bonus features!

VERCEL - The template is already set up for deployment to Vercel. Just install the Vercel CLI and then run vercel in the root of the app. Follow the prompts and you'll be good to share the element outside of localhost! 🌍
TYPESCRIPT - The template is also set up for TypeScript, and supports type annotation in components. It will evolve TypeScript support alongside Svelte's TypeScript support. It is a best practice to type value and config within your custom elements. 💪
UPDATES - When you update with npm i kontent-custom-element-app, the tool will update template files that have not been changed, and let you know which ones have so you can merge changes manually. An example of what that looks like: 🔍

  File at 'C:\ ... \src\routes\_layout.svelte' has been modified.
  Please manually merge changes from '_layout.svelte' into '_layout.svelte.new' and remove the '.new' extension.

USEFUL STUFF - <CustomElement /> has two named slots: loading and invalid. They let you pass in anything that you want to show when the element is loading (between page load and custom element initialization) and when the element's route is visited outside of Kontent. KCEA comes with the components <Loading /> and <Invalid /> to make these slots painless. KCEA also installs the following optional helpful things: 👍
- A <Filter /> component, which is a filtering text input with autocomplete and other features.
- An <ObjectTile /> component, which is styled to match asset references in Kontent and helps make custom elements blend into the Kontent UI.
- A localStorage store to reactively store values in the browser's local storage.
- A translate store to separate translations from the custom element presentation.
- A property action to remove some boilerplate around CSS variables on HTML nodes.
THE KONSERVATORY - If you want some inspiration, the author maintains a site with many KCEA custom elements at The Konservatory. The Konservatory itself runs on KCEA and thus hosts both a gallery and the elements themselves, showing how KCEA can be a base for more routes and more possibilities! 🤩

TL;DR Quickstart

Photo by Braden Collum on Unsplash

In an empty folder for the app:

npm init kontent-custom-element-app -n custom-element -s -r

Want a basic custom element component to start with? Go to the src/routes/elements directory and add this in a .svelte file:

Script, markup, and style code

<script lang="ts">
  import { fade } from "svelte/transition";

  import CustomElement from "../../shared/components/customElement/customElement.svelte";
  import Invalid from "../../shared/components/customElement/invalid.svelte";
  import Loading from "../../shared/components/loading.svelte";

  let value: string = "";
  let disabled: boolean;
</script>

<CustomElement bind:value bind:disabled>
  <div class="group column root" transition:fade>
    <input
      class="input"
      type="text"
      placeholder="Type here..."
      bind:value
      {disabled} />
  </div>
  <div slot="loading">
    <Loading />
  </div>
  <div slot="invalid">
    <Invalid />
  </div>
</CustomElement>

<style>
  .root {
    padding: 1em;
    background-image: linear-gradient(
      135deg,
      hsl(111, 10%, 98%),
      hsl(111, 35%, 90%)
    );
    border-radius: 0.5em;
  }

  input {
    background: none;
  }
</style>

Let me know down below if you have any questions or would like to start a discussion!

DEV Community: Yuriy Sountsov

Faster Content Modeling with Kimmel

Content modeling in Kontent

Why does content modeling need to be faster?

What is Kimmel?

How Kimmel helps you, the marketer

How Kimmel helps you, the developer

Content modeling in Kimmel

Writing KML

Parsing KML

Deploying KML

Photo by 贝莉儿 DANIST on Unsplash

Modeling common scenarios with Kimmel

Blog

Billboard

Todo list

Faster and faster

Xpand your Xperience with Xpandable Sections

Sections in Kentico Xperience 13

Enter no-code xpandable sections

Kontent ♥ Svelte ♥ Custom elements

Photo by Clément Hélardot on Unsplash

The power of Kontent

The power of Svelte

By their powers combined...

Introducing kontent-custom-element-app. 🎆

Would you like to know more?

Photo by Stefan Steinbauer on Unsplash

TL;DR Quickstart

Photo by Braden Collum on Unsplash

Introducing `kontent-custom-element-app`. 🎆