Frontendmasters Courses
853 subscribers
1 photo
7.9K videos
2.04K links
#frontendmasters courses

source: https://frontendmasters.com/courses

Channel for automated uploaded courses from frontendmasters.com

Our Channels:
@vue_courses
@vue_updates

Contacts:
@Black_Yuzia
Download Telegram
Title: HTMX & Go
Description: Are you wanting an alternative to complicated UI frameworks? Make web app development simpler using HTMX. Using Go on the backend, you’ll learn the grug way (it’s just HTML, btw) for building interactive web experiences!
Link: https://frontendmasters.com/courses/htmx/
Time: 2 hours, 1 minutes
Lessons: 17 / 17
Tags: #course #frontendmasters #720p
Media is too big
VIEW IN TELEGRAM
1. Introduction
ThePrimeagen introduces HTMX and shares personal experiences in the web programming world, reflecting on the evolution of technologies like jQuery and React. They express discontent with certain aspects of modern web development and explain why they find HTMX appealing for its simplicity and ease of use. The lesson covers various topics, including some history of hypermedia, the speaker's journey in web development, and their reasons for favoring HTMX.
-
https://theprimeagen.github.io/fem-htmx/
#lesson
Media is too big
VIEW IN TELEGRAM
2. Project Setup
ThePrimeagen provides instructions for setting up the necessary tools and dependencies for the course. They also emphasize the importance of actively engaging with the material and encourage students to use the Chrome debugger for troubleshooting.
-
https://theprimeagen.github.io/fem-htmx/lessons/introduction/requirements
-
https://github.com/ThePrimeagen/fem-htmx-proj
#lesson
Media is too big
VIEW IN TELEGRAM
3. Creating an HTTP Server
ThePrimeagen guides the students through building a simple HTTP server using the Echo framework in Go. They explain how to set up the server, create an index page using HTML templates, and render the template with data. The final result is a server that displays a count of how many times the page has been requested.
-
https://theprimeagen.github.io/fem-htmx/lessons/htmx-basics/htmx-basics
#lesson
Media is too big
VIEW IN TELEGRAM
4. Moving from HTML to HTMX
ThePrimeagen explains how to change from using HTML to using HTMX and demonstrates adding a post endpoint, removing incrementing from the GET route, and adding a button to the HTML that triggers a post request. They also mention using the HTMX JavaScript library and provide instructions on how to include it in the website.
#lesson
Media is too big
VIEW IN TELEGRAM
5. Understanding HATEOAS
ThePrimeagen introduces the concept of HATEOAS (Hypermedia as the Engine of Application State) and explains how it differs from the traditional approach of using the HTML state to drive program changes. They also discuss the layers of state in modern web development and how HTML can be used as the engine of application state. The lesson concludes with a brief overview of htmx, including its events, HTML reduction capabilities, and redirection options.
-
https://theprimeagen.github.io/fem-htmx/lessons/htmx-basics/htmx-basics#principle-hateoas
#lesson
Media is too big
VIEW IN TELEGRAM
6. Arguments Against HTMX
ThePrimeagen addresses common arguments against using HTMX. They explain that servers already understand the representation of the client through JSON, and accept headers can be used to request data in different formats. They also discuss the process of producing HTML and argue that it is not slower than producing JSON. They also mention the importance of testing and measuring performance and share their thoughts on Node.js templating engines.
-
https://theprimeagen.github.io/fem-htmx/lessons/htmx-basics/htmx-basics#common-arguments
#lesson
Media is too big
VIEW IN TELEGRAM
7. Using hx-target with Templates
ThePrimeagen debugs an issue with a web application where the response HTML is being placed in the wrong element. They identify the problem and solve it by setting a target element using the hx-target attribute. They then demonstrate how to make the code more efficient by rendering only the necessary content using a template block. Finally, they show how to further optimize the code by targeting a specific div element for replacement instead of the entire body.
#lesson
Media is too big
VIEW IN TELEGRAM
8. Building a Form
ThePrimeagen explains how to add interactivity to a basic HTML form using JavaScript. They demonstrate how to create a form that takes in a name and email, and when the user clicks the submit button, the name and email are added to a server and displayed in a list. The instructor also mentions different techniques and frameworks that can be used for interactivity, such as React, htmx, and web components.
-
https://theprimeagen.github.io/fem-htmx/lessons/htmx-basics/htmx-swap
#lesson
Media is too big
VIEW IN TELEGRAM
9. Contacts List & Endpoint
ThePrimeagen explains how to create a contacts object and an endpoint for posting contacts in an index.html file. They demonstrate creating a struct for contacts, a function for creating a new contact, and a struct for data. They also show how to append new contacts to the data object and render it on the page.
#lesson
Media is too big
VIEW IN TELEGRAM
10. Error Handling
ThePrimeagen discusses the problem of displaying form errors and handling form submissions in an HTMX application. They demonstrate how to handle form errors by returning a 422 status code from the server and updating the form with error messages. They also show how to use the `hx:BeforeSwap` event to customize the behavior of HTMX when handling 422 responses.
#lesson