Tech Snippets #2

Welcome to the second Tech Snippet 😊

</> htmx

htmx is one of raising libraries in the JS ecosystem and finished 2nd in the 2023 JavaScript Rising Stars Survey. It enables you to write applications using server-rendering but with the experience of a SPA.

I love the component based approach that React gives you, but one of the main downers is API design. Frontend & Backend need to agree on an API contract and breaking changes require you to either change both systems or you need versioning. Also many times the API design is heavily influenced by how the data is displayed in the UI, but now you have heavily coupled your backend to your UI design.

With htmx you get rid of that API layer, no need to deserialize your data -> make a request -> serialize it -> do something -> deserialize your new data -> send it to back the client -> deserialize it again -> update your DOM. Getting rid of this layer can drastically improve the speed of development and this is one of the powers of htmx.

</> htmx - high power tools for html

htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext htmx is small (~14k min.gz’d), dependency-free, extendable, IE11 compatible & has reduced code base sizes by 67% when compared with react

</> htmx

DjangoCon 2022 | From React to htmx on a real-world SaaS product: we did it, and it's awesome!

David Guillot gives a good overview on what is possible using htmx by showcasing their real-world SaaS product which is developed in Django and htmx.

They have migrated from their initial SPA written in React with a Django backend to just use Django with htmx without making any compromises in the user experience.

It is a good showcase on how a real-world application is build using these technologies and also inspired me to also use it for the next production ready applications and so far I am amazed by it.

DjangoCon 2022 | From React to htmx on a real-world SaaS product: we did it, and it’s awesome!

From React to htmx on a real-world SaaS product: we did it, and it’s awesome! by David GuillotWe took the plunge and replaced the 2-year-of-work React UI of…

YouTube

Professional-grade mypy configuration

Sometime ago I started to add type hints to my Python code, this also helped me to catch some type of bugs early. But adding type hints is just one thing you also need to make sure you actually don’t violate it. This is where mypy comes in, it is a de facto static type checker for Python. But it offers so many configurations and can be a bit overwhelming at the beginning.

This blog post from Wolt explains the basic configuration that they use on their 100k+ LOC web applications where 100+ developers are contributing to it.

Professional-grade mypy configuration

Type hints are an essential part of modern Python. In this blog post, we’ll list a set of mypy configuration flags which should be flipped from their default value in order to gently enforce professional-grade type safety.

Wolt CareersJerry Pussinen

Thank you for reading and have a wonderful day ☀️