Best of HTMX — 2024

  1. 1
    Article
    Avatar of asayerasayer·2y

    HTMX 2.0 is here: Everything you must know about it

    HTMX 2.0, released in June 2024, brings several significant improvements to the JavaScript library used for creating dynamic web applications directly in HTML. New features include better support for Web Components, adherence to HTTP standards, and improved extension management. The new version addresses limitations and non-standard behaviors of HTMX 1.0, and migration to HTMX 2.0 requires minimal effort due to the focus on backward compatibility. A public roadmap is being developed, and more details can be found through the HTMX community and GitHub page.

  2. 2
    Article
    Avatar of communityCommunity Picks·2y

    FastHTML – fasthtml

    FastHTML is a next-generation web framework designed for fast, scalable, and compact web applications using Python. It emphasizes powerful, interactive web app development with minimal code. Installation is straightforward via pip, and even a minimal app can be swiftly set up to demonstrate functionality. The framework leverages HTML and HTTP principles, promoting good software engineering practices. FastHTML integrates well with HTMX for adding interactivity. Extensive documentation and community resources are available for deeper learning and project assistance.

  3. 3
    Article
    Avatar of hnHacker News·2y

    Modern web applications in pure Python

    FastHTML enables the creation of modern web applications using pure Python, leveraging solid web foundations and offering seamless scalability. With the ability to utilize any Python or JS library, FastHTML provides flexibility and speed, making it ideal for various applications from dashboards to scalable SPAs. Deployment options are versatile, supporting any service or server compatible with Python, and users familiar with FastAPI will find transitioning to FastHTML intuitive. Additionally, incorporating HTMX can enhance functionality by filling in web browser gaps with a lightweight JavaScript library.

  4. 4
    Article
    Avatar of communityCommunity Picks·1y

    Build a URL Shortener with Go, Redis, and HTMX

    Learn to build a URL Shortener using Go, Redis, and HTMX. The tutorial covers setting up the Go environment, installing Redis, building a basic HTTP server with Go’s standard library, and implementing a simple URL shortening algorithm. It also includes instructions for integrating Redis as a fast in-memory data store, and creating a reactive UI with HTMX and TailwindCSS. The final steps involve setting up URL redirection and deploying the application.

  5. 5
    Article
    Avatar of jetbrainsJetBrains·2y

    Introduction to Htmx for Spring Boot Developers

    Starting a new project can be challenging, especially when deciding on front-end technologies like React, Angular, or Vue. Htmx offers an alternative by allowing developers to use their existing Spring Boot skills to create interactive user experiences with less complexity. By utilizing Htmx-specific attributes in HTML, developers can trigger events and dynamically update the DOM. The post walks through integrating Htmx into a Spring Boot project, showcasing simple to more complex examples. It emphasizes Htmx's ease of adoption and its ability to work incrementally alongside existing technologies.

  6. 6
    Article
    Avatar of communityCommunity Picks·2y

    htmx: Simplicity in an Age of Complicated Solutions

    htmx is a JavaScript library that simplifies front-end development by allowing developers to enhance HTML elements with additional functionality using HTML attributes. It promotes the use of hypermedia and RESTful principles to create dynamic web applications without the need for complex JavaScript frameworks.

  7. 7
    Article
    Avatar of hnHacker News·2y

    HTMX, Raku and Pico CSS

    The post explores simplifying web development by using HTMX to eliminate the need for JavaScript in dynamic content, favoring a return to using HTML for layout and CSS for styling. It highlights Pico CSS as an efficient styling tool that minimizes HTML attribute bloat, in contrast to frameworks like Bootstrap and Tailwind. The author shows practical code examples integrating HTMX with Raku/Cro backends and emphasizes the benefits of semantic HTML.

  8. 8
    Article
    Avatar of testdrivenTestDriven.io·2y

    Using HTMX with FastAPI

    Learn how to integrate HTMX with FastAPI by creating a simple todo app. This guide covers setting up the environment, creating endpoints to handle CRUD operations, and deploying the app on Render. The combination of FastAPI and HTMX facilitates efficient server-side rendering, minimizing client-side logic and providing a seamless user experience. Included are techniques for rendering HTML conditionally based on request headers and leveraging Jinja2 templates for dynamic content.

  9. 9
    Article
    Avatar of asayerasayer·2y

    HTMX vs. Vue and React -- Pros and Cons

    This post compares HTMX, Vue, and React JavaScript frameworks, highlighting their differences, pros, and cons. It discusses the core differences between HTMX, Vue, and React, examines the strengths and weaknesses of HTMX, React, and Vue, and provides use cases for each framework. The post also showcases how to work with HTMX, React, and Vue to create a CRUD task list application, and compares the code required in each framework.

  10. 10
    Article
    Avatar of threedotslabsThree Dots Labs·2y

    Live website updates with Go, SSE, and htmx

    Learn how to push live updates to your website using Go, SSE, and htmx. SSE endpoints in Go are slightly different from HTTP endpoints because you don't just write data to the ResponseWriter and return from the function. The connection stays alive until the client (the browser) closes it.

  11. 11
    Article
    Avatar of awegoAwesome Go·2y

    Escape JavaScript hell and write everything in Go

    The post describes an annual remake of a personal website using a new web stack focusing on HTMX and Go to avoid JavaScript/TypeScript complications. The author discusses the advantages of this approach for smaller, non-interactive HTML displays and explains the benefits of using tools like PocketBase, templ, TailwindCSS, and AlpineJS. The post emphasizes server-side rendering and the ease of making UIs without client-side state management.

  12. 12
    Article
    Avatar of rubylaRUBYLAND·2y

    htmx View Transitions

    View Transitions enable CSS and HTML support for animating state transitions between elements within the same document or across different documents, bringing smooth animations common in native mobile apps to the web. Utilizing htmx for managing dynamic slide transitions and minimal JavaScript for direction-sensitive animations, this guide explains the implementation from CSS keyframes to HTML structure and media queries. The post also provides debugging tips and resources for further learning.

  13. 13
    Video
    Avatar of communityCommunity Picks·2y

    HTMX For React Developers in 10 Minutes

    Learn how to use HTMX, a simple way to add interactivity to web pages, and how it compares to React.

  14. 14
    Article
    Avatar of planetpythonPlanet Python·2y

    From React to a Django+HTMX based stack

    Learn about Sheena O'Connell's journey of moving from a React-Django application to a pure Django with HTMX stack. Discover a real-world success story, lessons learned, and relevant resources including workshops, courses, and tools related to HTMX and Django development.

  15. 15
    Video
    Avatar of netninjaNet Ninja·2y

    HTMX Tutorial for Beginners #1 - What is HTMX?

    HTMX is a JavaScript library for creating dynamic web applications using a hypermedia-driven approach. It extends HTML's hypermedia controls, enabling interactions with the server through simple attributes without extensive client-side JavaScript. The tutorial introduces HTMX, compares it to other frameworks like React, and sets the stage for building a reading list application using Node.js and Express for the backend.

  16. 16
    Article
    Avatar of evolvedevevolvedev·2y

    Build scalable web applications in Golang without JavaScript

    This post outlines a setup for building scalable web applications in Golang, minus JavaScript. It covers configuring a simple API with Go Templates, JavaScript bundling without third-party CDNs, and using TailwindCSS & Preline UI. The setup also supports live server and browser reload, with only two dependencies needed. A demo video and GitHub link are provided.

  17. 17
    Article
    Avatar of freekFREEK.DEV·2y

    Use HTMX to Create Laravel Single-Page Apps Without Writing JavaScript

    Discover how to build single-page applications using Laravel and HTMX without writing any JavaScript. The guide explores integrating HTMX to simplify creating dynamic web applications.

  18. 18
    Article
    Avatar of communityCommunity Picks·2y

    </> htmx ~ htmx 2.0.0-beta1 has been released!

    The first beta release of htmx 2.0 has been announced. It includes changes such as the removal of hx-sse and hx-ws attributes in favor of extensions, as well as a change in payload for DELETE requests. IE compatibility will no longer be supported in htmx 2.x. The upgrade guide and extensions can be found on the htmx website.

  19. 19
    Article
    Avatar of htmxhtmx·2y

    > htmx ~ You Can't Build Interactive Web Apps Except as Single Page Applications... And Other Myths

    Building interactive web apps doesn’t require single-page application frameworks like React or AngularJS. Using HTMX for a multi-page application (MPA), the author debunks common myths and showcases how browsers have advanced to support fast page transitions. By implementing service workers and utilizing caching strategies, MPAs can achieve seamless user experiences. Tools like Google’s Workbox automate the service worker setup, and modern browser capabilities like cross-document view transitions with CSS provide robust solutions for handling interactive web applications without heavily relying on JavaScript frameworks.

  20. 20
    Video
    Avatar of communityCommunity Picks·2y

    Why Golang + HTMX Is The Most Productive Stack

    The post showcases Anthony GG's innovative use of Golang and HTMX to create a highly productive tech stack. He emphasizes the importance of mastering the tools before teaching them, contrasting himself with other influencers. Over three weeks, he built two production-ready applications and a detailed course to demonstrate his work. The stack primarily involves Golang, HTMX, jQuery, and Tailwind CSS, boasting efficient features like user authentication, interaction APIs, and chat integration. Despite some controversial elements, the technical achievement is impressive.

  21. 21
    Article
    Avatar of awegoAwesome Go·1y

    How to Set Up Authorization in a Bookstore Management System with Go, HTMX, and Permit.io

    Authorization is vital for application security, determining accessible resources and actions based on user roles. This tutorial guides you through building a bookstore app with authorization using Golang, HTMX, and Permit.io. The app includes role-based access control for admin and standard users, dynamic data loading, and secure user role management through Permit.io. It covers project setup, database configuration with PostgreSQL, HTTP handlers, and middleware for authorization checks.

  22. 22
    Article
    Avatar of communityCommunity Picks·2y

    1 Simple Reason to Build your Next Web App with HTMX

    HTMX simplifies building modern web apps by enabling developers to create Multi-Page Applications (MPAs) and enhancing them with the user experience features of Single-Page Applications (SPAs) without the need for new paradigms or frameworks. It integrates seamlessly with HTML and supports various programming languages, making it flexible and easy to use with existing projects.

See all HTMX archives