Learn Anything With AI: HTMX - FLASK - AIDER (asmr devlog)
Crazy HTMX fact: it has been known to reduce code base sizes by 67% when compared with React 🤯😅👋.
🔥 Welcome to our latest ASMR devlog, where we dive into the world of AI-powered coding with AIDER, Flask, and HTMX! 🔥
In this video, we're learning HTMX with AI. We explore the power of AI in programming using AIDER, a GPT-powered coding assistant, to generate a Flask app that helps us understand, learn and master HTMX.
🚀 HTMX is a simple and refreshing tool that brings modern user interfaces to HTML. It provides access to AJAX, CSS Transitions, WebSockets, and Server Sent Events directly in HTML, using attributes. This allows you to build modern user interfaces with the simplicity and power of hypertext and hypermedia. HTMX is small, dependency-free, extendable, IE11 compatible, and has been known to reduce code base sizes by 67% when compared with React.
🤖 AIDER is a command-line chat tool that leverages OpenAI’s GPT models to help you write and edit code. Whether you're starting a new project or modifying code in your existing git repo, AIDER makes it easy to commit, diff, and undo changes proposed by GPT without copy/pasting. It also has features that help GPT-4 understand and modify larger codebases.
🌐 Flask is a powerful web application framework written in Python. Flask is based on the Werkzeug WSGI toolkit and the Jinja2 template engine. We barely tap into the full potential of flask in this video, just know there's a lot more to flask you can do if you need it.
AI Programming is here, stay on the edge of what's possible. Like, share, and subscribe for more content like this.
🎥 Become an AI Programmer
• Let's Get Fired: Using AI Coding Assistant...
💻 Tech & Tools:
FLASK: https://flask.palletsprojects.com/en/...
HTMX: https://htmx.org/
AIDER: https://aider.chat/
VSCODE: https://code.visualstudio.com/
🖥 Equipment
Mac Book Pro 16" M2 https://support.apple.com/kb/SP890?lo...
Fujifilm X-H2s https://fujifilm-x.com/en-us/products...
📚 Chapters
00:00 Setup Python App
01:40 AI Generate Flask App
02:25 Use AI to create HTMX examples
04:00 Test the App!
04:30 Learn HTMX - Click Trigger
09:25 Learn HTMX - Polling
11:00 Learn HTMX - Mouseenter & Animation
12:25 Learn HTMX - Search & Filter
15:35 Learn HTMX - Loading Indicator
17:15 Learn HTMX - Content Swap
18:04 Recap Our HTMX App
#frontend #html #aiprogramming