Tabs with Htmx & Hyperscript - Building a web app with Django - Part 16

preview_player
Показать описание
In this video we will add tabs to the page using htmx and hyperscript.
Key concepts: django-htmx, annotate, distinct, __gt, __isnull

This is part of a tutorial series where we build a web app from scratch and go live on the internet. Enjoy.

0:00 Intro
0:30 Tabs with Htmx
8:59 Tab Highlight
10:28 Tab Logic
14:53 Annotate

Follow me on:

Support me on:
Thank you.

#django #htmx #hyperscript #annotate #selftaughtdeveloper #webdevelopment #webapp #python #stayathomedad
  1. Andreas Jud
Рекомендации по теме
Tabs with Htmx 0:20:41

Tabs with Htmx & Hyperscript - Building a web app with Django - Part 16

HTMX/Hyperscript Demo with 0:00:15

HTMX/Hyperscript Demo with Transitions

Profile Tabs with 0:33:29

Profile Tabs with Htmx - Building a web app with Django - Part 18

HTMX/hyperscript demo 0:00:14

HTMX/hyperscript demo

Hyperscript and HTMX 0:25:19

Hyperscript and HTMX - Form Examples with Django

Hyperscript - An 0:11:19

Hyperscript - An Introduction

Hyperscript and HTMX 0:27:14

Hyperscript and HTMX - Creating an Interactive Book Form

Htmx & Hyperscript 0:30:52

Htmx & Hyperscript - Building a web app with Django - Part 15

How To Use 0:08:35

How To Use Hyperscript | Hyperscript Tutorial

How to use 0:12:29

How to use HyperScript? Easy peasy

HTMX - hx-boost 0:14:42

HTMX - hx-boost Attribute for Progressively Enhancing Web-Apps

Building a Tab 0:14:49

Building a Tab System with Alpine.js and TailwindCSS / DRY Django Templates

HTMX and Astro 0:17:50

HTMX and Astro Are An Amazing Combo!

Creating Dynamic Stencil 0:18:28

Creating Dynamic Stencil Components with Hyperscript

Simple, Fast Frontends 1:21:49

Simple, Fast Frontends With htmx

HTMX for ASP.NET 1:09:56

HTMX for ASP.NET Core Developers

HTMX Tutorial: How 0:30:57

HTMX Tutorial: How to Build Interactive Web Pages with Minimal JavaScript

jOpenSpace 2023 - 0:12:18

jOpenSpace 2023 - Marian Schubert - Můj frontend toolbox (HTMX, Shoelace, hyperscript, ...)

Django : Make 0:01:19

Django : Make clicked tab active in Bootstrap

Build WebApps with 0:41:15

Build WebApps with the GOTTH Stack! Go, Templ, TailwindCSS and HTMX

Carson Gross — 0:54:19

Carson Gross — Return To Hypermedia: Solving Javascript Fatigue Using Fundamental Web Architecture

HTMX with Clojure 0:17:41

HTMX with Clojure - Delete with a confirmation dialogue

Alpine JS: no 0:06:52

Alpine JS: no thanks

#HTMx: Building modern 1:09:03

#HTMx: Building modern web applications without JS (with Carson Gross)

Комментарии
Автор

thanks. I thought I was not able to follow trying to figure out last night. I was about to ask also then I saw this alert. thanks much!

FamilyTravelogue
Автор

many thx Bro, like always excellent stuff

Armin-qp
Автор

Thank you very much for the great videos.
Just for fun I tried another way to get the top comments:

comments =

This will count the total number of likes and replies to a comment, so comments with replies will also show up in the top comments

muellexx
Автор

I love learning this, but wouldn't it be better, if the files were already loaded, not to just sort the comments with hyperscript?

enkiimuto