Keyur Shah keyurshah

Northstar Tutorial: Building Modern Web Apps with Go and Datastar

This tutorial will guide you through understanding and building features in Northstar, a modern web application stack combining Go, NATS, Datastar, and Templ. It's designed for developers new to Go or the hypermedia/reactive patterns that Datastar enables.

Northstar Tutorial: Building Modern Web Apps with Go and Datastar

This tutorial will guide you through understanding and building features in Northstar, a modern web application stack combining Go, NATS, Datastar, and Templ. It's designed for developers new to Go or the hypermedia/reactive patterns that Datastar enables.

Guide

Getting Started

Datastar simplifies frontend development, allowing you to build backend-driven, interactive UIs using a hypermedia-first approach that extends and enhances HTML.

Datastar provides backend reactivity like htmx and frontend reactivity like Alpine.js in a lightweight frontend framework that doesn’t require any npm packages or other dependencies. It provides two primary functions:

Modify the DOM and state by sending events from your backend.
Build reactivity into your frontend using standard data-* HTML attributes.

	# Function to print the current state of the board
	def print_board(board):
	# Iterate over the board in steps of 3 to print each row
	for i in range(1, 10, 3):
	# Print the current row of the board with corresponding values
	print(f"{i}: {board[i]} {i+1}: {board[i+1]} {i+2}: {board[i+2]}\n")

	# Function to check if there's a winner
	def check_win(board):
	# Define all possible winning combinations

	# Function to print the current state of the board
	def print_board(board):
	# Iterate over the board in steps of 3 to print each row
	for i in range(1, 10, 3):
	# Print the current row of the board with corresponding values
	print(f"{i}: {board[i]} {i+1}: {board[i+1]} {i+2}: {board[i+2]}\n")

	# Function to check if there's a winner
	def check_win(board):
	# Define all possible winning combinations


	<?php
	/**
	* @copyright Copyright (c) PutYourLightsOn
	*/

	/**
	* Blitz config.php
	*
	* This file exists only as a template for the Blitz settings.

	// Automatically bind internal links to `up-follow` behaviour
	// Unpoly will already catch and handle links with explicit `up-follow` etc,
	// so we are safe to assume that if our handler below is triggered, the link
	// doesn't already have an up- attribute.
	//
	// Scenarios to handle:
	// Hat-tip to https://github.com/instantpage/instant.page/blob/master/instantpage.js
	// ✅ cmd+click
	// ✅ empty links
	// ✅ links to another domain

	@push('body-styles')
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.0/trix.css">
	@endpush

	<form>

	<input x-ref="description" id="description" name="description" value='{{ $description }}' type="hidden" />
	<div wire:ignore>
	<trix-editor input="description"></trix-editor>
	</div>

Keyur Shah keyurshah

Northstar Tutorial: Building Modern Web Apps with Go and Datastar

Table of Contents

Northstar Tutorial: Building Modern Web Apps with Go and Datastar

Table of Contents

Guide

Getting Started

	<?php

	namespace App\Http\Livewire\App\Organizers\Forms;

	use App\Http\Livewire\Traits\Form;
	use App\Models\Organizer;
	use Livewire\Component;

	class People extends Component
	{

	FAIL test/lifecycle.spec.js
	● callbacks registered within x-created can affect reactive data changes

	expect(received).toEqual(expected) // deep equality

	Expected: "baz"
	Received: undefined

	51 \| Alpine.start()
	52 \|