HTMX

HTMX is a small (~14k), dependency-free, extendable frontend framework, with a very straightforward approach. It extends the Hypertext capabilities of HTML, without the need of using JavaScript.

Basic concepts:

  • Any DOM element can trigger HTTP requests
  • Any HTTP methods can be used (not just GET and POST)
  • The response from the server is HTML or HTML fragment
  • State management is is server-side, frontend is simple and dummy

Web Security Basics

The security of websites was always an important topic, and in my opinion it’s still a bit neglected by some developers. We have plenty of new tools, browsers try to protect their users more and more, but still, it’s important for a developer to be clear with some basic concepts.

Basics

Hash

Hashing algorithms are basically one way functions, where (typically) the hash(x) call is quick and easy, but its inverse is very slow and expensive - even impossible. In most cases they map arbitrary strings to fixed length, ones with very low probability of collision.

REST

REpresentational State Transfer is a software architectural style for creating stateless web APIs. These APIs are typically based on HTTP methods to access resources specified by URIs that are transmitted in JSON or XML encoded form. They are called RESTful APIs.

Web Basics - HTTP

Now that we are aware of the basic networking concepts, let’s take a deeper look at the main protocol of the web - HTTP.

Web Basics - Networking

So, what happens if you enter a URL into the browser’s location bar and press ENTER? A very many things, and eventually a website is loaded and rendered.

Let’s check the networking part!

<repa-shader>

I’m planning to create a custom web component which lets you easily embed your fragment shaders into any website for a long time. You can find some (mostly abandoned ones) on github, so this is my take on the topic (to abandon it eventually 😉).

It tries to be compatible with https://twigl.app/, supporting geekest mode and MRT as well (but only 300 es).

See details on github.

WebGL Planet

Sometimes I have the itch to create something that’s not (just) useful, but pleases the eyes.

I’ve started experimenting with webgl a few years ago, mostly in shadertoy - but most of my experiments aren’t public.

This (fullscreen) is one of my favourites. But of course I’m still not entirely satisfied with it.

Bottle Quine

A quine is a computer program which takes no input and produces a copy of its own source code as its only output.

This one is not really a quine, but something similar, 1020 bytes of HTML/JS that animates it’s own code. Inspired by the great work of @aemkei.

Click here, to see it in action!

CSS Mesh

CSS Paint Worklet (Houdini) experiment to generate cellular noise based mesh.

Details on github.

Web Authentication API

WebAuthn uses public key cryptography (asymmetric) instead of passwords or SMS texts for registration, authentication and 2FA.

  • Protection against phishing: webauthn signatures changes with the origin, so it won’t work on “similar” webpages (with different domain name).
  • Reduced impact of data breaches: it does not really matter if the public key is stolen.
  • Invulnerable to password attacks: much harder to crack it by “brute force” than passwords.