Process Analytics - September 2021 Newsletter
Tags: github, news, hacktoberfest, typescript
Published: 2021-10-13 14:34:59

Welcome to the Process Analytics monthly newsletter 👋.

The goal of the Process Analytics project is to rapidly display meaningful Process Analytics components in your web pages using BPMN 2.0 notation and Open Source libraries.

Summer is over 🏖️, September was back to school 📚. October is Hacktoberfest 🍁. On our side, the project team worked hard to propose many new elements in our project:
-   Website changes
-   Hacktoberfest 2021 participation
-   GitHub organization profile
-   New examples of the bpmn-visualization TypeScript library

## Website: add the News section

Have you missed our past news? 😱 Don't worry, you can now access everything directly from the website home page. 😊

Remember that we cross post all our news on both [Medium](https://medium.com/@process-analytics) and [Dev.to](https://dev.to/process-analytics).

![The 'News' section in the website home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qrzawb86yczfsor0s2r9.png)
*The 'News' section in the website home page*

## Hacktoberfest participation as maintainers

The Process Analytics team is participating in [Hacktoberfest
2021](https://hacktoberfest.digitalocean.com/), as we did for [Hacktoberfest 2020](https://dev.to/marcin_michniewicz/hacktoberfest-challenge-398g).

🤔 What is Hacktoberfest?

> Hacktoberfest encourages participation in the open source community, which grows bigger every year.
> Hacktoberfest, in its 8th year, is a month-long celebration of open source software run by DigitalOcean. During the month of October, we invite you to join open-source software enthusiasts, beginners, and the developer community by contributing to open-source projects.

We prepared our project to be ready to welcome Hacktoberfest participants. This included updating examples and documentation, and polishing 🧹 the GitHub repositories.

You can find more details about our participation in the following article:
{% post process-analytics/hacktoberfest-2021-with-process-analytics-241 %}

## GitHub organization profile

The GitHub profile highlights our main repositories ✨ and explains how you can easily contribute to Process Analytics. ⏩ See the [live profile](https://github.com/process-analytics/).

![Cheat Sheet for contributing to Process Analytics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vc6oldrbzif1b53zpgth.png)
*Cheat Sheet for contributing to Process Analytics*

## bpmn-visualization TypeScript library

In September, we released 2 versions: [0.19.1](https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.19.1) & [0.19.2](https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.19.2).

In addition to internal improvements, they include new examples.

### Two new live examples

These new examples let you experiment with the bpmn-visualization integration and use the API directly in your browser. They can also be used as templates to demonstrate missing features or bugs.

They are available on various platforms:
-   [CodeSandbox](https://codesandbox.io/s/bpmn-visualization-sandbox-hpvq8)
-   [Codepen](https://codepen.io/process-analytics/pen/YzQzROg)

If you are not familiar with these live IDEs, visit the [CodeSandbox documentation](https://codesandbox.io/docs/start) and the [CodePen documentation](https://blog.codepen.io/documentation/).

With the proposed template 👇, you can test, for instance, the Overlays and style API. You will see the results in the browser in seconds.

![Playing with the Codepen template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xsos4c4dsxp2uvmwf83.gif)
*Playing with the Codepen template*

### Monitoring demo improvements

The demo now uses a new design that also allows users to select the data types to add to the BPMN diagram: ***Paths***, ***Overlays*** or ***Both***.

The legend part has also been improved. It displays:
-   The legend titles
-   Only the legends related to the selected data types

![Improvements of the monitoring processes demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0yayo2gbbzsu620l6s7g.gif)
*Improvements of the monitoring processes demo*

### Hacktoberfest 2021 theme demo revamped

The Hacktoberfest demo has been updated to use the Hacktoberfest 2021 theme, which has a refreshed design. Using the selection buttons, it is now possible to:
-   Easily change the theme (dark or light)
-   Choose the 2020 or 2021 flavor

Want to use the same kind of image to call for contributions for Hacktoberfest in your own project or access to the light and dark themes? ⏩ [Go to the live demo](https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/v0.19.2/demo/hacktoberfest-custom-themes/index.html)!

![Choose your favorite Hacktoberfest Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nrcv1aqbekwro216ohiu.gif)
*Choose your favorite Hacktoberfest Theme*

### Plans for the future

Here are the topics we will be managing in the coming months:
-   Create new examples to demonstrate other Process analytics / Process Mining use cases.
-   Add more tests to be able to upgrade mxGraph (the technical library in charge of the final rendering) to the latest version.

## That's All Folks!

We hope you enjoyed the September/October project news and are looking forward to what the rest of the fall will bring 👋.

In the meantime, to stay on top of the latest news and releases, follow us through:
-   Website: [https://process-analytics.dev](https://process-analytics.dev/)
-   Twitter: [@ProcessAnalyti1](https://twitter.com/ProcessAnalyti1)
-   GitHub: [https://github.com/process-analytics](https://github.com/process-analytics)

*Cover photo by* [Anne Nygård](https://unsplash.com/photos/0yp3Vvkfb8E) on [Unsplash](https://unsplash.com/)