Learn Alpine, Elm and Gulp

`elm-ui` is a language for layout and interface design. This is a novel iteration on declarative styling where you can use Elm types and functions to define your UI in a declarative way.

The novel part is that it does not require you to know CSS to be used. The API is very simple and can be learned quickly!

The approach taken by `elm-ui` is based on two big ideas: 
Getting the compiler to verify as much of the layout and styling as possible by defining them in Elm code
Enabling refactoring capabilities of Elm for UI code


Elm is a programming language that provides a clean functional syntax for writing HTML web applications. It promises zero runtime exceptions, fast rendering, time-travel debugging, and much more.

Declarative UIs without CSS with elm-ui

Now that our beautiful dashboard is complete, is time to produce a production ready build with create-elm-app, one of the biggest benefits of using it. You'll notice that it is running on production mode because the Elm Debugger won't show up anymore.

Create a Production Optimised Build with create-elm-app

We will make all the necessary changes to keep track within our model of the device and orientation that the user is using, and change our UI according with that information, adding responsiveness and multiple columns (at last!) to our dashboard.

To do this, we'll need to modify our app state to track the device height and width (which we expose from JavaScript). Then we can use the `classifyDevice` function to pattern match the devices we want to handle, in our case, `Desktop` and everything else (as mobile). We will add a `Browser.Events` subscription that sends a ResizedApp message to our model that defines what device we are on.

Manually Control Responsiveness with Elm classifyDevice

Up until this point, the 4 cards displayed in our dashboard each repeat the same information, so in this lesson, we will be splitting the state into different parts, showing an algebraic mindset and thinking how best represent the state of our app with our custom types. 

We'll start by modeling the selected options in state as a List of a Menu and String. The next step is to actually update the internal state of our menus. We will update `OptionPicked` to receive a string and when it does receive an option, it will filter for just the selected option and append that to state. Finally we will display the options in the `viewCard` component that will filter for the menu that is being selected and in the case of an option selected display that option as a string.

Split the Business Logic of Elm view Functions By Modeling the State

Since every time we interact with one of the dropdowns the information is shared between the 4 of them, the time as now arrives to give each individual dropdown its own state. We will also add subscriptions to listen to when the user clicks outside each dropdown!

To do this, we'll need to extend our state model to include each instance of our `viewCard`. To determine which dropdown that was clicked we will create a `getDropdownState` function that pattern matches the correct card instance. During this process, you'll see how the Elm compiler guides us through adding this functionality with detailed error messages.

You'll see how adding a subscription to close open dropdowns is convenient as `Dropdown` gives us an `onOutsideClick` function that receives the model and dropdown message.

Give Multiple Dropdowns Their Own Individual State with elm-ui-dropdown

This is the only lesson in which we will fallback to CSS to give our dropdown's scrollbar a fancier look because this is very browser dependent and there is no way (yet) to do this with elm-ui.

Customize My First Checkbox Icon with elm-ui

Now that our dropdown is almost finished lets just drop some shadow in the options selector to make it more visually clear that its over any other element in our page. This is an attribute that we can control the `offset`, `size`, `blur`, and `color`.

We will want to do this to our `viewCard` as well. We will also make the `viewCard` function more flexible by adding additional `Html` attributes from the outside to make each card have a different **height.** That way any time you want to override default attributes, you can pass in a new style.

Add elm-ui Border.shadow to Highlight Any Element

Since there is no select or dropdown component backed in into elm-ui, we will be adding another dependency to our project called `PaackEng/elm-ui-dropdown` and adding to it additional styles and settings so that it looks and behaves exactly as we want to.

To make this works, we need to make a few changes:
- We need to add a `dropdownState : Dropdown.State String` to our `Model`
- Add a couple of extra variants to our `Msg` type: `OptionPicked (Maybe String)`, to be dispatched by our dropdown whenever we click on any option, and `DropdownMsg (Dropdown.Msg String)` to update the internal state of the dropdown from the outside.
- Construct our hardcoded list of options of type `List String`.
- Define a `dropdownConfig : Dropdown.Config String Msg` that is going to contain all our customisation of our dropdown.
- Use `Dropdown.view` to display our custom dropdown wherever we need it.

Customize My Own Dropdown with elm-ui-dropdown

Now that we have our cards more or less looking good lets add a button and style it as well so that it serves as a starting point for our dropdown component, this lesson will also help us to learn how to use the `Element.Input` module from elm-ui.

Work with elm-ui Input Components

In this lesson, we will explain when you would need to reach for the `text` function, why it is different from `textColumn` and `paragraph` and when to use each one as they serve different purposes for displaying text in the UI. Basically, `el` and `text` elements **do not wrap text by default**, so we need to use `paragraph` when we want text to overflow and still be visible to read. We will add a new "subtitle" section below our Breakdown subheading

Choose between text, textColumn and paragraph with elm-ui

Since we mentioned in a previous lesson that there is no concept of "margin" in elm-ui, we are goint to learn how to se `padding`, `paddingXY` and `paddingEach` to compensate for that, and a little trick defining a value edges that is going to be pretty useful.

Use padding, paddingXY and paddingEach with elm-ui

We will style the heading of `viewCards` to look more like a real heading. If you inspect the console right now, you'll find that the `el` element we are using for our text corresponds to a div in HTML. 

We will go further away than using only text to display our content and introduce the modules `Element.Font` and `Element.Region` to fix the headlines and other text of our dashboard, adding an additional "breakdown" heading that is going to serve as a divider between sections.

Style Text with elm-ui Headlines, Typographies, and Fonts

We will use the pink box element that we had from previous lessons while implementing our fancy dashboard and we will turn it into our Card "component", the piece of UI that we are going to repeat and that will have its own state later on the course. 

To do this, we'll first manipulate the background color and text color, then change the height and width of the card. We will want to change the title for each of the cards and to do so we will accept a title argument that will be passed down to our text element within the card to be displayed.

Use View Functions to Create Reusable Pieces of UI in Elm

In this lesson we will start to get to know the row and column functions in elm-ui to help us layout our application. We will choose the mobile first approach in which we will display everything in one column, show how to handle two columns and explain that later when we do responsible we will be able to play a bit more with this. Since the concept of margin does not exist in elm-ui, in this lesson we learn how to solve it by using spacing and we will talk about padding in a future lesson.

Model a Layout with row, column and spacing with elm-ui

To showcase the power of elm-ui, in this lesson we will show how incredibly easy it is to center an element both horizontally and vertically on a screen with elm-ui, since this is a typical problem while doing regular CSS.

Center an elm-ui Element Horizontally and Vertically

We are going to go ahead and install globally create-elm-app (because it has the best DX so far) and show how would you typically start any production-ready Elm app, and also add elm-ui as a dependency and show the first elements with elm-ui.

Bootstrap an elm-ui Application with create-elm-app

Welcome to the elm-ui course! We are going to be building a complex dashboard completely from scratch with elm-ui, with a mobile-first approach and in the final lessons of the course we will make it fully responsive! I hope you enjoy the course and that you choose elm-ui for your next project!

Introduction to the elm-ui Course

Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost.

You get to keep your DOM, and sprinkle in behavior as you see fit.

alpine

Welcome to this beginner level series on Alpine JS! 👋🏞

Alpine JS is a rugged, minimal framework for composing JavaScript behaviour in your markup. It brings declarative, reactive, data-driven nature of libraries like React or Vue to your HTML templates.

This is the series intro video. Let's get started!

Series Intro - Beginner Level Alpine JS

In this lesson, we build a little app that fetches dog photos from the dog.ceo API, based on a "breed" search field. We want the API call to happen again when the search value changes, and to do so we use the `$watch` property from Alpine JS, which lets us define what state property we want to watch, and what callback function to run when a change happens.

We also use the `debounce` modifier on the `x-model` property to avoid firing an API call on each keystroke.

Refetch API data when a state value changes with the `$watch` property in Alpine JS

Welcome to this beginner level series on Alpine JS! 👋🏞

Alpine JS is a rugged, minimal framework for composing JavaScript behaviour in your markup. It brings declarative, reactive, data-driven nature of libraries like React or Vue to your HTML templates.

In this series, you will learn about Alpine's handy **directives**. You'll discover how to define a component scope with `x-data`, run code on mount with `x-init`, attach event listeners with `x-on`, display data with `x-text`, decide wether or not to show an element with `x-show`, iterate through data with `x-for`, retrieve a DOM element with `x-ref`, learn how to achieve _two-way data binding_ with `x-model`, and much more.

You'll also learn how **"modifiers"** can be applied and chained to directives to provide additional functionality: control the animation transition of entering and leaving DOM elements, debounce an event listener, etc.

We'll also touch on what Alpine calls **"magic properties"**, which give you access to native browser events (`$event`), reference to DOM elements (`$refs`), and more.

You'll gradually discover Alpine's API and syntax, from building simple tabs to a mini app that fetches a dog picture based on a "breed" search field. 🐶

**Get ready to breathe some fresh air** - it's time to walk into cool, green Alpine pastures! 🏞

Sprinkle declarative, reactive behaviour on your HTML with Alpine JS

In this lesson, we see how the `x-model` directive makes achieving "two-way data binding" effortless in Alpine JS.

We see what it would take to recreate the same functionality with an `x-bind` directive for the input value, as well as an `@input` event listener which, thanks to an access to the browser's native events via the `$event` magic property, sets the state value to `$event.target.value`.

Keep a DOM input and state value in sync with the `x-model` directive in Alpine JS

Speed up your bug-fixing process dramatically with Cursors Composer. Take a warning from your logs, search for relevant terms, then seamlessly import both the warning and search results into Composer. Add documentation and apply fixes to all search results in one go. This streamlined workflow resolves multiple issues rapidly, saving valuable development time.

Batch Fix Every File in Search Results with Cursor's Composer

 We map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the table. This allows us to add more columns to our pokemon table.

Fetch and display row details with Promise.all in Tanstack Table

map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the tanstack table

Create a custom hook to fetch remote data by passing a promise to the React 19 `use` hook. Then render this data in Tanstack Table by memoizing the results and passing them to `useReactTable`.

Render remote data in a Tanstack Table with React 19's use hook and a promise

Create a custom hook using React 19’s use to fetch data with a promise. Render it in a Tanstack Table by memoizing and using useReactTable.

You know when you're deep in the code trenches and need someone to challenge your assumptions? That's exactly what this is about.

Instead of waiting for someone to poke holes in your master plan, you can paste that strategy straight into AI Studio and let it pressure test your ideas. We're talking about using this tool to validate everything from your feature proposals to your ambitious refactoring strategies.

The real magic happens when you hit that microphone button. Now you're in a real-time verbal sparring match. It's like rubber duck debugging but the duck actually pushes back and makes you defend every architectural decision you've made.

Here's the workflow:
1. Drop your master plan into the system instructions
2. Tell the AI to challenge every assumption
3. Hit that mic and defend your choices like you mean it
4. Watch your plan either emerge stronger or get rightfully dismantled

This approach is perfect when you're:
- Stuck in your own head with a complex problem
- Need to validate if your approach holds water
- Want to catch edge cases before they catch you
- Looking for opportunities you might have missed because you're too close to the code

It's like having a senior dev on call 24/7, ready to challenge your ideas and push you to think deeper about your solutions.

Now go forth and get your ideas challenged. Your projects will thank you for it.


An Uncomfortable and Challenging Conversation with AI Studio

In this lesson, you'll learn how to effectively brainstorm your project ideas before working with AI agents. We'll cover:

1. The importance of having a clear plan before starting work with AI agents
2. Using traditional brainstorming techniques to gather your thoughts
3. Leveraging video recording to capture your brainstorming session
4. How to review and analyze websites for inspiration
5. Documenting likes, dislikes, and potential features for your project
6. Using AI tools (like AI Studio) to organize and process your recorded brainstorming session

The lesson emphasizes a modern approach to brainstorming that combines traditional techniques with video recording, making it easier to later process your ideas through AI tools. This method helps ensure that no ideas are lost and that your thoughts can be effectively organized by AI for future reference.

How to Brainstorm Your Project Features to Prepare for AI Agents

Many people share .cursorrules files, but trying to craft your own from scratch is a huge pain. Instead, this lesson shows you how to grab ALL community-created .cursorrules files to build a custom rule set for your projects. We'll use Gitingest and Google AI Studio to gather these examples and generate an awesome starting point customized to your specific project.

Generate Custom .cursorrules for Your Project Based on Community Examples

The GitHub CLI allows you to search issues and filter on different criteria like amount of comments. This allows you to search for real-world situations and pains/solutions people have using different technology. 

With the GitHub CLI in hand we'll drop 100s of issues as context in Googles AI Studio and have Gemini determine the 10 most frequently asked questions. This will give us a sense of how people use a library and where people get hung up.

Search 100s of Issues with GitHub CLI as Context for AI Studio

I often find myself wondering how to use certain APIs in certain situations, and I have a couple of keywords that I try and search up on Google. 

What you can do in this situation is turn to GitHub and see how other people have actually used this code on public projects. The GitHub CLI enables us to run searches like this, and we can take the results and work on them programmatically.

Inside of Cursor with their Composer AI agent, we can search for the files we want, tell the agent to download them, and inspect them for better understanding of how those things work together.

Search All of GitHub's Code and Pass the Results to AI Agents in Cursor

Implement virtual scrolling to handle large datasets in an HTML table. Start with a basic table that renders 10,000 rows of data. The browser can struggle with this amount of DOM nodes to render at one time, especially on low end devices. 

We implement tanstack react virtual to render only the necessary amount of rows the user is viewing. The implementation includes proper column sizing, accessibility considerations, and convenient scroll controls, resulting in a smooth and performant table experience regardless of the dataset size.

Create a row virtualized HTML table with Tanstack Virtual

Learn how to implement virtual scrolling in React tables using TanStack Table and Tanstack Virtual with the useWindowVirtualizer React hook.

The most difficult tasks will require the strongest AI models. And those models simply aren't available as AI agents inside of your tooling. So the best workflows are to drag and drop the files you need to be changed and analyzed inside of a reasoning model such as OpenAI's O1 Pro, then letting it create a giant plan for your dumber AI agents to work on. The key here is that instead of just copying and pasting the entire plan into Cursors Composer or your AI agent, it's to create a file inside of your project and ask your agent to tackle the plan one step at a time. This allows you ample opportunity between each step to test and verify the micro steps along the way. Otherwise, as I've experienced many times, a session can go way off track and you burn a lot of time and burn a lot of AI requests Cursors Composer and it starts churning through a plan Cursors Composer and making lots of unwanted changes. Cursors Composer and it's to guide an AI agent to hold its hand along the way, especially through the most complex tasks. Cursors Composer and the most complex tasks Cursors Composer and the most complex tasks require a step-by-step plan.