DEV Community: Jairus Joer

Advanced forms with Alpine.js

Jairus Joer — Wed, 01 Jan 2025 19:40:50 +0000

The texts in this article were generated in parts by ChatGPT and DeepL Write and corrected and revised by us.

If you are not yet familiar with working on forms with Alpine.js, you can refresh your knowledge in our first article on this topic, Interactive forms with Alpine.js.

In our first article on interactive forms with Alpine.js, we already indicated that Alpine.js can also be used to influence individual elements in addition to the general display of server-side information in the form.

Due to the popular demand, we have decided to take up precisely this topic in this follow-up article and show examples of how you can use information and states to validate a form with Alpine.js.

Setup

For this demonstration, we are using our Astro Boilerplate,
which we have already presented in detail in an earlier article.

If our boilerplate isn't right for you, that's not a problem. The steps for validating form entries work in any project with Alpine.js.

Integrating methods for Alpine.js

In order to be able to access the required data and methods from Alpine.js in the further course of the implementation, these are first declared in order to avoid errors in the further course.

`form.ts`

form() controls the loading state and saves the Response sent by the server via the submit() method, which is executed when the form is submitted.

A fictitious fakeResponse() is also included, which "receives" exemplary and simplified validation errors from our fictitious backend.

import { sleep } from "../utilities";

export const form = () => ({
  loading: false,
  response: null as unknown,

  async submit(event: SubmitEvent) {
    this.loading = true;
    this.response = null;
    const formData = new FormData(event.target as HTMLFormElement);

    /**
     * Replace the following fake response with your `fetch` request and
     * receive the validated results from the server side as JSON.
     *
     * Make sure you add the necessary attributes to the `<Input />'
     * elements to perform client-side validation as well.
     */

    const fakeResponse = async () => {
      await sleep(1000); // Mock response time

      return {
        errors: {
          // [input.name]: "message string"
          username: "Username is alrady taken",
          password: "Password is too short",
        },
      };
    };

    this.response = await fakeResponse();
    this.loading = false;
  },
});

The Response must contain an error object in which each key-value pair consists of the name of the input element and the associated validation error.

`input.ts`

input.ts handles the display of validation errors for an input element via the validate() method, which is integrated via the x-effect attribute in order to recalculate the data for display when the form is submitted.

export const input = () => ({
  error: null as unknown,

  validate() {
    if (!this.response?.errors?.[this.$el.name]) return (this.error = null);
    this.error = this.response.errors[this.$el.name];
  },
});

`globals.ts`

Finally, the methods declared for Alpine.js are imported for this step and registered in the EventListener alpine:init in order to be able to access the required scopes.

import Alpine from "alpinejs";
import { app } from "./alpine/app";
import { form } from "./alpine/form";
import { input } from "./alpine/input";

// Await Alpine.js initialization
document.addEventListener("alpine:init", () => {
  Alpine.data("app", app);
  Alpine.data("form", form);
  Alpine.data("input", input);
});

Alpine.start();

Declaring optional utility methods

So that we can also use names for input elements as labels, we create the method capitalize, which splits strings written in kebab-case (e.g.: "email-address") and capitalises each word.

If you decide against capitalisation, the corresponding references in the input.astro component must be removed

export const capitalize = (string: string) => {
  return string
    .split("-")
    .map((word) => word[0].toUpperCase() + word.substring(1))
    .join(" ");
};

Creating pages and components in Astro

In the following step, we create the pages and components we need for the form. We define an <Input /> component and integrate it into the form block.

`input.astro`

input.astro combines the elements <input /> and <label> in one component and also contains the representation of the validation errors, which are mapped via the Alpine context input.

---
import { capitalize } from "@/scripts/utilities"

const { name, ...props } = Astro.props
---

<div
  class="relative font-medium"
  x-data="input"
>
  <div
    class="absolute pointer-events-none overflow-hidden top-3 inset-x-4 flex gap-1 items-center leading-4 text-xs transition-colors"
    x-bind:class="error && 'text-rose-500'"
  >
    <label
      class="mr-auto"
      for={name}
      title={capitalize(name)}
    >
      {capitalize(name)}{props?.required && '*'}
    </label>
    <div
      class="ml-3 overflow-hidden flex justify-end gap-1"
      x-cloak
      x-show="error"
      x-transition
    >
      <span
        class="truncate"
        x-text="error"
      ></span>
    </div>
  </div>
  <input
    class="w-full pt-7 pb-3 px-4 border rounded-xl leading-6 bg-transparent text-foreground invalid:border-rose-500 disabled:bg-muted transition-colors"
    x-bind:class="error && 'border-rose-500'"
    {name}
    {...props}
    x-effect="validate"
  />
</div>

`index.astro`

index.astro represents our form block and uses the predefined component <Input /> and supplements its logic with the form context so that errors from the response object can be displayed.

While our component <Input /> handles the display of validation errors, we bind the disabled attribute of the individual input elements to the loading state in order to prevent multiple submissions of the form during processing.

---
import Root from "@/layouts/root.astro"
import Input from "@/components/input.astro"

const meta = {
  title: "Advanced forms with Alpine.js"
}
---

<Root {meta}>
  <main>
    <form
      class="grid gap-2 p-6"
      x-data="form"
      x-on:submit.prevent="submit"
    >
      <Input
        id="username"
        name="username"
        type="email"
        required
        placeholder="tim@apple.com"
        x-bind:disabled="loading"
      />
      <Input
        id="password"
        name="password"
        type="password"
        required
        placeholder="Your password"
        x-bind:disabled="loading"
      />
      <button
        class="bg-primary text-primary-foreground h-12 rounded-xl font-medium disabled:opacity-50 transition-opacity"
        type="submit"
        x-bind:disabled="loading"
      >
        Submit
      </button>
    </form>
  </main>
</Root>

TL;DR

With Alpine.js, we demonstrate how validation errors from the backend are dynamically displayed in a form and how input elements react to corresponding events in the browser.

Working with the Arc Browser

Jairus Joer — Fri, 05 Jul 2024 08:48:34 +0000

I've been using the Arc Browser from The Browser Company for a good six months now and have been pleasantly surprised by every major update so far. For this reason, I'd like to introduce you to the browser and its features in more detail today.

Like any other browser, the Arc Browser initially does exactly what it is supposed to do: browse. However, what makes it stand out from the crowd are the small, detailed interactions and features that expand or change a page in addition to the actual browsing.

A shot of the Arc Browser start page with portrait mode

Onboarding

Onboarding is as personal as you would expect from a modern application. From importing your own data from another browser, pre-configuring bookmarks with known services, customizing your own color palette and browser look to choosing an ad blocker - the Arc Browser tries to offer its users a simple, personal and direct introduction to their own experience.

Tabs & Views

Arc divides tabs into two groups: Temporary and permanent tabs. Temporary tabs close automatically after 24 hours, unless otherwise specified in the settings, while permanent tabs function like bookmarks and can be organized accordingly via folders.

Tabs can be arranged in views so that several tabs can be displayed as a group in one window. Common Window Manager views can be configured for a group, and this group can be saved as permanent tabs.

Spaces

Spaces organize tabs in individual groups, which can be switched between with a swipe across the sidebar. With their own color palette, Spaces influence the appearance of the browser and visually support the communication of the working environment.

Spaces are configured in combination with profiles, e.g. to separate professional and private accounts or to manage multiple developer accesses to an application. If no further profiles are created, all Spaces share a profile and the associated sessions.

Features

In addition to the options for personalizing and organizing the browser, Arc also offers features for managing pages and files within the application. Some important features should therefore not go unmentioned.

Arc Max

Arc Max is Arc's AI assistant, whose task is to make your own workflow easier by delegating repetitive tasks to it. Automatic renaming of tabs and downloads, summaries and answers in real time as well as an integrated chat function with ChatGPT make it easier to search for and collect information.

Although no details on the marketing of this feature are currently known, the CEO of Browser Compnay, Josh Miller, has opened a survey on X on possible pricing models for Arc Max.

Library

The library organizes Spaces, downloads, the archive, but also Arc's own features such as media, notes and boosts. The library can be accessed at any time via the sidebar and provides an overview of your own content.

Media & Downloads

Arc separates downloads into media and other files and documents. While both views share a MacOS-like preview, media is visualized as tiles, while downloads can be displayed and searched in a familiar list.

Easels & Notes

Easel is Arc's integrated whiteboard tool that allows you to draw directly from the browser, which can be essential for research or designing a mood board.

Notes use a Markdown-based WYSIWYG editor that allows information to be captured quickly. Media and files can be quickly attached to a note by copying and pasting.

Easels & notes use the same logic as tabs and can be organized in the sidebar like a tab, i.e. also in different spaces and views.

Boosts

Boosts make it possible to profoundly influence the appearance of a page. Colors, fonts, custom code and the deletion of selected page elements make it possible to customize the browser experience.

Development tools

Beyond Chromium's familiar development tools, Spaces can be used for sessions and testing. There is also a dedicated portrait mode for presenting a website and a sophisticated page content capture feature.

Portrait Mode

Portrait mode presents the page in front of a suitable background or optionally in front of a definable color gradient or your own screen background. Presentations of applications can thus be designed quickly and attractively.

Capture

Saving page content is also integrated in Media and Easels, but also offers its own editing function. The recordings can otherwise be saved or sent via the dialog options.

TL;DR

Everything is possible – nothing is mandatory. The Arc Browser offers many detailed features for personalizing your own browsing experience and complements this with a seamless organization of your own working environment.

Temporary and persistent state management with Alpine.js

Jairus Joer — Thu, 29 Feb 2024 16:31:47 +0000

In our first article on using Alpine.js in a production environment, we outlined a scenario where Alpine's contexts can be used to map both local and global scopes over which data can be provided.

With this article, we would like to revisit and deepen this scenario. In this demonstration, we will implement a compliance solution for external content and store the user's decisions temporarily or persistently.

Set up necessary utilities

Before we start designing the actual components, we need a simple function to read data from localStorage or write data to it.

local() returns either an object created from the locally stored JSON value of the specified key, or an empty object if no value for the specified key was found in local storage.

export const local = (key: string, value: any = null): object => {
  if (value != null) localStorage[key] = JSON.stringify(value);
  return localStorage?.[key] ? JSON.parse(localStorage[key]) : {};
};

Set up the global scope with `app`.

To be able to access the compliance state within the application, we design a new context for Alpine: app. In the context of app we store under compliance the object from the local storage, respectively the empty object, insofar as the local storage has to be configured for the first time:

The method used here differs from our previous articles on Alpine.js and relies on a later import of the context app in a global script file.

import { local } from '../utilities';

export const app = () => ({
  compliance: local('compliance'),
});

We then register our context app for an element that will encompass all subsequent implementations of compliance:

<html x-data="app">...</html>

In our example, we register our global context using the <html> element, but <body> or root elements for apps like <div id="root"> can also be used.

Compliance structure

Now that we have completed the necessary preparations for the local store and the global scope, we can start with the actual compliance implementations:

In the new context compliance we declare the method toggle() with the parameter type, via which we want to capture the consent of the user:s in the future.

Our pre-declared method local() helps us - if the user preference is not 'single', i.e. temporary - to store the collected data in the form of an object in local memory.

import { local } from '../utilities';

export const compliance = (type: string) => ({
  toggle(preference: string) {
    if (preference == 'single') return (this.compliance[type] = !this.compliance?.[type]);

    this.compliance[type] = !this.compliance?.[type];
    local('compliance', this.compliance);
  },
});

The corresponding HTML snippet placed in the application may look like the following and consists mainly of two sections:

the user dialog for consent, controlled by x-show="!compliance?.youtube"
and the content in the form of an iframe, whose external content is controlled by x-bind.

<div x-data="compliance('youtube')">
  <div x-show="!compliance?.youtube" x-transition>
    <p>...</p>

    <button x-on:click="toggle('single')">...<button>
    <button x-on:click="toggle('always')">...<button>
  </div>

  <iframe frameborder="0" x-bind:src="compliance?.youtube && 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'" x-show="compliance?.youtube" x-transition></iframe>

  <button x-show="compliance?.youtube" x-on:click="toggle('always')">...</button>
</div>

Indexing of the components

To simplify access to the declared methods, we create an index.ts in the Alpine directory and export the previously created files.

export { app } from './app';
export { compliance } from './compliance';

Integration

To integrate our new compliance snippet, we simply import Alpine.js and our methods for Alpine and register them in the addEventListener callback for alpine:init.

import Alpine from 'alpinejs';
import { app, compliance } from './alpine';

document.addEventListener('alpine:init', () => {
  Alpine.data('app', app);
  Alpine.data('compliance', compliance);
});

Alpine.start();

Finally, we import the compiled script as a module into our project:

<body>
  ...
  <script src="scripts/globals.js" type="module"></script>
</body>

TL;DR

Alpine.js can be used to manage temporary and persistent states to implement a compliance solution for external content.

Visualize and update products with Alpine.js

Jairus Joer — Mon, 18 Dec 2023 17:00:00 +0000

The texts in this article were generated in parts by OpenAI's ChatGPT and corrected and revised by us.

As a starting point for our demonstration of product data visualization and conversion, we use the following simplified data structure that contains important product information such as name, price, and currency:

[
  {
    "name": "Arctis 1 Wireless",
    "price": {
      "value": 99.99,
      "currency": "USD"
    }
  }
]

Each product is stored as an object in the list and contains the name and price fields. The price key in turn contains an object with the price information.

Obtain and visualize data

To be able to display the data in the frontend, we first need a way to retrieve it. For this, we use a fictitious API in our example, from which we obtain the data structure using the getOffers() function and store it in the offers object. This is done, as usual, in a specially created context within Alpine, here called utility.

If you want to learn more about how to include Alpine in your environment, we recommend our post: Including Alpine.js in a production environment

document.addEventListener("alpine:init", () => {
  Alpine.data("utility", () => ({
    offers: [],
    async getOffers() {
      const response = await (
        await fetch("https://steelseries.com/api/offers")
      ).json();
      this.offers = response.data;
    },
  }));
});

To visualize the data in the frontend, we can then use the following HTML code:

<div class="offers" x-data="utility" x-init="getOffers">
  <template x-for="offer in offers">
    <article class="offer">
      <div class="offer-title" x-text="offer.name"></div>
      <div
        class="offer-price"
        x-text="`${offer.price.value} ${offer.price.currency}`"
      ></div>
    </article>
  </template>
</div>

Obtain exchange rate and update prices

To be able to display the current product price in Euro, we obtain current conversion rates via an API from exchangerate.host. The function getConversion() then stores the current rate in the key conversion. If the API unexpectedly returns an incorrect response, we use the initial object in the key as a reference.

document.addEventListener("alpine:init", () => {
  Alpine.data("utility", () => ({
    conversion: { rate: 1, currency: "USD" },
    offers: [],
    async getConversion() {
      const rate = await (
        await fetch(`https://api.exchangerate.host/convert?from=USD&to=EUR`)
      ).json();
      if (!rate.success) return;
      this.conversion = { rate: rate.result, currency: rate.query.to };
    },
    async getOffers() {
      const response = await (
        await fetch("https://steelseries.com/api/offers")
      ).json();
      await this.getConversion();
      this.offers = response.data;
    },
    setPrice() {
      const price = (this.offer.price.value * this.conversion.rate).toFixed(2);
      return `${price} ${this.conversion.currency}`;
    },
  }));
});

The function setPrice() returns the updated price and replaces the interpolated string from the previous HTML code.

<div class="offers" x-data="utility" x-init="getOffers">
  <template x-for="offer in offers">
    <article class="offer">
      <div class="offer-title" x-text="offer.name"></div>
      <div class="offer-price" x-text="setPrice"></div>
    </article>
  </template>
</div>

Thus, we can obtain and visualize product information with current prices via Alpine. Since this is only a simple demonstration, the next step could be to extend this code with loading and fallback states that make the experience clearer and more pleasant for users in the frontend.

TL;DR

Alpine is used to obtain an array of product data, the prices of which are then converted into euros using an external API in order to visualize this data as a list in the frontend.

Dynamic imports with Alpine.js

Jairus Joer — Mon, 13 Nov 2023 15:01:38 +0000

The texts in this article were generated in parts by OpenAI's ChatGPT and corrected and revised by us.

In this article, we will show you how to implement dynamic imports with Alpine.js, load them with a delay using the Intersection Observer API and thus improve the accessibility of your own site and content.

Setup

For this demonstration, we are using our Astro Boilerplate, which we have already discussed in detail in a previous article.

If our boilerplate isn't right for you, that's no problem. The steps for implementing dynamic imports work in any project with Alpine.js.

In the following steps, we will install the dependencies required for the subsequent implementation of dynamic imports.

In addition to alpinejs, we also need @alpinejs/intersect, a plugin in the form of a convenient wrapper for the Intersection Obeserver:

npm install alpinejs @alpinejs/intersect

To demonstrate the dynamic import, we use Chart.js, a simple library for the visualization of charts via the <canvas> element:

npm install chart.js

After successfully installing all dependencies, we can start our development environment – in the example of our Astro Boilerplate with npm run dev:

npm run dev

Preparation of the HTML

To visualize Chart.js in the frontend and to be able to understand our implementation later, we place a <canvas> element with the following attributes:

pages/index.astro

<canvas id="chart" x-data="chart" x-intersect.once="once"></canvas>

Implementation of Chart.js

In our demonstration, we follow the example of the Getting Started guide of Chart.js and implement a simple bar chart within our chart() method.

Starting from chart(), we register the asynchronous method once(), which we have already referenced in our <canvas> element.

Within once() we import Chart and registerables asynchronously from the chart.js package and register all required modules of Chart.js via Chart.register(...registerables).

Finally, the bar chart is implemented with a rudimentary data set. Further information on the functionality of Chart.js can be found in the corresponding documentation.

scripts/alpine/chart.ts

export const chart = () => ({
  async once() {
    const { Chart, registerables } = await import("chart.js")
    Chart.register(...registerables)

    const context = document.getElementById('chart')! as HTMLCanvasElement

    new Chart(context, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    })
  }
})

Configuration of Alpine.js

For reasons of clarity, we have moved the chart() method to a separate file, which we must now reference when initializing Alpine.

However, before we can reference our method in Alpine, we have to initialize the intersect plugin. With Alpine.plugin(intersect) the imported plugin can be initialized and made available via Alpine.

Finally, we add the directive Alpine.data("chart", chart) to the EventListener "alpine:init"

scripts/globals.ts

import Alpine from "alpinejs";
import intersect from "@alpinejs/intersect"
import { chart } from "./alpine/chart";

Alpine.plugin(intersect)

document.addEventListener("alpine:init", () => {
  Alpine.data("chart", chart)
});

Alpine.start();

We first presented our pattern for development with Alpine.js in our article Temporary and persistent state management with Alpine.js.

Verify results

Once we have made all the adjustments, we can verify our desired results with the network analysis of the browser dev tools.

In our scenario, the Chart.js library is only loaded via once() when the <canvas> element enters the viewport for the first time.

Assuming we need the entire library for our project, we have reduced the initial transfer by ~ 70 kB (gzip) with this implementation.

Further possibilities

The implementation of Chart.js is just one of many examples in which dynamic imports help to reduce the initial transfer of a website and make content accessible more quickly.

This function is not limited to libraries. It can also be used for more complex components or larger data sets with little additional effort.

In a further step, the loading of this content can be bridged with a loading animation that is controlled via a data object in Alpine.

TL;DR

In this article, we demonstrated how to use Alpine.js and the Intersection Observer API to delay the loading of libraries like Chart.js until they are needed, improving load time and user experience.

Interactive forms with Alpine.js

Jairus Joer — Tue, 10 Oct 2023 16:16:43 +0000

The texts in this article were generated in parts by OpenAI's ChatGPT and corrected and revised by us.

Starting point: The form

A simple contact form serves as the starting point for the intended dynamization. The next step is to define the necessary HTML and JavaScript.

<form class="form">
  <input class="form-input" name="name" type="text" />
  <input class="form-input" name="email" type="email" />
  <textarea class="form-input" name="message"></textarea>
  <button type="submit">Submit</button>
</form>

Integrate Alpine.js into the form

Alpine.js installation and setup is required for this section. Read more in our post: Include Alpine.js in a production environment.

Inside the Alpine script, register the useForm context and define the asynchronous post function as follows. Note also the offloading of the data formatting to its own data function, which allows a more flexible inclusion of the data within the context.

The data function returns an object of the stored input values, while the post function sends data as JSON as POST to our (still) fictitious backend.

document.addEventListener("alpine:init", () => {
  Alpine.data("useForm", () => ({
    data() {
      const inputs = Array.from(this.$el.querySelectorAll("input, textarea"));
      const data = inputs.reduce(
        (object, key) => ({ ...object, [key.name]: key.value }),
        {}
      );
      return data;
    },

    async post() {
      return await (
        await fetch("/", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(this.data()),
        })
      ).json();
    },
  }));
});

In the <form> element we register the previously defined useForm context, along with the post function to handle data collection with Alpine. x-on:submit.prevent is Alpine's counterpart to Event.preventDefault(), interrupts the form submission and triggers the post function instead.

<form class="form" x-data="useForm" x-on:submit.prevent="post">
  <input class="form-input" name="name" type="text" />
  <input class="form-input" name="email" type="email" />
  <textarea class="form-input" name="message"></textarea>
  <button type="submit">Submit</button>
</form>

Display responses dynamically

Thanks to Alpine's reactivity, responses to submitted forms can be used to provide users with immediate feedback on their requests. In the following example a simple PHP script serves as backend, which provides the form data as JSON via the variable $json and also returns a JSON object via $response.

Via $response->state the state of the query is defined, which is returned independently of the data.
The included information is used to identify, display and communicate the response in the frontend.

header("Content-type: application/json; charset=utf-8");

$json = json_decode(file_get_contents('php://input'));

$response->data= [
  // ...
];

$response->state = [
  'code'=> 200,
  'type' => 'success',
  'message'=> 'Your request was sent successfully.'
];

http_response_code($response->state['code']);
exit(json_encode($response));

In the Alpine object response the response of the POST request is stored and made accessible to the HTML frontend via the useForm context.

document.addEventListener("alpine:init", () => {
  Alpine.data("useForm", () => ({
    response: false,

    data() {
      const inputs = Array.from(this.$el.querySelectorAll("input, textarea"));
      const data = inputs.reduce(
        (object, key) => ({ ...object, [key.name]: key.value }),
        {}
      );
      return data;
    },

    async post() {
      this.response = await (
        await fetch("/", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(this.data()),
        })
      ).json();
    },
  }));
});

Via x-show the element .form-response is faded in by the response of the backend - here in form of a simple banner. The returned status type success is registered as a new class .is-success to influence the coloring of the banner.

<form class="form" x-data="useForm" x-on:submit.prevent="post">
  <div
    class="form-response"
    style="display: none"
    x-show="response"
    x-bind:class="`is-${response?.state?.type}`"
    x-text="response?.state?.message"
    x-transition
  ></div>
  <input class="form-input" name="name" type="text" />
  <input class="form-input" name="email" type="email" />
  <textarea class="form-input" name="message"></textarea>
  <button type="submit">Submit</button>
</form>

Thus, answers from the backend can be displayed dynamically via Alpine. In a further step, this functionality could also be used to display information for the validation of individual input fields.

TL;DR

Alpine adds reactive features to a static form that make it easier to send, receive, and visualize information from the backend for input - using Alpine's context.

"How does A.I. learn?" - Impressions from our first seminar

Jairus Joer — Mon, 02 Oct 2023 17:14:28 +0000

The texts in this article were generated in parts by OpenAI's ChatGPT and corrected and revised by us.

In August, we had the opportunity to give colleagues at the communications agency neuwaerts a deeper look into the theory behind machine learning and artificial intelligence in general.

Under the direction of Henrik Bartsch, we introduced central concepts and terms on this topic in a total of two hours and addressed questions and related content.

In detail, the following topics were covered:

Introduction
What is "Artificial Intelligence"?
Fundamentals of Machine Learning.
1. Supervised Learning
2. Semi-Supervised Learning
3. Unsupervised Learning
4. Reinforcement Learning
Neural Networks and Deep Learning.

In addition, the following related content has been added as optional content and discussion topics:

Minimizing the Error Function.
Selection of Models in Machine Learning.
Ethics and Bias in Machine Learning.
Functionality of Generative Models
Transition to the Future.

Procedure

The aim of the seminar was to familiarize A.I. users with the processes and technology behind these new technologies and services and, above all, to clear the fog around how these topics work and the risks involved.

The seminar started with an introduction of the seminar leader Henrik Bartsch, who gave a short insight into himself and his motivation for this seminar.

As an introduction to the main topic, definitions of terms were established, known and unknown services were introduced, and the general advantages and disadvantages of A.I. models were discussed.

As the seminar progressed, building on the previous slides, more complex topics and terms were introduced, illustrated with interactive graphics and some strategically placed memes.

Memes, in particular, were used to present various issues in an entertaining but understandable way, while also lightening the atmosphere surrounding the topics discussed.

A meme posing the question of humanity to A.I. "Is this something that will soon replace us all?"

After the main topic was completed and time remained, participants were given the opportunity to vote on the optional topics.

Here, an interest in Ethics and Bias in Machine Learning and Functionality of Generative Models emerged in particular.

We had already provided reflections on the ethics of artificial intelligence in our article from May 2, 2022 (Working with Artificial Intelligence: Risks & Side Effects), so we were able to take the opportunity here to delve into the current situation and changes in perception.

The Functionality of Generative Models in the context of creative work with generation services such as Midjourney was also explained in more detail with clear graphics and relevant examples from the industry.

Experience

Since the topic of how artificial intelligence learns is very complex and extensive, it was a pleasant challenge for us to prepare this content in a simple, entertaining and, above all, accessible way.

It was helpful to have a feedback culture that kept these three points in the foreground and checked the content created against these criteria.

The planning and exchange about the process and the presented content took place in Google Docs and Figma. Both tools stood out in the creation process for their real-time collaboration features and accessibility, and will likely accompany us in future projects.

In conveying the content, we aimed to answer questions early on and eliminate ambiguities.

The direct feedback from the participants after the seminar gave us the opportunity to answer any unanswered questions and gain first-hand insights into our knowledge transfer.

TL;DR

Our seminar provided insight into the functionality and application of various A.I. models, covered generative models, and discussed the ethics of the content presented. We look forward to future projects benefiting from the experience gained.

Include Alpine.js in a production environment

Jairus Joer — Sun, 01 Oct 2023 13:48:46 +0000

The texts in this article were generated in parts by OpenAI's ChatGPT and corrected and revised by us.

Reasons for using Alpine

Alpine.js describes itself as your new lightweight JavaScript framework and focuses on just that. With the features of Vue.js and an equally familiar syntax (thanks to @vue/reactivity), existing HTML code can be extended with a desired level of reactivity without greatly increasing the footprint of existing scripts.

Integration & First Steps

The integration of Alpine, taking into account data protection and current content security policies is as simple as it could be.

$ pnpm i alpinejs

In most cases, the recommended implementation in the documentation is sufficient. For an increased level of security, Alpine provides a dedicated build with @alpinejs/csp.

After installing the package, Alpine can be imported and initialized with the line window.Alpine.start().

import Alpine from "alpinejs";

window.Alpine = Alpine; // Optional for feedback within DevTools
window.Alpine.start();

Theoretically, Alpine can be used fully inline from this point. In the following example, a dropdown element is controlled with Alpine attributes.

<div class="dropdown" x-data="{open: false}">
  <button class="dropdown-head" x-on:click="open = !open">Hello</button>
  <div class="dropdown-body" style="display: none" x-show="open" x-transition>
    World
  </div>
</div>

The style attribute for .dropdown-body is not mandatory, but prevents the component from flickering when the page is initially loaded.

Since elements such as dropdowns are often used multiple times on a page in the same context, the functionality can be optimized with global methods to the extent that the actual inline code turns out a bit leaner and clearer.

More flexibility with `Alpine.data()`

The Alpine.data() method allows reuse of x-data contexts within the application. This allows the dropdown element already presented to be redesigned as follows.

import Alpine from "alpinejs";

document.addEventListener("alpine:init", () => {
  Alpine.data("dropdown", () => ({
    open: false,
    toggle() {
      this.open = !this.open;
    },
  }));
});

window.Alpine.start();

<div class="dropdown" x-data="dropdown">
  <button class="dropdown-head" x-on:click="toggle">Hello</button>
  <div class="dropdown-body" style="display: none" x-show="open" x-transition>
    World
  </div>
</div>

In this scenario, the open state and the onclick function are offloaded to the global method so that changes to the code can be made centrally, within the dropdown object.

Global and local scopes and `x-data` as utility

As illustrated by the dropdown example, global and local scopes can be used to create and manipulate context. This methodology can be established as a higher-level utility to control multiple elements simultaneously, or to define and order states in a uniform way.

In the aforementioned PHP environment, video content from a popular third-party provider was included, requiring user consent to share data. Using Alpine, I defined a method that loads and displays all of the user's videos within the x-data scope videos if users agree to the data exchange.

Alpine.data("videos", () => ({
  show: false,
  embed: "https://www.youtube-nocookie.com/embed/",
  accept: "Allow YouTube content",
  decline: "Hide YouTube content",

  toggle() {
    this.show = !this.show;
  },

  src(id) {
    return this.show && this.embed + id;
  },

  text() {
    return !this.show ? this.accept : this.decline;
  },
}));

<div class="videos" x-data="videos">
  <!-- ... -->
  <div class="video">
    <div class="video-consent" x-show="!show" x-transition>...</div>
    <iframe
      class="video-frame"
      title="Video-Player"
      style="display: none"
      x-bind:src="src('dQw4w9WgXcQ')"
      x-show="show"
      x-transition
    ></iframe>
    <button class="video-button" x-on:click="toggle" x-text="text"></button>
  </div>
  <!-- ... -->
</div>

In principle, this concept can be modularized and optimized for different third parties, so that one methodology can be applied to multiple cases.

Findings

Complex and multi-used functions can be grouped into a context and made accessible to child elements through x-data. The ability to write and test scripts within Alpine attributes invites experimentation, but is unsuitable for a production environment. Functions and methods can instead be defined within the 'alpine:init' EventListener to reduce HTML document load time and complexity.

Global events and elements can be managed excellently via a context in the <html> element, as this is due to all child elements.

<html lang="en" x-data="utility"></html>

However, the global context does not block the use of other contexts within the HTML structure. This allows two contexts to be available within one element.

<html lang="en" x-data="utility">
  <!-- ... -->
  <div class="videos" x-data="videos"></div>
  <!-- ... -->
</html>

Thus for each HTML component an own context with functions and data can be established, which has also access to superordinate context and is not excluded from global settings.

TL;DR

Alpine allows the incremental extension with interactive and reactive elements by a reduced approach and a methodology, which - thanks to a clear documentation - can be quickly taken up and established.

DEV Community: Jairus Joer

Advanced forms with Alpine.js

Setup

Integrating methods for Alpine.js

form.ts

input.ts

globals.ts

Declaring optional utility methods

Creating pages and components in Astro

input.astro

index.astro

TL;DR

Working with the Arc Browser

Onboarding

Tabs & Views

Spaces

Features

Arc Max

Library

Media & Downloads

Easels & Notes

Boosts

Archive

Development tools

TL;DR

Temporary and persistent state management with Alpine.js

Set up necessary utilities

Set up the global scope with app.

Compliance structure

Indexing of the components

Integration

TL;DR

Visualize and update products with Alpine.js

Obtain and visualize data

Obtain exchange rate and update prices

TL;DR

Dynamic imports with Alpine.js

Setup

Preparation of the HTML

Implementation of Chart.js

Configuration of Alpine.js

Verify results

Further possibilities

TL;DR

Interactive forms with Alpine.js

Starting point: The form

Integrate Alpine.js into the form

Display responses dynamically

TL;DR

"How does A.I. learn?" - Impressions from our first seminar

Contents

Procedure

Experience

TL;DR

Include Alpine.js in a production environment

Reasons for using Alpine

Integration & First Steps

More flexibility with Alpine.data()

Global and local scopes and x-data as utility

Findings

TL;DR

`form.ts`

`input.ts`

`globals.ts`

`input.astro`

`index.astro`

Set up the global scope with `app`.

More flexibility with `Alpine.data()`

Global and local scopes and `x-data` as utility