When we published our original list of UI frameworks for Angular, we covered Angular Material, NG-ZORRO, PrimeNG and several other libraries. Those are still useful options. However, there are some interesting additions to explore, especially if you want more control over how your app looks.

Spartan and Zard UI bring the shadcn-style approach to Angular: component code that you can add to your project and customise. Taiga UI is another library we didn't cover in the original article, with a large collection of controls for forms and more complex interfaces. It has been around for several years, so think of it as an addition to our list rather than a brand-new release.

Here are the UI libraries we'll take a look at:

• Spartan: separates component behaviour from styling, with a styled layer you keep in your own codebase.
• Zard UI: Angular components built with Tailwind CSS, with a CLI for adding their source to your project.
• Taiga UI: a modular component library with a wide selection of form controls and customisation options.
• Angular Material: Google's Material Design components and the Angular Component Dev Kit.
• PrimeNG: a broad component library with configurable themes.
• NG-ZORRO: an Angular implementation of Ant Design, with plenty of components for business applications.

We'll start with the three additions, then revisit the familiar options and where they fit.

Spartan UI

Spartan is worth exploring if you've seen shadcn-style interfaces and want that approach in an Angular app.

It splits its components into two parts. Brain provides the underlying behaviour, including keyboard navigation, focus management and ARIA attributes. You install it as a dependency. Helm provides the styled layer, which is copied into your project and uses Tailwind CSS.

This means you can change the appearance directly in the code you own. For example, if your design calls for a compact dialog with a different header layout, you can edit that layer while continuing to use the underlying primitive.

One of the coolest components to explore is the command menu. It gives you a searchable list of actions, similar to the command palettes you may already use in a code editor.

Let's say you're building a product analytics dashboard. You could add commands for opening a saved report, switching projects or inviting a teammate. Someone who uses the app every day could find the action they need without clicking through several navigation menus.

You still connect those actions to your application. The component provides the interface; your code decides what happens when the user selects “Open retention report.”

The sheet component is useful too. It presents content in a panel at the edge of the screen. You could use it to show a customer's details while keeping the customer list visible underneath, or to let someone adjust filters without leaving a report.

Spartan is especially interesting when you already have a design in mind. You get a starting point for the controls and can shape their appearance around the product.

There is some maintenance involved in keeping your own component code. When the project improves its styled components, you'll need to decide which changes to bring into your version. Spartan's update guide is a useful place to start. Keep your customisations focused so that reviewing those changes stays manageable.

Zard UI

Zard UI is another option for bringing a shadcn-inspired design to Angular. It uses Tailwind CSS and modern Angular features such as standalone components and signals.

The CLI helps you initialise the project and add the components you want. Their source lives in your application, where you can inspect and modify it.

That workflow is handy when the default component is nearly right. Perhaps your product needs a particular button variant, a different spacing convention or an extra piece of information inside a card. You can make that change in the shared component and use it across your screens.

The component collection includes dialogs, comboboxes, calendars, sidebars, sheets, tables and loading placeholders. You can use those pieces to assemble the navigation and forms for a customer portal or an internal tool.

The Input OTP component is a good example of a small control that can save some fiddly UI work. It provides an interface for entering a verification code. That could fit into an email verification screen or a two-factor authentication flow.

Your authentication service still generates and checks the code. The UI component handles the entry part of the experience. When trying it out, include the less pleasant cases too: an incorrect code, an expired code and someone pasting a code from their email.

Zard also has a command component, so it's worth comparing with Spartan if a searchable action menu is part of your design. Build the same small menu in both and see which API and component structure you prefer.

For example, try a menu that searches a few saved reports, groups account actions separately and shows a useful empty state. That gives you something concrete to evaluate beyond the appearance of the default demo.

Zard UI makes sense for a team that enjoys working directly with component source and Tailwind styles. As with any code you bring into your project, plan to review upstream improvements alongside your own changes.

Taiga UI

Taiga UI takes a different approach. It is a component library you install and configure, with a broad collection of controls, directives and supporting tools.

The project is modular and designed for tree shaking, so you can import the parts you use. It also supports customisation through CSS custom properties and includes dark-theme support.

The range of form controls is a good reason to explore it. Once an application grows beyond a few text fields, you start needing date ranges, multiple selections, formatted values and controls that work well together.

The InputChip component lets you represent multiple items in a field. You could use it for tags on a support ticket, a list of recipients or a set of selected player segments.

For example, a game analytics tool might let you filter a report to players on Android and iOS. Showing those choices as removable chips makes it easy to see which filters are active and remove one without resetting the whole form.

Taiga's examples include different item presentations and customisation options. That is useful when a plain string isn't enough and you want to display more context for each selection.

The InputDateRange component is another practical one. A reporting screen usually needs a start and end date, and putting those together gives users a clear way to choose the period they want to inspect.

You could use it above a DAU and MAU dashboard, alongside filters for platform or country. Your application then uses those selections to request the relevant data and update the report.

When evaluating it, check how the values from the control map to your API. A date selected by a user needs a clear interpretation in the reporting system, particularly when the report includes users in different time zones.

Taiga UI is worth a closer look if your app has lots of forms, filters and selection controls. Try several related controls together on one screen. That will tell you much more than trying a button or datepicker on its own.

Angular Material UI

Angular Material remains a useful starting point for apps that suit Google's Material Design. It covers familiar controls such as form fields, buttons, menus, dialogs and tables.

For an account settings area, you can use these components to build profile forms, notification preferences and confirmation dialogs with a consistent appearance.

The Angular CDK, or Component Dev Kit, is also worth knowing about. It provides building blocks for UI behaviour, including overlays, drag and drop, scrolling and accessibility utilities. You can use it when you're building a custom component and need help with those interactions.

Material belongs on the shortlist when its design suits the application and the team wants a shared set of conventions. If you're planning extensive visual changes, prototype those changes on a form and a dialog before applying the library throughout the app.

PrimeNG

PrimeNG is still worth exploring when you want a wide selection of components from one library. It covers forms, data display, menus and overlays, with a theming system for adjusting the appearance.

Its styled mode uses design tokens. These let you define shared choices such as colours and component styling through a theme. Presets include Aura, Material, Lara and Nora.

For example, if you're building a customer portal, you can establish the brand colours and form appearance centrally before adding more pages. That is easier to keep consistent than styling every screen independently.

One current detail to check is charting. The chart documentation announces that its Chart.js-based components will be removed in a future release in favour of PrimeUI PRO Charts. If charts are central to your application, review that direction before choosing your implementation.

NG-ZORRO

NG-ZORRO brings Ant Design to Angular and makes its components available under the MIT licence. It is a useful option for admin interfaces and other applications with a lot of information to organise.

Its component catalogue includes tables, forms, drawers, trees and timelines.

A drawer could show the details of a selected order while the order list stays in the background. A timeline could display the steps taken to resolve a support request. These are useful patterns when users need context from several parts of a record.

The cascader is another interesting control. It lets someone select an item through a hierarchy, such as a department, category and subcategory.

NG-ZORRO is a good one to explore when Ant Design already matches the direction of your product. Start with its more specialised controls and see how well they fit the workflows you're building.

What About Grids, Charts and Scheduling?

Some applications need a more specialised component suite. If your main screen revolves around a complex data grid, appointment scheduling or financial charts, the commercial libraries from our original article are still worth evaluating.

Kendo UI for Angular, DevExtreme and Ignite UI for Angular offer controls in this area. Check which features are included in the particular package and licence you're considering.

Kendo UI for Angular

DevExtreme

Ignite UI for Angular

A useful evaluation is to build the busiest screen in your application. Include the filtering, editing and export behaviour users actually need. A simple table demo won't tell you whether a library can handle the workflow your finance or operations team has in mind.

Which Angular UI Library Should You Try?

If you want to customise component source and work with Tailwind CSS, start by comparing Spartan and Zard UI. If you're looking for a broad selection of configurable form controls, take a closer look at Taiga UI. Material, PrimeNG and NG-ZORRO remain useful alternatives when their components and design conventions suit the application.

Pick one real screen for the comparison. An analytics report is a good example: it might need a date range, a few filters, a results table and a dialog for saving the report.

Include loading states, validation messages and empty results. Try the screen on a smaller display and use it with the keyboard. If your app uses server-side rendering or zoneless change detection, check compatibility with the specific library version you plan to install.

You'll also want to decide how much UI code your team wants to maintain. Editing a component directly gives you flexibility, while configuring an installed library can make shared updates more straightforward.

The demos are a great place to discover interesting components. Putting a few of them together around a task your users need to complete is how you find the right fit for your Angular app.

Angular UI component comparison

Here is a grouped reference for the nine frameworks covered above. A dash means there is no separate matching catalogue entry in this comparison, not that the framework cannot build that interface. For example, a combobox can cover an autocomplete workflow, and an input component can support textareas.

Check the package and licence for the commercial suites; Ignite UI has both open-source and premium components. PrimeNG's Chart is included below, but its documentation announces its retirement, as noted above.

Layout, containers and overlays

Feedback and loading

Files, media and specialised controls

Inputs and selection

Data display and grids

Actions and navigation

Dates, calendars and time

Charts and visualisation

Headless interaction primitives

Tools for Error Tracking and Application Performance Monitoring

This is where error tracking tools come into play. There are many to choose from and they have different features and price points.

Here are some great options for error tracking tools, in a table for easier comparison. Note that each of the products and services may offer more than just error tracking in its feature set.

However, not all error tracking tools have official support for some programming languages and frameworks. Not all of them have clear documentation, tutorials and guides. It's important to evaluate error tracking tools based on whether they support the programming languages your team is using, the user interface to view the errors, whether it supports SAML and Single Sign On, and whether the documentation is helpful. For example, PostHog has an official Android SDK but does not have an SDK for iOS although that gap can be filled by capturing errors and exceptions and manually sending them via HTTPS. Self-hosted open source versions of the error tracking service may also differ in the feature set and offer fewer features than the cloud-hosted version.

Implementing Error Tracking

Typically, the SDKs for each error tracking service will provide a way to capture all errors and exceptions and send them to the service, the only requirement being that you create an account and supply an API key. Other parameters such as the version release number and user information can be included when sending data about the error that occurred.

The following is a reference with links to packages for each error tracking tool along with code samples to show how to add them to your project.

BugSnag:

• BugSnag for Android
• BugSnag for iOS
• BugSnag package for Unity
• BugSnag package for Unreal Engine
• BugSnag integration for Cocos2d-x

BugSink supports the Sentry SDKs:

• Sentry SDK for Android
• Sentry SDK for iOS
• Sentry SDK for Unity
• Sentry SDK for Unreal Engine
• Sentry SDK for Godot Engine
• Sentry SDK for browser JavaScript

DataDog:

• Datadog for Android
• Datadog for iOS
• Datadog for Unity

GlitchTip:

• GlitchTip for Android
• GlitchTip for Objective-C
• GlitchTip for C#
• GlitchTip for C/C++
• GlitchTip for browser JavaScript

Highlight / LaunchDarkly:

• LaunchDarkly for Android
• LaunchDarkly for iOS
• LaunchDarkly for JavaScript
• Highlight for JavaScript

PostHog:

• PostHog for Android
• PostHog for browser JavaScript
• PostHog for React

Raygun:

• Raygun for Android
• Raygun for iOS
• Raygun for C++
• Raygun for JavaScript
• Raygun for Unity

Rollbar:

• Rollbar for Android
• Rollbar for iOS
• Rollbar for C#

Implementing Error Tracking for a Python Server

The following are some code samples for implementing Error

Rollbar for Python

Rollbar can be implemented for FastAPI, Django, Celery, or directly in Python like this:

import os
import rollbar

rollbar.init(os.getenv('ROLLBAR_API_KEY'), os.getenv('SERVER_ENVIRONMENT'), code_version=os.getenv('COMMIT_SHA'))

try:
    main_app_loop()
except IOError:
    rollbar.report_message('Got an IOError in the main loop', 'warning')
except:
    # catch-all
    rollbar.report_exc_info()

BugSnag for Python

BugSnag for standalone Python scripts:

import os
import os.path
import bugsnag

bugsnag.configure(
    api_key=os.getenv("BUGSNAG_API_KEY"),
    project_root=os.path.abspath(os.path.dirname(__file__)),
)

BugSnag for Django applications:

# settings.py
import os
import os.path
import bugsnag

BUGSNAG = {
    "api_key": os.getenv("BUGSNAG_API_KEY"),
    "project_root": os.path.abspath(os.path.join(os.path.dirname(__file__), "..")),
}

# ...

MIDDLEWARE = (
    "bugsnag.django.middleware.BugsnagMiddleware",
)

Implementing Error Tracking in JavaScript for Browser-Based Games

Rollbar for JavaScript and TypeScript

Rollbar can be added to React, Angular, and Vue:

import Rollbar from 'rollbar';

const rollbar = new Rollbar({
  accessToken: 'ROLLBAR_ACCESS_TOKEN',
  environment: 'production',
});

BugSnag for JavaScript

import Bugsnag from '@bugsnag/js';

Bugsnag.start({
  apiKey: 'BUGSNAG_API_KEY',
  onError: (event) => {
    event.setUser('user-id', 'user-email@localhost', 'User Name');
  }
);

Datadog for JavaScript

import { datadogRum } from '@datadog/browser-rum';

datadogRum.init({
  applicationId: 'APP_ID',
  clientToken: 'CLIENT_TOKEN',
  service: 'SERVICE_NAME',
  env: 'ENVIRONMENT_NAME',
  version: '1.0.0',
  trackUserInteractions: true,
  trackResources: true
});

Migrating From Sentry to BugSink or GlitchTip

The advantage of BugSink and GlitchTip are that they are open source and can be self-hosted. In addition, both error tracking services are compatible with Sentry SDKs. That means you can use the Sentry SDK with any language that they support, set the dsn URL endpoint to BugSink or GlitchTip and start tracking.

If you choose to use the cloud version of Bugsink or GlitchTip, here's how their error tracking plans compare to Sentry (as of October 2026), with the number of error events the plan can track per month. Bugsink prices are converted from euros using the ECB reference rate for October 2, 2026 (€1 = $1.1225) and rounded to the nearest dollar:

This is the example code in Python that will send error traces to BugSink by configuring the Sentry SDK:

import sentry_sdk
import time
 
sentry_sdk.init(
    dsn="http://your_key@localhost:8001/1",
    traces_sample_rate=1.0
)

print("Causing an error")
1 / 0

This is JavaScript/TypeScript/HTML example code that will send errors to GlitchTip, again by configuring the Sentry SDK to use a different dsn URL endpoint value:

<!DOCTYPE html>
<html>
<body>
    <h1>GlitchTip Test</h1>
    <button onclick="throwError()">Throw Error</button>
    <script
      src="https://browser.sentry-cdn.com/10.38.0/bundle.min.js"
  integrity="sha384-/oTG1DxxBD0jT/ShtVYNvpwDmS2j9zVqquIKPRo4LxMLUCnwdUywlKzgEIwS1mEY"
  crossorigin="anonymous"
    ></script>
    <script>
        const GLITCHTIP_DSN = "http://your_key@localhost:8000/1";
        Sentry.init({ dsn: GLITCHTIP_DSN });
        function throwError() { throw new Error("Hello GlitchTip!"); }
    </script>
</body>
</html>

The following is a Docker compose that will run both BugSink and GlitchTip for testing the Python and JavaScript code above:

x-environment: &default-environment
  DATABASE_URL: postgres://postgres:postgres@postgres:5432/postgres
  VALKEY_URL: "" # Set to enable Valkey. Ex: redis://valkey:6379
  SECRET_KEY: change_me_to_something_random # best to run openssl rand -hex 32
  EMAIL_URL: consolemail:// # Example smtp://email:password@smtp_url:port https://glitchtip.com/documentation/install#configuration
  GLITCHTIP_DOMAIN: https://glitchtip.example.com # Change this to your domain
  DEFAULT_FROM_EMAIL: email@example.com # Change this to your email
  ENABLE_ADMIN: "False" # Set to True to enable Django Admin at /admin/
  ENABLE_OPENAPI: "False" # Set to True to enable OpenAPI spec at /api/docs
  # PORT: 8000 # If changing, change the web service port too

services:
  # GlitchTip
  # https://glitchtip.com/assets/compose.minimal.yml
  glitchtip_postgres:
    image: postgres:18
    environment:
      POSTGRES_HOST_AUTH_METHOD: "trust"
    restart: unless-stopped
    volumes:
      - pg-data:/var/lib/postgresql
  glitchtip:
    image: glitchtip/glitchtip:6 # Check https://glitchtip.com/blog/ for new major versions
    depends_on:
      - glitchtip_postgres
    ports:
      - "8000:8000"
    environment: *default-environment
    command: ./bin/run-all-in-one.sh # Runs web/worker/migrate all in one process
    restart: unless-stopped
    volumes:
      - uploads:/code/uploads

  # BugSink
  # https://github.com/bugsink/bugsink/blob/main/docker-compose-sample.yaml
  bugsink_db:
    image: postgres:17-alpine
    restart: unless-stopped
    environment:
      POSTGRES_USER: bugsinkuser 
      POSTGRES_PASSWORD: your_super_secret_password  # Change this
      POSTGRES_DB: bugsink
    volumes:
      - db-data:/var/lib/postgresql/data
    healthcheck:
      test: pg_isready -h db      
      retries: 5
      start_period: 10s
      interval: 5s
      timeout: 5s

  bugsink:
    image: bugsink/bugsink:2
    depends_on:
      bugsink_db:
        condition: service_healthy
    restart: unless-stopped
    ports:
      - "8001:8000"
    environment:
      SECRET_KEY: django-insecure-RMLYThim9NybWgXiUGat32Aa0Qbgqscf4NPDQuZO2glcZPOiXn  # Change this (and remove django-insecure prefix), e.g. openssl rand -base64 50
      CREATE_SUPERUSER: email:password  # Change this (or remove it and execute 'createsuperuser' against the running container)
      PORT: 8000
      DATABASE_URL: postgresql://bugsinkuser:your_super_secret_password@db:5432/bugsink # Change password to match POSTGRES_PASSWORD above
      BEHIND_HTTPS_PROXY: "false"  # Change this for setups behind a proxy w/ ssl enabled
      BASE_URL: "http://localhost:8000"
    healthcheck:
      test: ["CMD-SHELL", "python -c 'import requests; requests.get(\"http://localhost:8000/\").raise_for_status()'"]
      interval: 5s
      timeout: 20s
      retries: 10

volumes:
  db-data:
  pg-data:
  uploads:

If you would rather run them on Kubernetes, the following manifest deploys the same two services into an error-tracking namespace. Each one gets its own PostgreSQL StatefulSet and a Secret for credentials. Replace every change_me value before using it anywhere other than a local test:

apiVersion: v1
kind: Namespace
metadata:
  name: error-tracking
---
# GlitchTip
# Compose reference: https://glitchtip.com/assets/compose.minimal.yml
apiVersion: v1
kind: Secret
metadata:
  name: glitchtip
  namespace: error-tracking
type: Opaque
stringData:
  POSTGRES_PASSWORD: change_me # Change this
  DATABASE_URL: postgres://postgres:change_me@glitchtip-postgres:5432/postgres # Password must match POSTGRES_PASSWORD
  SECRET_KEY: change_me_to_something_random # best to run openssl rand -hex 32
---
apiVersion: v1
kind: Service
metadata:
  name: glitchtip-postgres
  namespace: error-tracking
spec:
  clusterIP: None
  selector:
    app: glitchtip-postgres
  ports:
    - port: 5432
---
apiVersion: apps/v1
kind: StatefulSet
metadata:
  name: glitchtip-postgres
  namespace: error-tracking
spec:
  serviceName: glitchtip-postgres
  replicas: 1
  selector:
    matchLabels:
      app: glitchtip-postgres
  template:
    metadata:
      labels:
        app: glitchtip-postgres
    spec:
      containers:
        - name: postgres
          image: postgres:18
          ports:
            - containerPort: 5432
          env:
            - name: POSTGRES_PASSWORD
              valueFrom:
                secretKeyRef:
                  name: glitchtip
                  key: POSTGRES_PASSWORD
          volumeMounts:
            - name: pg-data
              mountPath: /var/lib/postgresql
          readinessProbe:
            exec:
              command: ["pg_isready", "-U", "postgres"]
            initialDelaySeconds: 5
            periodSeconds: 5
  volumeClaimTemplates:
    - metadata:
        name: pg-data
      spec:
        accessModes: ["ReadWriteOnce"]
        resources:
          requests:
            storage: 5Gi
---
apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  name: glitchtip-uploads
  namespace: error-tracking
spec:
  accessModes: ["ReadWriteOnce"]
  resources:
    requests:
      storage: 1Gi
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: glitchtip
  namespace: error-tracking
spec:
  replicas: 1 # The all-in-one script runs web, worker and migrations in one process
  strategy:
    type: Recreate # The uploads volume is ReadWriteOnce
  selector:
    matchLabels:
      app: glitchtip
  template:
    metadata:
      labels:
        app: glitchtip
    spec:
      initContainers:
        - name: wait-for-db
          image: postgres:18
          command: ["sh", "-c", "until pg_isready -h glitchtip-postgres -p 5432; do sleep 2; done"]
      containers:
        - name: glitchtip
          image: glitchtip/glitchtip:6 # Check https://glitchtip.com/blog/ for new major versions
          command: ["./bin/run-all-in-one.sh"]
          ports:
            - containerPort: 8000
          envFrom:
            - secretRef:
                name: glitchtip
          env:
            - name: VALKEY_URL
              value: "" # Set to enable Valkey. Ex: redis://valkey:6379
            - name: EMAIL_URL
              value: consolemail:// # Example smtp://email:password@smtp_url:port https://glitchtip.com/documentation/install#configuration
            - name: GLITCHTIP_DOMAIN
              value: http://localhost:8000 # Change this to your domain
            - name: DEFAULT_FROM_EMAIL
              value: email@example.com # Change this to your email
            - name: ENABLE_ADMIN
              value: "False" # Set to True to enable Django Admin at /admin/
            - name: ENABLE_OPENAPI
              value: "False" # Set to True to enable OpenAPI spec at /api/docs
          volumeMounts:
            - name: uploads
              mountPath: /code/uploads
          readinessProbe:
            tcpSocket:
              port: 8000
            initialDelaySeconds: 15
            periodSeconds: 10
      volumes:
        - name: uploads
          persistentVolumeClaim:
            claimName: glitchtip-uploads
---
apiVersion: v1
kind: Service
metadata:
  name: glitchtip
  namespace: error-tracking
spec:
  selector:
    app: glitchtip
  ports:
    - port: 8000
      targetPort: 8000
---
# BugSink
# Compose reference: https://github.com/bugsink/bugsink/blob/main/docker-compose-sample.yaml
apiVersion: v1
kind: Secret
metadata:
  name: bugsink
  namespace: error-tracking
type: Opaque
stringData:
  POSTGRES_USER: bugsinkuser
  POSTGRES_PASSWORD: your_super_secret_password # Change this
  POSTGRES_DB: bugsink
  DATABASE_URL: postgresql://bugsinkuser:your_super_secret_password@bugsink-db:5432/bugsink # Password must match POSTGRES_PASSWORD
  SECRET_KEY: change-me-to-a-long-random-string-of-at-least-50-characters # Change this; Bugsink refuses to start with a short or django-insecure- key. e.g. openssl rand -base64 50
  CREATE_SUPERUSER: admin@example.com:change_me # Format is email:password. Change this (or remove it and run 'createsuperuser' in the running pod)
---
apiVersion: v1
kind: Service
metadata:
  name: bugsink-db
  namespace: error-tracking
spec:
  clusterIP: None
  selector:
    app: bugsink-db
  ports:
    - port: 5432
---
apiVersion: apps/v1
kind: StatefulSet
metadata:
  name: bugsink-db
  namespace: error-tracking
spec:
  serviceName: bugsink-db
  replicas: 1
  selector:
    matchLabels:
      app: bugsink-db
  template:
    metadata:
      labels:
        app: bugsink-db
    spec:
      containers:
        - name: postgres
          image: postgres:17-alpine
          ports:
            - containerPort: 5432
          env:
            - name: POSTGRES_USER
              valueFrom:
                secretKeyRef:
                  name: bugsink
                  key: POSTGRES_USER
            - name: POSTGRES_PASSWORD
              valueFrom:
                secretKeyRef:
                  name: bugsink
                  key: POSTGRES_PASSWORD
            - name: POSTGRES_DB
              valueFrom:
                secretKeyRef:
                  name: bugsink
                  key: POSTGRES_DB
            - name: PGDATA
              value: /var/lib/postgresql/data/pgdata # Subdirectory avoids the volume's lost+found
          volumeMounts:
            - name: db-data
              mountPath: /var/lib/postgresql/data
          readinessProbe:
            exec:
              command: ["pg_isready", "-U", "bugsinkuser", "-d", "bugsink"]
            initialDelaySeconds: 5
            periodSeconds: 5
  volumeClaimTemplates:
    - metadata:
        name: db-data
      spec:
        accessModes: ["ReadWriteOnce"]
        resources:
          requests:
            storage: 5Gi
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: bugsink
  namespace: error-tracking
spec:
  replicas: 1
  selector:
    matchLabels:
      app: bugsink
  template:
    metadata:
      labels:
        app: bugsink
    spec:
      initContainers:
        - name: wait-for-db
          image: postgres:17-alpine
          command: ["sh", "-c", "until pg_isready -h bugsink-db -p 5432; do sleep 2; done"]
      containers:
        - name: bugsink
          image: bugsink/bugsink:2
          ports:
            - containerPort: 8000
          envFrom:
            - secretRef:
                name: bugsink
          env:
            - name: PORT
              value: "8000"
            - name: BEHIND_HTTPS_PROXY
              value: "false" # Change this for setups behind a proxy w/ ssl enabled
            - name: BASE_URL
              value: http://localhost:8001 # Change this to your domain
          readinessProbe:
            tcpSocket:
              port: 8000
            initialDelaySeconds: 15
            periodSeconds: 10
---
apiVersion: v1
kind: Service
metadata:
  name: bugsink
  namespace: error-tracking
spec:
  selector:
    app: bugsink
  ports:
    - port: 8000
      targetPort: 8000

Apply it and use kubectl port-forward to reach each service on the same ports as the Docker compose, so the dsn values in the Python and JavaScript examples above work unchanged:

kubectl apply -f error-tracking.yaml
kubectl -n error-tracking port-forward svc/glitchtip 8000:8000
kubectl -n error-tracking port-forward svc/bugsink 8001:8000

BugSink won't start with a short or django-insecure- prefixed SECRET_KEY, and CREATE_SUPERUSER must be in email:password format. The first login for BugSink is the email and password from that value.

How they indicate game health

Healthy games have a good amount of DAU and MAU and have high stickiness, with players returning to enjoy the game or find out what’s new. The metrics can show seasonal trends and trends around holidays. A low amount of daily players can indicate marketing or distribution issues, while a low DAU/MAU ratio can indicate other issues.

Different types of games can have different measures of what a successful DAU/MAU ratio is. Single-player games that are bought once can have a low DAU/MAU ratio. However, that type of game can still have a high player satisfaction rating and can be profitable in terms of number of units sold. Multiplayer games and live ops games need a minimum amount of players in the pool for matches to take place or to populate the game world. For that type of game, the DAU/MAU can indicate whether there needs to be a boost in players with a marketing campaign or by updating or releasing new features. This is where quantitative data can lead to more investigation via qualitative means such as player surveys and reading through player feedback in game reviews.

There are limitations to DAU/MAU metrics. While they reflect on engagement and retention, they are high-level averages that may not correlate with the actual revenue performance or player satisfaction with the game.

Interpreting DAU/MAU ratio for engagement

The DAU and MAU ratio compares how often a player engages with the game in a day versus a month. If there are 10,000 players in a month and there are around 300 players in a day, then the ratio is 300 DAU to 10,000 MAU which is 3%; if there are 5,000 DAU and 25,000 MAU, the ratio is 20%. This ratio is a high-level view of how sticky your game is and how often players return to the game. A ratio of 3% is low, while a ratio of 20% is considered widely to be great and higher ratios of 50% are incredible.

Simple steps to start tracking these metrics

1. Define what an “active” player is: do they need to log in once and play a move in the game or play for at least a few minutes or take some other actions?
2. Track when they hit the milestones to be considered active in a day
3. Build a dashboard that tracks this number over 24 hours and the past 30 days
   1. Create charts to show the DAU and MAU
   2. Create cohorts and filters for player attributes to understand differences in DAU and MAU across the player base

How to create and view DAU/MAU charts

Many analytics dashboards now offer charts of DAU and MAU. However, each product can define an “active” user differently, so it is important to choose an event that represents meaningful activity for your game before comparing tools or interpreting the ratio.

Google Analytics provides a starting point for tracking these metrics. The engagement overview report includes a user activity over time card that shows activity over the past 1, 7, and 30 days. The user stickiness documentation explains how Google Analytics calculates DAU/MAU, DAU/WAU, and WAU/MAU. Google Analytics counts users who engaged with a website while it was in focus or an app while it was in the foreground. For games, it is better to use a meaningful in-game event for your active-player definition instead of assuming that opening the game is sufficient.

Mixpanel can also be used to measure these metrics. Its guide to DAU, WAU, and MAU recommends selecting an event that active users should perform. The Insights documentation explains how to select the event, measure unique users or DAU/WAU/MAU, choose a date range, and view the results as a time-series chart.

PostHog provides a tutorial for calculating the DAU/MAU ratio. It shows how to create an insight with daily active users and monthly active users, divide the series with a formula, and display the result as a percentage. The Trends documentation explains how to select Daily active users, change the date range, group the chart by day or month, and save the insight.

There are also open-source analytics products and services that can be used for these metrics. Countly has a native Active Users view that displays daily, weekly, and monthly active users in a chart or table. Countly defines active users as unique users who initiated at least one session, which may be broader than the definition used for a game.

Matomo is an open-source and self-hostable analytics platform. Where the Custom Reports feature is available, the Custom Reports guide explains how to select dimensions, metrics, filters, and an evolution graph for a custom active-user report. Matomo also documents how to use its Looker Studio connector to create a time-series chart. Use the event or user metric that matches the active-player definition instead of assuming that Matomo’s default visitors metric is DAU or MAU.

Umami is another open-source option. Its Boards documentation explains how to create and view dashboards, and the board design guide documents visitor and custom-event charts. Umami’s documented board components focus on visitor and custom-event charts rather than a native DAU/MAU view. Use a custom event definition and the Umami API to calculate and chart DAU/MAU when the built-in visitor metrics do not match your needs.

Whichever tool you choose, save the definition of “active” with the dashboard. A ratio built from app opens is not directly comparable to one built from completed matches, purchases, or another meaningful player action.

Product analytics is a way for you to track what players, customers, users are doing on your website, within your game, or within your mobile app. It is a quantitative way to understand interactions and workflows within your product.

When combined with qualitative user research, such as surveys, product analytics can provide a comprehensive view of user experience and guide decision-making to improve the overall user experience and drive business success. As a decision-maker, understanding and leveraging product analytics is crucial for making informed, data-driven decisions and staying competitive in today's market.

Why is it important?

Product analytics is critical for understanding how people are using your product. With data from product analytics, we can identify which features are most commonly used. It enables us to identify opportunities for improvement of features whether through product and engineering or through marketing efforts. It can also show how often and when users are logging in and how often they return to the product, giving you significant insight in user engagement and retention.

Your competitors are measuring engagement and retention in their games, and it’s giving them an edge in understanding how to drive revenues and improve the player experience.

Before implementing analytics, it is essential to establish clear goals, such as increasing engagement with specific features, driving revenue through NFTs or In-App Purchases, or improving the overall player experience.

Metrics for Games and Web3 NFT Gaming

Some of the metrics for games that are important include (GameAnalytics as a great list of metrics and KPIs):

• Average session length
• DAU, daily active users
• Retention, the number of players returning every day or after some number of days
• Load times, how quickly the game loads and how quickly each screen or level loads
• Paying users, number of users who have made purchases in day
• Win percentage, how often players are completing levels or winning rounds in the game

It may also be important to keep track of which devices and operating systems players are playing the game on. For Web3 NFT games, the type of wallet used can be useful to know for QA purposes to ensure that there is more testing with those wallets. Knowing that some players spend a lot on NFTs can also be a useful way to segment the audience for airdrops or game features.

For all games, DAU and MAU are important to measure. The number of daily active users and monthly active users provides an overview of the player base and are indicative of the engagement that a game has. During holidays and marketing launches, the number of daily active users may increase a lot for a short period of time.

Metrics for Websites and E-commerce

Some of the metrics a website or e-commerce site will want to keep track of are:

• Revenue
• Popular products and product categories viewed
• Popular products added to cart
• Average session length
• Traffic sources

E-commerce and websites will want to track every link click and page navigation event to understand which pages, articles, products and product categories are being viewed.

For e-commerce, the checkout process is a funnel that needs to be measured to see where customers are dropping off. It could be because there are too many distractions on the checkout page, or it could be because form validation is not working correctly, or because there is some other problem with the checkout user experience.

What product analytics tools and mobile game analytics services are available?

There are several product analytics tools available on the market, both cloud-based SaaS options and self-hosted solutions. You can compare them based on whether they automatically track events, what their reports are like, whether they can send data to other databases and reporting tools, pricing plans. Certain product analytics services are better suited for mobile game analytics than others.

GameAnalytics

GameAnalytics is a service that provides event tracking with a focus on game industry metrics. They include KPIs (Key Performance Indicators) in their dashboards and reporting that are designed for game developers and publishers to better understand players in-game actions. They have an additional product for A/B testing and managing game configurations remotely so that you can customize the game experience for each player.

GameAnalytics provides a default dashboard that tracks key metrics such as playtime, daily active users (DAU), in-app purchase (IAP) revenue, and retention. Additionally, they allow you to define custom cohort groups to track events over a specific time period, providing valuable insights for strategic decision-making.

GameAnalytics is a game industry-focused product that offers a comprehensive suite of event tracking tools. Their seven event types (business, resource, progression, error, design, ads, and impression) provide a complete picture of player behavior, from the moment they click on an ad to the moment they level up in the game.

With GameAnalytics, game developers can gain valuable insights into player behavior and optimize their game for the best possible experience.

GameAnalytics SDKs have first-class support for Unity, Unreal Engine, Roblox, Meta Quest 2, GameMaker, Godot, Cocos2D, Construct and Defold. They also have SDKs for C++, C# and JavaScript.

If you are using any other programming language such as Python or Java, you can use their Collection API directly with an HTTP client library.

Mixpanel

Mixpanel is a powerful analytics tool that is specifically designed for mobile apps and web apps. In addition to its focus on mobile and web app analytics, Mixpanel can also be used for tracking user behavior in games.

It offers powerful features such as support for cohort analysis and easy-to-use reporting tools.

Mixpanel provides four main types of reports: insights, funnels, retention, and flows. The insights report provides detailed information about how long game sessions are, which features and pages in the game are being visited. The funnel report allows you to track how many users are seeing a notification and then taking a specific action, such as clicking a link or using a new feature.

The retention report shows you the D1, D5, D7 and D30 retention, and can answer the question of how many players are coming back after a week which can help you understand user engagement and retention.

Finally, the flow report allows you to see how users are moving through your app, which can help you identify where players are starting from before they engage with a specific event or feature.

Mixpanel has SDKs for JavaScript, Unity, React Native, Flutter, iOS and Android. This makes it easy to integrate Mixpanel into your existing tech stack and start tracking important metrics right away.

One of the standout features of Mixpanel is the excellent documentation provided. This documentation not only guides you through the process of implementing Mixpanel, but also highlights many of the key considerations that you should keep in mind when setting up your analytics.

For example, the documentation discusses the pros and cons of performing analytics on the client-side versus the server-side, offers suggestions on how to name the events that you track, and provides guidance on how to use Mixpanel's "time event" feature to measure durations.

Mixpanel has its own query language, JQL, which can be used to query raw events to generate custom reports.

Google Analytics

Google Analytics is a powerful and widely used tool for tracking events on websites, blogs, and ecommerce sites. With Google Analytics, you can track user interactions on your website or app, such as page views, clicks, and form submissions, and gain valuable insights into the behavior of your users. This information can help you improve the user experience, increase engagement, and drive conversions on your website or app.

However, Google Analytics is not as widely used for tracking events in games and mobile apps. This is because games and mobile apps often have different tracking needs and requirements, and there are other specialized tools that are better suited for this purpose. Despite this, it is still possible to use Google Analytics for tracking events in games and mobile apps, although it may require some additional setup and configuration.

By default, when implementing Google Analytics it keeps track of each page that is viewed and the traffic source. This information is particularly valuable for ecommerce sites where it’s important to understand whether customers are arriving on a landing page and buying a product or are exploring the website through various category pages or if they’re having issues with searching for a product.

In addition to tracking page views and traffic sources, Google Analytics (and other tools) also tracks the country and device type that your website or app is being accessed from. For a website, this information can inform decisions about which web browsers to test on or which web browsers to drop support for or if the mobile layout of the site needs to be improved.

The advantage of Google Analytics for ecommerce is that it can be connected to the Google Search console and to Google Ads. This enables an ecommerce site owner to understand which search keywords are being searched and leading to a product or article page. It helps them understand which paid advertisements are driving traffic to their website.

Overall, Google Analytics is a valuable tool for website and app owners who want to gain insights into user behavior and improve the user experience on their platform. While it may not be the best option for tracking events in games and mobile apps, it can still be used for this purpose with some additional effort.

A smart contract is a program that runs on a blockchain. Smart contracts can have custom logic and their own method of keeping track of who owns what. They are used for NFTs and decentralized financial protocols. All collectible NFTs on Ethereum and on various Cosmos-based blockchains are kept track of within a smart contract.

DeFi protocols use smart contracts for keeping track of loan collateral, wrapped tokens, swaps, trades, decentralized exchanges and more. Smart contracts are executed on nodes within the blockchain and can be queried for data and information.

Cosmos is a blockchain that makes building new chains easier than before, also known as an internet of blockchains. Cosmos functions as a foundation that can be used to build application-specific blockchains that are interoperable.

Cosmos supports smart contracts through CosmWasm. You can write smart contracts using the Rust programming language for Cosmos-based blockchains that support CosmWasm. Rust is a typesafe and performant language that can be used to write any sort of software from web servers to game engines to smart contracts. It improves the reliability of programs and can be used in resource-constrained environments where efficiency is a priority.

The following Cosmos-based blockchains support running CosmWasm smart contracts:

• Cudos, a cloud computing blockchain
• Juno, a chain for smart contracts and app development
• Osmosis, a decentralized exchange, recently enabled CosmWasm support
• Secret Network, a privacy-first chain, supports a modified version of CosmWasm

Here are the base libraries you will need to get started with writing CosmWasm smart contracts:

• cosmwasm-std contains standard utility functions for working with wallet addresses and coins
• cosmwasm-storage contains code for storing data as maps/dictionaries/hashes and as individual values
• cosmwasm-schema helps generate the JSON schema for interacting with the smart contract

If you want to write an NFT smart contract, your contract’s interface will need to adhere to the CW721 interface. You can use the cw721-base code to build your own NFTs smart contract.

During a smart contract consulting project, we implemented a way for NFTs of one type to be exchanged for another type of NFT that was randomly chosen from the set of remaining unowned NFTs. We had to adhere to the CW721 NFT contract interface to make it work.

As part of an NFT consultation and implementation project, we had to interact with other smart contracts. One of the interactions was with a CW721 NFT smart contract in order to verify ownership of an NFT that would be exchanged. Another interaction was with a randomness oracle smart contract, LoTerra, which would return a random number.

As part of the smart contract execution, the query messages would be sent out to the other smart contracts, return with responses and continue on the happy path to update the ownership of the NFTs.

To interact with another contract, you can execute a message, which can change state and update the storage in the other contract, or you can query that contract for information. In the Rust smart contract code, this is implemented by creating new message structs that are converted and passed along to the CosmWasm querier.

This code shows how to build a query message that queries another smart contract:

fn is_airdrop_eligible(deps: Deps, owner: String) -> bool {
    let msg = example_nfts::msg::QueryMsg::Balance { owner, token_id: "example".to_string() };
    let wasm = WasmQuery::Smart {
        contract_addr: EXAMPLE_NFTS_CONTRACT_ADDR.to_string(),
        msg: to_binary(&msg).unwrap(),
    };
    let res: StdResult<example_nfts::msg::BalanceResponse> = deps.querier.query(&wasm.into());
    match res {
        Ok(res) => res.balance.u128() == 1u128,
        _ => false,
    }
}

What’s great about Rust is that you can add unit tests with mocks to thoroughly test various query and execute responses from another smart contract.

Through unit testing, it’s possible to test a large variety of different parameters and thanks to Rust’s speed and performance, you can write more tests and create more test data for more thorough test scenarios.

Here is an example of a unit test for a Cosmos smart contract:

#[cfg(test)]
mod tests {
    use super::*;
    use crate::mock_querier::mock_dependencies_custom;
    use cosmwasm_std::testing::{mock_dependencies, mock_info, MOCK_CONTRACT_ADDR};
    use cosmwasm_std::{
        coins, from_binary, Addr, BlockInfo, ContractInfo,
    };

    // ...

    #[test]
    fn mint_nft() {
        let mut deps = mock_dependencies_custom(&[]);
        let res = instantiate(
            deps.as_mut(),
            mock_env(0),
            mock_info("creator_address", &coins(1000, "earth")),
            InstantiateMsg {},
        ).unwrap();
        assert_eq!(0, res.messages.len());

        let res = execute(
            deps.as_mut(),
            mock_env(1),
            mock_info(
                "player_address",
                &[Coin {
                    amount: Uint128::from(1_000_000u128),
                    denom: "uusd".to_string(),
                }],
            ),
            ExecuteMsg::MintNft {},
        ).unwrap();
        assert_eq!(0, res.messages.len());

        let res = query(
            deps.as_ref(),
            mock_env(2),
            QueryMsg::Inventory {
                address: "player_address".to_string(),
            },
        ).unwrap();
        let inventory: InventoryResponse = from_binary(&res).unwrap();
        println!("{:?}", inventory);
        assert_eq!(2, inventory.nfts.len(), "there should be two nfts from mint + airdrop");

        // ...
    }
}

Here is an example of a mock querier used in a unit test where the response is mocked with fake data for testing:

#[derive(Clone, Default, Serialize)]
pub struct ExampleNftsBalanceResponse {
    pub balance: Uint128,
}

impl ExampleNftsBalanceResponse {
    pub fn new(balance: Uint128) -> Self {
        ExampleNftsBalanceResponse { balance }
    }
}

// ...

impl WasmMockQuerier {
    pub fn handle_query(&self, request: &QueryRequest<TerraQueryWrapper>) -> QuerierResult {
        match &request {
            QueryRequest::Wasm(WasmQuery::Smart { contract_addr, msg }) => {
                if contract_addr == &"terra1EXAMPLE".to_string() {
                    let msg_example_nfts_balance = ExampleNftsBalanceResponse {
                        balance: Uint128::from(1u128)
                    };
                    return SystemResult::Ok(ContractResult::from(to_binary(&msg_example_nfts_balance)));
                }
                panic!("DO NOT ENTER HERE");
            },
            _ => self.base.handle_query(request),
        }
    }

    pub fn new(base: MockQuerier<TerraQueryWrapper>) -> Self {
        WasmMockQuerier { base }
    }
}

One great benefit of CosmWasm and Cosmos-based blockchains is that you can run an array of tests within a local development testnet to ensure that interactions with your smart contract are working correctly in terms of transactions, wallet balances and storage updates.

Local development testnets provide a way to test for various scenarios. It’s recommended to test thoroughly on a testnet and, especially for DeFi protocols, to hire an auditing firm to audit the smart contract code.

Here is an example of how to run JavaScript code that executes transactions on a local testnet:

const coins = { uluna: 1_000_000, uusd: 1_000_000 };
console.log('sending coins from multiple senders to one receiving wallet');
for (let wallet of wallets) {
    if (wallet.address === wallets[0].address) {
        continue;
    }

    const send = new MsgSend(
        wallet.address,
        wallets[0].address,
        coins
    );
    try {
        const tx = await terraWalletFromMnemonic(wallet.mnemonic).createAndSignTx({
            msgs: [send],
            memo: 'terrajs-test-harness',
            fee: new Fee(2_000_000, { uusd: 10_000_000 })
        });
        const result = await terra.tx.broadcast(tx);
        await displayTxInfo(result.txhash);
    } catch (e) {
        console.log(e);
    }
}

Article originally published at https://rudolfolah.com/smart-contracts-for-cosmos-blockchain/ by Rudolf Olah

We're going to walk through the basics of machine learning and applying it to the problem of email spam prediction. We are going to do this by loading training data sets, building a few machine learning models and then checking their performance on test data sets. The data sets we are using are small enough to be understandable and the models only have a few features. This makes it easier to puzzle out how the machine learning algorithm and neural networks are interpreting the input and producing the output.

Machine learning and deep learning techniques have become popular topics over the past five years. Machine learning is being applied to many problems and we are seeing some interesting and effective results. Machine learning is a way to process and analyze big data and make predictions about future data. For instance, you can analyze millions of emails to identify which ones are spam and which ones are not, and you can analyze this based on hundreds or thousands of features or signals.

To get you started with machine learning, you could start with TensorFlow, a machine learning library open-sourced by Google in 2015. Alternatively, you could start with scikit-learn, or perhaps another library.

However if you want to get started quickly, you should consider trying out Ludwig.

The code for this article is available on Github: https://github.com/modernlearner/machine-learning-with-ludwig

Ludwig is a free/open source machine learning library created by the software engineers are Uber. It combines TensorFlow, SciKit-Learn and other Python packages into an easy-to-use package where you can load data sets from CSV files, train your machine learning model, and then apply it to new data. It can visualize the performance of the machine learning models you build and show you comparisons. It can save a snapshot of your model so that you do not have to re-train it from scratch and just need to feed it additional data. It is by far the simplest way to get started in applying machine learning.

Assumed Knowledge

For this article, we assume that you know how to write code in Python and how to run Python programs. We are using Python 3.8 in this article.

I am also assuming that you have a small amount of knowledge about machine learning, such as what a neural network is.

Installing Python and Ludwig

Let's begin by installing virtual env and creating the environment:

sudo pip install virtualenv virtualenv –python=python3.8 env

Then let's install the dependencies:

source env/bin/activate pip install -r requirements.txt

Install English-specific encodings for spacy language processing:

python -m spacy download en

Installing Ludwig

The dependencies list looks like this:

ludwig[text,viz]==0.3.1

This will install Ludwig, TensorFlow, SciKit-Learn, Pandas, Numpy. It will also install SpaCy for text and natural language processing. Additionally, it will install visualization tools like matplotlib and seaborn.

Starting Code

In the Python files that we create, you should start with this chunk of code:

import os
os.environ['TF_CPP_MIN_LOG_LEVEL'] = '3'
import tensorflow as tf
tf.compat.v1.logging.set_verbosity(tf.compat.v1.logging.ERROR)
import os.path

import pandas as pd
from ludwig.api import LudwigModel

The first part will disable the output of some logging from TensorFlow. This can be a bit noisy. The environment variable TF_CPP_MIN_LOG_LEVEL controls the level of logging. Its value can range from 0 to 4, where the highest number 4 will show more logs (info, warning, error, fatals) and the lowest number 0 will show no logging information.

The other half of that code will import the necessary modules to be able to use Ludwig.

And with that we’re ready to write our first machine learning program.

Basic Prediction with Ludwig

We are going to build a machine learning model and train it to identify which emails are spam and which are not. Let’s take a look at the data set we are going to use to train the model.

The Dataset: Email Spam

Our data set is a CSV (comma-separated values) file with three columns:

• subject
• content
• spam

All three columns are strings of text. However, as we will see in the next section, they are processed differently when it comes to defining our machine learning model.

Here is a sample of the data (you can check out the code repo on Github to see all of the data):

"cruise winner!","Hello! You just won a cruise!","spam"
"BANK WARNING","This is your bank, warning you that someone has tried to access your account","spam"
"RE: AI meeting","The agenda for our company meeting is AI and machine learning. Please be on time. Thanks!","not_spam"

As you can see from this sample, the last column in some rows of data is “spam” and in other rows it is “not_spam”.

Important Notes about the Data Set

One important thing to note here is that I, the author, of this article, have classified the data rows as either spam or not spam.

It is up to you to double-check the data set you are using for training matches is correct.

It is up to you to analyze the data set and see if there are biases and make sure to correct for them.

Another important thing: this sample of data is not enough to properly train the machine learning model, there are not enough data points. The small data set in the code repo has some more data points and it is just barely enough to train the model. It’s a good starting point and we are using a small data set so we can understand roughly what is happening within our model. Remember that companies such as Google, Facebook and Uber train their machine learning models on data sets where there are millions of data points. To train this model further you can use “online” training which is provided by the Ludwig method: train_online

Ludwig Configuration: Input and Output

So we have a data set with three columns. Our machine learning model needs input features to “learn” from, to be trained on, and it needs output features that we would like to predict or calculate. The “features” of a data set describe the shape of the data.

Input Features

The input features for the email data set are going to be the “subject” and the “content” columns.

With Ludwig, you can start with this very simple definition of model input features:

input_features = [
    {
        'name': 'subject',
        'type': 'text',
    },
    {
        'name': 'content',
        'type': 'text',
    },
]

Ludwig provides default values for the encoding of the columns that are used as input features and it provides default configurations and parameters for the underlying machine learning neural network to use.

You can override the default configuration of the input features and specify your own configuration:

input_features = [
    {
        'name': 'subject',
        'type': 'text',
        'preprocessing': {
            'lowercase': True,
        },
    },
    {
        'name': 'content',
        'type': 'text',
        'preprocessing': {
            'lowercase': True,
        },
        'encoder': 'stacked_parallel_cnn',
        'reduce_output': 'sum',
        'activation': 'relu',
    },
]

Preprocessing Data

The preprocessing step we are using for the subject and content fields is “lowercase”. This means an email with the subject “Hello WORLD” will look the same as “hello world” and this could affect your training results and the performance of the machine learning model.

Other preprocessing options for text features include controlling how characters are mapped, how words and characters are tokenized, and the number of common words to consider. You can read more about them here: text feature preprocessing

Encoding Data into a Neural Net

The “text” type of input feature uses the spaCy natural language processing library to tokenize the text. For example, “hello world” in an email subject will be transformed into a list of two word tokens, “hello” and “world”. The machine learning model will keep track of these tokens and how often they are used across all the data points.

For the “subject” input feature we’re using the defaults that Ludwig supplies for the “text” feature type.

However, for the “content” input feature, we are overriding the default encoder, we are overriding how the output is reduced in the encoder and how the activation of neural net nodes functions. The encoder specified is stacked_parallel_cnn. This is a convolutional neural network that has multiple layers that are stacked. Within each stacked layer there are parallel layers. As inputs are processed they go through these layers which combine and activate in a particular way.

You can read more about it in the Ludwig User Guide: stacked parallel CNN encoder

Remember, Ludwig gives you easier access to creating machine learning models and creating a pipeline for data and model training.

It is up to you to understand how and why to use specific encoders and specific options for the encoders. With respect to the spam emails you may get better results with a different encoder entirely than the one used here.

Output Features

After defining the input features, we need to define the output features:

output_features = [
    {
        'name': 'spam',
        'type': 'category',
    }
]

We want to know which category the given input features amount to. The category is either spam or not_spam.

After we train the model on the dataset, we will be making a prediction for another dataset that only includes the two input features and we expect the prediction of the output feature category to match our expectation.

Training and Testing a Ludwig Machine Learning Model

Now that we have the input and output features of the model, we can define the model configuration:

base_model_definition = {
    'input_features': input_features,
    'output_features': output_features,
}

We need a function that will load an existing model or create a new model using that model configuration:

def load_or_create_model(model_dir, model_config, **model_kwargs):
    if os.path.exists(model_dir):
        print('Loading the model: {}'.format(model_dir))
        return (LudwigModel.load(model_dir, **model_kwargs), True)
    else:
        print('Defining the model')
        return (LudwigModel(model_config, **model_kwargs), False)

First we check if the model already has been trained and saved to a directory. If that’s the case, we simply use LudwigModel.load to load up the pre-trained model. However, if that is not the case, we need to create a new LudwigModel using the model configuration.

Now let’s use this function to try to create/load the model:

base_model, base_model_loaded = load_or_create_model(
    'trained/basic', base_model_definition, gpus=[0], gpu_memory_limit=2000
)
if not base_model_loaded:
    print('Training the model')
    base_model.train(
        training_set='./datasets/spam_train.csv',
        test_set='./datasets/spam_test.csv',
        skip_save_processed_input=True,
    )
    base_model.save('trained/basic')

Notice that we supplied two keyword arguments, gpus and gpu_memory_limit, if you do not have a GPU you can remove those. If you have one or more GPUs or more GPU memory available, you can update the list of GPU IDs and increase the memory limit. When running just on CPU with no GPU, it can take much longer to train a model. We want a faster feedback loop if we are adjusting multiple parts of the model and trying to compare a group of machine learning models.

Back to the code! If the model is newly created, we’re going to use the train method with a training set and a test set. The training set is the data that is processed and used to train the model. The test set is another set of data (usually a subset of the training) that is used to check the machine learning model for accuracy. If the model is trained well, it will have a higher accuracy rate on the test data set.

Additionally, we skip over saving any processed input, we want the input to be processed every time. It’s just one less thing to delete if you’re changing the model and re-training a few times).

Then we save the model after it has been trained into a directory.

Now we’re going to evaluate the model against the test dataset:

stats = base_model.evaluate(
    dataset='./datasets/spam_test.csv'
)[0]
print(stats)

When we print out the stats, we shall see the accuracy of the model. When you run the code, you will see that the performance is at a certain level. To improve that performance you can delete the trained model from its directory and then update the model configuration and re-run the program.

Creating a Second Model

Now let’s create a second model that is adjusted and compare its performance to the first model.

We begin by copying the first model’s configuration:

print('Creating a 2nd model classifier with some adjustments')
other_model_definition = base_model_definition.copy()

Then we override the input features:

other_model_definition['input_features'] = [
    {
        'name': 'subject',
        'type': 'text',
        'preprocessing': {
            'lowercase': True,
        },
    },
    {
        'name': 'content',
        'type': 'text',
        'preprocessing': {
            'lowercase': True,
        },
        'encoder': 'bert', # See: https://ludwig-ai.github.io/ludwig-docs/user_guide/#bert-encoder
        'reduce_output': 'avg',
        'activation': 'tanh', # Activation used for *all* layers.
        'num_filters': 64,
        'stacked_layers': [
            [
                { 'filter_size': 2 },
                { 'filter_size': 3 },
                { 'filter_size': 4 },
                { 'filter_size': 5 }
            ],
            [
                { 'filter_size': 2 },
                { 'filter_size': 3 },
                { 'filter_size': 4 },
                { 'filter_size': 5 }
            ],
            [
                { 'filter_size': 2 },
                { 'filter_size': 3 },
                { 'filter_size': 4 },
                { 'filter_size': 5 }
            ]
        ],
    },
]

There are a lot of changes to unpack here.

Differences Between the First Model and the Second Model

Encoders

The first difference in our models is that this second model uses the BERT encoder when encoding the content input feature. This means that the text is processed and encoded using BERT (Bidirectional Encoder Representations from Transformers). This encoder is pre-trained to work on English text. This is important because if you want to classify spam in other languages, you will either need to use a BERT model that’s pre-trained on your target language or you will need to train it yourself.

If you want to change the language, add pretrained_model_name_or_path and set it to one of the values here: Hugging Face models

Later on you can change the encoder from BERT to GPT or T5 or ELECTRA. There are many text encoders available with Ludwig.

Reduction of the Neural Net Output

The next difference is that we’re are reducing the output of the neural network from 'sum' to 'avg'. This reduces the output tensor using the average value instead of the sum, for example if we’re seeing 0.5 and 0.5, we’d get 1.0 in the first model and 0.5 in the second model.

Other ways to reduce the output include 'min', 'max', 'concat', 'last' and 'null'. Again, you will need to read further about each of these to understand which is the best to use.

This is one of the important parts of machine learning. You have to understand the problem you’re applying machine learning to and then you have to understand what tools are available in the toolbox and dig deep into the details to see if you can produce a more accurate machine learning model.

Neural Net Activation Method

The activation method is a function applied to the output. The first model uses the default which is the relu function. The second model uses tanh instead. “Relu” means “rectified linear unit” while “tanh” means “hyperbolic tangent”.

Here are charts of how these activation functions look:

You can find more activation functions in the TensorFlow (or Keras) documentation: https://keras.io/api/layers/activations/#layer-activation-functions

Number of Filters

The number of filters is also different between the two models. In the first model, we’re using the default which is 256, while in the second model we’re using far fewer filters, 64. The number of filters controls how many output channels there are.

If you want to learn more about filters and how they work in a neural network as part of machine learning, check out this article: https://machinelearningmastery.com/convolutional-layers-for-deep-learning-neural-networks/

Filter Size in Each Neural Network Layer

The filter size controls the width of the convolutional filter. The filter size is set within each layer of the neural network with different filter sizes in different layers.

Training the Second Model

Now let’s load or create the model and train it:

other_model, other_model_loaded = load_or_create_model(
    'trained/basic_other', other_model_definition, gpus=[0], gpu_memory_limit=2000
)
if not other_model_loaded:
    print('Training the model')
    other_model.train(
        training_set='./datasets/spam_train.csv',
        test_set='./datasets/spam_test.csv',
        skip_save_processed_input=True,
    )[0]['training']
    other_model.save('trained/basic_other')
other_stats = other_model.evaluate(
    dataset='./datasets/spam_test.csv'
)[0]

Comparing the Performance

Ludwig provides multiple visualization functions to show you graphs and charts of the performance and accuracy of the machine learning models. Remember that Ludwig is made so you can create many models and compare their performance easily to select the most promising model and adjust its parameters further.

Let’s see how well our first model for email spam detection works in comparison to our second model:

visualize.compare_performance(
    test_stats_per_model=[stats, other_stats],
    output_feature_name='spam',
    model_names=['Base Model', 'Other Model'],
)

We’re using the compare_performance function from Ludwig, you can read more about it here: compare_performance

Applying the Models and Using Them to Predict Spam Emails

We have two machine learning models that are trained and tested and we have compared their performance. Let’s use those models and predict some more spam emails.

Here’s a convenient way to run the predictions and print out the result:

def print_predictions(unpredicted_emails, model):
    prediction_result, output_directory = model.predict(dataset=unpredicted_emails)
    emails = unpredicted_emails.join(prediction_result)
    for index, row in emails.iterrows():
        print('{} ({:.6f}): {} / {}'.format(
            row.get('spam_predictions'),
            row.get('spam_probability'),
            row.get('subject')[0:30],
            row.get('content')[0:30],
        ))

We’re using the predict method on the model and this is what you would use to see if a new email is spam. If the model is incorrect, you can train it further by correcting the data and re-training model (or by using online training).

And now let’s run the two models and predict spam emails in the “unpredicted” CSV file:

unpredicted_emails = pd.read_csv('./datasets/spam_unpredicted.csv')
print('Prediction Results for Base Model')
print_predictions(unpredicted_emails, base_model)
print('Prediction Results for Other Model')
print_predictions(unpredicted_emails, other_model)

Here’s how to run the code:

$ source env/bin/activate
$ python basic.py

Then you will see the comparison between the models and then the prediction for each email and whether or not the model considers it to be spam.

Where To Go From Here

With this base of knowledge, you can do the following:

• Find new datasets and create new models for them: you could try recognizing digits on a larger dataset, or train a classifier for something other than spam emails.
• Tweak the models: iterate on the models and tune them in different ways to see which will get you the best performance.
• Learn TensorFlow directly: skip Ludwig and learn how to create a neural network using TensorFlow and learn how all the layers and configuration parameters work.
• Get the example running on a cloud-based GPU: use Lambda or Google Colab to create a compute instance that includes a GPU for you to train and test the models on.

We cover an example that Facebook Infer would flag and warn you about. The idea is that you want a loop to be as efficient as possible and if you find a function that's being called repeatedly with the same result (a.k.a. an invariant), it can be safely hoisted outside of the loop.

You can read more about this at the Facebook Infer documentation site: https://fbinfer.com/docs/all-issue-types#invariant_call

Triple Quotes for a Multiline Python String

You can use a triple quote or triple double-quote to create a multiline string in Python:

multiline = '''
a string
  with many lines
    in python.
'''

multiline = """
You can use double-quotes
  for a multiline string too,
  and "quotes" within the 'string'.
"""

Brackets to Enclose a Multiline String

The other way is to use a bracket to enclose multiple strings that use single or double quotes:

multiline = (
'first'
'second'
)

multiline = (
  "hello"
  "world"
)

You will need to add a '\n' at the end of each line to preserve the newlines. Just like this:

multiline = ("first line\n"
  "second line\n"
)

However when you build a web app, you really want some UI widgets that work out of the box rather than re-creating things like an autocomplete search box, or better styling for input boxes and buttons. So here is a list of some awesome UI frameworks for Angular.

• Angular Material: uses the Google Material Design paradigm
• NG Zorro: uses Ant Financial's design paradigm
• Kendo UI: Telerik's UI framework, also works for React, jQuery and Vue (paid with a free trial)
• PrimeNG: works for Angular, React and Vue.
• ngx-bootstrap
• DevExtreme
• jQWidgets
• ng-bootstrap
• Covalent UI
• ngx-foundation: uses Foundation CSS for its theming
• Clarity
• NG Lightning: uses the Salesforce Lightning design paradigm
• Ignite UI: made for apps that need a lot of data grids and charts

We take a look at some of them in-depth below.

Angular Material UI

Angular Material follows the Material design system created by Google. It contains many components for UI widgets such as buttons, badges, dialogs, datepickers, cards, side navigation and more.

It also contains the CDK, Component Dev Kit, which are directives that can be used to create your own custom components. For example, let's say you want to create a component that has a virtual scroll, or needs drag and drop functionality, you can use the ScrollingModule and DragDropModule from the Angular UI CDK.

NG-Zorro

The NG-Zorro UI framework uses the Ant Design system for its enterprise-ready component library. It contains over 60 components that have a great look though you can create your own custom themes for them. Companies such as ThoughtWorks and Alibaba use the NG-Zorro framework to create their web apps.

It contains components for buttons, icons, grid layouts, breadcrumbs, page headers, and many components for data entry such as the cascader and autocomplete and datepicker. If you need cards or badges or a carousel, the NG-Zorro UI components have those covered.

One of the coolest components in NG-Zorro include the timeline component. It displays a timeline of labels to indicate when an event happens. This component is useful for any app that needs to display a log of events.

The transfer component in NG-Zorro is useful for displaying two lists that an item can be transferred between. For example, a list of enabled currencies or files or folders.

The cascader component is a dropdown for selecting an item through a cascading menu. You can drill down in menus and sub-menus to select an item. Very handy if you have a lot of items or for an ecommerce categories and sub-categories menu.

Kendo UI

The Kendo UI component framework is a professional grade components library.

Not only does Kendo UI contain the typical UI widgets such as buttons and dropdowns and layouts, it also contains a variety of charts. When using most UI frameworks for Angular, you will need to use a separate chart library. Not so with Kendo UI which has pie charts, funnels, radar charts among other types of charts.

If you're into stock markets (or cryptocurrency markets), there's even a box plot candlestick chart that you can use. And a specific StockChart component.

Another cool component that Kendo UI has is the scheduler. This looks like a meeting or appointment calendar view that shows which blocks of time are busy.

Kendo UI can be purchased for additional support. This means bugs and questions you have will be prioritized by the Kendo UI team.

PrimeNG

The PrimeNG Angular UI Components library has great components for forms, data, overlays and even charts.

The Captcha component is one of the more interesting components in the PrimeNG library. Sign up for reCaptcha, put in your site key in the component, and start using it. The CodeHighlighter component uses Prism.js for highlighting code blocks. The Terminal component is interesting because it shows a command line terminal for a user to enter commands; you can use the terminal service to listen for specific user commands and then act on them.

There are other useful components such as the Tree.

The OrderList is useful for ecommerce apps.

For theming, the PrimeNG framework has a few Bootstrap-style themes and Material-style themes.

• === used for case comparison
• == used for equality of objects
• eql? used for determining object identity
• equal used for comparing the hash key of two objects

Case Equality with ===

The === method is used for checking the case equality of two objects. When you use the case statement, this method will be the one used to see whether or not there is a match.

Here's an example. We have a class Book where we are storing a unique id, the isbn. When two books are compared, they are equal if their ISBNs are the same.

class Book
  attr_accessor :isbn
  
  def initialize(isbn)
    @isbn = isbn
  end

  def ===(other)
    isbn == other.isbn
  end
end

bookA = Book.new(1000)
bookB = Book.new(2000)

puts bookA === bookA # => true
puts bookA === Book.new(1000) # => false
puts bookB === bookA # => false
puts bookB === bookB # => true
puts bookB === Book.new(1000) # => false
puts bookB === Book.new(2000) # => true

puts case Book.new(2000)
  when bookA
    'ISBN matches book A'
  when bookB
    'ISBN matches book b'
  else
    'no match'
end # => ISBN matche book b

If we did not override the === equality method, the default comparison would have used the == method.

Let's consider another example: a user session for product analytics. The class has a field for the user id and the session start time. We can define the equality to be a comparison between both fields. Since only comparing the user ids would result in all sessions from one user to be seen as equivalent, both fields must be compared.

class UserSession
  attr_accessor :user_id, :session_start_time
  
  def ==(other)
    self.user_id == other.user_id && self.session_start_time == other.session_start_time
  end
end

== equality comparison

The == method is typically overridden by classes to provide class-specific meaning to the equality comparison.

This is similar to what we did above in the Book code example:

class Book
  attr_accessor :title
  
  def initialize(title)
    @title = title
  end

  def ==(other)
    title.downcase == other.title.downcase
  end
end

eql? comparison

The eql? method compares the object hash key.

For example:

value = {'a': 1}

other = {'a': 1}
puts value == other # => true
puts value.eql?(other) # => true

other = value
puts value == other # => true
puts value.eql?(other) # => true

equal? comparison

In contrast to eql?, the equal? method compares the object identity.

For example:

value = {'a': 1}

other = {'a': 1}
puts value == other # => true
puts value.equal?(other) # => false

other = value
puts value == other # => true
puts value.equal?(other) # => true

Multiline strings can be created in many ways. One of those ways is to use a double-quoted string:

puts "Hello,

World"

# Output:
# Hello,
# 
# World

Another way to create a multiline string is as HEREDOCs, which were inspired by the Perl programming language.

Here is how you can create a multiline string variable in Ruby with a HEREDOC:

sentence = 'hello world'.
interpolated = "#{sentence} #{sentence} another sentence added."
multiline = <<-TEXT
This is a string
  with multiple lines
The string used to start it,
Is also the string that ends it.
TEXT

more_multiline = <<-EOF
Hello
World
EOF

Multiline strings are very useful if you need to create complex SQL queries, such as for product analytics data where you may have a query or sub-queries:

query = <<-SQL
  SELECT user_id, SUM(engagement_score) as total_score
  FROM user_engagements
  WHERE engagement_date >= DATE_SUB(CURRENT_DATE, INTERVAL 1 MONTH)
  GROUP BY user_id
  HAVING total_score > 100
SQL

results = ActiveRecord::Base.connection.execute(query)

Multiline Syntax in Ruby

You can use the the syntax <<-TEXT to start a multiline string in Ruby. The "TEXT" part can be any other string. The multiline string will be defined as soon as that "TEXT" is encountered on another line.

multiline = <<-HELLO
  hello
    world
HELLO

# Output:
#   hello
#     world

Important: This will not strip out any whitespace at the beginning of each line.

Multiline Syntax in Ruby 2.3+

In Ruby 2.3+, you can use a ~ tilde instead of a - dash in the multiline syntax to strip out the whitespace at the beginning of each line:

multiline = <<~HELLO
  hello
    world
HELLO

# Output:
# hello
# world

Multiline percent string in Ruby

You can also use a percent string to create a multiline string using the %q() syntax:

multiline = %q(
  hello
    world
)

# Output:
#   hello
#     world

Important: This will not strip out any whitespace at the beginning of each line. It will preserve any tabs or spaces at the beginning of the line.

First let's see how we can create a class method in Ruby:

class BlogPost
  attr_accessor :title, :description
  
  def initialize(title, description)
    @title = title
    @description = description
    class.add_post(self)
  end
  
  @@posts = []
  def self.posts
    @@posts
  end
  
  def self.add_post(post)
    @@posts << post
  end
end

As you will see, we have two class methods here, posts and add_post. Both of them are public class methods. When a new instance of BlogPost is created, the instance is added to the posts list using the add_post method.

With the above code, there is nothing stopping someone from calling BlogPost.add_post({ hello: 'world' }) or BlogPost.add_post(123) from any other place in the program.

Using private_class_method to declare a class method as private

To prevent that from happening, we can make the add_post class method private by using private_class_method.

Here's how that would look:

class BlogPost
  # ...
  
  def self.add_post(post)
    @@posts << post
  end
  private_class_method :add_post
end

An alternate way of declaring a class method as private is this:

class BlogPost
  # ...
  
  private_class_method def self.add_post(post)
    @@posts << post
  end
end

You can see that private_class_method can be used with a symbol argument, :add_post, which is the name of the class method, or it can be passed the result of the class method definition def self.add_post.

Using private in class << self (eigenclass) to make a class method private

The other way of declaring a class method as private is to use the eigenclass of your Ruby class.

Let's look at the above example with add_post class method in the BlogPost class written with the eigenclass notation:

class BlogPost
  # ...
  class << self
    def add_post(post)
      @@posts << post
    end
  end
end

You can declare that class method private by using the private method:

class BlogPost
  # ...
  class << self
    def add_post(post)
      @@posts << post
    end
    private :add_post
  end
end

This is similar to how you would declare instance methods as private.

Hope you enjoyed this article!